:root{

--gold:#D4AF37;
--dark:#090909;
--card:#181818;
--text:#ffffff;
--grey:#cfcfcf;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family: 'Cormorant Garamond', sans-serif;
background:#090909;
color:#fff;
scroll-behavior: smooth;

}

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

}

/*==========================================
        PAGE LOADER / PRELOADER
==========================================*/

body.is-loading{
    overflow:hidden;
    height:100vh;
}

.page-loader{

    position:fixed;
    inset:0;
    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--dark);
    overflow:hidden;

}

.loader-curtain{

    position:absolute;
    top:0;
    width:50%;
    height:100%;

    background:
        radial-gradient(circle at 50% 50%,rgba(212,175,55,.10),transparent 60%),
        var(--dark);

    transition:transform .9s cubic-bezier(.83,0,.17,1);

    z-index:1;

}

.loader-curtain-left{
    left:0;
    border-right:1px solid rgba(212,175,55,.15);
}

.loader-curtain-right{
    right:0;
    border-left:1px solid rgba(212,175,55,.15);
}

.loader-bg-glow{

    position:absolute;
    top:50%;
    left:50%;
    width:520px;
    height:520px;
    transform:translate(-50%,-50%);

    background:radial-gradient(circle,rgba(212,175,55,.22),transparent 65%);

    filter:blur(10px);

    z-index:0;

    animation:loaderGlowPulse 2.6s ease-in-out infinite;

}

@keyframes loaderGlowPulse{

    0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(.9); }
    50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }

}

.loader-content{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;

    opacity:1;
    transform:scale(1);

    transition:opacity .5s ease, transform .5s ease;

}

.loader-logo-ring{

    position:relative;
    width:150px;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

}

.loader-logo{

    width:78px;
    height:auto;

    -o-object-fit:contain;
    object-fit:contain;

    animation:loaderLogoPulse 2.2s ease-in-out infinite;

    filter:drop-shadow(0 0 18px rgba(212,175,55,.45));

}

@keyframes loaderLogoPulse{

    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }

}

.loader-ring-svg{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    transform:rotate(-90deg);

}

.loader-ring-svg .ring-track{

    fill:none;
    stroke:rgba(212,175,55,.12);
    stroke-width:2;

}

.loader-ring-svg .ring-progress{

    fill:none;
    stroke:var(--gold);
    stroke-width:2;
    stroke-linecap:round;

    stroke-dasharray:452;
    stroke-dashoffset:452;

    animation:loaderRingDraw 1.8s ease-in-out infinite;

}

@keyframes loaderRingDraw{

    0%{ stroke-dashoffset:452; }
    50%{ stroke-dashoffset:0; }
    100%{ stroke-dashoffset:-452; }

}

.loader-text{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    text-align:center;

}

.loader-title{

    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    letter-spacing:6px;
    color:#fff;
    font-weight:600;

}

.loader-subtitle{

    font-size:13px;
    letter-spacing:1px;
    color:var(--grey);

}

.loader-dots i{

    font-style:normal;
    opacity:0;

    animation:loaderDotBlink 1.4s infinite;

}

.loader-dots i:nth-child(1){ animation-delay:0s; }
.loader-dots i:nth-child(2){ animation-delay:.2s; }
.loader-dots i:nth-child(3){ animation-delay:.4s; }

@keyframes loaderDotBlink{

    0%,80%,100%{ opacity:0; }
    40%{ opacity:1; }

}

.loader-bar{

    width:190px;
    height:3px;
    border-radius:10px;

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

    overflow:hidden;

}

.loader-bar-fill{

    display:block;
    height:100%;
    width:0%;

    background:linear-gradient(90deg,var(--gold),#fff8dd,var(--gold));

    border-radius:10px;

    animation:loaderBarFill 2.2s ease-in-out infinite;

}

@keyframes loaderBarFill{

    0%{ width:0%; margin-left:0%; }
    50%{ width:70%; margin-left:15%; }
    100%{ width:0%; margin-left:100%; }

}

/* Exit state */

.page-loader.loader-exit .loader-content{

    opacity:0;
    transform:scale(.85);

}

.page-loader.loader-exit .loader-curtain-left{
    transform:translateX(-100%);
}

.page-loader.loader-exit .loader-curtain-right{
    transform:translateX(100%);
}

.page-loader.loader-hidden{

    visibility:hidden;
    pointer-events:none;

}

@media(max-width:576px){

    .loader-logo-ring{ width:120px; height:120px; }
    .loader-logo{ width:60px; }
    .loader-title{ font-size:17px; letter-spacing:4px; }
    .loader-bar{ width:150px; }

}

/*==========================================
            NAVBAR
==========================================*/

.navbar{

padding:18px 0;
transition:.4s ease;
background:linear-gradient(180deg,rgba(8,8,8,.9),rgba(8,8,8,.46));
isolation:isolate;

}

.studio-navbar::before{

content:"";
position:absolute;
left:61%;
top:11px;
width:860px;
height:calc(100% - 22px);
transform:translateX(-50%);
border:1px solid rgba(212,175,55,.18);
border-radius:999px;
background:
linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
radial-gradient(circle at 16% 50%,rgba(212,175,55,.16),transparent 24%),
rgba(9,9,9,.54);
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
box-shadow:0 16px 45px rgba(0,0,0,.35);
transition:.35s ease;
z-index:-1;

}

.studio-navbar::after{

content:"";
position:absolute;
left:50%;
bottom:11px;
width:min(940px,calc(100% - 80px));
height:1px;
transform:translateX(-50%);
background:linear-gradient(90deg,transparent,rgba(212,175,55,.7),transparent);
opacity:.55;
pointer-events:none;

}

.navbar.sticky,
.sticky{

padding:12px 0;
/* background:rgba(9,9,9,.85); */
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(7px);
border-bottom:0;
box-shadow:none;

}

.studio-navbar.sticky::before{

height:calc(100% - 16px);
top:8px;
background:
linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025)),
radial-gradient(circle at 86% 50%,rgba(212,175,55,.16),transparent 28%),
rgba(7,7,7,.86);
border-color:rgba(212,175,55,.34);
box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 24px rgba(212,175,55,.12);

}

.navbar-brand{

font-size:28px;
font-family:'Cormorant Garamond',serif;
color:white;
padding:0;
display:flex;
align-items:center;

}

.navbar-brand span{

color:var(--gold);

}

.navbar-brand img.logo{

height:63px;
width:auto;
transition:.35s ease;

}

.studio-navbar.sticky .navbar-brand img.logo{

height:50px;

}

/* Smaller logo when navbar becomes sticky */
/* 
.navbar.sticky .navbar-brand img.logo{

height:46px;

} */

.navbar-nav{

align-items:center;
gap:4px;

}

.nav-item{

margin:0 4px;

}

.nav-link{

position:relative;
color:#f2f2f2 !important;
margin:0;
padding:10px 14px !important;
font-weight:800;
letter-spacing:.4px;
transition:.3s ease;
border-radius:999px;
isolation:isolate;
font-size: 17px;

}

.nav-link::before{

content:"";
position:absolute;
inset:4px;
border-radius:999px;
background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(255,255,255,.04));
border:1px solid rgba(212,175,55,.22);
box-shadow:inset 0 0 18px rgba(212,175,55,.08);
opacity:0;
transform:scale(.88);
transition:.3s ease;
z-index:-1;

}

.nav-link::after{

content:"";
position:absolute;
left:50%;
bottom:5px;
width:5px;
height:5px;
border-radius:50%;
background:var(--gold);
box-shadow:0 0 14px rgba(212,175,55,.8);
opacity:0;
transform:translateX(-50%) translateY(7px);
transition:.3s ease;

}

.nav-link:hover,
.nav-link.active{

color:var(--gold) !important;

}

.nav-link:hover::before,
.nav-link.active::before{

opacity:1;
transform:scale(1);

}

.nav-link:hover::after,
.nav-link.active::after{

opacity:1;
transform:translateX(-50%) translateY(0);

}

.book-btn{

position:relative;
overflow:hidden;
background:linear-gradient(135deg,#D4AF37,#f3dd8c 54%,#fff3bd);
padding:12px 28px;
color:#111;
border-radius:50px;
text-decoration:none;
font-weight:700;
letter-spacing:.4px;
box-shadow:0 8px 20px rgba(212,175,55,.25);
transition:.35s ease;
display:inline-block;
font-size: 17px;

}

.book-btn::before{

content:"";
position:absolute;
inset:-80% auto -80% -55%;
width:42%;
background:rgba(255,255,255,.45);
transform:rotate(18deg);
transition:.55s ease;

}

.book-btn:hover::before{

left:120%;

}

.book-btn:hover{

transform:translateY(-3px);
box-shadow:0 14px 30px rgba(212,175,55,.4);
color:#111;

}

/* Custom Toggler */

.navbar-toggler{

border:1px solid rgba(212,175,55,.4);
border-radius:14px;
padding:7px 12px;
background:rgba(212,175,55,.06);
transition:.3s ease;

}

/*==========================================
            BACK TO TOP
==========================================*/

.whatsapp-float{

position:fixed;
right:28px;
bottom:104px;
min-width:62px;
height:62px;
padding:0 18px 0 8px;
border:1px solid rgba(212,175,55,.42);
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
background:
radial-gradient(circle at 22% 18%,rgba(255,255,255,.24),transparent 18%),
linear-gradient(145deg,rgba(21,21,21,.96),rgba(5,5,5,.94));
color:#fff;
text-decoration:none;
z-index:998;
box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 28px rgba(37,211,102,.12);
overflow:hidden;
isolation:isolate;
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease;
animation:whatsappFloat 3.8s ease-in-out infinite;

}

.whatsapp-float::before{

content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
background:conic-gradient(from 120deg,transparent 0 28%,rgba(37,211,102,.95) 38%,rgba(212,175,55,.95) 50%,transparent 62% 100%);
opacity:.85;
z-index:-2;
animation:whatsappSpin 7s linear infinite;

}

.whatsapp-float::after{

content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:
linear-gradient(145deg,rgba(18,18,18,.98),rgba(4,4,4,.96)),
radial-gradient(circle at 20% 50%,rgba(37,211,102,.16),transparent 38%);
z-index:-1;

}

.whatsapp-float:hover{

color:#fff;
transform:translateY(-5px) scale(1.02);
border-color:rgba(37,211,102,.7);
box-shadow:0 24px 54px rgba(0,0,0,.52),0 0 32px rgba(37,211,102,.25),0 0 24px rgba(212,175,55,.18);

}

.whatsapp-float__halo{

position:absolute;
left:8px;
top:8px;
width:46px;
height:46px;
border-radius:50%;
border:1px dashed rgba(212,175,55,.5);
animation:spinReel 8s linear infinite;

}

.whatsapp-float__spark{

position:absolute;
right:12px;
top:10px;
width:8px;
height:8px;
border-radius:50%;
background:#25D366;
box-shadow:0 0 0 0 rgba(37,211,102,.55);
animation:whatsappPing 1.8s ease-out infinite;

}

.whatsapp-float__icon{

width:46px;
height:46px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 46px;
background:linear-gradient(145deg,#25D366,#128C4A);
color:#fff;
font-size:25px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px rgba(37,211,102,.25);
position:relative;
z-index:2;

}

.whatsapp-float__text{

position:relative;
z-index:2;
font-family:'Poppins',sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.8px;
white-space:nowrap;
text-transform:uppercase;
color:#f5f5f5;

}

@keyframes whatsappFloat{

0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-7px); }

}

@keyframes whatsappSpin{

to{ transform:rotate(360deg); }

}

@keyframes whatsappPing{

0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
75%{ box-shadow:0 0 0 10px rgba(37,211,102,0); }
100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }

}

.back-to-top{

position:fixed;
right:28px;
bottom:28px;
width:62px;
height:62px;
border:1px solid rgba(212,175,55,.45);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 35% 28%,rgba(255,255,255,.18),transparent 22%),
linear-gradient(145deg,#171717,#050505);
color:#D4AF37;
font-size:24px;
cursor:pointer;
opacity:0;
visibility:hidden;
transform:translateY(24px) scale(.88);
transition:.35s ease;
z-index:999;
box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 rgba(212,175,55,0);
overflow:hidden;

}

.back-to-top.show{

opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
animation:backTopFloat 3s ease-in-out infinite;

}

.back-to-top.scrolling-up{

animation:backTopFloat 3s ease-in-out infinite,backTopLift .75s ease;

}

.back-to-top:hover{

background:linear-gradient(145deg,#D4AF37,#f4de8f);
color:#111;
transform:translateY(-5px) scale(1.04);
box-shadow:0 22px 48px rgba(0,0,0,.48),0 0 26px rgba(212,175,55,.28);

}

.back-to-top__ring{

position:absolute;
inset:7px;
border:1px dashed rgba(212,175,55,.45);
border-radius:50%;
animation:spinReel 8s linear infinite;

}

.back-to-top__beam{

position:absolute;
left:50%;
bottom:-28px;
width:20px;
height:42px;
transform:translateX(-50%);
background:linear-gradient(180deg,rgba(212,175,55,.5),transparent);
clip-path:polygon(50% 0,100% 100%,0 100%);
opacity:.5;
transition:.3s ease;

}

.back-to-top:hover .back-to-top__beam,
.back-to-top.scrolling-up .back-to-top__beam{

bottom:-18px;
opacity:.9;

}

.back-to-top i{

position:relative;
z-index:2;

}

@keyframes spinReel{

to{ transform:rotate(360deg); }

}

@keyframes backTopFloat{

0%,100%{ box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 rgba(212,175,55,0); }
50%{ box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 22px rgba(212,175,55,.22); }

}

@keyframes backTopLift{

0%{ transform:translateY(0) scale(1); }
45%{ transform:translateY(-12px) scale(1.06); }
100%{ transform:translateY(0) scale(1); }

}

.navbar-toggler:hover{

background:rgba(212,175,55,.15);

}

.navbar-toggler:focus{

box-shadow:none;
outline:none;

}

.navbar-toggler-icon{

background-image:none !important;
width:auto;
height:auto;

}

.navbar-toggler i{

color:var(--gold);
font-size:22px;
line-height:1;
display:inline-block;
transition:transform .35s ease;

}

.navbar-toggler.is-open{

background:rgba(212,175,55,.16);

}

.navbar-toggler.is-open i{

transform:rotate(180deg);

}




.hero{

position:relative;
overflow:hidden;

}

.hero-video{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;

}

.overlay{

position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.65);

}

.hero .container{

position:relative;
z-index:2;

}

.hero-subtitle{

color:var(--gold);
letter-spacing:3px;
text-transform:uppercase;

}

.hero h1{

font-size:70px;
line-height:1.1;
margin:20px 0;

}

.hero p{

font-size:18px;
color:#ddd;
max-width:620px;

}

.hero-buttons{

display:flex;
gap:20px;
margin-top:40px;

}

.btn-gold{

background:var(--gold);
padding:17px 34px;
border-radius:50px;
text-decoration:none;
font-weight:600;
color:black;
font-size: 17px;

}

.btn-outline-gold{

border:2px solid var(--gold);
padding:15px 34px;
border-radius:50px;
text-decoration:none;
color:white;
font-size: 17px;
}

.record-card{

background:rgba(255,255,255,.08);
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
padding:35px;
border:1px solid rgba(255,255,255,.15);
border-radius:25px;
animation:float 4s infinite;

}

.record-card h5{

margin-bottom:25px;

}

.record-card ul{

list-style:none;
padding:0;

}

.record-card li{

padding:10px 0;
font-size:17px;

}

.live-dot{

width:12px;
height:12px;
background:red;
border-radius:50%;
margin-bottom:15px;
animation:pulse 1s infinite;

}

.scroll-down{

position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);

}

.scroll-down span{

display:block;
width:25px;
height:45px;
border:2px solid white;
border-radius:30px;
position:relative;
/* top: 29px; */

}

.scroll-down span::before{

content:'';
position:absolute;
width:5px;
height:10px;
background:white;
left:50%;
transform:translateX(-50%);
top:8px;
border-radius:20px;
animation:scroll 2s infinite;

}

@keyframes scroll{

0%{opacity:1;top:8px;}
100%{opacity:0;top:25px;}

}

@keyframes pulse{

50%{

transform:scale(1.5);

}

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}
.scroll-down{

    cursor:pointer;

    z-index:10;

}

.scroll-down:hover{

    transform:translateX(-50%) translateY(6px);

}




/*====================================================
            ABOUT SECTION
=====================================================*/

.about-section{
    position: relative;
    padding: 120px 0;
    background: var(--dark);
    overflow: hidden;
}

.about-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    background:
        repeating-conic-gradient(rgba(212,175,55,.05) 0deg 8deg, transparent 8deg 30deg),
        radial-gradient(rgba(212,175,55,.14), transparent 70%);
    top: -140px;
    right: -140px;
    border-radius: 50%;
    border:1px solid rgba(212,175,55,.10);
}

.about-section::after{
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    background: radial-gradient(rgba(212,175,55,.10), transparent 70%);
    bottom: -100px;
    left: -100px;
    border-radius: 50%;
}

/*==============================
SECTION TITLE
===============================*/

.section-heading{
    max-width:850px;
    margin:auto;
    position:relative;
}

.sub-title{

    display:inline-block;
    color:#C8A54B;
    font-size:15px;
    letter-spacing:5px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:20px;

}

.bg-title{

    position:absolute;
    width:100%;
    top:-70px;
    left:0;

    font-size:115px;

    font-family:'Cormorant Garamond',serif;

    color:rgb(212 175 55 / 18%);

    z-index:0;

    -webkit-user-select:none;
    user-select:none;

}

.main-title{

    position:relative;
    z-index:2;

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:#fff;

    margin-bottom:30px;

    margin-top: 34px;

}

.section-description{

    position:relative;

    z-index:2;

    color:var(--grey);

    font-size:18px;

    line-height:1.9;

    max-width:720px;

    margin:25px auto 0;

}

/*===================================
SERVICE CARDS
===================================*/

.about-card{

    position:relative;

    background:var(--card);

    padding:45px;

    border-radius:28px;

    overflow:hidden;

    transition:.45s;

    border:1px solid rgba(212,175,55,.15);

    height:100%;

}

.about-card::before{

    content:"";

    position:absolute;

    width:100%;

    height:5px;

    left:-100%;

    top:0;

    background:#D4AF37;

    transition:.45s;

}

.about-card:hover::before{

    left:0;

}

.about-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.card-number{

    font-size:70px;

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

    font-family:'Cormorant Garamond',serif;

    line-height:1;

    margin-bottom:25px;

}

.card-icon{

    width:75px;

    height:75px;

    background:rgba(212,175,55,.12);

    color:var(--gold);
    border:1px solid rgba(212,175,55,.25);

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    transition:.4s;

}

.about-card:hover .card-icon{

    background:#D4AF37;

    color:#111;

    transform:rotate(-8deg);

}

.about-card h4{

    margin-top:30px;

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    color:#fff;

}

.about-card p{

    margin:18px 0 30px;

    color:var(--grey);

    line-height:1.8;

}

.about-card a{

    text-decoration:none;

    color:var(--gold);

    font-weight:600;

}

.about-card a i{

    margin-left:8px;

    transition:.35s;

}

.about-card:hover a i{

    transform:translateX(8px);

}

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

/* .about-banner{

    position:relative;

    margin-top:90px;

    border-radius:35px;

    overflow:hidden;

} */


.about-banner{

    position:relative;

    margin-top:90px;

    border-radius:35px;

    overflow:hidden;

    height:550px;

    border:1px solid rgba(212,175,55,.15);

}

.about-banner-video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.about-banner:hover .about-banner-video{

    transform:scale(1.08);

}


.banner-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.55)
    );

    z-index:2;

}

.about-banner::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

    radial-gradient(circle at center,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.55) 100%);

}









/* .about-banner img{

    width:100%;

    display:block;

    transition:.8s;

}

.about-banner:hover img{

    transform:scale(1.08);

} */

/* .banner-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(rgb(0 0 0 / 57%), rgb(0 0 0 / 13%));

} */

.banner-overlay h3{

    color:#fff;

    text-align:center;

    font-size:60px;

    font-family:'Cormorant Garamond',serif;

    width:70%;

    line-height:1.2;

}

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

.info-box{

    padding-top:35px;

    border-top:2px solid #D4AF37;

}

.info-box span{

    display:inline-block;

    color:#D4AF37;

    font-size:20px;

    margin-bottom:18px;

    font-weight:700;

}

.info-box h5{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    margin-bottom:20px;

    color:#fff;

}

.info-box p{

    color:var(--grey);

    line-height:1.9;

}

/*===================================
SMOOTH TRANSITIONS
===================================*/

.about-card,
.card-icon,
.about-banner img,
.info-box,
.about-card a{

    transition:all .4s ease;

}





/* Gold glow */

.about-card:hover{

    box-shadow:
    0 18px 45px rgba(0,0,0,.12),
    0 0 25px rgba(212,175,55,.18);

}

/* Icon pulse */

.about-card:hover .card-icon{

    animation: iconPulse .6s ease;

}

@keyframes iconPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15) rotate(-10deg);

    }

    100%{

        transform:scale(1) rotate(-8deg);

    }

}

/* Arrow animation */

.about-card:hover a{

    letter-spacing:1px;

}

/* Image Overlay */

.about-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.55)
    );

    z-index:1;

}

.banner-overlay{

    z-index:2;

}

/* Bottom Boxes */

.info-box{

    transition:.35s;

}

.info-box:hover{

    transform:translateY(-8px);

}

.info-box:hover h5{

    color:#D4AF37;

}





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

.services-section{

    position:relative;
    padding:120px 0;
    background:#0d0d0d;
    overflow:hidden;

}


.services-section::before{

    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border:1px solid rgba(212,175,55,.08);
    border-radius:50%;
    left:-400px;
    top:-180px;
    background:repeating-conic-gradient(rgba(212,175,55,.04) 0deg 6deg, transparent 6deg 24deg);

}

.services-section::after{

    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border:1px solid rgba(212,175,55,.08);
    border-radius:50%;
    right:-350px;
    top:80px;
    background:repeating-conic-gradient(rgba(212,175,55,.04) 0deg 6deg, transparent 6deg 24deg);

}

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

.service-heading{

    position:relative;
    max-width:850px;
    margin:auto;
    margin-bottom: 53px;

}

.service-subtitle{

    display:inline-block;
    color:#D4AF37;
    letter-spacing:5px;
    font-size:14px;
    font-weight:600;
    margin-bottom:12px;

}

.service-bg-title{

    position:absolute;
    width:100%;
    left:0;
    top:-60px;

    font-size:120px;

    font-family:'Cormorant Garamond',serif;

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

    z-index:0;

}

.service-title{

    position:relative;
    color:#fff;
    font-size:60px;
    font-family:'Cormorant Garamond',serif;
    z-index:2;
    margin-top: 34px;

}

.service-heading p{

    color:#bcbcbc;
    line-height:1.9;
    max-width:720px;
    margin:25px auto 0;
    font-size: 18px;

}

/* Divider */

.title-divider{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:25px;

}

.title-divider span{

    width:90px;
    height:2px;
    background:#D4AF37;

}

.title-divider i{

    color:#D4AF37;

}

/*==========================================
        MAIN LAYOUT
==========================================*/

.service-layout{

    display:grid;

    grid-template-columns:
        320px
        1fr
        320px;

    gap:30px;

    align-items:stretch;

}

.left-services,
.right-services{

    display:flex;

    flex-direction:column;

    gap:30px;

    height:100%;

}

.left-services .service-box,
.right-services .service-box{

    margin-bottom:0;

    flex:1 1 0;

    display:flex;

    flex-direction:column;

}

.left-services .service-box p,
.right-services .service-box p{

    flex-grow:1;

}

/*==========================================
        SERVICE BOX
==========================================*/

.service-box{

    position:relative;

    background:#161616;

    border:1px solid rgba(212,175,55,.12);

    border-radius:20px;

    padding:35px;

    margin-bottom:30px;

    overflow:hidden;

    transition:.45s;

}

.service-box:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:
    0 20px 50px rgba(0,0,0,.40),
    0 0 30px rgba(212,175,55,.15);

}

.service-number{

    position:absolute;

    top:25px;

    right:25px;

    font-size:70px;

    font-family:'Cormorant Garamond',serif;

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

}

.service-icon{

    width:70px;

    height:70px;

    border:1px solid rgba(212,175,55,.30);

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    color:#D4AF37;

    font-size:28px;

    margin-bottom:28px;

    transition:.4s;

}

.service-box:hover .service-icon{

    background:#D4AF37;

    color:#111;

    transform:rotate(-8deg);

}

.service-box h4{

    color:#fff;

    font-size:25px;

    font-weight:600;

    margin-bottom:18px;

    text-align:left;

}

.line{

    width:55px;

    height:2px;

    background:#D4AF37;

    margin-bottom:20px;


}

.service-box p{

    color:#bdbdbd;

    line-height:1.8;

    margin-bottom:30px;

    font-size: 17px;
    
    font-weight: 600;

}

.service-box a{

    color:#D4AF37;

    text-decoration:none;

    font-weight:600;

}

.service-box a i{

    margin-left:8px;

    transition:.35s;

}

.service-box:hover a i{

    transform:translateX(8px);

}

/*==========================================
        FEATURED
==========================================*/

.featured-service{

    background:#151515;

    border:1px solid rgba(212,175,55,.20);

    border-radius:24px;

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    position:relative;
    

}

.featured-tag{

    position:absolute;

    left:-40px;

    top:25px;

    background:#D4AF37;

    color:#111;

    padding:10px 45px;

    transform:rotate(-45deg);

    font-size:12px;

    font-weight:600;

    z-index:5;

}

.featured-content{

    padding:55px;

}

.featured-content span{

    color:#D4AF37;

    letter-spacing:4px;

    font-size:14px;

}

.featured-content h2{

    color:#fff;

    font-size:55px;

    font-family:'Cormorant Garamond',serif;

    margin:20px 0;

}

.featured-content p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:35px;

}

.featured-content a{

    color:#D4AF37;

    text-decoration:none;

    font-weight:600;

}

.featured-image{

    overflow:hidden;

}

.featured-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.featured-service:hover img{

    transform:scale(1.08);

}

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

.horizontal-box{

    margin-bottom:0;

}

.horizontal-box .row{

    align-items:center;

}

/*==========================================
        CTA
==========================================*/

.service-cta{

    margin-top:70px;

}

.service-cta h5{

    color:#ddd;

    font-size:24px;

    margin-bottom:30px;

    font-family:'Cormorant Garamond',serif;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    gap:15px;

    padding:18px 45px;

    border:1px solid #D4AF37;

    border-radius:60px;

    color:#D4AF37;

    text-decoration:none;

    transition:.35s;

}

.cta-btn:hover{

    background:#D4AF37;

    color:#111;

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

}



.service-box::before{

content:"";

position:absolute;

left:0;

top:0;

height:3px;

width:0;

background:#D4AF37;

transition:.5s;

}

.service-box:hover::before{

width:100%;

}



@keyframes glow{

0%{

box-shadow:0 0 0 rgba(212,175,55,0);

}

50%{

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

}

100%{

box-shadow:0 0 0 rgba(212,175,55,0);

}

}

.featured-service{

animation:glow 5s infinite;

}





.services-section .dots{

position:absolute;

width:160px;

height:160px;

background-image:radial-gradient(#D4AF37 1px,transparent 1px);

background-size:18px 18px;

opacity:.15;

}

.dot-left{

left:10%;

bottom:5%;

}

.dot-right{

right:8%;

top:18%;

}





.floating-icon{

position:absolute;

top:10%;
right:8%;

font-size:28px;

color:rgba(212,175,55,.12);

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

/*==========================================
    STUDIO DECOR - camera & lighting accents
==========================================*/

.studio-icon{

position:absolute;
color:rgb(212 175 55 / 47%);
font-size:26px;
z-index:1;
pointer-events:none;
animation:iconDrift 6s ease-in-out infinite;

}

@keyframes iconDrift{

0%,100%{ transform:translateY(0) rotate(0deg); }
50%{ transform:translateY(-16px) rotate(6deg); }

}

.light-beam{

position:absolute;
border-radius:50%;
background:radial-gradient(circle, rgba(212,175,55,.16), transparent 70%);
filter:blur(4px);
pointer-events:none;
z-index:0;
animation:beamPulse 6s ease-in-out infinite;

}

@keyframes beamPulse{

0%,100%{ opacity:.55; transform:scale(1); }
50%{ opacity:1; transform:scale(1.08); }

}

/* About section icon accents */

.about-cam-icon{ top:6%; left:6%; font-size:30px; }
.about-light-icon{ bottom:10%; right:8%; font-size:26px; animation-delay:1.5s; }
.about-beam{ width:260px; height:260px; top:8%; left:2%; }

/* Services section icon accents */

.services-cam-icon{ top:8%; left:4%; }
.services-light-icon{ bottom:12%; right:5%; animation-delay:1s; }
.services-beam{ width:320px; height:320px; bottom:-40px; left:38%; }

/* Gallery section icon accents */

.gallery-cam-icon{ top:14%; right:14%; }
.gallery-light-icon{ bottom:16%; left:10%; animation-delay:2s; }

/* Hero section icon accents */

.hero-cam-icon{ top:14%; right:6%; font-size:24px; color:rgba(212,175,55,.35); }
.hero-beam{ width:340px; height:340px; top:-60px; right:-60px; }






.mouse-glow{

position:fixed;

width:250px;

height:250px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(212,175,55,.12),
transparent 70%);;

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

z-index:0;

}




/*==================================================
                GALLERY SECTION
==================================================*/

.gallery-section{
    position: relative;
    background: #0d0d0d;
    padding: 120px 0;
    overflow: hidden;
}

.gallery-section::before{
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 50%;
    top: -220px;
    left: -220px;
    background:repeating-conic-gradient(rgba(212,175,55,.04) 0deg 6deg, transparent 6deg 24deg);
}

.gallery-section::after{
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 50%;
    bottom: -180px;
    right: -180px;
    background:repeating-conic-gradient(rgba(212,175,55,.04) 0deg 6deg, transparent 6deg 24deg);
}

/* Film strip perforation bars - top & bottom of the photo gallery */

.film-strip{
    position:absolute;
    left:0;
    right:0;
    height:22px;
    background-image:radial-gradient(rgb(212 175 55 / 49%) 3px, transparent 3.5px);
    background-size:30px 22px;
    background-position:center;
    opacity:.45;
    z-index:1;
}

.film-strip.top{ top:0; }
.film-strip.bottom{ bottom:0; }

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

.gallery-heading{
    max-width: 820px;
    margin: auto;
    text-align: center;
    margin-bottom: 70px;
}

.gallery-subtitle{
    color: #D4AF37;
    font-size: 14px;
    letter-spacing: 5px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.gallery-title{
    color: #fff;
    font-size: 62px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: 34px ;
}

.gallery-title span{
    color: #D4AF37;
}

.gallery-heading p{
    color: #b8b8b8;
    font-size: 17px;
    line-height: 1.9;
    margin-top: 20px;
}

/*==============================
        GRID
==============================*/

.gallery-grid{

    display:grid;

    grid-template-columns:
    2fr
    1fr
    1fr;

    grid-auto-rows:220px;

    gap:18px;

}

/*==============================
        ITEMS
==============================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    border:1px solid rgba(212,175,55,.18);

    display:block;

    text-decoration:none;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

/* Featured */

.gallery-item.large{

    grid-row:span 2;

}

/* Wide */

.gallery-item.wide{

    grid-column:span 1;

}

/* Tall */

.gallery-item.tall{

    grid-row:span 2;

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:22px;

    background:linear-gradient(
    rgba(0,0,0,.05),
    rgba(0,0,0,.75)
    );

    transition:.4s;

}

.gallery-overlay span{

    width:28px;

    height:2px;

    background:#D4AF37;

    margin-right:10px;

    margin-bottom:10px;

}

.gallery-overlay h5{

    color:#fff;

    font-size:17px;

    letter-spacing:1px;

    font-weight:600;

    margin:0;

}

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

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover{

    border-color:#D4AF37;

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

}

.gallery-item:hover .gallery-overlay{

    background:linear-gradient(
    rgba(0,0,0,.15),
    rgba(0,0,0,.90)
    );

}

/*==============================
        CTA TILE (fills empty
        grid cell)
==============================*/

.gallery-cta{

    background:linear-gradient(160deg,
    rgba(212,175,55,.16),
    rgba(9,9,9,.97) 65%);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:22px;

    cursor:pointer;

}

.gallery-cta-inner{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:8px;

}

.gallery-cta-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(212,175,55,.45);

    border-radius:50%;

    color:#D4AF37;

    font-size:20px;

    margin-bottom:4px;

    transition:.4s;

}

.gallery-cta-label{

    color:#bfbfbf;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.gallery-cta-title{

    font-family:'Cormorant Garamond',serif;

    color:#fff;

    font-size:clamp(20px,2vw,26px);

    font-weight:600;

    margin:0;

}

.gallery-cta-arrow{

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#D4AF37;

    margin-top:6px;

    transition:.4s;

}

.gallery-item.gallery-cta:hover{

    background:linear-gradient(160deg,
    rgba(212,175,55,.30),
    rgba(9,9,9,.97) 65%);

}

.gallery-item.gallery-cta:hover .gallery-cta-icon{

    background:#D4AF37;

    color:#111;

    border-color:#D4AF37;

    transform:translateY(-3px);

}

.gallery-item.gallery-cta:hover .gallery-cta-arrow{

    background:#D4AF37;

    color:#111;

    border-color:#D4AF37;

    transform:translate(3px,-3px);

}

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

.gallery-bottom{

    margin-top:60px;

    border-top:1px solid rgba(212,175,55,.12);

    padding-top:35px;

}

.gallery-bottom p{

    color:#d6d6d6;

    font-size:18px;

    margin:0;

}

.gallery-bottom span{

    color:#D4AF37;

    font-weight:600;

}





/*=========================================
        GALLERY LIGHTBOX
=========================================*/

.gallery-lightbox{

    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:rgba(10,10,10,.55);

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

    opacity:0;
    visibility:hidden;

    transition:opacity .35s ease, visibility .35s ease;
}

.gallery-lightbox.active{

    opacity:1;
    visibility:visible;

}

.gallery-lightbox .lightbox-inner{

    position:relative;

    max-width:90vw;
    max-height:88vh;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:scale(.9);
    opacity:0;

    transition:transform .4s ease, opacity .4s ease;
}

.gallery-lightbox.active .lightbox-inner{

    transform:scale(1);
    opacity:1;

}

.gallery-lightbox img{

    max-width:100%;
    max-height:88vh;

    display:block;

    border-radius:18px;

    box-shadow:0 25px 70px rgba(0,0,0,.55);

    -o-object-fit:contain;
    object-fit:contain;

}

.lightbox-close{

    position:fixed;

    top:30px;
    right:30px;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.5);

    color:#D4AF37;
    font-size:22px;

    cursor:pointer;

    z-index:100000;

    opacity:0;
    visibility:hidden;
    transform:rotate(-90deg);

    transition:all .3s ease;
}

.lightbox-close.active{

    opacity:1;
    visibility:visible;
    transform:rotate(0deg);

}

.lightbox-close:hover{

    background:#D4AF37;
    color:#0a0a0a;
    transform:rotate(90deg);

}

body.lightbox-open{

    overflow:hidden;

}




/*=========================================
        GALLERY CTA BUTTON
=========================================*/

.visit-btn{

    display:inline-flex;
    align-items:center;
    gap:15px;
    padding:16px 38px;
    border:1px solid #D4AF37;
    border-radius:50px;
    text-decoration:none;
    color:#D4AF37;
    font-weight:600;
    letter-spacing:1px;
    transition:.4s ease;
    overflow:hidden;
    position:relative;

}

.visit-btn::before{

    content:"";
    position:absolute;
    inset:0;
    width:0;
    background:#D4AF37;
    transition:.45s;
    z-index:0;

}

.visit-btn span,
.visit-btn i{

    position:relative;
    z-index:2;

}

.visit-btn:hover{

    color:#111;

}

.visit-btn:hover::before{

    width:100%;

}

.visit-btn i{

    transition:.35s;

}

.visit-btn:hover i{

    transform:translateX(8px);

}

/*=========================================
        IMAGE LABEL ANIMATION
=========================================*/

.gallery-overlay h5{

    transform:translateY(12px);
    opacity:.8;
    transition:.4s;

}

.gallery-item:hover .gallery-overlay h5{

    transform:translateY(0);
    opacity:1;

}

.gallery-overlay span{

    transition:.4s;

}

.gallery-item:hover .gallery-overlay span{

    width:50px;

}

/*=========================================
        GOLD TOP BORDER
=========================================*/

.gallery-item::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:3px;
    background:#D4AF37;
    z-index:5;
    transition:.5s;

}

.gallery-item:hover::before{

    width:100%;

}

/*=========================================
        IMAGE SHINE EFFECT
=========================================*/

.gallery-item::after{

    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:40%;
    height:300%;
    background:rgba(255,255,255,.12);
    transform:rotate(25deg);
    transition:.8s;

}

.gallery-item:hover::after{

    left:140%;

}

/*=========================================
        DECORATIVE DOTS
=========================================*/

.gallery-dots{

    position:absolute;
    width:150px;
    height:150px;
    background-image:
    radial-gradient(#D4AF37 1px,transparent 1px);
    background-size:18px 18px;
    opacity:.15;

}

.dot-left{

    left:4%;
    bottom:10%;

}

.dot-right{

    right:5%;
    top:15%;

}

/*=========================================
        FLOATING CIRCLE
=========================================*/

.circle{

    position:absolute;
    border:1px solid rgb(212 175 55 / 37%);
    border-radius:50%;
    animation:float 8s ease-in-out infinite;

}

.circle::before{

    content:"";
    position:absolute;
    inset:16%;
    border:1px solid rgba(212,175,55,.20);
    border-radius:50%;

}

.circle::after{

    content:"";
    position:absolute;
    inset:38%;
    border:1px dashed rgba(212,175,55,.25);
    border-radius:50%;

}

.circle1{

    width:120px;
    height:120px;
    left:8%;
    top:12%;

}

.circle1::before{

    content:"";
    position:absolute;
    inset:16%;
    border:1px solid rgba(212,175,55,.20);
    border-radius:50%;

}

.circle1::after{

    content:"";
    position:absolute;
    inset:38%;
    border:1px dashed rgba(212,175,55,.25);
    border-radius:50%;

}

.circle2{

    width:180px;
    height:180px;
    right:6%;
    bottom:10%;

}

.circle2::before{

    content:"";
    position:absolute;
    inset:16%;
    border:1px solid rgba(212,175,55,.20);
    border-radius:50%;

}

.circle2::after{

    content:"";
    position:absolute;
    inset:38%;
    border:1px dashed rgba(212,175,55,.25);
    border-radius:50%;

}



@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1200px){

.gallery-grid{

grid-template-columns:1.5fr 1fr 1fr;

}

.gallery-title{

font-size:52px;

}

}

@media(max-width:991px){

.gallery-grid{

grid-template-columns:1fr 1fr;

grid-auto-rows:220px;

}

.gallery-item.large,
.gallery-item.tall,
.gallery-item.wide{

grid-column:auto;
grid-row:auto;

}

.gallery-title{

font-size:42px;

}

.gallery-bottom{

text-align:center;

}

.gallery-bottom .text-lg-end{

margin-top:25px;

}

}

@media(max-width:767px){

.gallery-section{

padding:80px 0;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item{

height:260px;

}

.gallery-title{

font-size:34px;

line-height:1.3;

}

.gallery-heading p{

font-size:15px;

}

.gallery-bottom p{

margin-bottom:20px;

text-align:center;

}

.gallery-bottom{

text-align:center;

}

}

@media(max-width:576px){

.gallery-title{

font-size:28px;

}

.gallery-subtitle{

letter-spacing:3px;

}

.visit-btn{

padding:14px 30px;

font-size:14px;

}

}





/*====================================
        FILTER BAR
====================================*/

.gallery-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
    margin-top: 62px;

}

.filter-btn{

    padding:12px 28px;
    border:1px solid rgba(212,175,55,.25);
    background:transparent;
    color:#bfbfbf;
    border-radius:40px;
    cursor:pointer;
    transition:.35s;
    font-size:17px;
    font-weight:500;

}

.filter-btn:hover{

    background:#D4AF37;
    color:#111;

}

.filter-btn.active{

    background:#D4AF37;
    color:#111;
    border-color:#D4AF37;

}


.gallery-item{

    transition:
    opacity .35s ease,
    transform .35s ease,
    box-shadow .35s ease;

}











/*==================================================
            SERVICES & FACILITIES
==================================================*/

.facilities-section{
    position: relative;
    padding: 120px 0;
    background: #0b0b0b;
    overflow: hidden;
}

.facilities-section::before{
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 50%;
    top: -250px;
    left: -220px;
}

.facilities-section::after{
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 50%;
    right: -180px;
    bottom: -180px;
}

/*============================
        LEFT CONTENT
============================*/

.section-tag{

    display:inline-block;
    color:#D4AF37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;

}

.section-title{

    color:#fff;
    font-size:54px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:25px;
    margin-top: 34px;

}

.section-title span{

    color:#D4AF37;

}

.section-text{

    color:#bdbdbd;
    font-size:17px;
    line-height:1.9;
    margin-bottom:40px;

}

/*============================
        FEATURE LIST
============================*/

.facility-list{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:45px;

}

.facility-item{

    display:flex;
    align-items:center;
    background:#151515;
    border:1px solid rgba(212,175,55,.12);
    border-radius:14px;
    padding:16px 20px;
    transition:.35s ease;

}

.facility-item:hover{

    transform:translateY(-6px);
    border-color:#D4AF37;
    box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.facility-item i{

    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    color:#D4AF37;
    font-size:22px;
    margin-right:16px;
    flex-shrink:0;

}

.facility-item span{

    color:#f5f5f5;
    font-size:15px;
    font-weight:500;
    line-height:1.5;

}

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

.facility-btn{

    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 36px;
    border:1px solid #D4AF37;
    border-radius:50px;
    color:#D4AF37;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
    position:relative;
    overflow:hidden;

}

.facility-btn::before{

    content:"";
    position:absolute;
    inset:0;
    width:0;
    background:#D4AF37;
    transition:.4s;
    z-index:0;

}

.facility-btn::after{
background-color: #c32020;
}

.facility-btn span,
.facility-btn i{

    position:relative;
    z-index:2;

}

.gallery-bottom span:hover{
    color: #000000;
}

.facility-btn:hover::before{

    width:100%;

}

.facility-btn:hover i{

    transform:translateX(6px);
    color: #000000;

}

.facility-btn i{

    transition:.3s;

}

/*============================
        RIGHT GRID
============================*/

.facility-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}

.facility-card{

    background:#151515;
    border:1px solid rgba(212,175,55,.12);
    border-radius:20px;
    padding:40px 30px;
    transition:.35s;
    height:100%;
    position:relative;
    overflow:hidden;

}

.facility-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:#D4AF37;
    transform:scaleX(0);
    transition:.4s;

}

.facility-card:hover::before{

    transform:scaleX(1);

}

.facility-card:hover{

    transform:translateY(-10px);
    border-color:#D4AF37;
    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

.facility-card i{

    width:75px;
    height:75px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(212,175,55,.08);
    color:#D4AF37;
    font-size:32px;
    margin-bottom:25px;

}

.facility-card h4{

    color:#fff;
    font-size:24px;
    margin-bottom:15px;

}

.facility-card p{

    color:#bfbfbf;
    line-height:1.8;
    margin:0;

}



/*=====================================
    SERVICES & PRICING
======================================*/

.pricing-services-section{

    padding:120px 0;
    background:#090909;
    position:relative;
    overflow:hidden;

}

.pricing-heading{

    max-width:760px;
    margin:0 auto 60px;

}

.pricing-tabs{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:45px;
    margin-top: 62px;

}

.pricing-tab{

    background:#171717;
    color:#bfbfbf;

    border:none;

    padding:14px 28px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    cursor:pointer;

    transition:.35s;

    position:relative;

}

.pricing-tab:hover{

    color:#fff;

}

.pricing-tab.active{

    background:#D4AF37;

    color:#111;

}

.pricing-content{

    background:#121212;

    border:1px solid rgba(212,175,55,.18);

    border-radius:18px;

    padding:40px;

    min-height:500px;

    position:relative;

    overflow:hidden;

}

.pricing-content::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#D4AF37;

}

.pricing-category{

    display:flex;

    align-items:center;

    margin-bottom:35px;

}

.pricing-category i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:rgba(212,175,55,.08);

    color:#D4AF37;

    font-size:24px;

    margin-right:18px;

}

.pricing-category h3{

    color:#fff;

    margin:0;

    font-size:30px;

}

.price-list{

    margin-top:20px;

}

.price-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

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

    transition:.3s;

}

.price-item:hover{

    padding-left:15px;

    border-left:4px solid #D4AF37;

    background:rgba(212,175,55,.03);

}

.price-left h5{

    color:#fff;

    margin-bottom:6px;

    font-size:18px;

}

.price-left span{

    color:#8f8f8f;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:12px;

}

.price-right{

    color:#D4AF37;

    font-size:28px;

    font-weight:700;

}

.pricing-note{

    margin-top:30px;

    color:#7f7f7f;

    font-size:13px;

    font-style:italic;

}

.price-table-wrap{

    margin-top:10px;

    overflow-x:auto;

}

.price-table{

    min-width:480px;

}

.price-table-header{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    padding:0 0 18px;

    border-bottom:1px solid rgba(212,175,55,.25);

}

.price-table-header span{

    color:#D4AF37;

    font-size:12px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.price-table-header span:not(:first-child){

    text-align:center;

}

.price-table-row{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    align-items:center;

    padding:24px 0;

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

    transition:.3s;

}

.price-table-row:last-child{

    border-bottom:none;

}

.price-table-row:hover{

    padding-left:15px;

    border-left:4px solid #D4AF37;

    background:rgba(212,175,55,.03);

}

.price-table-row .room-name{

    color:#7FCBEB;

    font-weight:600;

    font-size:17px;

}

.price-table-row .price-val{

    color:#D4AF37;

    font-weight:700;

    font-size:20px;

    text-align:center;

}

.price-desc{

    color:#8f8f8f;

    font-size:13.5px;

    line-height:1.6;

    margin:4px 0 8px;

    max-width:520px;

}

.price-highlight-grid{

    display:grid;

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

    gap:24px;

    margin-top:10px;

}

.price-highlight-card{

    background:rgba(212,175,55,.05);

    border:1px solid rgba(212,175,55,.2);

    border-radius:14px;

    padding:40px 20px;

    text-align:center;

    transition:.3s;

}

.price-highlight-card:hover{

    background:rgba(212,175,55,.09);

    border-color:rgba(212,175,55,.4);

    transform:translateY(-4px);

}

.price-highlight-value{

    color:#D4AF37;

    font-size:42px;

    font-weight:700;

    margin-bottom:12px;

}

.price-highlight-value span{

    color:#8f8f8f;

    font-size:15px;

    font-weight:500;

    margin-left:4px;

}

.price-highlight-card h5{

    color:#fff;

    font-size:16px;

    font-weight:500;

    margin:0;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.pricing-disclaimer{

    max-width:820px;

    margin:40px auto 0;

    text-align:center;

}

.pricing-disclaimer p{

    color:#7f7f7f;

    font-size:13px;

    font-style:italic;

    line-height:1.7;

    margin-bottom:20px;

}

.pricing-contact{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

}

.pricing-contact a{

    color:#d9d9d9;

    font-size:14px;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.pricing-contact a i{

    color:#D4AF37;

}

.pricing-contact a:hover{

    color:#D4AF37;

}









/*STUDIO VIDEO SECTION*/

.studio-video-section{

    padding:clamp(70px,10vw,120px) 0;
    background:
        radial-gradient(circle at 14% 18%,rgba(212,175,55,.15),transparent 30%),
        radial-gradient(circle at 86% 82%,rgba(255,255,255,.07),transparent 26%),
        radial-gradient(circle at 50% 100%,rgba(212,175,55,.08),transparent 40%),
        linear-gradient(135deg,#070707,#111 48%,#080808);
    position:relative;
    overflow:hidden;

}

.studio-video-section::before,
.studio-video-section::after{

    content:"";
    position:absolute;
    pointer-events:none;

}

.studio-video-section::before{

    inset:30px;
    border:1px solid rgba(212,175,55,.08);
    border-radius:38px;

}

.studio-video-section::after{

    left:50%;
    top:0;
    width:min(900px,90%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(212,175,55,.75),transparent);

}

.studio-video-section .container{

    position:relative;
    z-index:1;

}

/* floating cinematic particles */
.studio-video-section .spark{

    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#f3d977;
    box-shadow:0 0 8px 2px rgba(243,217,119,.7);
    opacity:0;
    pointer-events:none;
    animation:sparkFloat 6s ease-in-out infinite;

}

.studio-video-section .spark:nth-child(1){ top:12%; left:6%;  animation-delay:.2s; }
.studio-video-section .spark:nth-child(2){ top:70%; left:10%; animation-delay:1.6s; }
.studio-video-section .spark:nth-child(3){ top:20%; left:92%; animation-delay:.9s; }
.studio-video-section .spark:nth-child(4){ top:80%; left:90%; animation-delay:2.4s; }
.studio-video-section .spark:nth-child(5){ top:48%; left:2%;  animation-delay:3.1s; }

@keyframes sparkFloat{

    0%{   opacity:0; transform:translateY(0) scale(.6); }
    15%{  opacity:1; }
    50%{  opacity:.7; transform:translateY(-22px) scale(1); }
    85%{  opacity:0; transform:translateY(-40px) scale(.6); }
    100%{ opacity:0; transform:translateY(-40px) scale(.6); }

}

/* "recording" pulse dot beside the sub-title */
.studio-video-section .sub-title{

    display:inline-flex;
    align-items:center;
    gap:8px;

}

.studio-video-section .rec-dot{

    width:7px;
    height:7px;
    border-radius:50%;
    background:#f3d977;
    box-shadow:0 0 0 0 rgba(243,217,119,.7);
    animation:recPulse 1.8s ease-out infinite;

}

@keyframes recPulse{

    0%{   box-shadow:0 0 0 0 rgba(243,217,119,.55); }
    70%{  box-shadow:0 0 0 9px rgba(243,217,119,0); }
    100%{ box-shadow:0 0 0 0 rgba(243,217,119,0); }

}

.studio-video-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(20px,3vw,32px);
    margin-top:70px;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    align-items:start;

}

.studio-video-card{

    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;

}

.video-card-index{

    position:absolute;
    top:16px;
    left:16px;
    z-index:4;
    font-family:'Cormorant Garamond',serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    color:#fff;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(212,175,55,.4);
    padding:4px 12px;
    border-radius:999px;
    backdrop-filter:blur(4px);
    transition:border-color .35s ease,box-shadow .35s ease;

}

.studio-video-card:hover .video-card-index{

    border-color:rgba(212,175,55,.85);
    box-shadow:0 0 16px rgba(212,175,55,.3);

}

/* rotating gold glow ring wrapping the frame */
.studio-video-frame-wrap{

    position:relative;
    border-radius:24px;

}

/* .studio-video-frame-wrap::before{

    content:"";
    position:absolute;
    inset:-2px;
    z-index:0;
    border-radius:24px;
    background:conic-gradient(from 0deg,transparent 0%,rgba(247,216,109,.95) 8%,transparent 24%,transparent 76%,rgba(247,216,109,.55) 92%,transparent 100%);
    opacity:0;
    filter:blur(2px);
    transition:opacity .5s ease;
    animation:spinGlow 3.4s linear infinite;

} */

.studio-video-card:hover .studio-video-frame-wrap::before{

    opacity:1;

}

@keyframes spinGlow{

    to{ transform:rotate(360deg); }

}

.studio-video-frame{

    position:relative;
    z-index:1;
    overflow:hidden;
    border-radius:22px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),
        #0c0c0c;
    border:1px solid rgba(212,175,55,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.4);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),
               border-color .35s ease,
               box-shadow .45s ease;

}

.studio-video-card:hover .studio-video-frame{

    transform:translateY(-10px) scale(1.015);
    border-color:rgba(212,175,55,.55);
    box-shadow:0 30px 64px rgba(0,0,0,.55),0 0 34px rgba(212,175,55,.2);

}

/* corner frame accents - cinematic viewfinder look */
.studio-video-frame i.corner{

    position:absolute;
    width:22px;
    height:22px;
    z-index:3;
    border-color:rgba(255,255,255,.85);
    opacity:0;
    transition:opacity .4s ease,transform .4s ease;
    pointer-events:none;

}

.studio-video-frame .corner-tl{ top:12px; left:12px; border-top:2px solid; border-left:2px solid; transform:translate(-6px,-6px); }
.studio-video-frame .corner-br{ bottom:12px; right:12px; border-bottom:2px solid; border-right:2px solid; transform:translate(6px,6px); }

.studio-video-card:hover .corner-tl,
.studio-video-card:hover .corner-br{

    opacity:.9;
    transform:translate(0,0);

}

.studio-video-frame::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.75) 100%);
    transition:opacity .4s ease;

}

.studio-video-frame.is-playing::after{

    opacity:0;

}

.studio-video{

    position:relative;
    width:100%;
    aspect-ratio:9/16;
    object-fit:cover;
    display:block;
    background:#000;
    cursor:pointer;
    transition:transform .6s ease;

}

.studio-video-card:hover .studio-video{

    transform:scale(1.04);
    animation-play-state:paused;

}

/* Stop the ambient cinematic drift once the real video is actually playing */
.studio-video-frame.is-playing .studio-video{

    animation:none;

}

.video-play-btn{

    position:absolute;
    left:50%;
    top:50%;
    z-index:3;
    transform:translate(-50%,-50%);
    width:64px;
    height:64px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;
    background:linear-gradient(135deg,#f7d86d,#d4af37);
    color:#111;
    font-size:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.35s ease;
    box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 10px rgba(212,175,55,.14);

}

.video-play-btn i{

    position:relative;
    left:2px;
    transition:.2s ease;

}

.video-play-btn.is-pause i{

    left:0;

}

.studio-video-frame:hover .video-play-btn{

    transform:translate(-50%,-50%) scale(1.1);
    box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 16px rgba(212,175,55,.2);

}

.studio-video-frame.is-playing .video-play-btn{

    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(.8);

}

.studio-video-frame.is-playing:hover .video-play-btn{

    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);

}

/* quick "go to inner page" corner shortcut on the thumbnail itself */
.frame-goto-link{

    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    text-decoration:none;
    font-size:15px;
    background:linear-gradient(135deg,#f7d86d,#d4af37);
    box-shadow:0 10px 22px rgba(0,0,0,.4);
    opacity:0;
    transform:translateY(-8px) scale(.75);
    transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease;

}

.frame-goto-link:hover{

    box-shadow:0 12px 26px rgba(212,175,55,.5);
    transform:translateY(0) scale(1.08);

}

.studio-video-frame:hover .frame-goto-link,
.frame-goto-link:focus-visible{

    opacity:1;
    transform:translateY(0) scale(1);

}

.video-card-label{

    text-align:center;
    color:#f0f0f0;
    font-family:'Cormorant Garamond',serif;
    font-size:19px;
    font-weight:700;
    letter-spacing:.4px;
    margin:0;

}

.video-features{

    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:50px;
    flex-wrap:wrap;

}

.video-features span{

    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#f3d977;
    font-weight:600;
    letter-spacing:.5px;
    padding:12px 22px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;

}

.video-features span i{

    font-size:16px;
    color:#f7d86d;

}

.video-features span:hover{

    transform:translateY(-4px);
    border-color:rgba(212,175,55,.6);
    background:rgba(212,175,55,.1);
    box-shadow:0 14px 28px rgba(212,175,55,.16),inset 0 1px 0 rgba(255,255,255,.08);

}


.custom-para-class{
    color: #bcbcbc;
    line-height: 1.9;
    max-width: 700px;
    margin: 25px auto 0;
    font-size: 18px;
}



/*=========================================================
    CINEMATIC SCROLL ANIMATIONS (site-wide)
=========================================================*/

/* Respect users who prefer reduced motion */
@media(prefers-reduced-motion: reduce){

    .whatsapp-float,
    .whatsapp-float::before,
    .whatsapp-float__halo,
    .whatsapp-float__spark{
        animation:none !important;
    }

    .light-beam{
        animation:none !important;
    }

    .hero-video,
    .about-banner-video,
    .studio-video{
        animation:none !important;
    }

    .title-divider span,
    .title-divider i,
    .cube-piece{
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }

    .cube-reveal{
        display:none !important;
    }

}

/* ---------- Title divider "draw-in" reveal (used in every section heading) ---------- */

.title-divider span{

    transform:scaleX(0);
    opacity:0;
    transition:transform .7s cubic-bezier(.16,.84,.44,1), opacity .5s ease;

}

.title-divider span:first-child{ transform-origin:right center; }
.title-divider span:last-child{ transform-origin:left center; }

.title-divider i{

    opacity:0;
    transform:scale(.25) rotate(-120deg);
    transition:transform .55s cubic-bezier(.34,1.56,.64,1) .45s, opacity .4s ease .45s;

}

.title-divider.in-view span{
    transform:scaleX(1);
    opacity:1;
}

.title-divider.in-view i{
    opacity:1;
    transform:scale(1) rotate(0deg);
}

/* ---------- Cinematic slow "Ken Burns" drift on hero / banner / showcase video ---------- */

@keyframes cinematicDrift{

    0%{ transform:scale(1) translate3d(0,0,0); }
    50%{ transform:scale(1.07) translate3d(-1%,-1%,0); }
    100%{ transform:scale(1) translate3d(0,0,0); }

}

.hero-video{
    animation:cinematicDrift 22s ease-in-out infinite;
}

.about-banner-video{
    animation:cinematicDrift 18s ease-in-out infinite;
}

.about-banner:hover .about-banner-video{
    animation-play-state:paused;
}

.studio-video{
    animation:cinematicDrift 20s ease-in-out infinite;
}

/* ---------- Section entrance polish (adds a touch of blur-focus to AOS fades) ---------- */

[data-aos="fade-up"],
[data-aos="fade-down"],
[data-aos="fade-down-right"],
[data-aos="fade-down-left"],
[data-aos="zoom-in"]{
    filter:blur(6px);
    transition-property:opacity, transform, filter !important;
}

[data-aos].aos-animate{
    filter:blur(0);
}

/*=========================================================
    ABOUT BANNER — CUBE ASSEMBLE VIDEO REVEAL
=========================================================*/

.about-banner{
    perspective:1200px;
}

.cube-reveal{

    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    pointer-events:none;

}

.cube-piece{

    position:relative;
    background-repeat:no-repeat;
    box-shadow:inset 0 0 0 1px rgba(212,175,55,.22);
    opacity:0;
    transform:
        translate3d(var(--tx,0), var(--ty,0), 0)
        scale(.4)
        rotate(var(--rot,0deg));
    transition:
        transform .75s cubic-bezier(.16,.84,.44,1),
        opacity .5s ease;
    transition-delay:calc(var(--d,0) * 90ms);
    will-change:transform,opacity;

}

.cube-reveal.in-view .cube-piece{

    opacity:1;
    transform:translate3d(0,0,0) scale(1) rotate(0deg);

}

.cube-reveal.assembled-out{

    transition:opacity .9s ease;
    opacity:0;

}

.cube-reveal.assembled-out .cube-piece{
    transition:none;
}

.banner-overlay{
    z-index:3;
}