/*==================================================
 TAKE MILLION
 HERO + SERVICES CARDS
==================================================*/

/*==================================================
HOME HERO
==================================================*/
/*==================================================
HOME HERO
==================================================*/
.hero{

    position:relative;

    min-height:auto;

    padding:140px 0 40px;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    overflow:hidden;


}

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(250, 249, 249, 0),
            rgba(255, 254, 254, 0),
            rgba(253, 253, 253, 0.007)
        );

    z-index:2;

}

.hero .container{

    position:relative;

    z-index:3;

}

.hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

    width:100%;

}

.hero-content h1{

    color:#fff;

    margin-bottom:20px;

    font-size:clamp(2.5rem,5vw,5rem);

}

.hero-content h2{

    color:var(--gold-light);

    font-size:clamp(1.4rem,3vw,2.5rem);

    margin-bottom:20px;

    font-weight:800;

}

.hero-content p{

    max-width:850px;

    margin:0 auto 25px;

    color:#ddd;

    font-size:1.15rem;

}

.hero-buttons{

    margin-top:20px;

    margin-bottom:0;

}

/*==================================================
SERVICES
==================================================*/

.hero-services{

    background:#050505;

    padding:0px 0 100px; /* البطاقات أصبحت قريبة من الهيرو */

}
/*==============================
 HERO CONTENT
==============================*/

.hero-content{

    text-align:center;

    width:100%;

}



.hero-content h1{

    color:#fff;

    margin-bottom:20px;

    font-size:clamp(2.5rem,5vw,5rem);

}


.hero-content h2{

    color:var(--gold-light);

    font-size:clamp(1.4rem,3vw,2.5rem);

    margin-bottom:25px;

    font-weight:800;

}



.hero-content p{

    max-width:850px;

    margin:0 auto 40px;

    color:#ddd;

    font-size:1.15rem;

}



/*==============================
 BUTTON
==============================*/


.btn-primary{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 35px;

    background:

    linear-gradient(
        135deg,
        #D4AF37,
        #F7D774
    );


    color:#ffffff;

    border-radius:50px;

    font-weight:800;

    margin-bottom:60px;

    transition:.4s;

    box-shadow:
    0 10px 35px rgba(212,175,55,.25);

}


.btn-primary:hover{


    transform:translateY(-5px);

    box-shadow:

    0 20px 50px rgba(212,175,55,.45);

}



/*==================================================
 SERVICES ROW
==================================================*/


.services-row-container{


    width:100%;

    overflow:hidden;

}



.services-row{


    display:grid;


    grid-template-columns:
    repeat(5,1fr);


    gap:20px;


    width:100%;


    align-items:stretch;


}



/*==================================================
 SERVICE CARD
==================================================*/


.service-card{


    background:

    rgba(255,255,255,.04);


    border:

    1px solid rgba(212,175,55,.25);


    border-radius:24px;


    overflow:hidden;


    position:relative;


    backdrop-filter:blur(15px);


    transition:.45s ease;


    min-width:0;


}




.service-card:hover{


    transform:

    translateY(-12px);


    border-color:

    var(--gold);


    box-shadow:

    0 20px 60px rgba(212,175,55,.25);


}




/* الخط الذهبي العلوي */


.service-card::before{


    content:"";


    position:absolute;


    top:0;


    right:0;


    width:100%;


    height:3px;


    background:

    linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );


}




/*==================================================
 IMAGE
==================================================*/


.service-image{


    height:170px;


    position:relative;


    overflow:hidden;


}



.service-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.6s;


}



.service-card:hover img{


    transform:scale(1.12);


}



/* طبقة الصورة */


.service-overlay{


    position:absolute;


    inset:0;


    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.8),

        transparent

    );


}




/*==================================================
 ICON
==================================================*/


.service-icon{


    position:absolute;


    bottom:15px;


    right:15px;


    width:55px;


    height:55px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:var(--gold);


    color:#000;


    font-size:22px;


    box-shadow:

    0 0 30px rgba(212,175,55,.5);


}



/*==================================================
 BODY
==================================================*/


.service-body{


    padding:20px;


    text-align:center;


}



.service-body h3{


    color:var(--gold-light);


    font-size:1.25rem;


    margin-bottom:12px;


}



.service-body p{


    color:#ccc;


    font-size:.95rem;


    line-height:1.8;


}



/*==================================================
 ANIMATION
==================================================*/


.zoom{


    transition:.45s ease;


}


.zoom:hover{


    transform:

    translateY(-10px)

    scale(1.03);


}



/*==================================================
 RESPONSIVE
==================================================*/


/* شاشات كبيرة */

@media(max-width:1400px){


.services-row{


    gap:15px;


}


.service-body{


    padding:15px;


}


.service-body p{


    font-size:.9rem;


}


}



/* التابلت */

@media(max-width:1100px){


.services-row{


    grid-template-columns:

    repeat(3,1fr);


}



.hero{


    padding-top:100px;


}


}



/* الجوال */

@media(max-width:768px){


.services-row{


    grid-template-columns:

    repeat(1,1fr);


    gap:25px;


}



.service-image{


    height:220px;


}


}



/* جوال صغير */

@media(max-width:480px){


.hero-content p{


    font-size:1rem;


}


.service-body h3{


    font-size:1.15rem;


}


}/*==================================================
 TAKE MILLION
 SERVICE UNIQUE IDENTITIES
==================================================*/


/*==============================
 MEDIA - برتقالي سينمائي
==============================*/

.media-card{

    border-color:
    rgba(255,106,0,.45);

}


.media-card::before{

    background:

    linear-gradient(
        90deg,
        #ff6a00,
        #ffb347
    );

}



.media-card .service-icon{

    background:

    linear-gradient(
        135deg,
        #ff6a00,
        #ffb347
    );

    color:#fff;

    box-shadow:

    0 0 35px rgba(255,106,0,.7);

}



.media-card:hover{

    box-shadow:

    0 20px 60px rgba(255,106,0,.35);

}



/*==============================
 TECHNOLOGY - أزرق ذكي
==============================*/


.technology-card{

    border-color:

    rgba(0,119,255,.45);

}



.technology-card::before{


    background:

    linear-gradient(
        90deg,
        #0066ff,
        #42a5ff
    );


}



.technology-card .service-icon{


    background:

    linear-gradient(
        135deg,
        #0066ff,
        #42a5ff
    );


    color:#fff;


    box-shadow:

    0 0 35px rgba(0,119,255,.65);


}



.technology-card:hover{


    box-shadow:

    0 20px 60px rgba(0,119,255,.35);


}





/*==============================
 EVENTS - بنفسجي فاخر
==============================*/


.events-card{


    border-color:

    rgba(138,43,226,.45);


}



.events-card::before{


    background:

    linear-gradient(
        90deg,
        #8a2be2,
        #c084ff
    );


}



.events-card .service-icon{


    background:

    linear-gradient(
        135deg,
        #8a2be2,
        #c084ff
    );


    color:#fff;


    box-shadow:

    0 0 35px rgba(138,43,226,.6);


}




.events-card:hover{


    box-shadow:

    0 20px 60px rgba(138,43,226,.35);


}






/*==============================
 REAL ESTATE - أخضر عقاري
==============================*/


.realestate-card{


    border-color:

    rgba(14,138,75,.45);


}



.realestate-card::before{


    background:

    linear-gradient(
        90deg,
        #0e8a4b,
        #27d17f
    );


}




.realestate-card .service-icon{


    background:

    linear-gradient(
        135deg,
        #0e8a4b,
        #27d17f
    );


    color:#fff;


    box-shadow:

    0 0 35px rgba(14,138,75,.65);


}




.realestate-card:hover{


    box-shadow:

    0 20px 60px rgba(14,138,75,.35);


}






/*==============================
 CONSTRUCTION - أصفر هندسي
==============================*/


.construction-card{


    border-color:

    rgba(201,151,0,.5);


}




.construction-card::before{


    background:

    linear-gradient(
        90deg,
        #c99700,
        #ffd54a
    );


}




.construction-card .service-icon{


    background:

    linear-gradient(
        135deg,
        #c99700,
        #ffd54a
    );


    color:#000;


    box-shadow:

    0 0 35px rgba(201,151,0,.7);


}




.construction-card:hover{


    box-shadow:

    0 20px 60px rgba(201,151,0,.4);


}
/*==================================================
 SERVICE CARD COLOR TRANSITION HOVER
==================================================*/


/*==============================
 MEDIA
==============================*/

.media-card:hover{

    background:

    linear-gradient(
        145deg,
        #ff6a00,
        #ff9d3d
    );

    border-color:#ffb347;

}



.media-card:hover h3,
.media-card:hover p{

    color:#fff;

}




/*==============================
 TECHNOLOGY
==============================*/


.technology-card:hover{


    background:

    linear-gradient(
        145deg,
        #0066ff,
        #42a5ff
    );


    border-color:#42a5ff;

}



.technology-card:hover h3,
.technology-card:hover p{


    color:#fff;


}




/*==============================
 EVENTS
==============================*/


.events-card:hover{


    background:

    linear-gradient(
        145deg,
        #6a11cb,
        #b56cff
    );


    border-color:#c084ff;


}



.events-card:hover h3,
.events-card:hover p{


    color:#fff;


}




/*==============================
 REAL ESTATE
==============================*/


.realestate-card:hover{


    background:

    linear-gradient(
        145deg,
        #075e35,
        #0e8a4b
    );


    border-color:#27d17f;


}



.realestate-card:hover h3,
.realestate-card:hover p{


    color:#fff;


}





/*==============================
 CONSTRUCTION
==============================*/


.construction-card:hover{


    background:

    linear-gradient(
        145deg,
        #b88600,
        #ffd54a
    );


    border-color:#ffe082;


}



.construction-card:hover h3,
.construction-card:hover p{


    color:#000;


}



/*==============================
 ICON EFFECT
==============================*/


.service-card:hover .service-icon{


    transform:

    scale(1.15)

    rotate(8deg);


    box-shadow:

    0 0 45px rgba(255,255,255,.6);


}



/* انتقال ناعم */

.service-card{


    transition:

    background .5s ease,
    border .4s ease,
    transform .4s ease,
    box-shadow .4s ease;


}



.service-card h3,
.service-card p,
.service-icon{


    transition:.4s ease;


}/*==================================================
   TAKE MILLION
   HERO GLASS CONTENT
   WHITE + GOLD IDENTITY
==================================================*/


/*==================================================
   HERO CONTENT BOX
==================================================*/

.hero-content-box{

    position:relative;

    z-index:5;

    width:min(950px, 92%);

    margin:0 auto;

    padding:55px 65px;

    text-align:center;

    /*----------------------------------------------
       GLASS BACKGROUND
    ----------------------------------------------*/

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255,255,255,.07),
            rgba(255,215,0,.06),
            rgba(255,255,255,.10)
        );

    /*----------------------------------------------
       GLASS BORDER
    ----------------------------------------------*/

    border:1px solid rgba(255,255,255,.35);

    border-top-color:rgba(255,215,0,.55);

    border-bottom-color:rgba(255,215,0,.25);

    /*----------------------------------------------
       GLASS BLUR
    ----------------------------------------------*/

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    /*----------------------------------------------
       SHADOW
    ----------------------------------------------*/

    box-shadow:

        0 20px 60px rgba(0,0,0,.35),

        0 0 35px rgba(255,215,0,.10),

        inset 0 1px 0 rgba(255,255,255,.30),

        inset 0 -1px 0 rgba(255,215,0,.10);

    /*----------------------------------------------
       SHAPE
    ----------------------------------------------*/

    border-radius:28px;

    overflow:hidden;

    /*----------------------------------------------
       PERFORMANCE
    ----------------------------------------------*/

    isolation:isolate;

}


/*==================================================
   GLASS LIGHT SHINE
==================================================*/

.hero-glass-shine{

    position:absolute;

    top:-120%;

    left:-30%;

    width:70%;

    height:300%;

    z-index:-1;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            rgba(255,215,0,.10),
            transparent
        );

    transform:rotate(18deg);

    pointer-events:none;

    animation:heroGlassShine 8s ease-in-out infinite;

}


/*==================================================
   GLASS SHINE ANIMATION
==================================================*/

@keyframes heroGlassShine{

    0%{

        left:-80%;

        opacity:0;

    }

    20%{

        opacity:.4;

    }

    50%{

        opacity:.7;

    }

    80%{

        opacity:.4;

    }

    100%{

        left:130%;

        opacity:0;

    }

}


/*==================================================
   GOLD GLOW AROUND GLASS
==================================================*/

.hero-content-box::before{

    content:"";

    position:absolute;

    inset:-1px;

    z-index:-2;

    border-radius:28px;

    background:

        linear-gradient(
            120deg,
            transparent 10%,
            rgba(255,215,0,.45),
            transparent 45%,
            rgba(255,255,255,.25),
            transparent 75%
        );

    opacity:.35;

    filter:blur(1px);

    pointer-events:none;

}


/*==================================================
   HERO TITLE
==================================================*/

.hero-content-box h1{

    position:relative;

    z-index:3;

    margin:0 0 18px;

    color:#ffffff;

    font-size:clamp(42px, 6vw, 78px);

    font-weight:900;

    line-height:1.15;

    letter-spacing:0;

    text-align:center;

    /*----------------------------------------------
       TEXT GLOW
    ----------------------------------------------*/

    text-shadow:

        0 3px 8px rgba(0,0,0,.95),

        0 0 18px rgba(0,0,0,.75),

        0 0 35px rgba(255,255,255,.10);

}


/*==================================================
   HERO SUBTITLE
==================================================*/

.hero-content-box h2{

    position:relative;

    z-index:3;

    margin:0 auto 20px;

    color:#ffd000;

    font-size:clamp(22px, 3vw, 38px);

    font-weight:800;

    line-height:1.5;

    text-align:center;

    /*----------------------------------------------
       GOLD TEXT GLOW
    ----------------------------------------------*/

    text-shadow:

        0 3px 8px rgba(0,0,0,.95),

        0 0 18px rgba(0,0,0,.85),

        0 0 25px rgba(255,208,0,.35);

}


/*==================================================
   HERO DESCRIPTION
==================================================*/

.hero-content-box p{

    position:relative;

    z-index:3;

    max-width:780px;

    margin:0 auto;

    color:#ffffff;

    font-size:clamp(16px, 1.5vw, 21px);

    font-weight:500;

    line-height:2;

    text-align:center;

    text-shadow:

        0 2px 7px rgba(0,0,0,1),

        0 0 15px rgba(0,0,0,.85);

}


/*==================================================
   GOLD LINE
==================================================*/

.hero-content-box p::after{

    content:"";

    display:block;

    width:110px;

    height:3px;

    margin:24px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #ffd000,
            #fff4a3,
            #ffd000,
            transparent
        );

    box-shadow:

        0 0 10px rgba(255,208,0,.45);

}


/*==================================================
   LARGE DESKTOP
==================================================*/

@media (min-width:1400px){

    .hero-content-box{

        width:950px;

        padding:60px 75px;

        border-radius:30px;

    }

}


/*==================================================
   DESKTOP
==================================================*/

@media (max-width:1199px){

    .hero-content-box{

        width:90%;

        padding:50px 50px;

    }

}


/*==================================================
   TABLET
==================================================*/

@media (max-width:992px){

    .hero-content-box{

        width:90%;

        padding:42px 35px;

        border-radius:24px;

        backdrop-filter:blur(10px);

        -webkit-backdrop-filter:blur(10px);

    }


    .hero-content-box h1{

        margin-bottom:15px;

    }


    .hero-content-box h2{

        margin-bottom:18px;

    }

}


/*==================================================
   MOBILE
==================================================*/

@media (max-width:768px){

    .hero-content-box{

        width:92%;

        padding:35px 25px;

        border-radius:20px;

        background:

            linear-gradient(
                135deg,
                rgba(255,255,255,.14),
                rgba(255,255,255,.06),
                rgba(255,215,0,.05)
            );

        backdrop-filter:blur(8px);

        -webkit-backdrop-filter:blur(8px);

    }


    .hero-content-box h1{

        font-size:clamp(34px, 8vw, 52px);

        line-height:1.25;

    }


    .hero-content-box h2{

        font-size:clamp(19px, 5vw, 28px);

        line-height:1.6;

    }


    .hero-content-box p{

        font-size:16px;

        line-height:1.9;

    }


    .hero-content-box p::after{

        margin-top:20px;

    }

}


/*==================================================
   SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .hero-content-box{

        width:94%;

        padding:28px 18px;

        border-radius:18px;

        border-color:rgba(255,255,255,.28);

    }


    .hero-content-box h1{

        font-size:32px;

        line-height:1.25;

        margin-bottom:12px;

    }


    .hero-content-box h2{

        font-size:19px;

        line-height:1.65;

        margin-bottom:14px;

    }


    .hero-content-box p{

        font-size:14px;

        line-height:1.9;

    }


    .hero-content-box p::after{

        width:80px;

        height:2px;

        margin-top:17px;

    }

}


/*==================================================
   EXTRA SMALL DEVICES
==================================================*/

@media (max-width:360px){

    .hero-content-box{

        width:95%;

        padding:24px 14px;

    }


    .hero-content-box h1{

        font-size:29px;

    }


    .hero-content-box h2{

        font-size:17px;

    }


    .hero-content-box p{

        font-size:13px;

    }

}


/*==================================================
   REDUCE MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .hero-glass-shine{

        animation:none;

    }

}/*==================================================
   STUDIO VIDEO CARDS
==================================================*/

.hero-studio-videos{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:16px;

    width:100%;

    max-width:650px;

    margin:28px auto 0;

}


/*==================================================
   VIDEO CARD
==================================================*/

.studio-video-card{

    overflow:hidden;

    border:1px solid rgba(255,255,255,.20);

    border-radius:16px;

    background:rgba(0,0,0,.28);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:

        0 12px 35px rgba(0,0,0,.30),

        inset 0 1px 0 rgba(255,255,255,.12);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}


.studio-video-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,215,0,.65);

    box-shadow:

        0 18px 40px rgba(0,0,0,.40),

        0 0 25px rgba(255,215,0,.12);

}


/*==================================================
   VIDEO
==================================================*/

.studio-video{

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#050505;

}


.studio-video video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==================================================
   VIDEO INFORMATION
==================================================*/

.studio-video-info{

    padding:12px 15px 15px;

    text-align:right;

}


.studio-video-info span{

    display:block;

    margin-bottom:4px;

    color:#ffd000;

    font-size:11px;

    font-weight:700;

}


.studio-video-info h3{

    margin:0 0 4px;

    color:#fff;

    font-size:16px;

    font-weight:800;

}


.studio-video-info p{

    margin:0;

    color:rgba(255,255,255,.68);

    font-size:11px;

    line-height:1.7;

}


/*==================================================
   TABLET
==================================================*/

@media(max-width:768px){

    .hero-studio-videos{

        max-width:560px;

        gap:12px;

    }

}


/*==================================================
   MOBILE
==================================================*/

@media(max-width:560px){

    .hero-studio-videos{

        grid-template-columns:1fr;

        max-width:360px;

        margin-top:22px;

    }

}


/*==================================================
   SMALL MOBILE
==================================================*/

@media(max-width:400px){

    .studio-video-info{

        padding:10px 12px 12px;

    }

    .studio-video-info h3{

        font-size:15px;

    }

    .studio-video-info p{

        font-size:10px;

    }

}/*==================================================
   STUDIO VIDEO CARD
==================================================*/

.studio-video-card{

    width:100%;

    overflow:hidden;

    border:1px solid rgba(255,215,0,.22);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(0,0,0,.35)
        );

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.10);

    transition:.35s ease;

}


.studio-video-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,215,0,.55);

    box-shadow:

        0 22px 50px rgba(0,0,0,.45),

        0 0 30px rgba(255,215,0,.10);

}


/*==================================================
   VIDEO HEADER
==================================================*/

.studio-video-header{

    padding:18px 20px 14px;

    text-align:right;

}


.studio-video-header span{

    display:inline-block;

    margin-bottom:6px;

    padding:4px 12px;

    color:#111;

    font-size:11px;

    font-weight:800;

    border-radius:30px;

    background:#ffd000;

}


.studio-video-header h3{

    margin:0 0 6px;

    color:#fff;

    font-size:20px;

    font-weight:900;

    line-height:1.4;

    text-shadow:

        0 2px 10px rgba(0,0,0,.45);

}


.studio-video-header p{

    margin:0;

    color:rgba(255,255,255,.65);

    font-size:12px;

    line-height:1.8;

}


/*==================================================
   VIDEO
==================================================*/

.studio-video{

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#000;

}


.studio-video video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}/*==================================================
   SERVICE CARD LINKS
==================================================*/

.service-link{

    display:block;

    width:100%;

    height:100%;

    color:inherit;

    text-decoration:none;

}


/* إزالة أي لون أو خط من النص */

.service-link h3,
.service-link p{

    text-decoration:none;

}


/* الحفاظ على شكل البطاقة */

.service-link .service-body{

    color:inherit;

}


/*==================================================
   HOVER
==================================================*/

.service-link:hover{

    color:inherit;

}


/* الصورة قابلة للنقر */

.service-link .service-image{

    cursor:pointer;

}


/*==================================================
   ACCESSIBILITY
==================================================*/

.service-link:focus-visible{

    outline:2px solid #ffd000;

    outline-offset:3px;

    border-radius:12px;

}/*==================================================
   TAKE MILLION
   PREMIUM STUDIO SHOWCASE
==================================================*/

.studio-showcase{

    position:relative;

    width:100%;

    padding:90px 0;

    overflow:hidden;

}


/*==================================================
   HEADING
==================================================*/

.studio-showcase-heading{

    max-width:850px;

    margin:0 auto 35px;

    text-align:center;

}


.studio-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:14px;

    color:#ffd000;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.studio-eyebrow::before{

    content:"";

    width:28px;

    height:1px;

    background:#ffd000;

}


.studio-showcase-heading h2{

    margin:0 0 14px;

    color:#fff;

    font-size:clamp(30px,4vw,52px);

    font-weight:900;

    line-height:1.25;

    letter-spacing:-1px;

}


.studio-showcase-heading p{

    max-width:700px;

    margin:auto;

    color:rgba(255,255,255,.65);

    font-size:16px;

    line-height:1.9;

}


/*==================================================
   VIDEO FRAME
==================================================*/

.studio-showcase-video{

    position:relative;

    width:100%;

    max-width:1200px;

    margin:auto;

    aspect-ratio:16 / 9;

    overflow:hidden;

    isolation:isolate;

    border:1px solid rgba(255,255,255,.16);

    border-radius:26px;

    background:#050505;

    box-shadow:

        0 35px 80px rgba(0,0,0,.45),

        0 0 70px rgba(255,215,0,.06);

}


/*==================================================
   VIDEO
==================================================*/

.studio-premium-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.01);

    transition:transform 1.8s cubic-bezier(.2,.7,.2,1);

}


.studio-showcase-video:hover
.studio-premium-video{

    transform:scale(1.045);

}


/*==================================================
   CINEMATIC OVERLAY
==================================================*/

.studio-video-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,0) 38%,
            rgba(0,0,0,.10) 55%,
            rgba(0,0,0,.78) 100%
        );

}


/*==================================================
   GOLD AMBIENT GLOW
==================================================*/

.studio-video-glow{

    position:absolute;

    left:50%;

    bottom:-120px;

    width:500px;

    height:250px;

    z-index:0;

    transform:translateX(-50%);

    pointer-events:none;

    background:radial-gradient(
        ellipse,
        rgba(255,215,0,.15),
        transparent 70%
    );

    filter:blur(30px);

}


/*==================================================
   TOP LABEL
==================================================*/

.studio-video-label{

    position:absolute;

    top:24px;

    right:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:9px 14px;

    color:#fff;

    font-size:11px;

    font-weight:700;

    border:1px solid rgba(255,255,255,.16);

    border-radius:30px;

    background:rgba(0,0,0,.30);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}


.studio-status-dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#ffd000;

    box-shadow:0 0 12px rgba(255,215,0,.8);

    animation:studioPulse 1.8s infinite;

}


@keyframes studioPulse{

    0%,100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.45;

        transform:scale(.75);

    }

}


/*==================================================
   CENTER PLAY
==================================================*/

.studio-play-indicator{

    position:absolute;

    top:50%;

    left:50%;

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    transform:translate(-50%,-50%);

    color:#fff;

    pointer-events:none;

    transition:.5s ease;

}


.studio-play-circle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:74px;

    height:74px;

    border:1px solid rgba(255,255,255,.65);

    border-radius:50%;

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    box-shadow:

        0 0 0 8px rgba(255,255,255,.04),

        0 0 35px rgba(255,215,0,.12);

}


.studio-play-circle i{

    margin-right:-3px;

    color:#ffd000;

    font-size:20px;

}


.studio-play-indicator span{

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}


/*==================================================
   BOTTOM INFORMATION
==================================================*/

.studio-video-bottom{

    position:absolute;

    right:28px;

    bottom:25px;

    left:28px;

    z-index:3;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

}


.studio-video-category{

    display:block;

    margin-bottom:6px;

    color:#ffd000;

    font-size:11px;

    font-weight:800;

    letter-spacing:.5px;

}


.studio-video-bottom h3{

    margin:0;

    color:#fff;

    font-size:clamp(20px,2.5vw,32px);

    font-weight:900;

}


/*==================================================
   VIDEO NUMBER
==================================================*/

.studio-video-number{

    display:flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.7);

    font-size:11px;

}


.studio-video-number div{

    width:45px;

    height:1px;

    background:rgba(255,255,255,.35);

}


/*==================================================
   MOBILE
==================================================*/

@media(max-width:768px){

    .studio-showcase{

        padding:60px 15px;

    }


    .studio-showcase-heading{

        margin-bottom:24px;

    }


    .studio-showcase-heading h2{

        font-size:32px;

        line-height:1.35;

    }


    .studio-showcase-heading p{

        font-size:14px;

        line-height:1.8;

    }


    .studio-showcase-video{

        aspect-ratio:9 / 12;

        border-radius:20px;

    }


    .studio-video-label{

        top:16px;

        right:16px;

    }


    .studio-play-circle{

        width:62px;

        height:62px;

    }


    .studio-video-bottom{

        right:18px;

        bottom:18px;

        left:18px;

    }


    .studio-video-bottom h3{

        font-size:21px;

        max-width:240px;

        line-height:1.45;

    }


    .studio-video-number{

        display:none;

    }

}


/*==================================================
   SMALL MOBILE
==================================================*/

@media(max-width:420px){

    .studio-showcase-video{

        aspect-ratio:9 / 13;

    }


    .studio-showcase-heading h2{

        font-size:28px;

    }

}/*==================================================
   TAKE MILLION
   HOME SERVICES SHOWCASE
==================================================*/

.home-services-showcase{

    position:relative;

    width:100%;

    padding:90px 0;

}


/*==================================================
   INTRO
==================================================*/

.home-services-intro{

    max-width:850px;

    margin:0 auto 38px;

    text-align:center;

}


.home-services-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:#ffd000;

    font-size:11px;

    font-weight:900;

    letter-spacing:3px;

}


.home-services-eyebrow::before,
.home-services-eyebrow::after{

    content:"";

    width:28px;

    height:1px;

    background:#ffd000;

}


.home-services-intro h2{

    margin:0 0 15px;

    color:#fff;

    font-size:clamp(30px,4vw,52px);

    font-weight:900;

    line-height:1.25;

}


.home-services-intro p{

    max-width:720px;

    margin:auto;

    color:rgba(255,255,255,.62);

    font-size:15px;

    line-height:1.9;

}


/*==================================================
   VIDEO FRAME
==================================================*/

.home-services-video-frame{

    position:relative;

    width:100%;

    max-width:1250px;

    aspect-ratio:16 / 9;

    margin:auto;

    overflow:hidden;

    isolation:isolate;

    background:#050505;

    border:1px solid rgba(255,255,255,.15);

    border-radius:28px;

    box-shadow:

        0 40px 100px rgba(0,0,0,.55),

        0 0 80px rgba(255,215,0,.06);

}


/*==================================================
   INNER FRAME
==================================================*/

.home-video-inner-frame{

    position:absolute;

    inset:8px;

    z-index:7;

    pointer-events:none;

    border:1px solid rgba(255,215,0,.22);

    border-radius:21px;

}


/*==================================================
   VIDEO
==================================================*/

.home-services-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.02);

    transition:transform 1.8s
        cubic-bezier(.2,.7,.2,1);

}


.home-services-video-frame:hover
.home-services-video{

    transform:scale(1.055);

}


/*==================================================
   OVERLAY
==================================================*/

.home-services-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.04) 35%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.86) 100%
        );

}


/*==================================================
   GOLD GLOW
==================================================*/

.home-services-glow{

    position:absolute;

    left:50%;

    bottom:-180px;

    width:650px;

    height:350px;

    z-index:2;

    transform:translateX(-50%);

    pointer-events:none;

    background:radial-gradient(
        ellipse,
        rgba(255,215,0,.13),
        transparent 70%
    );

    filter:blur(35px);

}


/*==================================================
   SCAN
==================================================*/

.home-services-scan{

    position:absolute;

    top:0;

    left:-25%;

    z-index:6;

    width:20%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #ffd000,
        transparent
    );

    box-shadow:0 0 18px rgba(255,215,0,.5);

    animation:homeServicesScan 8s linear infinite;

}


@keyframes homeServicesScan{

    from{

        left:-25%;

    }

    to{

        left:110%;

    }

}


/*==================================================
   TOP
==================================================*/

.home-services-top{

    position:absolute;

    top:25px;

    right:30px;

    left:30px;

    z-index:8;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.home-services-brand{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:12px;

    font-weight:900;

    letter-spacing:3px;

}


.home-services-brand span{

    width:28px;

    height:2px;

    background:#ffd000;

    box-shadow:0 0 12px rgba(255,215,0,.5);

}


.home-services-status{

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 14px;

    color:#fff;

    font-size:10px;

    font-weight:700;

    border:1px solid rgba(255,255,255,.18);

    border-radius:30px;

    background:rgba(0,0,0,.3);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}


.home-services-status i{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#ffd000;

    box-shadow:0 0 12px rgba(255,215,0,.8);

    animation:homeStatusPulse 1.7s infinite;

}


@keyframes homeStatusPulse{

    50%{

        opacity:.35;

        transform:scale(.7);

    }

}


/*==================================================
   CENTER
==================================================*/

.home-services-center{

    position:absolute;

    top:50%;

    left:50%;

    z-index:6;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    transform:translate(-50%,-50%);

    pointer-events:none;

    transition:.6s ease;

}


.home-play-ring{

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    border:1px solid rgba(255,215,0,.65);

    border-radius:50%;

    background:rgba(0,0,0,.22);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:

        0 0 0 8px rgba(255,215,0,.035),

        0 0 40px rgba(255,215,0,.15);

    animation:homePlayPulse 2.5s infinite;

}


.home-play-ring i{

    margin-right:-3px;

    color:#ffd000;

    font-size:19px;

}


.home-services-center span{

    color:#fff;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

}


@keyframes homePlayPulse{

    50%{

        transform:scale(1.06);

    }

}


/*==================================================
   BOTTOM
==================================================*/

.home-services-bottom{

    position:absolute;

    right:30px;

    bottom:28px;

    left:30px;

    z-index:8;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

}


.home-services-copy{

    max-width:680px;

}


.home-services-copy > span{

    display:block;

    margin-bottom:7px;

    color:#ffd000;

    font-size:11px;

    font-weight:900;

    letter-spacing:1px;

}


.home-services-copy h3{

    margin:0 0 8px;

    color:#fff;

    font-size:clamp(24px,3vw,40px);

    font-weight:900;

    line-height:1.25;

}


.home-services-copy p{

    margin:0;

    color:rgba(255,255,255,.68);

    font-size:14px;

    line-height:1.8;

}


/*==================================================
   INDEX
==================================================*/

.home-services-index{

    display:flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.7);

    font-size:10px;

}


.home-services-index div{

    width:45px;

    height:1px;

    background:rgba(255,255,255,.35);

}


/*==================================================
   CORNERS
==================================================*/

.home-corner{

    position:absolute;

    z-index:9;

    width:32px;

    height:32px;

    pointer-events:none;

}


.home-corner-tl{

    top:15px;

    left:15px;

    border-top:2px solid #ffd000;

    border-left:2px solid #ffd000;

}


.home-corner-tr{

    top:15px;

    right:15px;

    border-top:2px solid #ffd000;

    border-right:2px solid #ffd000;

}


.home-corner-bl{

    bottom:15px;

    left:15px;

    border-bottom:2px solid #ffd000;

    border-left:2px solid #ffd000;

}


.home-corner-br{

    right:15px;

    bottom:15px;

    border-right:2px solid #ffd000;

    border-bottom:2px solid #ffd000;

}


/*==================================================
   SERVICES NAVIGATION
==================================================*/

.home-services-nav{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    max-width:1250px;

    margin:18px auto 0;

    border-top:1px solid rgba(255,255,255,.1);

    border-bottom:1px solid rgba(255,255,255,.1);

}


.home-services-nav a{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:18px 20px;

    text-decoration:none;

    border-left:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

}


.home-services-nav a:first-child{

    border-left:0;

}


.home-services-nav a span{

    color:#ffd000;

    font-size:9px;

    font-weight:800;

    letter-spacing:1px;

}


.home-services-nav a strong{

    color:rgba(255,255,255,.72);

    font-size:13px;

    font-weight:800;

    transition:.35s ease;

}


.home-services-nav a:hover{

    background:rgba(255,215,0,.04);

}


.home-services-nav a:hover strong{

    color:#fff;

}


.home-services-nav a::after{

    content:"";

    position:absolute;

    right:20px;

    bottom:-1px;

    left:20px;

    height:2px;

    background:#ffd000;

    transform:scaleX(0);

    transform-origin:center;

    transition:.35s ease;

}


.home-services-nav a:hover::after{

    transform:scaleX(1);

}


/*==================================================
   TABLET
==================================================*/

@media(max-width:992px){

    .home-services-nav{

        grid-template-columns:
            repeat(3,1fr);

    }

}

@media (max-width:768px){

    .home-services-video-frame{
        width:100%;
        aspect-ratio:16 / 9;
        border-radius:18px;
    }

    .home-services-copy h3{
        font-size:19px;
        line-height:1.4;
    }

    .home-services-copy p{
        display:none;
    }

    .home-services-index{
        display:none;
    }

    .home-services-top{
        top:14px;
        right:14px;
        left:14px;
    }

    .home-services-brand{
        font-size:8px;
        letter-spacing:1.5px;
    }

    .home-services-status{
        padding:6px 9px;
        font-size:7px;
    }

    .home-play-ring{
        width:58px;
        height:58px;
    }

    .home-services-center span{
        font-size:8px;
    }

}