/* --- Basic Reset & Body Styling --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }


        :root{
            --primary-color: rgba(255, 98, 0);
            --reveal-duration: 2s;
            --reveal-easing: cubic-bezier(.2,.9,.2,1);
            --reveal-distance: 100px;
        }

        /* base */
        .reveal {
          opacity: 0;
          transition: transform var(--reveal-duration) var(--reveal-easing),
                      opacity var(--reveal-duration) var(--reveal-easing);
          transition-delay: var(--reveal-delay, 0ms);
        }
    
        /* directions */
        .reveal--top    { transform: translateY(calc(-1 * var(--reveal-distance))); }
        .reveal--bottom { transform: translateY(var(--reveal-distance)); }
        .reveal--left   { transform: translateX(calc(-1 * var(--reveal-distance))); }
        .reveal--right  { transform: translateX(var(--reveal-distance)); }
    
        /* visible state */
        .reveal.reveal--visible {
          opacity: 1;
          transform: translate(0,0);
        }

        body {
            font-family: 'Syne', sans-serif;
            background-color: #000;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            transition: background-color 0.5s ease, color 0.5s ease;
            /* height: 200vh; */
        }
        
     
        
        ::selection {
          background: black;  /* custom highlight background */
          color: #fff;          /* custom text color */
        }

        ::-moz-selection {
          background: black;  
          color: #fff;
        }

        section{
            padding: 80px 40px;
            position: relative;
            /* top: 0; */
            width: 100%;
            min-height: 100vh;
            /* background: white; */
        }


        .main-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 99;
            background-color: transparent;
            transition: .3s ease;   
            /* backdrop-filter: blur(10px); */
        }

        .main-header.scrolled{
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            padding: .75rem 2rem;
        }

        .main-header.scrolled .logo{
            height: 40px;
        }

        .main-header .logo{
            /* width: 80px; */
            height: 60px;
            font-size: 3.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            
            font-weight: bold;
            color: #fff;
            transition: .3s ease;   
        }

        .main-header .logo img{
            width: 100%;
            height: 100%;
            mix-blend-mode: difference;
            transition: .3s ease;
        }

        .main-header .logo img:hover{
            transform: skew(-10deg);
        }

        .main-header .menu-btn{
            width: 40px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
        }

        .main-header .menu-btn span{
            display: block;
            height: 2px;
            background: white;       /* base color */
            mix-blend-mode: difference;
            transition: .3s ease;
            /* border-radius: 2px; */
        }

        .main-header .menu-btn.active span:first-child{
            transform: rotate(45deg);
            translate: 0px 2px;
        }

        /* .main-header .menu-btn.active span:nth-child(2){
            opacity: 0;
        } */

        .main-header .menu-btn.active span:last-child{
            transform: rotate(-45deg);
            translate: 0px -4px;
        }

        .header-section{
            min-height: 100vh;
            position: fixed;
            bottom: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .8s ease;
            /* flex-direction: column; */
            /* flex-wrap: wrap; */
            background: black;
            color: white;
            z-index: 90;
        }

        .header-section.active{
            bottom: 0;
        }

        .header-link{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: left;
            width: 100%;
            max-width: 600px;
        }

        .header-link .social-links{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: row;
            gap: 5px;
            /* font-size: 20px; */
            width: 100%;
            /* margin-left: 100px;       */
            margin-top: 50px;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.6s ease;
        }

        .header-link .social-links a{
            color: white;
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /* padding: 5px; */
            max-width: 40px;
            text-decoration: none;
            /* margin: 0 5px; */
            transition: color 0.3s ease;
        }

        .header-link .social-links a:hover{
            color: black;
            background: rgb(179, 179, 179);
            letter-spacing: 0;
        }

        .header-link a{
            color: white;
            display: flex;
            /* justify-content: center; */
            /* align-items: center; */
            /* max-width: 500px; */
            font-size: clamp(0.75rem, 5vw + 1rem, 5rem);
            text-align: left;
            width: 50%;
            text-decoration: none;
            font-family: 'Syne', sans-serif;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.6s ease;
            padding: 0.5rem 1rem;
            transition: background 0.3s ease, letter-spacing 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
        }

        .header-link.active a{
            opacity: 1;
            transform: translateY(0);
        }

        .header-link.active .social-links{
            opacity: 1;
            transform: translateY(0);
        }

        .header-link.active a:nth-child(1) { transition-delay: 0.1s; }
        .header-link.active a:nth-child(2) { transition-delay: 0.3s; }
        .header-link.active a:nth-child(3) { transition-delay: 0.5s; }
        .header-link.active a:nth-child(4) { transition-delay: 0.7s; }
        .header-link.active .social-links { transition-delay: 0.9s; }
        
        .header-link a:hover{
            /* background: rgba(255, 255, 255, 0.1); */
            letter-spacing: 6px;
            color: var(--primary-color);
        }

        .header-img{
            width: 50%;
            /* max-width:  300px; */
            aspect-ratio: 1/1;
            /* max-width: 600px; */
            /* min-width: 300px; */
            max-height: 650px;
            margin-top: 2rem;
            margin-right: 40px;
            border-radius: 10px;
            padding-top: 20px;
            /* position: absolute; */
            transform: translateY(150%);
            padding: 0;
            overflow: hidden;
            /* background: rgb(77, 77, 77); */
            transition: 0.8s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .header-img.active{
            transform: translateY(0);
        }

        .header-img img{
            width: 100%;
            /* height: 100%; */
            object-fit: cover;
        }

      

        @media(max-width: 768px){
            .header-section{
                flex-direction: column;
                padding: 40px;
                padding-top: 100px;
            }
            .header-img{
                width:100%;
                max-height: 300px;
                margin-right: 0px;
            }
            .header-link{
                align-items: center;
                /* font-size: rem; */
            }

            .header-link .social-links{
                margin-top: 10px;
            }
        }
        
        
        
          /* --- Hero Section & Layout --- */
        .hero {
            position: sticky;
            top: 0;
            z-index: 10;
            /* top: 0;
            left: 0; */
            min-height: 100vh;
            width: 100%;
            padding-bottom: 80px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            text-align: center;
            overflow: hidden;
        }
        

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('assets/img/Gemini_Generated_Image_4xgif14xgif14xgi.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            
            z-index: 0;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        /* --- Interactive Grid Styling (No Changes) --- */
        .hero-grid-container {
            display: grid;
            width: 100vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        .grid-square {
            border: 1px solid rgba(43, 43, 43, 0.105);
            transition: background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
        }

        .grid-square.glow {
            /* background-color: rgba(234, 88, 12, 0.3); */
            border-color: rgba(255, 98, 0, 0.979);
            /* box-shadow: 0 0 15px rgba(234, 88, 12, 0.6); */
            transition: background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in;
        }
        
        /* --- Content Styling --- */
        .hero-content {
            position: relative;
            z-index: 3;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 75rem; /* 896px */
            padding-left: 1.5rem; /* 24px */
            padding-right: 1.5rem; /* 24px */
        }

        .hero-subtitle{
            color: rgba(255, 98, 0, 0.979);
            font-weight: 500;
            letter-spacing: 5px;
            text-transform: uppercase;
            font-size: 16px;
        }

        .hero-content h1 {
            font: 900 68px/1.1 "Syne", system-ui, sans-serif;
            /* font-size: 2.25rem; */
            /* line-height: 2.5rem; */
            font-weight: 700;
            text-align: left;
            font-size: clamp(2rem, 5vw + 1rem, 4rem);
            letter-spacing: 5px;
            letter-spacing: -0.025em;
            margin: 1.75rem 0rem; /* 16px */
        }

        .outline-heading{
          font: 700 68px/1.1 "Syne", system-ui, sans-serif;
          font-size: clamp(2rem, 5vw + 1rem, 4rem);
          /* letter-spacing: .5px; */
          /* no fill */
          color: transparent;
                
          /* the outline */
          -webkit-text-stroke: 1px white;   /* Chrome / Edge / Safari */
          text-stroke: 2px white;           /* future/unprefixed */
                
          /* optional styling */
          /* text-transform: uppercase; */
        }

        .hero-content p {
            font-size: 1rem; /* 18px */
            line-height: 1.75rem; /* 28px */
            color: #d1d5db; /* text-gray-300 */
            /* max-width: 42rem; */
            /* margin-left: auto;
            margin-right: auto; */
            text-align: left;
            font-weight: 500;
            word-spacing: 1px;
            max-width: 36rem; /* 672px */
            margin-bottom: 2rem; /* 32px */
        }

        .hero-description{
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            
        }

        .cta-button {
            all: unset;
            display: inline-block;
            background-color: transparent;
            /* border: 2px solid #fff; */
            border-bottom: 1px solid #c4c4c495;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 1px;
            padding: 0.25rem; /* 12px 32px */
            /* border-radius: 0.5rem;  */
            text-decoration: none;
            text-transform: uppercase;
            transition: background-color 0.3s, border 0.3s, scale 0.3s;
        }

        .cta-button:hover {
            /* background-color: #fff; */
            /* color: #000; */
            border-bottom: 1px solid rgba(255, 98, 0, 0.979);
            scale: 1.05;
        }

        /* --- Responsive Adjustments --- */
        @media (min-width: 768px) {
            .hero-content h1 {
                /* font-size: 3.75rem; */
                line-height: 1;
            }
            .hero-content p {
                font-size: 1rem; /* 20px */
                line-height: 1.75rem; /* 28px */
            }
        }




        .about-section {
            background: white;
            color: black;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            padding: 3rem 6rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            flex-wrap: wrap;
            /* flex-direction: column; */
            z-index: 11;
        }


        .collage-grid {
            --grid-item-size: 6rem;
            --grid-gap: 5px;
            display: grid;
            grid-template-columns: repeat(3, var(--grid-item-size));
            grid-template-rows: repeat(4, var(--grid-item-size));
            gap: var(--grid-gap);
            /* Calculate the total size of the grid for the background */
            --grid-width: calc(3 * var(--grid-item-size) + 2 * var(--grid-gap));
            --grid-height: calc(4 * var(--grid-item-size) + 3 * var(--grid-gap));
            scale: 0.7;
        }

        .collage-item {
            background-image: url('assets/Rohit singh/IMG_3834.JPG');
            background-size: var(--grid-width) var(--grid-height);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
        }

        /* .collage-item:hover {
            transform: scale(1.05) translateZ(0); 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            z-index: 10;
        } */

        /* Positioning and shaping each grid piece */
        #c-item-1 {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            background-position: 0% 0%;
            border-radius: 999px 999px 0 999px;
        }
        #c-item-2 {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            background-position: 50% 0%;
            border-radius: 999px 999px 999px 0;
        }
        #c-item-3 {
            grid-column: 3 / 4;
            grid-row: 1 / 3;
            background-position: 100% 0%;
            border-radius: 999px 999px 999px 0;
        }
         #c-item-4 {
            grid-column: 1 / 2;
            grid-row: 2 / 4;
            background-position: 0% 50%;
            border-radius: 999px 999px 0 999px;
        }
        #c-item-5 {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
            background-position: 50% 33.33%;
            border-radius: 0px 35px 0 35px;
        }
        #c-item-6 {
            grid-column: 2 / 4;
            grid-row: 3 / 4;
            background-position: 100% 65%;
            border-radius: 0 999px 999px 999px;
        }
        #c-item-7 {
            grid-column: 1 / 2;
            grid-row: 4 / 5;
            background-position: 0% 100%;
            border-radius: 999px 0 999px 999px;
        }
        #c-item-8 {
            grid-column: 2 / 3;
            grid-row: 4 / 5;
            background-position: 50% 100%;
            border-radius: 35px 0 35px 0;
        }
       #c-item-9 {
            grid-column: 3 / 4;
            grid-row: 4 / 5;
            background-position: 100% 100%;
            border-radius: 0 999px 999px 999px;
        }


        .about-description {
            max-width: 900px;
            margin: 0 auto;
            /* display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column; */

        }
        

        .section-title{
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .section-title .section-number{
            font-size: 0.8rem;
        }




        @media (max-width: 768px){
            .about-section {
                gap: 0rem;
                padding: 3rem;
            }

            .collage-grid {
                scale: 1;
            }
        }

        /* Responsive adjustments for the collage */
        
        @media (max-width: 500px) {
            .collage-grid {
                --grid-item-size: 80px;
                --grid-gap: 10px;
            }
        }


        .services-section{
            background: white;
            color: black;
            /* border-radius: 20px; */
            padding: 3rem 6rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            flex-wrap: wrap;
            /* flex-direction: column; */
            z-index: 12;
        }


        .service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background-color: rgb(240, 240, 240); */
            z-index: 1;
        }

        .services-section .title-container{
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4rem 6rem;    
            top: 0;
            background: white;
            left: 0;
            z-index: 99;
        }

        .services-section .section-title{
            border-bottom: 1px solid rgba(14, 14, 14, 0.116);
            padding-bottom: 25px;
            /* position: relative; */
            /* color: var(--primary-color); */
            /* background: white; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .services-content-wrapper {
            display: flex;
            gap: 4rem;
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 6rem; /* Space below sticky title */
        }
        
        .services-text-column {
            flex: 1;
            max-width: 48%;
            width: 48%;
        }

        .service-item {
             margin-bottom: 30vh; /* Creates space for scrolling */
             min-height: 400px;
        }
        .service-item:last-child {
            margin-bottom: 10vh;
        }

        .service-item .subtitle {
            font-size: 0.975rem;
            font-weight: 600;
            color: #ea580c; /* Orange color */
            letter-spacing: 5px;
            margin-bottom: 1.5rem;
        }

        .service-item h2 {
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

        .service-item p {
            font-size: 1.125rem;
            line-height: 1.8;
            color: #4b5563;
            margin-bottom: 2.5rem;
        }

        .services-list {
            list-style: none;
            padding: 0;
        }

        .services-list li {
            display: flex;
            align-items: center;
            font-size: 1rem;
            color: #374151;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .services-list li::before {
            content: '▶';
            color: #ea580c;
            margin-right: 1rem;
            font-size: 0.75rem;
        }

        .services-image-column {
            flex: 1;
            max-width: 48%;
            width: 48%;
            position: sticky; /* This is the key for the effect */
            top: 25vh; /* Adjust vertical position in viewport */
            height: 50vh; /* Define a height for the sticky container */
            overflow: hidden; /* Crucial for the reveal effect */
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.516);
        }
        
        .services-image-column img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.516);
            transform: translateY(0); /* Start in position */
            transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); /* Animate the transform property */
        }

        .section-description{
            margin-top: 1.4rem;
            margin-bottom: 3rem;
            max-width: 1200px;
            line-height: 1;
            font-size: clamp(1rem, 5vw, 2.4rem);
        }


        /* Responsive adjustments */
        @media (max-width: 980px) {
            .services-section {
                padding: 3rem;
            }
            .services-section .title-container {
                position: static; /* Remove sticky title on mobile */
                padding: 0 0 3rem 0;
            }
             .services-content-wrapper {
                flex-direction: column;
                padding-top: 0;
            }
            .services-text-column, .services-image-column {
                max-width: 100%;
                width: 100%;
                position: static; /* Remove sticky behavior */
                height: auto;
                margin-bottom: 3rem;
                overflow: visible;
            }
            .service-item {
                margin-bottom: 4rem;
                min-height: auto;
            }
             .services-image-column {
                 display: none; /* Hide the sticky column on mobile */
             }

             /* On mobile, we create a simple image-then-text flow */
             .service-item::after {
                content: '';
                display: block;
                width: 100%;
                padding-bottom: 66.67%; /* 3:2 Aspect Ratio */
                background-size: cover;
                background-position: center;
                border-radius: 0.5rem;
                margin-top: 2rem;
             }
             .service-item[data-image="management"]::after {
                 background-image: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=1973&auto=format&fit=crop');
             }
             .service-item[data-image="branding"]::after {
                 background-image: url('https://media.istockphoto.com/id/1409298953/photo/real-estate-agents-shake-hands-after-the-signing-of-the-contract-agreement-is-complete.jpg?s=612x612&w=0&k=20&c=SFybbpGMB0wIoI0tJotFqptzAYK_mICVITNdQIXqnyc=');
             }
             .service-item[data-image="advertising"]::after {
                 background-image: url('https://teja12.kuikr.com/is/a/c/655x525/gallery_images/original/cf5ca32dc7c18eb.gif');
             }
             .service-item[data-image="visibility"]::after {
                 background-image: url('https://images.jdmagicbox.com/comp/bhubaneshwar/dc/0674px674.x674.100320170130.x6x7dc/catalogue/orimark-properties-sahid-nagar-bhubaneshwar-estate-agents-for-residential-rental-3tovu63.jpg');
             }
        }



        /* --- New Portfolio Section Styling --- */
        .portfolio-section {
            transition: background-color 0.5s ease, color 0.5s ease;
            background-color: var(--bg-color);
            color: var(--text-color);
            padding: 6rem 0;
            position: relative;
            z-index: 13;
        }



        .portfolio-section .title-container{
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4rem 6rem;    
            top: 0;
            background: var(--bg-color);
            left: 0;
            z-index: 99;
        }

        .portfolio-section .section-title{
            border-bottom: 1px solid rgba(14, 14, 14, 0.116);
            padding-bottom: 25px;
            /* position: relative; */
            /* color: var(--primary-color); */
            /* background: white; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .portfolio-header {
            display: flex;
            justify-content: center;
            align-items: center;
            /* position: absolute;
            top: 100px; */
            gap: 4rem;
            width: 100%;
            /* max-width: 1200px; */
            margin: 0 auto 4rem auto;
            padding: 0 2rem;
        }

        .portfolio-header h2 {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
            max-width: 500px;
            line-height: 1.4;
        }
        
        .portfolio-header p {
            font-size: clamp(1rem, 4vw, 1.125rem);
            color: #636363;
            max-width: 500px;
            line-height: 1.6;
        }
        
        .portfolio-wrapper {
            /* Height determines scroll duration. 400vh means it takes 4x viewport height to scroll past */
            height: 410vh; 
        }

        .sticky-container {
            position: sticky;
            top: 0;
            /* height: 100vh; */
            /* display: flex;
            justify-content: center;
            align-items: center; */
            
            width: 100%;
            padding-top: 100px; 
            overflow: hidden;
        }
        
        .portfolio-track {
            /* height: 100%; */
            display: flex;
            align-items: center;
            padding-left: 400px;
            padding-right: 400px;
            /* Width is set by JS */
        }

        .portfolio-item {
            flex-shrink: 0;
            /* width: 30vw; */
            height: 50vh;
            aspect-ratio: 12/8;
            margin: 0 1vw;
            position: relative;
        }

        .portfolio-item video,
        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.25rem;
        }

        .item-caption-container {
            position: absolute;
            bottom: 1.5rem;
            left: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .item-caption {
            /* position: absolute;
            bottom: 1.5rem;
            left: 1.5rem; */
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }
        
        


        @media(max-width: 768px){
            .portfolio-header{
                flex-direction: column;
                gap: 0;
            }

            .portfolio-wrapper {
            /* Height determines scroll duration. 400vh means it takes 4x viewport height to scroll past */
            height: 360vh; 
        }

            .portfolio-item {
                height:30vh;
            }

            .item-caption {
                font-size: 0.8rem;
            }
            /* 
            .portfolio-track{
                transform: translateY(200px);
            } */
    }




        :root {
            --bg-color: #ffffff;
            --text-color: #000000;
        }

        body.dark-theme {
            --bg-color: #000000;
            --text-color: #EAEAEA;  
            transition: background-color 0.5s ease, color 0.5s ease;  
        }


        .expertise-section {
            /* max-width: 1200px; */
            z-index: 14;
            transition: background-color 0.5s ease, color 0.5s ease;
            background: var(--bg-color);
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 0;
            align-items: center;
            flex-direction: column;
        }

        .expertise-section .title-container{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3.5rem 6rem; 
            margin-bottom: 50px;   
            z-index: 99;
        }

        .expertise-section .section-title{
            border-bottom: 1px solid rgba(46, 46, 46, 0.692);
            padding-bottom: 25px;
            /* position: relative; */
            /* color: var(--primary-color); */
            /* background: white; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-color);
        }

        /* --- Top Part: Image, Social & Intro Text --- */
        .intro-container {
            display: flex;
            /* gap: 2rem; */
            align-items: flex-start;
            flex-wrap: wrap;
            width: 100%;
            margin: 0 auto;
            margin-bottom: 6rem;
        }

        .intro-left {
            display: flex;
            gap: 1.5rem;
            flex: 1;
            justify-content: flex-end;
            align-items: flex-end;
            min-width: 300px;
        }

        .social-links {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 1.5rem;
            padding-top: 0.5rem;
        }

        .social-links a {
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: #FFFFFF;
        }

        .social-links svg {
            width: 15px;
            height: 15px;
        }

        .intro-image-wrapper {
            /* flex-grow: 1; */
            display: flex;
            justify-content: center;
            align-items: center;
            
        }

        .intro-image-wrapper img {
            /* width: 100%; */
            /* max-width: 600px; */
            /* height: auto; */
            max-height: 300px;
            display: block;
            border-radius: 0.5rem;
        }

        .intro-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-direction: column;
            flex: 1;
            height: 100%;
            min-width: 300px;
            padding-top: 1.5rem;
        }

        .intro-right h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-color);
        }

        .intro-right p {
            font-size: 1rem;
            line-height: 1.8;
            text-align: justify;
            text-align-last: justify;
            max-width: 350px;
            width: 100%;
            color: var(--text-color);
        }

        /* --- Bottom Part: FAQ Accordion --- */
        .faq-accordion {
            max-width: 900px;
            /* padding: 0 4rem; */
            margin: 0 auto;
            width: 100%;
        }

        .faq-item {
            border-bottom: 1px solid var(--primary-color);
        }
        
        .faq-item summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0.5rem;
            font-size: 1.125rem;
            font-weight: 500;
            cursor: pointer;
            list-style: none; /* Removes default arrow */
            color: var(--text-color);
        }
        
        .faq-item summary::-webkit-details-marker {
            display: none; /* Hides default arrow in Chrome/Safari */
        }

        .faq-item summary::after {
            content: '+';
            font-size: 1.5rem;
            font-weight: 300;
            transition: transform 0.3s ease;
        }
        
        .faq-item[open] summary::after {
            content: '−';
            transform: rotate(180deg);
        }

        .faq-answer {
            padding: 0 0.5rem 2rem 0.5rem;
            color: var(--text-color);
            line-height: 1.8;
        }

        @media(max-width: 768px){
            .intro-left{
                flex-direction: column;
            }
            .faq-accordion {
                /* padding: 0 0.5rem; */
            }

            .intro-left .social-links{
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
        }

        @media(max-width: 998px){
            .intro-container{
                flex-direction: column;
                gap: 2rem;
                justify-content: center;
                align-items: center;
            }
            .faq-accordion {
                padding: 0 2rem;
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 800px) {
            .intro-container {
                flex-direction: column;
            }
            .intro-left, .intro-right {
                width: 100%;
                flex: none;
            }
            .intro-image-wrapper img{
                width: 90%;
            }
            .intro-left{
                display: flex;
                justify-content: center;
                align-items: center;
                
            }
        }

        .glitch-container{
            position: relative;
            margin-top: 150px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 50vh;
            z-index: 11;
        }

        .main-btn{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 12;
            background: black;
            color: white;
            font-size: clamp(5rem, 3vw, 3rem);
            text-decoration: none;
            transition: .3s ease;
        }

        .main-btn:hover{
            border-bottom: 2px solid var(--primary-color);
            transition: .3s ease;
        }

        /* The main link element that holds everything */
        .image-hover-link {
            display: inline-flex; /* Aligns text and image horizontally */
            align-items: center;
            gap: 0; /* No initial gap, it will be created by the image wrapper */
            font-size: clamp(1.5rem, 5vw, 3.5rem); /* Adjust size as needed */
            font-weight: 700;
            color: #EAEAEA;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            z-index: 14;
            transition: gap 0.4s ease; /* Smoothly adjust gap on hover */
        }

        /* The wrapper for the image that appears/disappears */
        .hover-image-wrapper {
            width: 0; /* Hidden by default */
            opacity: 0; /* Hidden by default */
            overflow: hidden; /* Hides the image when width is 0 */
            border-radius: 8px;
            transform: scale(0.8);
            /* Smooth transition for the appearing effect */
            transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                        opacity 0.3s ease-in-out,
                        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .hover-image-wrapper img{
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        /* The text spans */
        .link-text {
             transition: transform 0.3s ease;
        }

        /* --- HOVER STATE --- */
        .image-hover-link:hover {
            gap: 2.5rem; /* Creates space for the image */
            border-bottom: 2px solid var(--primary-color);
        }

        .image-hover-link:hover .hover-image-wrapper {
            width: 150px; /* Set this to your image's desired width */
            padding: 10px;
            background: black;
            opacity: 1;
            transform: scale(1.5);
        }

        /* The actual image */
        .hover-image {
            width: 150px; /* Must match the hover width above */
            height: 100px; /* Adjust height as needed */
            object-fit: cover;
            display: block; /* Removes extra space below the image */
        }
        
        @media (max-width: 768px) {
            .image-hover-link {
                /* font-size: 1.5rem; */
                flex-direction: column;
                gap: 1rem;
            }
             .image-hover-link:hover .hover-image-wrapper {
                width: 200px;
                height: 120px;
            }
            .hover-image {
                width: 200px;
                height: 120px;
            }
        }


/* 
        .final-section {
             height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             text-align: center;
             background-color: var(--bg-color);
             color: var(--text-color);
             z-index: 14;
        }
        .final-section h2 {
            font-size: 3rem;
        } */





        .stylish-contact-section {
            background-color: #000000;
            color: #f0f0f0;
            padding: 8rem 3rem;
            position: relative;
            overflow: hidden;
            z-index: 14;
        }

        .contact-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .contact-info {
            flex: 1;
        }

        .contact-info .section-title {
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             padding-bottom: 25px;
             margin-bottom: 3rem;
             display: flex;
             justify-content: space-between;
        }

        .contact-info h2 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 2rem;
        }

        .contact-info p {
            font-size: 1.1rem;
            color: #a0a0a0;
            line-height: 1.8;
            margin-bottom: 2rem;
        }
        
        .contact-details a {
            color: #f0f0f0;
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .contact-details a:hover {
            color: #ea580c;
        }


        .contact-form-container {
            flex: 1;
            width: 100%;
            max-width: 700px;
        }

        .form-group {
            position: relative;
            margin-bottom: 2.5rem;
        }

        .form-input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #444;
            padding: 0.75rem 0;
            color: #f0f0f0;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            position: relative;
            z-index: 1;
        }
        
        .form-label {
            position: absolute;
            top: 0.75rem;
            left: 0;
            color: #888;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .form-input:focus + .form-label,
        .form-input:not(:placeholder-shown) + .form-label {
            transform: translateY(-1.5rem);
            font-size: 0.875rem;
            color: #ea580c;
        }
        
        .form-input:focus {
             border-bottom-color: #ea580c;
        }

        /* Hide the placeholder text visually, but keep it for the :not(:placeholder-shown) selector */
        .form-input::placeholder {
            color: transparent;
        }
        
        textarea.form-input {
            resize: none;
            min-height: 100px;
        }

        .submit-btn {
            display: inline-block;
            padding: 1rem 3rem;
            background-color: transparent;
            border: 2px solid #ea580c;
            color: #ea580c;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            margin-top: 1rem;
        }
        .submit-btn:hover {
            background-color: #ea580c;
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .contact-wrapper {
                flex-direction: column;
                gap: 3rem;
                text-align: center;
            }
            .contact-info h2 {
                font-size: clamp(2rem, 8vw, 2.5rem);
            }
        }






.floating-contact {
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: flex;
    /* border:2px solid var(--primary-color); */
    flex-direction: column;
    border-radius: 30px;
    gap: 5px;
    backdrop-filter: blur(10px);
    padding: 2px;
    z-index: 999;
  }
  
  .contact-btn {
    width: 45px;
    height: 45px;
    background-color: rgb(45, 255, 101);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    border: 2px solid white;
    align-items: center;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background 0.3s ease, scale 0.3s ease;
    text-decoration: none;
  }

  .contact-btn:hover{
    scale: 1.2;
  }

 


 







        /* --- Footer Container --- */
        .site-footer {
            width: 100%;
            /* max-width: 1400px; */
            margin: 0 auto;
            position: relative;
            padding: 5rem 8rem;
            z-index: 14;
            background: black;
        }
        
        .footer-divider-top {
            border: none;
            height: 1px;
            background-color: #333;
            margin-bottom: 4rem;
        }

        /* --- Main Footer Content (Logo + Columns) --- */
        .footer-main {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            padding-bottom: 4rem;
        }

        .footer-logo {
            font-size: 2.5rem;
            font-weight: 700;
            /* flex-basis: 300px; */
            flex-grow: 1;
        }

        .footer-logo img{
            width: 60%;
        }

        .footer-column {
            flex-grow: 1;
            min-width: 180px; /* Prevent columns from getting too narrow */
        }
        
        .footer-column h4 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #FFFFFF;
        }

        .footer-column a,
        .footer-column p {
            display: block;
            color: #A0A0A0;
            text-decoration: none;
            margin-bottom: 1rem;
            font-size: 1rem;
            transition: color 0.3s ease;
        }

        .footer-column a:hover {
            color: #FFFFFF;
        }
        
        /* --- Bottom Footer (Copyright) --- */
        .footer-bottom {
            padding: 2rem 0;
        }
        
        .footer-bottom p {
            font-size: 0.875rem;
            color: #777;
            margin: 0;
        }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            .site-footer {
                padding: 0 3rem;
            }
            
            .footer-main {
                flex-direction: column;
            }
            
            .footer-logo {
                /* margin-bottom: 2rem; */
                width: 100px;
            }
            .footer-logo img{
            width: 50%;
            height: 100%;
        }
        }