/* ==========================================================
   ROKA JEWELS
   Luxury Hero
   Part 1
==========================================================*/

/*==========================================
Hero Section
==========================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--primary-dark);

}

/*==========================================
Video
==========================================*/

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

    opacity:.22;

    pointer-events:none;

    transform:scale(1.15);

    will-change:transform;

}

/*==========================================
Overlay
==========================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(8,38,35,.82),
        rgba(8,38,35,.60),
        rgba(8,38,35,.92)
    );

    z-index:2;

}

/*==========================================
Animated Gradient
==========================================*/

.hero-gradient{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(200,165,90,.12),
    transparent 35%),

    radial-gradient(circle at 80% 20%,
    rgba(255,255,255,.04),
    transparent 30%),

    radial-gradient(circle at 70% 80%,
    rgba(19,88,72,.30),
    transparent 45%);

    z-index:3;

}

/*==========================================
Container
==========================================*/

.hero .container{

    position:relative;

    z-index:10;

}

/*==========================================
Grid
==========================================*/

.hero-grid{

    display:grid;

    grid-template-columns:

        1.05fr

        .95fr;

    gap:90px;

    align-items:center;

    min-height:100vh;

}

/*==========================================
Content
==========================================*/

.hero-content{

    max-width:680px;

}

/*==========================================
Eyebrow
==========================================*/

.hero-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:60px;

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

    border:1px solid rgba(243,238,216,.10);

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

    margin-bottom:35px;

    transform:translateY(35px);

}

.hero-eyebrow::before{

    content:"";

    width:45px;

    height:1px;

    background:var(--gold);

}

/*==========================================
Heading
==========================================*/

.hero-title{

    font-family:"Cormorant Garamond",serif;

    font-size:88px;

    line-height:1.02;

    color:var(--cream);

    font-weight:600;

    margin-bottom:30px;

    transform:translateY(60px);

}

.hero-title span{

    display:block;

    color:var(--gold);

}

/*==========================================
Description
==========================================*/

.hero-description{

    font-size:18px;

    line-height:2;

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

    max-width:600px;

    margin-bottom:45px;

    transform:translateY(40px);

}

/*==========================================
Buttons
==========================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:70px;

    transform:translateY(40px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    border:1px solid rgba(243,238,216,.18);

    color:var(--cream);

    transition:var(--transition);

}

.btn-outline:hover{

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

    border-color:var(--gold);

    color:var(--gold);

}

/* ==========================================================
   HERO MEDIA
   Part 2
==========================================================*/

/*==========================================
Hero Media
==========================================*/

.hero-media{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:760px;

}

/*==========================================
Gold Glow
==========================================*/

.hero-media::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(212,175,55,.18) 0%,
        rgba(212,175,55,.08) 35%,
        transparent 75%);

    filter:blur(60px);

    z-index:1;

}

/*==========================================
Emerald Glow
==========================================*/

.hero-media::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(11,110,79,.35),
        transparent 70%);

    filter:blur(90px);

    z-index:1;

}

/*==========================================
Main Ring
==========================================*/

.hero-ring{

    position:relative;

    width:580px;

    max-width:100%;

    z-index:5;

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

    --mx:0px;
    --my:0px;
    --rot:0deg;

    transform:

        translate3d(var(--mx),var(--my),0)

        rotate(var(--rot));

    transition:transform .15s linear;

    will-change:transform;

}

/*==========================================
Floating Animation
==========================================*/

@keyframes ringFloat{

    0%{

        transform:
        translateY(0)
        rotate(-2deg);

    }

    50%{

        transform:
        translateY(-18px)
        rotate(2deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(-2deg);

    }

}

/*==========================================
Floating Gems
==========================================*/

.floating-gem{

    --mx:0px;

    --my:0px;

    transform:

        translate3d(var(--mx),var(--my),0);

    will-change:transform;

}

/* Diamond */

.gem-1{

    width:95px;

    top:80px;

    left:35px;

}

/* Emerald */

.gem-2{

    width:82px;

    right:30px;

    top:170px;

    animation-delay:1.5s;

}

/* Ruby */

.gem-3{

    width:88px;

    bottom:120px;

    left:70px;

    animation-delay:2.5s;

}


/*==========================================
Luxury Glass Card
==========================================*/

.hero-glass-card{

    position:absolute;

    right:-10px;

    bottom:70px;

    width:290px;

    padding:28px;

    border-radius:28px;

    z-index:8;

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

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

    backdrop-filter:blur(22px);

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

    box-shadow:

        0 20px 60px rgba(0,0,0,.25);
    --mx:0px;

    --my:0px;

    transform:

        translate3d(var(--mx),var(--my),0);


    will-change:transform;
}

/*==========================================
Glass Card Text
==========================================*/

.hero-glass-card span{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

}

.hero-glass-card h3{

    margin:14px 0 12px;

    color:var(--cream);

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

}

.hero-glass-card p{

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

    line-height:1.8;

    font-size:15px;

}

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

.hero-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:4;

    pointer-events:none;

}

.hero-particles span{

    position:absolute;

    display:block;

    width:6px;

    height:6px;

    border-radius:50%;

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

    box-shadow:

        0 0 18px rgba(212,175,55,.35);

    animation:particleFloat linear infinite;

}

/* Random Particle Positions */

.hero-particles span:nth-child(1){top:8%;left:10%;animation-duration:10s;}
.hero-particles span:nth-child(2){top:18%;left:35%;animation-duration:14s;}
.hero-particles span:nth-child(3){top:25%;left:80%;animation-duration:11s;}
.hero-particles span:nth-child(4){top:70%;left:15%;animation-duration:16s;}
.hero-particles span:nth-child(5){top:62%;left:72%;animation-duration:13s;}
.hero-particles span:nth-child(6){top:40%;left:55%;animation-duration:15s;}
.hero-particles span:nth-child(7){top:82%;left:48%;animation-duration:12s;}
.hero-particles span:nth-child(8){top:12%;left:60%;animation-duration:18s;}
.hero-particles span:nth-child(9){top:48%;left:88%;animation-duration:17s;}
.hero-particles span:nth-child(10){top:86%;left:88%;animation-duration:11s;}

@keyframes particleFloat{

    0%{

        transform:
        translateY(0)
        scale(.8);

        opacity:.2;

    }

    50%{

        transform:
        translateY(-30px)
        scale(1.2);

        opacity:1;

    }

    100%{

        transform:
        translateY(0)
        scale(.8);

        opacity:.2;

    }

}

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

.hero-stats{

    display:flex;

    align-items:center;

    gap:55px;

    flex-wrap:wrap;

    transform:translateY(40px);

}

.hero-stat{

    position:relative;

}

.hero-stat h3{

    font-size:42px;

    font-family:"Cormorant Garamond",serif;

    color:var(--gold);

    margin-bottom:8px;

}

.hero-stat span{

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

    font-size:14px;

    letter-spacing:1px;

}

.hero-stat::after{

    content:"";

    position:absolute;

    right:-28px;

    top:12px;

    width:1px;

    height:45px;

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

}

.hero-stat:last-child::after{

    display:none;

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:15;

}

.hero-scroll span{

    color:var(--cream);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.scroll-line{

    width:2px;

    height:90px;

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

    position:relative;

    overflow:hidden;

}

.scroll-dot{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        top:0;

        opacity:0;

    }

    25%{

        opacity:1;

    }

    100%{

        top:82px;

        opacity:0;

    }

}

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

@media(max-width:1200px){

.hero-title{

font-size:68px;

}

.hero-grid{

gap:50px;

}

.hero-ring{

width:470px;

}

}

@media(max-width:992px){

.hero{

padding:150px 0 80px;

min-height:auto;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

max-width:100%;

}

.hero-description{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-media{

margin-top:60px;

min-height:500px;

}

.hero-glass-card{

right:50%;

transform:translateX(50%);

bottom:0;

}

.hero-scroll{

display:none;

}

}

@media(max-width:768px){

.hero-title{

font-size:48px;

}

.hero-description{

font-size:16px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-gold,
.btn-outline{

width:100%;

}

.hero-ring{

width:320px;

}

.hero-glass-card{

width:260px;

padding:22px;

}

.hero-stats{

gap:25px;

}

.hero-stat h3{

font-size:32px;

}

}

/* ==========================================================
   HERO CINEMATIC DEPTH
==========================================================*/

/*==========================================
Light Rays
==========================================*/

.hero-light-rays{

    position:absolute;

    inset:0;

    z-index:3;

    pointer-events:none;

    overflow:hidden;

}

.hero-light-rays::before{

    content:"";

    position:absolute;

    width:1200px;

    height:1200px;

    left:-400px;

    top:-350px;

    background:

        radial-gradient(circle,

        rgba(212,175,55,.14),

        transparent 70%);

    filter:blur(120px);

    animation:lightMove 16s ease-in-out infinite;

}

.hero-light-rays::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-250px;

    bottom:-300px;

    background:

        radial-gradient(circle,

        rgba(11,110,79,.22),

        transparent 70%);

    filter:blur(140px);

    animation:lightMove2 20s ease-in-out infinite;

}

@keyframes lightMove{

    0%{

        transform:

        translate(0,0);

    }

    50%{

        transform:

        translate(80px,60px);

    }

    100%{

        transform:

        translate(0,0);

    }

}

@keyframes lightMove2{

    0%{

        transform:

        translate(0,0);

    }

    50%{

        transform:

        translate(-60px,-80px);

    }

    100%{

        transform:

        translate(0,0);

    }

}

/*==========================================
Luxury Bokeh
==========================================*/

.hero-bokeh{

    position:absolute;

    inset:0;

    z-index:4;

    overflow:hidden;

    pointer-events:none;

}

.hero-bokeh::before,

.hero-bokeh::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;

}

.hero-bokeh::before{

    width:220px;

    height:220px;

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

    top:20%;

    left:15%;

    animation:bokehFloat 12s infinite ease-in-out;

}

.hero-bokeh::after{

    width:260px;

    height:260px;

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

    bottom:10%;

    right:18%;

    animation:bokehFloat2 15s infinite ease-in-out;

}

@keyframes bokehFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-40px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bokehFloat2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================
Noise Overlay
==========================================*/

.hero-noise{

    position:absolute;

    inset:0;

    z-index:5;

    opacity:.035;

    pointer-events:none;

    background-image:

    url("https://www.transparenttextures.com/patterns/asfalt-light.png");

}

/*==========================================
Reflection Layer
==========================================*/

.hero-reflection{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:6;

}

.hero-reflection::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:45%;

    height:320%;

    background:

        linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

        );

    transform:rotate(25deg);

    animation:reflectionHero 14s linear infinite;

}

@keyframes reflectionHero{

    from{

        transform:

        translateX(-150%)

        rotate(25deg);

    }

    to{

        transform:

        translateX(500%)

        rotate(25deg);

    }

}

/*==========================================
Depth Layer
==========================================*/

.hero-depth-layer{

    position:absolute;

    inset:0;

    z-index:7;

    pointer-events:none;

    background:

    radial-gradient(

        circle at center,

        transparent 40%,

        rgba(0,0,0,.15) 100%

    );

}

.hero-ring-wrapper{

    position:relative;

    z-index:5;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* =====================================================
   ROKA JEWELS
   Animation System
===================================================== */

/* ---------- Fade Up ---------- */

.fade-up{

opacity:0;

transform:translateY(80px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}

/* ---------- Fade Left ---------- */

.fade-left{

opacity:0;

transform:translateX(-100px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.fade-left.active{

opacity:1;

transform:none;

}

/* ---------- Fade Right ---------- */

.fade-right{

opacity:0;

transform:translateX(100px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.fade-right.active{

opacity:1;

transform:none;

}

/* ---------- Zoom ---------- */

.zoom{

opacity:0;

transform:scale(.8);

transition:1s;

}

.zoom.active{

opacity:1;

transform:scale(1);

}

/* ---------- Blur ---------- */

.blur{

opacity:0;

filter:blur(20px);

transition:1.2s;

}

.blur.active{

opacity:1;

filter:none;

}

/* ---------- Floating ---------- */

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.float{

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

}

/* ---------- Rotate ---------- */

@keyframes rotate360{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

.rotate{

animation:rotate360 25s linear infinite;

}

/* ---------- Gold Glow ---------- */

@keyframes glow{

0%{

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

}

50%{

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

}

100%{

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

}

}

.glow{

animation:glow 3s infinite;

}

/* ---------- Pulse ---------- */

@keyframes pulse{

50%{

transform:scale(1.04);

}

}

.pulse{

animation:pulse 3s infinite;

}

/* ---------- Shine ---------- */

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:50%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:.9s;

}

.shine:hover::before{

left:140%;

}

/* ==========================================================
   ROKA JEWELS
   Luxury Brands
==========================================================*/

.brands{

    position:relative;

    padding:140px 0;

    background:#071816;

    overflow:hidden;

}

/*==========================================
Slider
==========================================*/

.brands-slider{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:35px;
    margin-top:80px;
    width:100%;
}

/*==========================================
Card
==========================================*/

.brand-card{

    width:220px;

    height:130px;

    flex-shrink:0;

    border-radius:26px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    cursor:pointer;

    position:relative;

}

.brand-card img{

    width:130px;

    opacity:.7;

    transition:.45s;

    filter:grayscale(100%);

}

.brand-card:hover{

    transform:translateY(-10px);

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

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.brand-card:hover img{

    opacity:1;

    filter:none;

    transform:scale(1.08);

}

.brand-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%

    );

    opacity:0;

    transition:.5s;

    filter:blur(40px);

}

.brand-card:hover::before{

    opacity:1;

}

@media(max-width:992px){

.brand-card{

width:180px;

height:110px;

}

.brand-card img{

width:110px;

}

}

@media(max-width:768px){

.brands{

padding:100px 0;

}

}

/* ==========================================================
   ROKA JEWELS
   Luxury Collections
==========================================================*/

.collections{

    position:relative;

    padding:140px 0;

    background:var(--primary-dark);

    overflow:hidden;

}

/* ==========================
Section Heading
========================== */

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 90px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 28px;

    border-radius:50px;

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

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

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

}

.section-tag::before{

    content:"";

    width:40px;

    height:1px;

    background:var(--gold);

}

.section-heading h2{

    margin-top:30px;

    font-size:68px;

    line-height:1.05;

    font-family:"Cormorant Garamond",serif;

    color:var(--cream);

}

.section-heading p{

    margin-top:28px;

    font-size:18px;

    line-height:2;

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

}

/* ==========================
Grid
========================== */

.collections-grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:38px;

}

/* ==========================
Card
========================== */

.collection-card{

    position:relative;

    display:block;

    height:640px;

    border-radius:34px;

    overflow:hidden;

    background:#101010;

    text-decoration:none;

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

    transition:.6s;

    transform-style:preserve-3d;

}

.collection-image{

    position:absolute;

    inset:0;

}

.collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.collection-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.88),

    rgba(0,0,0,.15),

    transparent);

    z-index:2;

}

.collection-content{

    position:absolute;

    left:45px;

    bottom:45px;

    right:45px;

    z-index:5;

}

.collection-content span{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

}

.collection-content h3{

    margin-top:12px;

    color:white;

    font-size:46px;

    font-family:"Cormorant Garamond",serif;

}

.collection-arrow{

    margin-top:28px;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:white;

    transition:.4s;

}

.collection-card:hover{

    transform:

    perspective(1500px)

    rotateX(4deg)

    rotateY(-4deg)

    translateY(-10px);

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.45);

}

.collection-card:hover img{

    transform:scale(1.08);

}

.collection-card:hover .collection-arrow{

    background:var(--gold);

    color:black;

}

.collection-light{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.22),

    transparent 70%);

    filter:blur(45px);

    pointer-events:none;

    opacity:0;

    z-index:4;

    transition:.3s;

}

.collection-card:hover .collection-light{

    opacity:1;

}

/* ==========================================================
   ROKA JEWELS
   Luxury CTA
==========================================================*/

.luxury-cta{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#051614;

}

.cta-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.22;

}

.cta-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(5,22,20,.72),

        rgba(5,22,20,.88)

    );

}

.cta-glow{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,

    rgba(212,175,55,.18),

    transparent 35%),

    radial-gradient(circle at 80% 80%,

    rgba(0,180,140,.18),

    transparent 40%);

    animation:ctaGlow 10s ease-in-out infinite;

}

@keyframes ctaGlow{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

.cta-box{

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

    padding:70px;

    border-radius:36px;

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

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

    backdrop-filter:blur(20px);

    box-shadow:

    0 35px 90px rgba(0,0,0,.35);

}

.cta-eyebrow{

    display:inline-block;

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.cta-box h2{

    color:white;

    font-size:72px;

    font-family:"Cormorant Garamond",serif;

    margin-bottom:30px;

}

.cta-box p{

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

    line-height:2;

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

    font-size:18px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%

    );

    top:-120px;

    right:-120px;

    opacity:0;

    transition:.5s;

}

.cta-box:hover::before{

    opacity:1;

}

@media(max-width:992px){

.cta-box{

padding:50px 35px;

}

.cta-box h2{

font-size:52px;

}

}

@media(max-width:768px){

.luxury-cta{

min-height:auto;

padding:100px 0;

}

.cta-buttons{

flex-direction:column;

}

.cta-box h2{

font-size:40px;

}

}

/* ==========================================================
   ROKA JEWELS
   Premium Footer
==========================================================*/

.footer{

    position:relative;

    background:#041311;

    padding:120px 0 40px;

    overflow:hidden;

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

}

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

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

}

.footer-top{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    margin-bottom:80px;

}

.footer-brand h2{

    font-family:"Cormorant Garamond",serif;

    font-size:48px;

    color:var(--gold);

    margin-bottom:20px;

}

.footer-brand p{

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

    line-height:2;

    max-width:500px;

}

.footer-newsletter{

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

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

    backdrop-filter:blur(20px);

    padding:40px;

    border-radius:28px;

}

.footer-newsletter h3{

    color:white;

    margin-bottom:15px;

}

.footer-newsletter p{

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

    margin-bottom:25px;

}

.footer-newsletter form{

    display:flex;

    gap:15px;

}

.footer-newsletter input{

    flex:1;

    height:58px;

    padding:0 20px;

    border:none;

    border-radius:50px;

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

    color:white;

}

.footer-newsletter input:focus{

    outline:none;

    border:1px solid var(--gold);

}

.footer-grid{

    display:grid;

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

    gap:60px;

    margin-bottom:70px;

}

.footer-grid h4{

    color:var(--gold);

    margin-bottom:25px;

    font-size:20px;

}

.footer-grid ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-grid li{

    margin-bottom:16px;

}

.footer-grid a{

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

    text-decoration:none;

    transition:.35s;

}

.footer-grid a:hover{

    color:var(--gold);

    padding-left:8px;

}

.footer-bottom{

    text-align:center;

    padding-top:30px;

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

}

.footer-bottom p{

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

}

@media(max-width:992px){

.footer-top{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer{

padding:90px 0 35px;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-newsletter form{

flex-direction:column;

}

.footer-brand h2{

font-size:38px;

}

}

/* ==========================================================
   ROKA JEWELS
   Luxury Gallery
==========================================================*/

.gallery{

    position:relative;

    padding:140px 0;

    background:#061917;

    overflow:hidden;

}

/*==========================================
Grid
==========================================*/

.gallery-grid{

    display:grid;

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

    gap:30px;

    grid-auto-rows:320px;

    margin-top:80px;

}

/*==========================================
Card Sizes
==========================================*/

.gallery-card.large{

    grid-row:span 2;

}

.gallery-card.small{

    grid-row:span 1;

}

/*==========================================
Card
==========================================*/

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    cursor:pointer;

    background:#111;

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

    transition:.6s;

}

.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

/*==========================================
Overlay
==========================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:40px;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.82)

    );

    z-index:5;

}

.gallery-overlay h3{

    color:white;

    font-size:40px;

    font-family:"Cormorant Garamond",serif;

}

/*==========================================
Hover
==========================================*/

.gallery-card:hover{

    transform:

    translateY(-10px)

    scale(1.02);

    box-shadow:

    0 40px 80px rgba(0,0,0,.45);

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-light{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.25),

    transparent 70%

    );

    filter:blur(45px);

    pointer-events:none;

    opacity:0;

    transition:.3s;

    z-index:4;

}

.gallery-card:hover .gallery-light{

    opacity:1;

}

@media(max-width:992px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:260px;

}

.gallery-card.large{

grid-row:span 1;

}

.gallery-overlay h3{

font-size:30px;

}

}

/* ==========================================================
   ROKA JEWELLERY
   Premium Navbar
   Part 1
========================================================== */


/*==========================================================
Announcement Bar
==========================================================*/

.announcement-bar{

    position:relative;

    width:100%;

    height:42px;

    overflow:hidden;

    background:linear-gradient(
        90deg,
        var(--primary-dark),
        var(--primary),
        var(--primary-dark)
    );

    border-bottom:1px solid rgba(243,238,216,.08);

    display:flex;

    align-items:center;

    z-index:9999;

}

.announcement-track{

    display:flex;

    align-items:center;

    gap:50px;

    white-space:nowrap;

    color:var(--cream);

    font-size:13px;

    font-weight:500;

    letter-spacing:1.5px;

    animation:marquee 28s linear infinite;

}

.announcement-track span{

    opacity:.95;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


/*==========================================================
Header
==========================================================*/

#header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:all .45s ease;

    padding:18px 0;

    background:transparent;

}

#header.scrolled{

    padding:10px 0;

}


/*==========================================================
Floating Navbar
==========================================================*/

.navbar{

    position:relative;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:rgba(13,55,51,.55);

    backdrop-filter:blur(22px);

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

    border:1px solid rgba(243,238,216,.10);

    border-radius:100px;

    padding:0 32px;

    overflow:hidden;

    transition:var(--transition);

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

    isolation:isolate;

}


/*==========================================================
Golden Reflection
==========================================================*/

.navbar::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(200,165,90,.45),
        transparent,
        rgba(200,165,90,.18)
    );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

.navbar::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

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

    transform:skewX(-22deg);

    transition:1.4s;

}

.navbar:hover::after{

    left:150%;

}


/*==========================================================
Logo
==========================================================*/

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.logo img{

    width:170px;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.04);

}


/*==========================================================
Desktop Menu
==========================================================*/

.desktop-menu{

    margin:auto;

    position:relative;

    z-index:2;

}

.desktop-menu ul{

    display:flex;

    align-items:center;

    gap:34px;

}

.desktop-menu ul li{

    position:relative;

}

.desktop-menu ul li a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:var(--cream);

    font-size:14px;

    font-weight:500;

    letter-spacing:1.8px;

    text-transform:uppercase;

    transition:var(--transition);

    padding:8px 0;

    will-change:transform;

    transform:translate3d(0,0,0);

}

.desktop-menu ul li a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold);

    transform:translateX(-50%);

    transition:var(--transition);

    border-radius:20px;

}

.desktop-menu ul li a:hover{

    color:var(--gold-light);

    text-shadow:
        0 0 18px rgba(200,165,90,.25);

}

.desktop-menu ul li a:hover::before{

    width:100%;

}


/*==========================================================
Mobile Toggle
==========================================================*/

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    background:transparent;

    border:none;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    position:relative;

    z-index:2;

}

.mobile-toggle span{

    width:24px;

    height:2px;

    background:var(--cream);

    border-radius:10px;

    transition:var(--transition);

}

/* ==========================================================
   HEADER ACTIONS
========================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

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

.icon-btn{

    position:relative;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    border:1px solid rgba(243,238,216,.08);

    color:var(--cream);

    cursor:pointer;

    transition:var(--transition);

    overflow:hidden;

    will-change:transform;

    transform:translate3d(0,0,0);

}

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

.icon-btn svg{

    width:20px;

    height:20px;

    stroke-width:1.8;

    transition:var(--transition);

}

/* ==========================================
   GOLD REFLECTION
========================================== */

.icon-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}

.icon-btn:hover::before{

    left:160%;

}

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

.icon-btn:hover{

    transform:translateY(-5px);

    color:var(--gold);

    border-color:rgba(200,165,90,.45);

    background:rgba(200,165,90,.08);

    box-shadow:

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

        0 0 20px rgba(200,165,90,.15);

}

.icon-btn:hover svg{

    transform:scale(1.12);

}

/* ==========================================
   ACTIVE CLICK
========================================== */

.icon-btn:active{

    transform:scale(.92);

}

/* ==========================================
   BADGE
========================================== */

.count-badge{

    position:absolute;

    top:-4px;

    right:-2px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:var(--primary-dark);

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid var(--primary);

    box-shadow:

        0 6px 18px rgba(200,165,90,.35);

}

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

.search-btn:hover{

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

}

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

.account-btn:hover{

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

}

/* ==========================================
   WISHLIST
========================================== */

.wishlist-btn:hover{

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

}

/* ==========================================
   CART
========================================== */

.cart-btn{

    margin-left:5px;

}

.cart-btn:hover{

    background:rgba(200,165,90,.10);

}

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

.icon-btn::after{

    content:attr(aria-label);

    position:absolute;

    bottom:-42px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    padding:8px 14px;

    background:rgba(8,38,35,.96);

    border:1px solid rgba(243,238,216,.08);

    color:var(--cream);

    font-size:12px;

    border-radius:30px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    pointer-events:none;

}

.icon-btn:hover::after{

    bottom:-50px;

    opacity:1;

    visibility:visible;

}

/* ==========================================
   HEADER SHADOW ON SCROLL
========================================== */

#header.scrolled .navbar{

    background:rgba(8,38,35,.82);

    backdrop-filter:blur(28px);

    border-color:rgba(243,238,216,.12);

    box-shadow:

        0 18px 45px rgba(0,0,0,.25);

}

/* ==========================================
   LOGO SHRINK
========================================== */

#header.scrolled .logo img{

    width:150px;

}

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

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,38,35,.82);

    backdrop-filter:blur(35px);

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

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding-top:120px;

    opacity:0;

    visibility:hidden;

    transition:.45s ease;

    z-index:99999;

}

.search-overlay.active{

    opacity:1;

    visibility:visible;

}

.search-container{

    width:min(700px,92%);

}

.close-search{

    position:absolute;

    top:40px;

    right:50px;

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border:1px solid rgba(243,238,216,.12);

    color:var(--cream);

    transition:var(--transition);

}

.close-search:hover{

    background:rgba(200,165,90,.12);

    color:var(--gold);

}

.search-box{

    display:flex;

    align-items:center;

    height:72px;

    border-radius:60px;

    overflow:hidden;

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

    border:1px solid rgba(243,238,216,.12);

}

.search-box input{

    flex:1;

    height:100%;

    padding:0 30px;

    border:none;

    outline:none;

    background:transparent;

    color:var(--cream);

    font-size:18px;

}

.search-box input::placeholder{

    color:rgba(243,238,216,.55);

}

.search-box button{

    width:80px;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gold);

}

.popular-searches{

    margin-top:45px;

}

.popular-searches h4{

    color:var(--cream);

    margin-bottom:18px;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.popular-searches a{

    display:inline-block;

    padding:12px 20px;

    margin:6px;

    border-radius:40px;

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

    border:1px solid rgba(243,238,216,.08);

}

.popular-searches a:hover{

    background:rgba(200,165,90,.08);

}


/* ==========================================================
   ACCOUNT DROPDOWN
========================================================== */

.account-dropdown{

    position:absolute;

    top:110px;

    right:130px;

    width:240px;

    background:rgba(8,38,35,.94);

    backdrop-filter:blur(25px);

    border:1px solid rgba(243,238,216,.08);

    border-radius:22px;

    padding:15px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.4s;

    z-index:999;

}

.account-dropdown.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.account-dropdown a{

    display:block;

    padding:14px 18px;

    border-radius:14px;

    color:var(--cream);

}

.account-dropdown a:hover{

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

    color:var(--gold);

}


/* ==========================================================
   MINI CART
========================================================== */

.mini-cart{

    position:fixed;

    right:-430px;

    top:0;

    width:420px;

    height:100vh;

    background:var(--primary-dark);

    border-left:1px solid rgba(243,238,216,.08);

    box-shadow:-20px 0 80px rgba(0,0,0,.25);

    transition:.45s;

    z-index:99999;

    overflow:auto;

}

.mini-cart.active{

    right:0;

}


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

.mobile-menu{

    position:fixed;

    inset:0;

    background:var(--primary-dark);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:99999;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.mobile-menu ul li a{

    color:var(--cream);

    font-size:28px;

    font-family:'Cormorant Garamond',serif;

    letter-spacing:2px;

}

.mobile-menu ul li a:hover{

    color:var(--gold);

}

.close-mobile{

    position:absolute;

    top:35px;

    right:35px;

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--cream);

}


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

@media(max-width:992px){

.desktop-menu{

display:none;

}

.mobile-toggle{

display:flex;

}

.header-actions{

gap:8px;

}

.logo img{

width:135px;

}

.icon-btn{

width:44px;

height:44px;

}

.mini-cart{

width:100%;

right:-100%;

}

.account-dropdown{

display:none;

}

}

@media(max-width:768px){

.announcement-bar{

display:none;

}

#header{

padding:12px 0;

}

.navbar{

height:72px;

padding:0 18px;

border-radius:50px;

}

.header-actions{

gap:6px;

}

.icon-btn{

width:40px;

height:40px;

}

.icon-btn svg{

width:18px;

height:18px;

}

.logo img{

width:120px;

}

.search-box{

height:60px;

}

.search-box input{

font-size:16px;

}

}


/*Navbar Light Effect*/
/* ==========================================================
   NAVBAR V2
   Liquid Glass + Mouse Light
========================================================== */

/* ---------------------------------
   Mouse Light
---------------------------------- */

.nav-light{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(200,165,90,.18) 0%,
        rgba(200,165,90,.08) 35%,
        rgba(13,55,51,.05) 70%,
        transparent 100%
    );

    filter:blur(45px);

    pointer-events:none;

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

    left:50%;

    top:50%;

    opacity:0;

    transition:
        opacity .35s ease;

    z-index:0;

}

/* ---------------------------------
   Reflection Layer
---------------------------------- */

.nav-reflection{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    border-radius:inherit;

}

.nav-reflection::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:40%;

    height:300%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.08),

        rgba(255,255,255,.18),

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(25deg);

    animation:reflectionMove 8s linear infinite;

}

@keyframes reflectionMove{

    from{

        transform:
        translateX(-120%)
        rotate(25deg);

    }

    to{

        transform:
        translateX(420%)
        rotate(25deg);

    }

}

/* ---------------------------------
   Keep content above effects
---------------------------------- */

.logo,
.desktop-menu,
.header-actions,
.mobile-toggle{

    position:relative;

    z-index:2;

}

/* ==========================================================
   MAGNETIC EFFECT
========================================================== */

.desktop-menu ul li a,
.icon-btn{

    will-change:transform;

    transform:translate3d(0,0,0);

}

.logo img{

    will-change:transform;

}

/* Premium Hover */

.desktop-menu ul li a:hover{

    text-shadow:
        0 0 18px rgba(200,165,90,.25);

}

.icon-btn{

    transition:

        transform .35s cubic-bezier(.19,1,.22,1),

        background .35s,

        border-color .35s,

        box-shadow .35s;

}

/* ==========================================================
   LUXURY MEGA MENU
========================================================== */

.has-mega-menu{
    position:relative;
}

/* ============================= */

.mega-menu{

    position:fixed;

    top:130px;

    left:50%;

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

    width:min(1450px,94vw);

    max-width:1450px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.45s cubic-bezier(.19,1,.22,1);

    z-index:99999;

    display:flex;

    justify-content:center;

}

/* Show */


.mega-menu.active{

    opacity:1;

    visibility:visible;

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

    pointer-events:auto;

}

/* ============================= */

.mega-container{

    display:grid;

    grid-template-columns:

    420px

    1fr;

    gap:40px;

    padding:45px;

    border-radius:36px;

    overflow:hidden;

    background:

    rgba(8,38,35,.78);

    backdrop-filter:blur(35px);

    border:

    1px solid

    rgba(243,238,216,.08);

    box-shadow:

    0 30px 100px

    rgba(0,0,0,.35);

}

/* ============================= */

.mega-left{

    display:flex;

    flex-direction:column;

}

/* ============================= */

.mega-label{

    color:var(--gold);

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:30px;

}

/* ============================= */

.mega-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:

    1px solid

    rgba(243,238,216,.05);

    transition:.35s;

}

/* ============================= */

.mega-link h4{

    font-family:

    "Cormorant Garamond",serif;

    color:var(--cream);

    font-size:28px;

    transition:.35s;

}

.mega-link small{

    display:block;

    margin-top:8px;

    color:var(--text-light);

    font-size:13px;

}

/* ============================= */

.mega-link:hover{

    padding-left:15px;

}

.mega-link:hover h4{

    color:var(--gold);

}

/* ============================= */

.mega-badge{

    padding:

    7px 14px;

    border-radius:30px;

    background:

    rgba(200,165,90,.15);

    color:var(--gold);

    font-size:11px;

    letter-spacing:1px;

}

/* ==========================================================
   MEGA MENU PREVIEW
========================================================== */

.mega-right{

    position:relative;

    min-height:520px;

    border-radius:28px;

    overflow:hidden;

}

.mega-preview{

    position:relative;

    width:100%;

    height:100%;

    border-radius:28px;

    overflow:hidden;

    background:#0b1f1d;

}

.mega-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .8s cubic-bezier(.19,1,.22,1),

        opacity .45s ease;

    transform:scale(1);

}

.mega-preview:hover img{

    transform:scale(1.08);

}

/* ========================= */

.mega-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:45px;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.75),

        rgba(0,0,0,.15),

        transparent

    );

}

/* ========================= */

.mega-overlay h2{

    color:var(--cream);

    font-family:"Cormorant Garamond",serif;

    font-size:52px;

    line-height:1.1;

    margin-bottom:18px;

}

.mega-overlay p{

    color:var(--text-light);

    max-width:420px;

    line-height:1.8;

    margin-bottom:30px;

}

.mega-overlay .btn-gold{

    width:max-content;

}

/* ========================= */

.mega-preview::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(200,165,90,.18),

        transparent 45%

    );

    pointer-events:none;

}

/* ========================= */

.mega-preview::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:40%;

    height:300%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:rotate(25deg);

    animation:megaReflection 8s linear infinite;

    z-index:2;

}

@keyframes megaReflection{

    from{

        transform:

        translateX(-150%)

        rotate(25deg);

    }

    to{

        transform:

        translateX(420%)

        rotate(25deg);

    }

}

/* ==========================================================
   ROKA JEWELS
   Products Section
==========================================================*/

.products{

    position:relative;

    padding:140px 0;

    background:#071f1d;

    overflow:hidden;

}

/*==========================
Grid
==========================*/

.products-grid{

    display:grid;

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

    gap:32px;

    margin-top:80px;

}

/*==========================
Card
==========================*/

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:30px;

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

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

    text-decoration:none;

    transition:.55s;

    backdrop-filter:blur(18px);

}

.product-card:hover{

    transform:translateY(-12px);

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

    box-shadow:

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

}

/*==========================
Image
==========================*/

.product-image{

    position:relative;

    height:360px;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

/*==========================
Badge
==========================*/

.product-badge{

    position:absolute;

    top:22px;

    left:22px;

    z-index:10;

    padding:8px 18px;

    border-radius:30px;

    background:var(--gold);

    color:#111;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

}

/*==========================
Wishlist
==========================*/

.wishlist-btn{

    position:absolute;

    top:22px;

    right:22px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(20px);

    color:white;

    cursor:pointer;

    z-index:12;

    transition:.4s;

}

.wishlist-btn:hover{

    background:var(--gold);

    color:#111;

}

/*==========================
Content
==========================*/

.product-content{

    padding:32px;

}

.product-content span{

    color:var(--gold);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.product-content h3{

    margin:14px 0;

    color:white;

    font-size:30px;

    font-family:"Cormorant Garamond",serif;

}

.product-content h4{

    color:var(--cream);

    font-size:22px;

    margin-bottom:28px;

}

.product-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-radius:50px;

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

    color:white;

    transition:.4s;

}

.product-card:hover .product-btn{

    background:var(--gold);

    color:#111;

}

.product-light{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%);

    filter:blur(45px);

    pointer-events:none;

    opacity:0;

    transition:.3s;

    z-index:5;

}

.product-card:hover .product-light{

    opacity:1;

}

@media(max-width:1200px){

.products-grid{

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

}

}

@media(max-width:768px){

.products-grid{

grid-template-columns:1fr;

}

.product-image{

height:300px;

}

}

/* ================================
Large Laptop
================================ */

@media(max-width:1400px){

.title{

font-size:56px;

}

.container{

width:94%;

}

}

/* ================================
Laptop
================================ */

@media(max-width:1200px){

.title{

font-size:48px;

}

section{

padding:100px 0;

}

}

/* ================================
Tablet
================================ */

@media(max-width:992px){

.title{

font-size:42px;

}

.subtitle{

font-size:17px;

}

section{

padding:90px 0;

}

}

/* ================================
Mobile
================================ */

@media(max-width:768px){

.title{

font-size:34px;

line-height:1.2;

}

.subtitle{

font-size:16px;

}

.container{

width:92%;

}

.btn-gold{

padding:14px 26px;

}

section{

padding:70px 0;

}

}

/* ================================
Small Mobile
================================ */

@media(max-width:480px){

.title{

font-size:28px;

}

.subtitle{

font-size:15px;

}

}

/*NavBar*/
@media(max-width:991px){

.nav-menu{

display:none;

}

.btn-book{

display:none;

}

#menuBtn{

display:block;

}

.nav-wrapper{

padding:0 20px;

height:74px;

}

.logo-top{

font-size:24px;

}

}

/* ==========================================================
   ROKA JEWELLERY
   Global Styles
========================================================== */


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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    line-height:1.7;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ===============================
   SCROLLBAR
================================= */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:var(--bg-dark);
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        var(--gold-light),
        var(--gold-dark)
    );
    border-radius:50px;
    border:2px solid var(--bg-dark);
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        var(--gold),
        var(--gold-dark)
    );
}

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

::selection{
    background:var(--gold);
    color:var(--primary-dark);
}

/* ===============================
   IMAGES
================================= */

img{
    max-width:100%;
    display:block;
    height:auto;
    object-fit:cover;
}

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

.container{
    width:92%;
    max-width:var(--container);
    margin:0 auto;
}

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

section{
    position:relative;
    padding:var(--section-space) 0;
}

/* ===============================
   LINKS
================================= */

a{
    text-decoration:none;
    color:inherit;
    transition:var(--transition);
}

a:hover{
    color:var(--gold);
}

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

ul{
    list-style:none;
}

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

button{
    cursor:pointer;
    border:none;
    outline:none;
    background:none;
    font:inherit;
}

/* ===============================
   LUXURY BACKGROUND
================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-3;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(13,55,51,.08),
        transparent 45%),

        radial-gradient(circle at 80% 80%,
        rgba(200,165,90,.08),
        transparent 45%),

        radial-gradient(ellipse at center,
        var(--primary-dark) 0%,
        var(--bg) 60%);

    mix-blend-mode:screen;
}

/* ===============================
   NOISE TEXTURE
================================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.035;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-light.png");

    z-index:-2;

    mix-blend-mode:overlay;
}

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

.glass{

    background:var(--glass-bg);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--glass-shadow);

    border-radius:var(--radius);

    transition:var(--transition);

}

.glass:hover{

    background:var(--glass-bg-hover);

    border-color:var(--gold);

    transform:translateY(-6px);

    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        0 0 30px rgba(200,165,90,.15);

}

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

.gold{
    color:var(--gold);
}

.text-cream{
    color:var(--cream);
}

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

.title{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(36px,4.5vw,64px);

    line-height:1.15;

    font-weight:600;

    letter-spacing:3px;

    color:var(--cream);

    text-transform:uppercase;

}

.subtitle{

    font-size:18px;

    line-height:1.9;

    color:var(--text-light);

    max-width:680px;

    margin-top:25px;

    letter-spacing:1px;

}

/* ===============================
   BUTTONS
================================= */

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    color:var(--primary-dark);

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(200,165,90,.25);

}

.btn-gold::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:translateX(-120%);

    transition:var(--transition-slow);

}

.btn-gold:hover::before{

    transform:translateX(120%);

}

.btn-gold:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 60px rgba(200,165,90,.35),
        0 0 30px rgba(200,165,90,.25);

}

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

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:60px;

    border:1px solid var(--gold);

    color:var(--cream);

    font-weight:500;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:var(--transition);

}

.btn-outline:hover{

    background:rgba(200,165,90,.08);

    border-color:var(--gold-light);

    color:var(--gold);

    transform:translateY(-4px);

}

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

.section-glow{

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
        rgba(200,165,90,.18),
        rgba(13,55,51,.35),
        transparent 75%);

    filter:blur(120px);

    pointer-events:none;

    z-index:-1;

}

/* ===============================
   LUXURY DIVIDER
================================= */

.divider{

    width:100%;

    height:1px;

    margin:80px 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(200,165,90,.6),
        transparent
    );

}

/* ==========================================================
   ROKA JEWELS
   Luxury Testimonials
==========================================================*/

.testimonials{

    position:relative;

    padding:140px 0;

    background:#081d1b;

    overflow:hidden;

}

.testimonials-slider{

    display:grid;

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

    gap:35px;

    margin-top:80px;

}

/*==========================================
Card
==========================================*/

.testimonial-card{

    position:relative;

    padding:45px;

    border-radius:32px;

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

    backdrop-filter:blur(20px);

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

    transition:.5s;

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-12px);

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

    box-shadow:

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

}

.quote-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--gold);

    margin-bottom:28px;

}

.quote-icon svg{

    width:30px;

    height:30px;

}

.testimonial-stars{

    display:flex;

    gap:8px;

    margin-bottom:24px;

    color:var(--gold);

}

.testimonial-stars svg{

    width:18px;

    height:18px;

    fill:currentColor;

}

.testimonial-text{

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

    line-height:2;

    font-size:17px;

    margin-bottom:35px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-user img{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

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

}

.testimonial-user h4{

    color:white;

    font-size:22px;

    margin-bottom:6px;

}

.testimonial-user span{

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

    font-size:14px;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%

    );

    top:-80px;

    right:-80px;

    opacity:0;

    transition:.5s;

}

.testimonial-card:hover::before{

    opacity:1;

}

@media(max-width:1100px){

.testimonials-slider{

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

}

}

@media(max-width:768px){

.testimonials-slider{

grid-template-columns:1fr;

}

.testimonial-card{

padding:35px;

}

}

/* ==========================================================
   ROKA JEWELLERY
   Luxury Design System v2
========================================================== */

:root{

/* ===============================
   BRAND COLORS
================================= */

--primary:#0D3733;
--primary-dark:#082623;
--primary-light:#174944;

--secondary:#1E504A;

--cream:#F3EED8;
--cream-light:#FCFAF4;

--gold:#C8A55A;
--gold-light:#E3C67A;
--gold-dark:#A88237;

--white:#FFFFFF;

--text:#ECE7D4;
--text-light:#D7D1BF;

--success:#5E8B7E;

/* ===============================
   BACKGROUNDS
================================= */

--bg:#0D3733;
--bg-dark:#082623;
--bg-light:#174944;

/* ===============================
   GLASS
================================= */

--glass-bg:rgba(255,255,255,.05);

--glass-bg-hover:rgba(255,255,255,.08);

--glass-border:rgba(243,238,216,.12);

--glass-shadow:
0 20px 60px rgba(0,0,0,.35);

/* ===============================
   BORDERS
================================= */

--border:rgba(243,238,216,.12);

--border-light:rgba(243,238,216,.06);

/* ===============================
   SHADOWS
================================= */

--shadow-sm:
0 10px 25px rgba(0,0,0,.18);

--shadow-md:
0 20px 60px rgba(0,0,0,.28);

--shadow-lg:
0 40px 120px rgba(0,0,0,.45);

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

--gold-glow:
0 0 35px rgba(200,165,90,.35);

--emerald-glow:
0 0 45px rgba(13,55,51,.55);

/* ===============================
   RADIUS
================================= */

--radius-sm:12px;

--radius-md:18px;

--radius:24px;

--radius-lg:36px;

--radius-xl:50px;

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

--container:1440px;

/* ===============================
   SPACING
================================= */

--section-space:140px;

--section-space-mobile:80px;

/* ===============================
   TRANSITION
================================= */

--transition:
all .45s cubic-bezier(.19,1,.22,1);

--transition-slow:
all .8s cubic-bezier(.19,1,.22,1);

}
/* ==========================================================
   ROKA JEWELS
   Luxury Brands
==========================================================*/

.brands{
    position: relative;
    padding: 140px 0;
    background: #071816;
    overflow: hidden;
}

/*==========================================
Section Heading
==========================================*/

.brands .section-heading{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 90px;
}

.brands .section-tag{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 12px;
}

.brands .section-tag::before{
    content: "";
    width: 40px;
    height: 1px;
    background: var(--gold);
}

.brands .section-heading h2{
    margin-top: 30px;
    font-size: 68px;
    line-height: 1.05;
    font-family: "Cormorant Garamond", serif;
    color: var(--cream);
}

.brands .section-heading p{
    margin-top: 28px;
    font-size: 18px;
    line-height: 2;
    color: rgba(255,255,255,.72);
}

/*==========================================
Slider
==========================================*/

.brands-slider{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:35px;
    margin-top:80px;
    width:100%;
}

.brands-slider::-webkit-scrollbar{
    display: none;
}

.brands-slider{
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*==========================================
Card
==========================================*/

.brand-card{
    position: relative;
    width: 220px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    transition: .45s ease;
    cursor: pointer;
}

.brand-card::before{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        rgba(212,175,55,.18),
        transparent 70%
    );
    opacity: 0;
    transition: .5s;
    filter: blur(40px);
}

.brand-card img{
    position: relative;
    z-index: 2;
    width: 130px;
    opacity: .7;
    filter: grayscale(100%);
    transition: .45s ease;
}

.brand-card:hover{
    transform: translateY(-10px);
    border-color: rgba(212,175,55,.35);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

.brand-card:hover::before{
    opacity: 1;
}

.brand-card:hover img{
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.08);
}

/*==========================================
Responsive
==========================================*/

@media (max-width:1200px){

    .brands .section-heading h2{
        font-size:56px;
    }

}

@media (max-width:992px){

    .brands{
        padding:120px 0;
    }

    .brand-card{
        width:180px;
        height:110px;
    }

    .brand-card img{
        width:110px;
    }

}

@media (max-width:768px){

    .brands{
        padding:100px 0;
    }

    .brands .section-heading{
        margin-bottom:60px;
    }

    .brands .section-heading h2{
        font-size:42px;
    }

    .brands .section-heading p{
        font-size:16px;
    }

    .brands-slider{
        gap:20px;
        margin-top:50px;
    }

}