/* New Color Palette based on the image:
         * Primary (Dark Blue/Brand): #1E4D8C (Deep Blue - Purity/Elegant)
         * Secondary (Accent/CTA - Reddish Pink): #E9967A (Muted Coral/Salmon - Elegant)
         * Light Background/Neutral: #F7F7F7 (Very Light Gray)
         * Text: #333333 (Dark Grey)
         * Mid Blue (For variety): #4A7BA8
        */
        :root {
            --color-primary: #1E4D8C; /* Deep Blue */
            --color-secondary: #E9967A; /* Muted Coral/Salmon */
            --color-mid-blue: #4A7BA8;
            --color-light: #F7F7F7; /* Neutral Light Gray */
            --color-text: #333333;
            /* Modern, soft shadow for elements */
            --modern-shadow: 0 10px 30px rgba(30, 77, 140, 0.08), 0 4px 10px rgba(30, 77, 140, 0.05);
        }
        body {
            font-family: 'Poppins', sans-serif !important;
            color: var(--color-text);
            overflow-x: hidden;
            background-color: #ffffff;
        }
        .text-xolsun-primary { color: var(--color-primary); }
        .bg-xolsun-primary { background-color: var(--color-primary); }
        .text-xolsun-secondary { color: var(--color-secondary); }
        .bg-xolsun-secondary { background-color: var(--color-secondary); }
        .text-xolsun-mid-blue { color: var(--color-mid-blue); }
        .bg-xolsun-mid-blue { background-color: var(--color-mid-blue); }
        .bg-xolsun-light { background-color: var(--color-light); }

        /* --- MODERN TOUCHES --- */

        /* Hero specific style - using a gradient overlay for elegance */
        #hero-section {
            background-image: 
                linear-gradient(to bottom, rgba(30, 77, 140, 0.1), rgba(30, 77, 140, 0.1)), 
                url('../img/cover.jpeg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Key for Parallax */
        }
        
        /* Modern Text Shadow for Hero Contrast */
        #hero-section h1, #hero-section p {
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        /* Diagonal Separator on the next section */
        #home-solar {
            position: relative;
            /* Negative margin to overlap with the hero */
            margin-top: -60px; 
            padding-top: 120px; /* Increased padding to position content below the cut */
            /* Creates a slight upward diagonal cut */
            clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
            background-color: var(--color-light); 
            z-index: 20; /* Ensure it stacks over the Hero background */
        }

        /* Navigation Bar Scroll Effect styles */
        #main-nav {
             transition: all 0.3s ease-in-out;
             padding-top: 20px; /* Default large padding */
             padding-bottom: 20px;
        }
        .scrolled-nav {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            /* Added background color change for better effect */
            background-color: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }


        /* Modern button style */
        .btn-premium {
            box-shadow: 0 4px 15px rgba(233, 150, 122, 0.4);
            transition: all 0.3s ease-in-out;
            transform: translateY(0);
        }
        .btn-premium:hover {
            box-shadow: 0 8px 25px rgba(233, 150, 122, 0.6);
            transform: translateY(-2px);
        }
        .btn-premium:focus {
             outline: none;
             box-shadow: 0 0 0 4px rgba(233, 150, 122, 0.5);
        }
        
        /* Card Shadow Application */
        .card-modern {
            box-shadow: var(--modern-shadow);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .card-modern:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(30, 77, 140, 0.15);
        }

        /* Animation class definitions - UPDATED timing */
        .fade-in-up {
            opacity: 0;
            transform: translateY(1.5rem);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* NEW Animation class: Fade in from Right */
        .fade-in-right {
            opacity: 0;
            transform: translateX(3rem);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .fade-in-right.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        /* Projects page override */
        .projects-page .fade-in-up {
            opacity: 1 !important;
            transform: none !important;
        }

        
        /* Custom list style for technology section */
        .tech-list li {
            position: relative;
            padding-left: 2rem;
        }

        .tech-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5rem; /* Adjusted for better alignment */
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--color-secondary);
            border-radius: 50%;
            transform: scale(1.5); /* slightly bigger dot */
        }