:root {
            --primary-color: #095669;
            --secondary-color: #693e74;
            --tertiary-color: #005683;
            --light-color: #ffffff;
            --text-color: #333333;
            --gray-bg: #f8f9fa;
            --success-color: #28a745;
            --facebook-color: #1877f2;
            --instagram-color: #e4405f;
            --tiktok-color: #000000;
            --linkedin-color: #0077b5;
            --twitter-color: #1da1f2;
            --pinterest-color: #bd081c;
            --youtube-color: #ff0000;
        }

        body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Enhanced Hero Section */
        .hero-section {
            min-height: 60vh;
            background: linear-gradient(135deg, rgba(9,86,105,0.97), rgba(105,62,116,0.97));
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%23ffffff" opacity="0.05" d="M45,-78.1C58.3,-71.3,68.9,-58.4,76.6,-43.7C84.3,-29,89.1,-12.4,88.3,4C87.5,20.4,81.1,36.8,71.4,50.7C61.7,64.6,48.7,76,33.6,82.1C18.5,88.2,1.3,89,-15.8,85.7C-32.9,82.4,-49.9,75,-63.5,63C-77,51,-87,34.4,-90.2,16.3C-93.4,-1.8,-89.8,-21.4,-81.7,-37.7C-73.6,-54,-61,-67,-46,-74.7C-31,-82.4,-13.6,-84.8,2.4,-88.8C18.4,-92.8,36.8,-98.4,45,-78.1Z" transform="translate(100 100)"/></svg>') center/cover no-repeat;
            animation: rotate 60s linear infinite;
            transform: scale(0.7);
        }

        @keyframes rotate {
            from { transform: rotate(0deg) scale(0.7); }
            to { transform: rotate(180deg) scale(0.7); }
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 20px;
            color: white;
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .hero-title {
            
            margin-top: 40px !important;
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 300;
            
            line-height: 1.1;
            letter-spacing: -1px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s forwards;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .hero-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem;
            margin: 30px 0;
            color: rgba(255, 255, 255, 0.95);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s 0.2s forwards;
            font-weight: 600;
        }

        .hero-description {
            font-size: 1.3rem;
            max-width: 800px;
            margin: 30px auto;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s 0.4s forwards;
            line-height: 1.8;
        }