@font-face {
            font-family: 'GoodlyBold';  
            src: url('fonts/GoodlyBold.woff') format('woff2'); /* Best format */      
            font-style: normal;
            font-display: swap; 
        }  
        
        @font-face {
            font-family: 'GoodlySemiBold';  
            src: url('fonts/GoodlySemibold.woff') format('woff2'); /* Best format */      
            font-style: normal;
            font-display: swap; 
        }
        @font-face {
            font-family: 'GoodlyRegular';  
            src: url('fonts/GoodlyRegular.woff') format('woff2'); /* Best format */      
            font-weight: normal;
            font-style: normal;
            font-display: swap; 
        }
        @font-face {
            font-family: 'GoodlyExtraLight';  
            src: url('fonts/GoodlyExtraLight.woff') format('woff2'); /* Best format */      
            font-style: normal;
            font-display: swap; 
        }
        @font-face {
            font-family: 'Dustrone';
            src: url('fonts/Dustrone.otf');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
        }
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

       
        
        
        body {
            font-family: 'Poppins', 'inter', sans-serif;
            overflow-x: hidden;
            background-color: #0E0E0E;
        }
        h1, h2 {           
            font-family: 'GoodlyRegular', serif; 
        }
        h3, h4 {
            
            font-family: 'GoodlyExtraLight', serif; 
        }


        #hero-video-container {

            height: 100vh; 
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10; 
        }

        #hero-video {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        #scrolling-content-wrapper {
            margin-top: 100vh; 
            position: relative;
            z-index: 20;
            background-color: #0E0E0E; 
            min-height: 200vh; 
            padding-top: 1px; 
        }

        /* Custom Transition for the menu slide-in/out */
        .menu-transition {
            transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
        }
                /* Custom styles for the featured work section */
        .featured-work {
            background-color: #0E0E0E;
            color: white;
        }
        
        .work-slide {
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        
        .logo-scroll-container {
            mask-image: linear-gradient(
                to right,
                transparent,
                black 10%,
                black 90%,
                transparent
            );
        }
        
        .logo-scroll {
            animation: scroll 30s linear infinite;
        }
        
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        
        .logo-scroll:hover {
            animation-play-state: paused;
        }
        
        /* Custom responsive adjustments */
        @media (max-width: 768px) {
            .work-slide {
                padding: 2rem 1rem;
            }
            
            .logo-scroll {
                animation: scroll 1s linear infinite;
            }
        }
                /* Custom spacing and typography refinements */
        .section-padding {
            padding-left: clamp(1rem, 5vw, 4rem);
            padding-right: clamp(1rem, 5vw, 4rem);
        }
        
        .hero-height {
            height: 100vh;
            max-height: 100vh;
        }
        
        .text-balance {
            text-wrap: balance;
        }
        
        .menu-item {
            transition: all 0.3s ease;
        }
        
        .menu-item:hover {
            transform: translateX(8px);
        }
        
        .service-item {
            transition: all 0.3s ease;
        }
        
        .service-item:hover {
            transform: translateX(12px);
        }
        
        /* Improved spacing for services section */
        .services-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        @media (min-width: 1024px) {
            .services-grid {
                grid-template-columns: 1fr 1fr;
                gap: 4rem;
            }
        }
        
        /* Refined pinned sections spacing */
        .pinned-section {
            padding: clamp(2rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
        }
        
        /* Better spacing for the hero text section */
        .hero-text-section {
            padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 4rem);
        }