/* =========================
   RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#ffffff;
overflow-x:hidden;
}
.hero-title,
.hero-title *,
.hero-title .line{
font-family:'Cinzel',serif !important;
}

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

.hero-slider{
position:relative;
height:100vh;
overflow:hidden;
background:#08111f;
}

/* =========================
   SLIDES
========================= */

.slide{
position:absolute;
inset:0;

opacity:0;
visibility:hidden;

transition:
opacity 1.4s ease,
visibility 1.4s ease;

overflow:hidden;
z-index:1;
}

.slide.active{
opacity:1;
visibility:visible;
z-index:5;
}

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

.slide-video{
position:absolute;
inset:0;
overflow:hidden;
 z-index:1;
}

.slide-video video{
width:100%;
height:100%;
object-fit:cover;

transform:scale(1.15);

filter:
brightness(.42)
contrast(1.08)
saturate(1.05);

transition:
transform 8s cubic-bezier(.23,1,.32,1);
}

.slide.active .slide-video video{
animation:
premiumZoom 8s ease forwards;
}

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

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(3,8,18,.96) 0%,
rgba(3,8,18,.78) 42%,
rgba(3,8,18,.35) 100%
);

z-index:2;
}

/* GOLD GLOW */

.overlay::before{
content:"";

position:absolute;

width:700px;
height:700px;

left:-200px;
top:50%;

transform:translateY(-50%);

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

filter:blur(30px);

animation:glowMove 8s ease-in-out infinite;
}

@keyframes glowMove{

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

50%{
transform:
translateY(-50%)
translateX(60px);
}

}

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

.hero-content{
position:relative;
z-index:10;

width:min(1400px,90%);
margin:auto;

height:100%;

display:flex;
align-items:center;
}

.hero-text{
max-width: 1400px;
width: 100%;

}

/* =========================
   TAG
========================= */

.tag{
display:inline-flex;
align-items:center;
gap:10px;

padding:12px 22px;

border:1px solid rgba(212,175,55,.4);
border-radius:50px;

font-size:11px;
letter-spacing:3px;
text-transform:uppercase;

color:#d4af37;

background:rgba(255,255,255,.04);
backdrop-filter:blur(14px);

position:relative;
overflow:hidden;
margin-bottom: 20px;
opacity:0;
transform:translateY(40px);

/* ONLY ONE CLEAN ANIMATION */
animation: tagEntry .8s forwards, tagPulse 2.2s ease-in-out infinite;
}

/* ENTRY */
@keyframes tagEntry{
to{
opacity:1;
transform:translateY(0);
}
}

/* 🔥 STRONG VISIBLE PULSE (NO CONFUSION) */
@keyframes tagPulse{
0%,100%{
box-shadow:0 0 0 rgba(212,175,55,0);
border-color:rgba(212,175,55,.4);
transform:translateY(0);
}

50%{
box-shadow:
0 0 25px rgba(212,175,55,.55),
0 0 60px rgba(212,175,55,.25);

border-color:rgba(255,220,120,.9);
transform:translateY(-4px) scale(1.03);
}
}

/* SHIMMER (KEEP LIGHT ONLY) */
.tag::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:50%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);

transform:skewX(-20deg);
animation: shimmer 3.8s infinite;
}

@keyframes shimmer{
100%{
left:160%;
}
}

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

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

.hero-title{
   display:flex;
   flex-direction:column;
   font-family:'Cinzel',serif !important;

   max-width:100%;
   font-size:clamp(90px,6vw,140px);

   line-height:0.95;
   font-weight:900;
   letter-spacing:-1px;
   margin-bottom:10px;
   text-transform:uppercase;

   opacity:0;

   transform:
   translateY(-260px)
   scale(.4)
   rotateX(80deg);

   filter:blur(16px);
   transform-origin:top;
}
.slide:nth-child(3) .hero-title{
    font-size:clamp(70px,4.5vw,95px);
  
}


.slide.active .hero-title{
animation:
headingDrop 1.9s
cubic-bezier(.23,1,.32,1)
forwards;
}


/* LINE */

.hero-title .line{
display:block;
    white-space:normal;
    padding-right:0;
    word-wrap:break-word;
background:
linear-gradient(
90deg,
#d4af37 0%,
#fff6ca 20%,
#173d6d 38%,
#d4af37 58%,
#fff4bc 80%,
#173d6d 100%
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 40px rgba(212,175,55,.18);

animation:
goldFlow 7s linear infinite,
titlePulse 3.5s ease-in-out infinite;
}

@keyframes headingDrop{

0%{
opacity:0;

transform:
translateY(-260px)
scale(.4)
rotateX(80deg);

filter:
blur(16px);
}

55%{
opacity:1;

transform:
translateY(35px)
scale(1.05)
rotateX(0);

filter:
blur(0);
}

100%{
opacity:1;

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

filter:
blur(0);
}

}

@keyframes titlePulse{

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

50%{
transform:scale(1.03);
}

}

@keyframes goldFlow{

100%{
background-position:300% center;
}

}

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

.hero-desc{
max-width:900px;

font-size:16px;
line-height:1.2;

font-weight:300;

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

margin-bottom:13px;

opacity:0;

transform:
translateY(60px);
}

.slide.active .hero-desc{
animation:
descReveal 1s .9s forwards;
}

@keyframes descReveal{

to{
opacity:1;
transform:translateY(0);
}

}

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

.btn{
position:relative;

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

padding:20px 38px;

border-radius:10px;

overflow:hidden;

text-decoration:none;

font-size:12px;
font-weight:800;

letter-spacing:3px;
text-transform:uppercase;

color:#08111f;

background:
linear-gradient(
135deg,
#d4af37,
#fff0b3,
#c7961d
);

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

transition:
all .45s ease;

opacity:0;

transform:
translateY(50px);
}

.slide.active .btn{
animation:
btnReveal 1s 1.2s forwards;
}

.btn::before{
content:"";

position:absolute;

left:-120%;
top:0;

width:60%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);

transform:skewX(-25deg);

transition:.9s ease;
}

.btn:hover::before{
left:180%;
}

.btn:hover{
transform:
translateY(-8px)
scale(1.03);
}

/* =========================
   COMPANY CARD
========================= */

.floating-company-card{
position:absolute;

right:3%;
bottom:8%;

width:250px;

padding:18px;

border-radius:26px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(20px);

overflow:hidden;

z-index:20;

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

animation:
cardFloat 5s ease-in-out infinite;
}

.floating-company-card::before{
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(212,175,55,.12),
transparent 50%
);
}

.company-line{
position:absolute;
left:0;
top:0;

width:2px;
height:100%;

background:
linear-gradient(
180deg,
#d4af37,
transparent,
#d4af37
);
}

.company-icon{
width:50px;
height:50px;

border-radius:16px;

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

margin-bottom:14px;

background:
linear-gradient(
135deg,
#d4af37,
#ffe8a8
);

color:#08111f;

font-size:18px;
}

.company-content h4{
font-family:'Cinzel',serif;

font-size:21px;
line-height:1.2;

margin-bottom:8px;

background:
linear-gradient(
90deg,
#d4af37,
#fff2bc,
#c7961d
);

background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:
goldFlow 5s linear infinite;
}

.company-content p{
font-size:11px;
line-height:1.8;

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

/* =========================
   ARROWS
========================= */

.slider-arrow{
position:absolute;
top:50%;

transform:translateY(-50%);

width:60px;
height:60px;

border:none;

cursor:pointer;

z-index:50;

border-radius:50%;

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

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

backdrop-filter:blur(16px);

transition:
all .45s ease;
}

.slider-arrow:hover{
transform:
translateY(-50%)
scale(1.1)
rotate(8deg);

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

.slider-arrow i{
font-size:14px;
color:#fff;
}

.arrow-left{
left:24px;
}

.arrow-right{
right:24px;
}

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

.slider-controls{
position:absolute;

left:50%;
bottom:40px;

transform:translateX(-50%);

display:flex;
align-items:center;
gap:12px;

z-index:40;
}

.dot{
width:60px;
height:4px;

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

overflow:hidden;

cursor:pointer;

position:relative;
}

.dot::before{
content:"";

position:absolute;
left:0;
top:0;

width:0%;
height:100%;

background:
linear-gradient(
90deg,
#d4af37,
#fff2bc
);

transition:.6s ease;
}

.dot.active::before{
width:100%;
}

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

@keyframes titleReveal{

0%{
opacity:0;

transform:
translateY(120px)
rotateX(-50deg)
scale(.85);

filter:blur(12px);
}

100%{
opacity:1;

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

filter:blur(0);
}

}

@keyframes descReveal{

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes btnReveal{

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes tagReveal{

to{
opacity:1;

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

}

@keyframes cardFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

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

@media (max-width: 1200px){

    .floating-company-card{
        width:230px;
        right:2%;
        bottom:7%;
    }

    .hero-title{
        font-size:clamp(70px,6vw,110px);
    }

    .slide:nth-child(3) .hero-title{
        font-size:clamp(55px,4.5vw,85px);
    }
}

@media (max-width: 992px){

    .floating-company-card{
        display:none;
    }

    .hero-title{
        font-size:62px;
        line-height:1.05;
    }

    .slide:nth-child(3) .hero-title{
        font-size:50px;
    }

    .hero-desc{
        font-size:16px;
    }
}

@media (max-width: 768px){

    .hero-content{
        width:90%;
    }

    .hero-title{
        font-size:clamp(32px,8vw,46px);
        line-height:1.05;
        letter-spacing:-1px;
    }

    .slide:nth-child(3) .hero-title{
        font-size: clamp(24px, 6vw, 42px);
        line-height: 1.1;
    }

    .hero-title .line{
        white-space:normal;
        word-break:break-word;
        padding-right:0;
    }

    .hero-desc{
        font-size:15px;
        line-height:1.7;
    }

    .tag{
        font-size:9px;
        letter-spacing:2px;
        padding:10px 16px;
    }

    .btn{
        padding:15px 24px;
        font-size:10px;
    }

    .slider-arrow{
        width:48px;
        height:48px;
    }

    .arrow-left{
        left:12px;
    }

    .arrow-right{
        right:12px;
    }

    .dot{
        width:42px;
    }
}

@media (max-width: 500px){

    .hero-title{
        font-size:38px;
        line-height:1.05;
    }

    .slide:nth-child(3) .hero-title{
        font-size:30px;
    }

    .hero-desc{
        font-size:14px;
        line-height:1.6;
    }

    .slider-controls{
        bottom:25px;
    }

    .btn{
        padding:14px 22px;
    }
}











body{
font-family:'Outfit',sans-serif;
background:#f6f7fb;
color:#0f172a;
overflow-x:hidden;
}

/* =====================================================
   ABOUT SECTION - PART 1
   Layout + Image Side + Effects
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Cinzel:wght@500;600;700;800;900&display=swap');

.about-section{
position:relative;
padding:80px 8%;
overflow:hidden;



background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fafc 100%
);

}

.about-section::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(212,175,55,.5),
transparent
);

}

.about-container{
max-width:1400px;
margin:auto;

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

gap:100px;

position:relative;
z-index:2;
}

/* =========================
   BACKGROUND ORBS
========================= */

.about-bg-orb{
position:absolute;
border-radius:50%;
filter:blur(90px);
pointer-events:none;
}

.about-orb-1{
width:500px;
height:500px;

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

left:-180px;
top:-120px;

animation:aboutOrbFloat1 10s ease-in-out infinite;
}

.about-orb-2{
width:420px;
height:420px;

background:
radial-gradient(
circle,
rgba(79,70,229,.14),
transparent 70%
);

right:-140px;
bottom:-100px;

animation:aboutOrbFloat2 12s ease-in-out infinite;
}

@keyframes aboutOrbFloat1{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(35px);
}

}

@keyframes aboutOrbFloat2{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-35px);
}

}

/* =========================
   LEFT SIDE
========================= */

.about-left{
flex:1;
display:flex;
justify-content:center;
position:relative;
}

.about-image-wrap{

position:relative;

width:460px;
height:460px;

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

perspective:1500px;

}

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

.about-frame-glow{

position:absolute;

inset:-70px;

background:

radial-gradient(
circle at 30% 30%,
rgba(212,175,55,.25),
transparent 60%
),

radial-gradient(
circle at 70% 70%,
rgba(79,70,229,.18),
transparent 60%
);

filter:blur(55px);

animation:aboutGlowPulse 5s ease-in-out infinite;

z-index:0;

}

@keyframes aboutGlowPulse{

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

50%{
transform:scale(1.08);
}

}

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

.about-image-box{

position:relative;

width:100%;
height:100%;

overflow:hidden;

z-index:3;

border-radius:
58% 42% 62% 38% /
42% 58% 42% 58%;

background:#fff;

transform-style:preserve-3d;

box-shadow:

0 45px 100px rgba(0,0,0,.45),

0 0 0 1px rgba(255,255,255,.05),

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

animation:aboutFloatImage 7s ease-in-out infinite;

}

/* animated border */

.about-image-box::before{

content:"";

position:absolute;

inset:-10px;

border-radius:inherit;

padding:2px;

background:

linear-gradient(
135deg,
#d4af37,
#fff3b0,
#4f46e5,
#d4af37
);

background-size:300% 300%;

-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

animation:aboutBorderFlow 8s linear infinite;

z-index:5;

}

/* inner glass */

.about-image-box::after{

content:"";

position:absolute;

inset:12px;

border-radius:inherit;

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

z-index:4;

pointer-events:none;

}

.about-image-box img{

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.12);

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

filter:
contrast(1.05)
saturate(1.05);

}

@keyframes aboutFloatImage{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

}

@keyframes aboutImageZoom{

0%,100%{
transform:scale(1.12);
}

50%{
transform:scale(1.2);
}

}

@keyframes aboutBorderFlow{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

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

.about-image-shine{

position:absolute;

top:-120%;
left:-70%;

width:45%;
height:260%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:rotate(18deg);

animation:aboutShine 5s linear infinite;

z-index:6;

pointer-events:none;

}

@keyframes aboutShine{

0%{
left:-80%;
}

100%{
left:160%;
}

}

/* =========================
   PARTICLES
========================= */

.about-particle{

position:absolute;

border-radius:50%;

background:
linear-gradient(
135deg,
#d4af37,
#fff3b0
);

box-shadow:
0 0 15px rgba(212,175,55,.7);

z-index:10;

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

}

.about-p1{
width:10px;
height:10px;
top:25px;
left:35px;
}

.about-p2{
width:7px;
height:7px;
right:30px;
top:80px;
animation-delay:1s;
}

.about-p3{
width:8px;
height:8px;
bottom:35px;
left:40px;
animation-delay:2s;
}

.about-p4{
width:6px;
height:6px;
right:40px;
bottom:70px;
animation-delay:3s;
}

@keyframes aboutParticleFloat{

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

50%{
transform:translateY(-18px) scale(1.4);
}

}

/* =========================
   BADGES
========================= */

.about-badge{

position:absolute;

left:-15px;
bottom:25px;

padding:12px 18px;

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

backdrop-filter:blur(18px);

border-radius:999px;

font-size:12px;
font-weight:700;

color:#0f172a;

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

box-shadow:
0 15px 40px rgba(0,0,0,.15);

z-index:20;

animation:aboutBadgeFloat 4s ease-in-out infinite;

}

.about-side-badge{

position:absolute;

top:70px;
right:-40px;

padding:12px 16px;

background:#ffffff;

color:#0f172a;

font-size:12px;
font-weight:700;

border-radius:14px;

box-shadow:
0 20px 45px rgba(0,0,0,.18);

z-index:20;

animation:aboutBadgeFloat 5s ease-in-out infinite;

}

.about-side-badge-two{

position:absolute;

right:-55px;
bottom:95px;

padding:12px 16px;

background:#0f172a;

color:#fff;

font-size:12px;
font-weight:700;

border-radius:14px;

box-shadow:
0 20px 45px rgba(0,0,0,.28);

z-index:20;

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

}

@keyframes aboutBadgeFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

/* =====================================================
   ABOUT SECTION - PART 2
   Content Side + Heading + Button + Responsive
===================================================== */

/* =========================
   RIGHT SIDE
========================= */

.about-right{
flex:1.1;
position:relative;
z-index:2;
}


/* ====================================
   PREMIUM ABOUT TAG
==================================== */

.about-tag{

    position:relative;

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

    margin-bottom:28px;

    opacity:0;
    transform:translateY(30px);

    overflow:visible;

}

/* =========================
   LEFT ANIMATED LINE
========================= */

.about-tag span{

    position:relative;

    width:70px;
    height:2px;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    rgba(212,175,55,.15),
    #d4af37,
    #fff3b0,
    #4f46e5,
    rgba(79,70,229,.15)
    );

    background-size:250% auto;

    animation:aboutLineMove 4s linear infinite;

}

/* MOVING DOT */

.about-tag span::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ffffff;

    transform:translateY(-50%);

    box-shadow:
    0 0 0 4px rgba(212,175,55,.15),
    0 0 12px rgba(212,175,55,.9),
    0 0 25px rgba(212,175,55,.4);

    animation:aboutDotMove 3s ease-in-out infinite;

}

/* GLOW AROUND DOT */

.about-tag span::after{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:18px;
    height:18px;

    border-radius:50%;

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

    filter:blur(8px);

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

    animation:aboutGlowMove 3s ease-in-out infinite;

}

/* =========================
   TEXT
========================= */

.about-tag b{

    position:relative;

    display:inline-block;

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

    letter-spacing:5px;

    text-transform:uppercase;

    background:
    linear-gradient(
    90deg,
    #d4af37 0%,
    #fff5b7 20%,
    #ffffff 40%,
    #d4af37 60%,
    #4f46e5 80%,
    #d4af37 100%
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:aboutTagGradient 5s linear infinite;

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

}

/* MOVING SHINE */

.about-tag b::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
    );

    transform:skewX(-25deg);

    animation:aboutTextShine 4s linear infinite;

}

/* UNDERLINE */

.about-tag b::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    height:1px;
    width:0%;

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

    animation:aboutTagUnderline 3s ease-in-out infinite;

}

/* =========================
   BACKGROUND GLOW
========================= */

.about-tag::after{

    content:"";

    position:absolute;

    left:95px;
    top:50%;

    width:180px;
    height:35px;

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

    filter:blur(12px);

    transform:translateY(-50%);

    animation:aboutTagGlow 3s ease-in-out infinite;

    pointer-events:none;

}

/* =========================
   ANIMATIONS
========================= */

@keyframes aboutLineMove{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:250% center;
    }

}

@keyframes aboutDotMove{

    0%{
        left:0%;
    }

    50%{
        left:100%;
    }

    100%{
        left:0%;
    }

}

@keyframes aboutGlowMove{

    0%{
        left:0%;
    }

    50%{
        left:100%;
    }

    100%{
        left:0%;
    }

}

@keyframes aboutTagGradient{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:300% center;
    }

}

@keyframes aboutTextShine{

    0%{
        left:-120%;
    }

    100%{
        left:220%;
    }

}

@keyframes aboutTagUnderline{

    0%{
        width:0%;
        opacity:0;
    }

    50%{
        width:100%;
        opacity:1;
    }

    100%{
        width:0%;
        opacity:0;
        left:100%;
    }

}

@keyframes aboutTagGlow{

    0%,100%{
        opacity:.4;
        transform:translateY(-50%) scale(1);
    }

    50%{
        opacity:1;
        transform:translateY(-50%) scale(1.15);
    }

}
/* =========================
   CINEMATIC HEADING
========================= */

.about-heading{

font-family:'Cinzel',serif;

font-size:clamp(42px,5vw,68px);

line-height:1.01;

font-weight:800;

letter-spacing:-1px;

margin-bottom:20px;

color:#0f172a;

opacity:0;

transform:
translateY(80px)
rotateX(-90deg);

transform-origin:bottom;

perspective:1000px;

}

.about-heading span{

display:block;

margin-top:12px;

position:relative;

background:
linear-gradient(
135deg,
#d4af37 0%,
#fff5b7 20%,
#d4af37 40%,
#4f46e5 70%,
#d4af37 100%
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:aboutGoldFlow 6s linear infinite;

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

}

/* UNDERLINE */

.about-heading span::after{

content:"";

position:absolute;

left:0;
bottom:-10px;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#d4af37,
#fff3b0,
#4f46e5,
transparent
);

background-size:200% auto;

animation:aboutUnderline 4s linear infinite;

}

/* SOFT GLOW */

.about-heading span::before{

content:"";

position:absolute;

left:50%;
bottom:-15px;

width:70%;
height:18px;

transform:translateX(-50%);

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

filter:blur(10px);

animation:aboutGlow 3s ease-in-out infinite;

}

/* GOLD FLOW */

@keyframes aboutGoldFlow{

0%{
background-position:0% center;
}

100%{
background-position:300% center;
}

}

@keyframes aboutUnderline{

0%{
background-position:0% center;
}

100%{
background-position:200% center;
}

}

@keyframes aboutGlow{

0%,100%{
opacity:.5;
transform:translateX(-50%) scale(1);
}

50%{
opacity:1;
transform:translateX(-50%) scale(1.15);
}

}

/* =========================
   FLOATING SPARKS
========================= */

.about-heading span i{

position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:#fff5b7;

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

pointer-events:none;

}

.about-heading span i:nth-child(1){

left:8%;
top:-5px;

animation:aboutSparkOne 4s linear infinite;

}

.about-heading span i:nth-child(2){

right:15%;
top:12px;

animation:aboutSparkTwo 5s linear infinite;

}

.about-heading span i:nth-child(3){

left:50%;
bottom:-5px;

animation:aboutSparkThree 4.5s linear infinite;

}

@keyframes aboutSparkOne{

0%{
opacity:0;
transform:translateY(0) scale(0);
}

30%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(-25px) translateX(15px) scale(1.8);
}

}

@keyframes aboutSparkTwo{

0%{
opacity:0;
transform:translateY(0) scale(0);
}

30%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(-22px) translateX(-10px) scale(1.6);
}

}

@keyframes aboutSparkThree{

0%{
opacity:0;
transform:translateY(0) scale(0);
}

30%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(-18px) scale(1.5);
}

}

/* =========================
   PARAGRAPH
========================= */

.about-text{

font-size:17px;

line-height:2;
color:#475569;

max-width:650px;

opacity:0;

transform:translateY(40px);

margin-bottom:35px;

}

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

.about-btn{

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

padding:18px 34px;

text-decoration:none;

background:
linear-gradient(
135deg,
#d4af37,
#fff5b7,
#d4af37
);

color:#0f172a;

font-size:13px;
font-weight:800;

letter-spacing:2px;

text-transform:uppercase;

border-radius:12px;

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

overflow:hidden;

position:relative;

opacity:0;

transform:translateY(40px);

transition:.45s;

}

.about-btn:hover{

transform:
translateY(-8px);

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

}

.about-btn svg{

width:18px;
height:18px;

stroke:#0f172a;
stroke-width:2;
fill:none;

transition:.4s;

}

.about-btn:hover svg{

transform:translateX(6px);

}

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

@media(max-width:992px){

.about-container{

flex-direction:column;

gap:80px;

text-align:center;

}

.about-image-wrap{

width:360px;
height:360px;

}

.about-right{

display:flex;
flex-direction:column;
align-items:center;

}

.about-text{

max-width:100%;

}

.about-side-badge,
.about-side-badge-two{

display:none;

}

}

@media(max-width:768px){

.about-section{

padding:100px 6%;

}

.about-image-wrap{

width:300px;
height:300px;

}

.about-heading{

font-size:48px;

}

.about-text{

font-size:15px;
line-height:1.9;

}

.about-tag b{

font-size:11px;
letter-spacing:3px;

}

}

@media(max-width:480px){

.about-heading{

font-size:38px;

}

.about-btn{

padding:16px 26px;

font-size:12px;

}

.about-image-wrap{

width:260px;
height:260px;

}

.about-badge{

font-size:11px;

}

}




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

*{
margin:0;
padding:0;
box-sizing:border-box;
}


.services-section{

    position:relative;

    padding:140px 8%;

    background:
    linear-gradient(
        180deg,
        #060816 0%,
        #081022 50%,
        #060816 100%
    );

    overflow:hidden;

}

/* ====================================
   CONTAINER
==================================== */

.services-container{

    position:relative;

    z-index:5;

    max-width:1400px;

    margin:auto;

}

/* ====================================
   GOLDEN MOVING BEAM
==================================== */

.services-golden-beam{

    position:absolute;

    top:0;
    left:-60%;

    width:40%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.08),
        rgba(255,243,176,.12),
        transparent
    );

    transform:skewX(-25deg);

    filter:blur(10px);

    animation:servicesBeamMove 12s linear infinite;

}

@keyframes servicesBeamMove{

    0%{
        left:-60%;
    }

    100%{
        left:160%;
    }

}

/* ====================================
   FLOATING PARTICLES
==================================== */

.services-particle{

    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        #fff3b0,
        #d4af37
    );

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

    z-index:1;

}

.services-p1{

    width:10px;
    height:10px;

    top:18%;
    left:10%;

}

.services-p2{

    width:8px;
    height:8px;

    top:30%;
    right:12%;

}

.services-p3{

    width:12px;
    height:12px;

    bottom:18%;
    left:20%;

}

.services-p4{

    width:7px;
    height:7px;

    bottom:25%;
    right:15%;

}

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

.services-heading-wrap{

    text-align:center;

    margin-bottom:90px;

}

/* ====================================
   TAG
==================================== */

.services-tag{

    display:inline-flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

}

.services-tag span{

    position:relative;

    width:70px;
    height:2px;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        rgba(212,175,55,.2),
        #d4af37,
        #fff3b0,
        #4f46e5
    );

    background-size:250% auto;

    animation:servicesLineMove 4s linear infinite;

}

.services-tag span::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff;

    transform:translateY(-50%);

    box-shadow:
    0 0 0 4px rgba(212,175,55,.15),
    0 0 14px rgba(212,175,55,.8);

    animation:servicesDotMove 3s ease-in-out infinite;

}

.services-tag b{

    font-size:12px;

    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

    background:
    linear-gradient(
        90deg,
        #d4af37,
        #fff3b0,
        #ffffff,
        #d4af37
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:servicesTagGradient 5s linear infinite;

}

@keyframes servicesLineMove{

    from{
        background-position:0% center;
    }

    to{
        background-position:250% center;
    }

}

@keyframes servicesDotMove{

    0%{
        left:0;
    }

    50%{
        left:100%;
    }

    100%{
        left:0;
    }

}

@keyframes servicesTagGradient{

    from{
        background-position:0% center;
    }

    to{
        background-position:300% center;
    }

}

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

.services-heading{

    font-family:'Cinzel',serif;

    font-size:clamp(46px,5vw,82px);

    line-height:1.05;

    color:#ffffff;

    margin-bottom:20px;

}

.services-heading span{

    display:block;

    margin-top:10px;

    background:
    linear-gradient(
        135deg,
        #d4af37,
        #fff3b0,
        #d4af37
    );

    background-size:250% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:servicesHeadingFlow 5s linear infinite;

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

}

@keyframes servicesHeadingFlow{

    from{
        background-position:0% center;
    }

    to{
        background-position:250% center;
    }

}

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

.services-subtitle{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

    font-size:16px;
    text-align: center;

}

/* ====================================
   ROWS
==================================== */

.services-row{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

.services-row-bottom{

   margin-top:30px;
    padding-left:0;

}
/* ====================================
   PREMIUM SERVICE CARDS
==================================== */

.services-card{
  width:100%;

    box-sizing:border-box;
    display:flex;
    flex-direction:column;

    position:relative;

    min-height:360px;
    height:100%;

    padding:40px 34px;

    border-radius:32px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
    );

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

    backdrop-filter:blur(18px);

    transform-style:preserve-3d;

    transition:
    border-color .6s ease,
    box-shadow .6s ease;

    cursor:pointer;
.services-card{

    transform-origin:center center;

    will-change:
    transform,
    opacity;

}
}
/* GOLD CORNER GLOW */

.services-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-120px;
    left:-120px;

    border-radius:50%;

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

    opacity:0;

    transition:.6s ease;

}

/* ANIMATED BORDER */

.services-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(212,175,55,.8),
        rgba(255,243,176,.9),
        transparent
    );

    background-size:300% auto;

    animation:servicesBorderMove 6s linear infinite;

    opacity:0;

    -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    transition:.5s ease;

}

@keyframes servicesBorderMove{

    from{
        background-position:0% center;
    }

    to{
        background-position:300% center;
    }

}

/* HOVER */

.services-card:hover{

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

    box-shadow:
    0 35px 80px rgba(0,0,0,.45);

}

.services-card:hover::before{

    opacity:1;

}

.services-card:hover::after{

    opacity:1;

}

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

.services-card-shine{

    position:absolute;

    top:-120%;

    left:-40%;

    width:40%;
    height:260%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:rotate(20deg);

    pointer-events:none;

}

.services-card:hover .services-card-shine{

    animation:servicesShine 1.4s linear;

}

@keyframes servicesShine{

    from{
        left:-60%;
    }

    to{
        left:160%;
    }

}

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

.services-card-featured{

    border-color: rgba(212,175,55,.35);
    box-shadow: 0 25px 60px rgba(212,175,55,.12);

}

.services-card-featured::before{

    opacity:.8;

}

/* ====================================
   CARD NUMBER
==================================== */

.services-number{

    position:absolute;

    top:10px;
    right:18px;

    font-size:76px;

    font-weight:800;

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

    line-height:1;

    pointer-events:none;

}

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

.services-icon{

    width:86px;
    height:86px;

    border-radius:24px;

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

    margin-bottom:28px;

    background:
    linear-gradient(
        135deg,
        #d4af37,
        #fff3b0
    );

    color:#060816;

    font-size:32px;

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

    transition:
    transform .5s ease,
    box-shadow .5s ease;

}
.services-icon i{
    font-size:60px;
    color:#101227;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.services-card:hover .services-icon{

    transform:
    rotate(-12deg)
    scale(1.08);

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

}

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

.services-card h3{

    color:#ffffff;

    font-size:28px;

    font-weight:700;

    margin-bottom:15px;

    transition:.4s ease;

}

.services-card:hover h3{

    color:#d4af37;

}

/* ====================================
   TEXT
==================================== */

.services-card p{

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

    line-height:1.9;

    font-size:15px;

    flex-grow:1;

}

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

@media(max-width:1100px){

    .services-row{

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

    }

    .services-row-bottom{

        padding-left:0;

    }

}

@media(max-width:768px){

    .services-section{

        padding:100px 6%;

    }

    .services-row{

        grid-template-columns:1fr;

        gap:25px;

    }

    .services-row-bottom{

        margin-top:25px;

        padding-left:0;

    }

    .services-card{

        min-height:auto;

        padding:32px;

    }

    .services-card-featured{

        transform:none;

    }

    .services-heading{

        font-size:44px;

    }

}

@media(max-width:480px){

    .services-heading{

        font-size:36px;

    }

    .services-card{

        padding:28px;

    }

    .services-number{

        font-size:56px;

    }

    .services-icon{

        width:72px;
        height:72px;

        font-size:28px;

    }

    .services-card h3{

        font-size:24px;

    }

}







/* SECTION */
.why-section{
position:relative;
padding:120px 8% 80px;

overflow:hidden;
}

/* ORBS */
.why-orb{
position:absolute;
width:500px;
height:500px;
filter:blur(120px);
border-radius:50%;
opacity:.4;
}
.why-orb-1{
background:radial-gradient(circle,#d4af37,transparent 70%);
top:-200px;left:-200px;
}
.why-orb-2{
background:radial-gradient(circle,#4f46e5,transparent 70%);
bottom:-200px;right:-200px;
}

/* CONTAINER */
.why-container{
display:flex;
gap:80px;
align-items:flex-start;
max-width:1200px;
margin:auto;
}

/* LEFT */
.why-left{
flex:1;
opacity:0;

}

/* TAG */
.why-tag{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
}
.why-tag span{
width:60px;height:2px;
background:linear-gradient(90deg,#d4af37,#fff3b0,#4f46e5);
animation:lineMove 3s linear infinite;
}
@keyframes lineMove{
0%{background-position:0%}
100%{background-position:200%}
}

.why-tag b{
font-size:12px;
letter-spacing:4px;
color:#d4af37;
}

/* HEADING */
.why-heading{
font-size:42px;
line-height:1.1;
margin-bottom:15px;
}
.why-heading span{
color:#d4af37;
}

/* TEXT */
.why-text{
opacity:.7;
line-height:1.8;
max-width:500px;
}

/* RIGHT */
.why-right{
flex:1;
display:flex;
flex-direction:column;
gap:18px;
opacity:0;

}

/* CARDS */
.why-card{
padding:18px 20px;
background:linear-gradient(145deg,#0b1430,#070b1a);
border:1px solid rgba(212,175,55,.2);
border-radius:14px;
display:flex;
color:#ffffff;
align-items:center;
gap:14px;
position:relative;
overflow:hidden;

}

.why-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(212,175,55,.12),transparent);
transform:translateX(-100%);
animation:shine 3s infinite;
}
@keyframes shine{
100%{transform:translateX(100%);}
}

/* ICON */
.why-card i{
color:#d4af37;
font-size:20px;
animation:pulse 2s infinite;
}
@keyframes pulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.2);opacity:.7;}
}

/* COUNTER SECTION */
.counter-section{
margin-top:70px;
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.counter-box{
flex:1;
min-width:200px;
padding:25px;
background:linear-gradient(145deg,#0b1430,#070b1a);
border:1px solid rgba(212,175,55,.25);
border-radius:16px;
text-align:center;
position:relative;
overflow:hidden;
}

.count::after {
    content: "+";
}

/* GOLD SWEEP */
.counter-box::before{
content:"";
position:absolute;
width:200%;
height:100%;
background:linear-gradient(120deg,transparent,#d4af37,transparent);
top:0;
left:-100%;
animation:sweep 3s linear infinite;
opacity:.2;
}
@keyframes sweep{
100%{left:100%;}
}

.counter-box h3{
font-size:40px;
color:#d4af37;
margin:0;
}

.counter-box p{
opacity:.7;
margin-top:5px;
color: #ffffff;
}

/* RESPONSIVE */
@media(max-width:900px){
.why-container{
flex-direction:column;
}
.why-left,.why-right{
transform:none !important;
opacity:1 !important;
}
}









/* ======================
   BASE
====================== */

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

}

body{
background:#ffffff;
overflow-x:hidden;

}

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

.review-section{
    padding:100px 8%;
    text-align:center;
    position:relative;
    overflow:hidden;

    /* ye add karo */
    min-height:auto;
}

.review-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%; /* important */
     height:110%;
    inset:0;
    background-image:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.12);
    filter:brightness(.75) contrast(1.05);
    z-index:0;
}



.review-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(6,8,22,.86),
rgba(6,8,22,.93)
);
z-index:1;
}

/* gold ambient */

.review-glow{
position:absolute;
width:420px;
height:420px;
background:radial-gradient(circle,rgba(212,175,55,.12),transparent 70%);
top:-120px;
left:50%;
transform:translateX(-50%);
filter:blur(65px);
z-index:1;
}

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

.review-content{
position:relative;
z-index:2;
}
.review-services-tag{
display:inline-flex;
align-items:center;
gap:16px;
margin-bottom:28px;
position:relative;
overflow:visible;
opacity:1;
transform:translateY(0);
}

/* LINE */
.review-services-tag span{
width:70px;
height:2px;
border-radius:30px;

background:linear-gradient(
90deg,
rgba(212,175,55,.2),
#d4af37,
#fff3b0,
#4f46e5,
rgba(212,175,55,.2)
);

background-size:250% auto;
animation: reviewLineMove 4s linear infinite;
position:relative;
}

/* MOVING DOT */
.review-services-tag span::before{
content:"";
position:absolute;
top:50%;
left:0;
width:8px;
height:8px;
border-radius:50%;
background:#fff3b0;
transform:translateY(-50%);
box-shadow:
0 0 10px rgba(212,175,55,.9),
0 0 25px rgba(212,175,55,.4);
animation: reviewDotMove 3s ease-in-out infinite;
}

/* GLOW DOT */
.review-services-tag span::after{
content:"";
position:absolute;
top:50%;
left:0;
width:18px;
height:18px;
border-radius:50%;
background:rgba(212,175,55,.18);
filter:blur(8px);
transform:translate(-25%,-50%);
animation: reviewGlowMove 3s ease-in-out infinite;
}

/* TEXT */
.review-services-tag b{
font-size:15px;
font-weight:800;
letter-spacing:4px;

background:linear-gradient(
90deg,
#d4af37,
#fff3b0,
#ffffff,
#d4af37
);

background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation: reviewTextFlow 4s linear infinite;

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

/* SHINE EFFECT */
.review-services-tag b::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);
transform:skewX(-25deg);
animation: reviewShine 4s linear infinite;
}

/* UNDERLINE PULSE */
.review-services-tag b::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
height:1px;
width:0%;
background:linear-gradient(
90deg,
transparent,
#d4af37,
#fff3b0,
transparent
);
animation: reviewUnderline 3s ease-in-out infinite;
}

/* OPTIONAL BACK GLOW */
.review-services-tag::after{
content:"";
position:absolute;
left:90px;
top:50%;
width:180px;
height:35px;
background:radial-gradient(circle, rgba(212,175,55,.18), transparent 70%);
filter:blur(12px);
transform:translateY(-50%);
animation: reviewTagGlow 3s ease-in-out infinite;
pointer-events:none;
}

/* =======================
   ANIMATIONS
======================= */

@keyframes reviewLineMove{
0%{background-position:0% center;}
100%{background-position:250% center;}
}

@keyframes reviewDotMove{
0%{left:0%;}
50%{left:100%;}
100%{left:0%;}
}

@keyframes reviewGlowMove{
0%{left:0%;}
50%{left:100%;}
100%{left:0%;}
}

@keyframes reviewTextFlow{
0%{background-position:0% center;}
100%{background-position:300% center;}
}

@keyframes reviewShine{
0%{left:-120%;}
100%{left:220%;}
}

@keyframes reviewUnderline{
0%{width:0%;opacity:0;}
50%{width:100%;opacity:1;}
100%{width:0%;opacity:0;}
}

@keyframes reviewTagGlow{
0%,100%{opacity:.4;transform:translateY(-50%) scale(1);}
50%{opacity:1;transform:translateY(-50%) scale(1.15);}
}

.review-services-heading{
color:#fff;
font-size:42px;
margin-bottom:10px;
}

.review-services-heading span{
color:#d4af37;
}

.review-sub{
color:rgba(255,255,255,.65);
margin-bottom:55px;
text-align: center;
}

/* ======================
   WALL
====================== */

.review-wall{
position:relative;
height:380px;
display:flex;
align-items:center;
justify-content:center;
perspective:1200px;
  overflow:hidden; /* add this */
}

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

.review-card{
position:absolute;
width:360px;
padding:30px;
border-radius:25px;

background:linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
color:#fff;

cursor:pointer;
overflow:hidden;

transition:transform .6s ease,
box-shadow .6s ease;
}

/* ======================
   SHIMMER BORDER (IMPROVED)
====================== */

.review-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;

background:linear-gradient(
110deg,
transparent,
rgba(212,175,55,.9),
#fff3b0,
rgba(212,175,55,.6),
transparent
);

background-size:250% 250%;
animation:review-borderShine 3.8s linear infinite;

-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

opacity:.65;
pointer-events:none;
}

@keyframes review-borderShine{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}

/* ======================
   ACTIVE CARD
====================== */

.review-card.active{
border:2px solid rgba(212,175,55,.9);
box-shadow:0 0 70px rgba(212,175,55,.18);
transform:translateY(-6px);
}

/* ======================
   QUOTE (FLOAT + GLOW PULSE)
====================== */

.review-quote{
font-size:42px;
color:#d4af37;
margin-bottom:10px;
display:inline-block;

animation:review-quoteFloat 2.6s ease-in-out infinite;
text-shadow:0 0 18px rgba(212,175,55,.25);
}

@keyframes review-quoteFloat{
0%,100%{
transform:translateY(0) scale(1);
}
50%{
transform:translateY(-4px) scale(1.12);
}
}

/* text */

.review-review{
font-size:14px;
line-height:1.7;
opacity:.85;
margin-bottom:18px;
}

.review-name{
font-weight:600;
}

.review-role{
font-size:12px;
opacity:.5;
}

/* ======================
   DOTS (BREATHING GOLD)
====================== */

.review-dots{
margin-top:25px;
display:flex;
justify-content:center;
gap:8px;
}

.review-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.2);
transition:.3s;
position:relative;
}

.review-dot.active{
background:#d4af37;
transform:scale(1.4);
box-shadow:0 0 12px rgba(212,175,55,.35);
}

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

@media(max-width:768px){

.review-card{
width:300px;
}

}