/* Container styling to avoid affecting global body */
        .den-agency-wrapper {
            margin: 0;
            padding: 100px 0;
             padding: 0 8%;
             width: 100%;
            height: 90vh;
            /* background: #ffffff; */

               background: radial-gradient(circle at center, #f15b2a 0%, #ff4500 45%, #d12705 100%) !important;
    
             font-family: 'Bebas Neue', sans-serif !important;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .den-agency-container {
            width: 100%;
            max-width: 1300px;
            position: relative;
        }

        /* --- Text Animation --- */
        .den-agency-heading {
            font-size: 110px; /* Standard size for desktop */
            font-weight: 500;
            line-height: 1.1;
            color: #1a1a1a;
            margin-bottom: 90px;
            letter-spacing: -0.02em;
                width: 80%;

        }

        /* Responsive font size without clamp if you prefer traditional */
        @media (max-width: 768px) {

              .den-agency-wrapper {
            margin: 0;
            padding: 100px 0;
             padding: 0 4%;
            
        }


            .den-agency-heading { font-size: 50px;  width: 95%;}

             .den-agency-blue-circle {
            
            width: 130px !important;
            height: 130px !important;
           
        }
        }

        .den-word { display: inline-block; margin-right: 0.25em; overflow: hidden; vertical-align: bottom; }
        
        .den-char {
            display: inline-block;
            opacity: 0;
            filter: blur(12px);
            transform: translateY(100%);
            animation: denSmokeReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes denSmokeReveal {
            to { opacity: 1; filter: blur(0); transform: translateY(0); }
        }

        /* --- Divider & Circle --- */
        .den-agency-divider {
            width: 100%;
            height: 1px;
            background: #ededed;
            position: relative;
        }

        .den-agency-blue-circle {
            position: absolute;
            right: 15%;
            top: 50%;
            transform: translateY(-50%);
            width: 155px;
            height: 155px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* box-shadow: 0 20px 40px rgba(68, 89, 242, 0.3); */
        }

        /* --- Globe Logic --- */
        .den-agency-globe-wrapper {
            width: 75px;
            height: 75px;
            position: relative;
            perspective: 800px; 
        }

        .den-agency-globe-inner {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            animation: denRotateGlobe3D 20s linear infinite;
        }

        .den-line-v, .den-line-h {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 0.8px solid rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            box-sizing: border-box;
            background: transparent;
        }

        /* Longitude Positions */
        .den-v1 { transform: rotateY(0deg); }
        .den-v2 { transform: rotateY(45deg); }
        .den-v3 { transform: rotateY(90deg); }
        .den-v4 { transform: rotateY(135deg); }

        /* Latitude Positions */
        .den-h1 { transform: rotateX(90deg) translateZ(18px) scale(0.9); }
        .den-h2 { transform: rotateX(90deg) translateZ(-18px) scale(0.9); }
        .den-h3 { transform: rotateX(90deg) translateZ(30px) scale(0.6); }
        .den-h4 { transform: rotateX(90deg) translateZ(-30px) scale(0.6); }
        .den-agency-globe-inner .den-line-h:not([class*="den-h"]) { transform: rotateX(90deg); }

        /* Poles */
        .den-agency-globe-inner::before, .den-agency-globe-inner::after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            left: 50%;
            top: 50%;
        }
        .den-agency-globe-inner::before { transform: translate(-50%, -50%) translateZ(37px); }
        .den-agency-globe-inner::after { transform: translate(-50%, -50%) translateZ(-37px); }

        @keyframes denRotateGlobe3D {
            0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
        }
 







        /* -------------- work page css start ----------------------- */




        

        
        /* body { background-color: #000; margin: 0; color: #fff; overflow-x: hidden; font-family: sans-serif; } */

        /* FIXED CURSOR */
        #portfolio-cursor {
            position: fixed;
            top: 0; left: 0;
            width: 80px; height: 80px;
            background-color: #f15b2a;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        #portfolio-cursor svg { width: 25px; height: 25px; stroke: #000; }
        .project-card-link { cursor: none !important; text-decoration: none; color: inherit; display: block; }

        /* SECTION LAYOUT */
        .portfolio-work-section {
            position: relative;
            z-index: 2;
            padding: 100px 5%;
            max-width: 1600px;
            margin: 0 auto;
        }

        .portfolio-header-row {
            display: flex;
            justify-content: center;
            margin-bottom: 80px;
            border-bottom: 1px solid #222;
            padding-bottom: 30px;
        }

        /* BUBBLE FILL BUTTON ANIMATION */
        .portfolio-filters {
            display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;
            position: relative;
            z-index: 5;
            pointer-events: auto;
        }
        
        .filter-btn {
            position: relative;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            padding: 12px 32px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            letter-spacing: 1px;
            cursor: pointer;
            text-transform: uppercase;
            transition: color 0.4s ease, border-color 0.4s ease;
            outline: none;
            overflow: hidden;
            z-index: 1;
            border-radius: 4px;
        }

      /* THE "BUBBLE" LAYER UPDATED */
        .filter-btn::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            width: 120%; /* Size adjusted for better roundness */
            padding-top: 120%; 
            background-color: #f15b2a;
            border-radius: 50%; /* Perfect ball shape */
            z-index: -1;
            /* Start position: center bottom and scaled down */
            transform: translate(-50%, 0) scale(0); 
            /* Transition slowed down for smoothness */
            transition: transform 2.4s cubic-bezier(0.23, 1, 0.32, 1); 
        }

        .filter-btn:hover::after {
            /* Smoothly fills the button while maintaining center */
            transform: translate(-50%, -75%) scale(1.1); 
        }

        /* .filter-btn:hover::after {
            transform: translate(-50%, -70%) scale(1); 
        } */

        .filter-btn:hover { color: #000; border-color: #dc2626; }

        .filter-btn.active {
            background-color: #dc2626;
            color: #000;
            border-color: #dc2626;
        }

        .filter-btn.active::after { display: none; }

        /* RESPONSIVE GRID */
        .portfolio-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 100px 50px;
        }

        .project-card-item { width: 100%; position: relative; }

        .project-reveal-box {
            position: relative; width: 100%;
            height: clamp(300px, 40vw, 550px);
            overflow: hidden; border-radius: 15px;
            background: #0a0a0a;
            visibility: hidden;
        }

        .project-reveal-img {
            width: 100%; height: 100%;
            object-fit: cover;
            will-change: transform;
        }

        .project-card-info { margin-top: 25px; overflow: hidden; }
        
        .project-card-name { 
            font-size: clamp(1.8rem, 4vw, 3rem); 
            margin: 0; font-weight: 400; 
            text-transform: uppercase; 
            line-height: 1.1;
        }
        
        .project-card-category { 
            font-size: 11px; color: #666; 
            letter-spacing: 3px; margin-top: 12px; 
            text-transform: uppercase;
        }

        .project-char-box { display: inline-block; overflow: hidden; vertical-align: bottom; }
        .project-char { display: inline-block; transform: translateY(105%); white-space: pre; will-change: transform; }

        .upcoming-overlay {
            width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: center;
            background: #050505; color: #1a1a1a;
            font-family: 'Bebas Neue', sans-serif; font-size: 50px;
        }

        /* Tailwind's `.hidden` can conflict; use a dedicated class for JS filtering */
        .project-card-link.js-filter-hide { display: none !important; }

        @media (max-width: 1024px) {
            .portfolio-cards-grid { gap: 60px 30px; }
        }

        @media (max-width: 768px) {
            .portfolio-cards-grid { grid-template-columns: 1fr; }
            #portfolio-cursor { display: none; }
            .filter-btn { padding: 10px 22px; font-size: 18px; }
        }
  






        /* -------------- work page css end ----------------------- */