/* =========================================================
   ROOT
========================================================= */

:root{
    --gold:#d4af37;
    --gold-light:#e8c95a;
    --gold-soft:rgba(212,175,55,.18);

    --cream:#fff4df;
    --text:#f8f2e8;
    --muted:#a9a39a;

    --dark:#171717;
    --dark-soft:#1d1a17;
    --card:#201d19;

    --border:rgba(212,175,55,.24);
}


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    background:#171717;
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}


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

.sunno-hero{

    position:relative;

    min-height:calc(100vh - 80px);

    width:100%;

    overflow:hidden;

    isolation:isolate;

    background:

        linear-gradient(
            rgba(23,23,23,.94),
            rgba(23,23,23,.97)
        );

}


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

.hero-grid{

    position:absolute;

    inset:0;

    z-index:-3;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    opacity:.7;

}


/* =========================================================
   VERY SUBTLE BACKGROUND LIGHT
========================================================= */

.sunno-hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    top:-280px;
    right:-220px;

    border-radius:50%;

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

    filter:blur(100px);

    z-index:-2;

    pointer-events:none;
}


.sunno-hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    bottom:-250px;
    left:-180px;

    border-radius:50%;

    background:rgba(128,76,36,.06);

    filter:blur(90px);

    z-index:-2;

    pointer-events:none;
}


/* =========================================================
   DECORATIVE FLOATING SYMBOLS
========================================================= */

.hero-bean{

    position:absolute;

    color:var(--gold);

    opacity:.5;

    pointer-events:none;

    z-index:1;

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


.bean-1{
    left:6%;
    top:32%;
    font-size:20px;
    animation-delay:0s;
}

.bean-2{
    right:7%;
    top:24%;
    font-size:15px;
    animation-delay:1s;
}

.bean-3{
    left:28%;
    bottom:17%;
    font-size:10px;
    animation-delay:2s;
}

.bean-4{
    right:28%;
    bottom:12%;
    font-size:16px;
    animation-delay:3s;
}


@keyframes decorFloat{

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

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

}


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

.sunno-hero-container{

    width:min(1280px,92%);

    min-height:calc(100vh - 80px);

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(500px, 1.08fr);

    align-items:center;

    gap:50px;

    padding:
        65px 0
        85px;

}


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

.sunno-hero-content{

    position:relative;

    z-index:5;

    max-width:590px;

}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:var(--gold);

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;
}


.eyebrow-line{

    width:30px;

    height:1px;

    background:var(--gold);

    opacity:.7;
}


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

.hero-title{

    font-size:clamp(48px,5.2vw,78px);

    line-height:1.02;

    letter-spacing:-3px;

    font-weight:700;

    color:#fff;

}


.hero-title span{

    display:inline-block;

    color:var(--gold);

}


.hero-title em{

    display:inline-block;

    color:var(--cream);

    font-style:normal;

    font-weight:400;

}


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

.hero-description{

    max-width:560px;

    margin-top:27px;

    color:#aaa59d;

    font-size:14px;

    line-height:1.9;

}


/* =========================================================
   CATEGORY MINI INFO
========================================================= */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:28px;

}


.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    padding:9px 13px;

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

    background:rgba(32,29,25,.62);

    border-radius:50px;

    backdrop-filter:blur(8px);

}


.feature-icon{

    width:29px;

    height:29px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    font-size:14px;
}


.feature-text{

    display:flex;

    flex-direction:column;

    line-height:1.2;
}


.feature-text strong{

    font-size:14px;

    color:#f3eee5;

    font-weight:600;
}


.feature-text span{

    margin-top:3px;

    font-size:10px;

    color:#8f8a83;
}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}


.hero-btn{

    height:52px;

    padding:0 22px;

    border-radius:6px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    font-size:12px;

    font-weight:600;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.hero-btn-primary{

    background:var(--gold);

    color:#171717;

}


.hero-btn-primary:hover{

    transform:translateY(-3px);

    background:var(--gold-light);

}


.hero-btn-outline{

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

    color:#f4eee3;

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

}


.hero-btn-outline:hover{

    transform:translateY(-3px);

    border-color:var(--gold);

    color:var(--gold);
}


.btn-arrow{

    font-size:19px;

    line-height:1;
}


/* =========================================================
   TRUST
========================================================= */

.hero-trust{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:25px;
}


.trust-stars{

    color:var(--gold);

    font-size:12px;

    letter-spacing:2px;
}


.trust-text{

    display:flex;

    flex-direction:column;

    line-height:1.3;
}


.trust-text strong{

    font-size:12px;

    color:#fff;
}


.trust-text span{

    font-size:8px;

    color:#817c75;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.sunno-hero-visual{

    position:relative;

    height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =========================================================
   VISUAL PARALLAX AREA
========================================================= */

.hero-parallax{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .15s ease-out;
}



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

.coffee-image-wrapper{

    position:absolute;

    left:50%;

    top:50%;

    width:410px;

    height:540px;

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

    z-index:4;

}


/* Outer image border */

.coffee-image-wrapper::before{

    content:"";

    position:absolute;

    inset:-8px;

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

    border-radius:
        150px
        150px
        24px
        24px;

    transform:rotate(1.5deg);

}


/* Second frame */

.coffee-image-wrapper::after{

    content:"";

    position:absolute;

    inset:-18px;

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

    border-radius:
        180px
        180px
        30px
        30px;

    transform:rotate(-2deg);
}


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

.coffee-image{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:
        145px
        145px
        22px
        22px;

    background:#211914;

    box-shadow:
        0 30px 70px rgba(0,0,0,.45);

    z-index:3;
}


.coffee-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.coffee-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.04),
            transparent 45%,
            rgba(0,0,0,.22)
        );

    pointer-events:none;
}


/* =========================================================
   STEAM
========================================================= */

.steam{

    position:absolute;

    width:18px;

    height:75px;

    top:26%;

    border-left:2px solid rgba(255,255,255,.22);

    border-radius:50%;

    filter:blur(2px);

    opacity:.65;

    animation:steamMove 3.2s ease-in-out infinite;

    z-index:6;
}


.steam-1{
    left:47%;
}


.steam-2{

    left:52%;

    height:65px;

    animation-delay:.8s;
}


.steam-3{

    left:57%;

    height:52px;

    animation-delay:1.5s;
}


@keyframes steamMove{

    0%{

        transform:
            translateY(12px)
            scaleX(.8);

        opacity:0;
    }

    35%{
        opacity:.6;
    }

    100%{

        transform:
            translateY(-35px)
            scaleX(1.15);

        opacity:0;
    }

}


/* =========================================================
   EST PLAQUE
========================================================= */

.coffee-badge{

    position:absolute;

    right:5%;

    top:15%;

    z-index:10;

    min-width:118px;

    padding:12px 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    background:
        linear-gradient(
            135deg,
            rgba(35,31,25,.96),
            rgba(25,23,20,.94)
        );

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

    border-radius:7px;

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

    transform:rotate(-4deg);

    animation:badgeFloat 4.5s ease-in-out infinite;
}


.badge-icon{

    color:var(--gold);

    font-size:12px;
}


.coffee-badge div{

    display:flex;

    flex-direction:column;

    line-height:1.1;
}


.coffee-badge small{

    font-size:12px;

    color:#817a70;

    letter-spacing:2px;
}


.coffee-badge strong{

    margin-top:4px;

    color:var(--gold-light);

    font-size:15px;

    letter-spacing:1px;
}


@keyframes badgeFloat{

    0%,100%{
        transform:translateY(0) rotate(-4deg);
    }

    50%{
        transform:translateY(-8px) rotate(-2deg);
    }

}


/* =========================================================
   FLOATING INFO CARDS
========================================================= */

.coffee-info-card{
    position:absolute;
    z-index:12;
    width:205px;
    min-height:72px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(25,23,20,.97);
    border:1px solid rgba(212,175,55,.34);
    border-radius:10px;
    box-shadow:
        0 18px 45px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.02);
    backdrop-filter:blur(10px);
    transition:
        transform .2s ease-out,
        border-color .2s ease,
        box-shadow .2s ease;
    animation:cardFloat 4.5s ease-in-out infinite;
}

/* Four cards */

.card-coffee{
    left:-1%;
    top:20%;
    animation-delay:0s;
}

.card-juice{
    right:-1%;
    bottom:25%;
    animation-delay:1s;
}

.card-food{
    left:0;
    bottom:18%;
    animation-delay:1.8s;
}



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

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


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

.info-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(212,175,55,.11);
    border:1px solid rgba(212,175,55,.30);
    font-size:16px;
}


.info-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.2;
}


.info-content strong{
    color:#fff8ec;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
}


.info-content small{
    display:block;
    margin-top:4px;
    color:#a9a198;
    font-size:10.5px;
    line-height:1.4;
    white-space:nowrap;
}


/* =========================================================
   SMALL GOLD DOTS
========================================================= */

.visual-dot{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--gold);

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

    z-index:8;

    animation:dotFloat 3.5s ease-in-out infinite;
}


.dot-1{

    top:24%;

    left:23%;

}


.dot-2{

    top:48%;

    right:14%;

    animation-delay:1s;
}


.dot-3{

    bottom:23%;

    left:20%;

    animation-delay:1.8s;
}


.dot-4{

    bottom:29%;

    right:21%;

    animation-delay:2.5s;
}


@keyframes dotFloat{

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

    50%{
        transform:translateY(-7px);
        opacity:1;
    }

}


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

.hero-stats{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    width:min(850px,80%);

    padding-top:18px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:5;
}


.hero-stat{

    flex:1;

    text-align:center;
}


.hero-stat strong{

    color:var(--gold);

    font-size:22px;

    font-weight:600;
}


.hero-stat span{

    color:var(--gold);

    font-size:13px;
}


.hero-stat p{

    margin-top:3px;

    color:#716c65;

    font-size:8px;

    letter-spacing:.3px;
}


.stat-divider{

    width:1px;

    height:27px;

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


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

.hero-scroll{

    position:absolute;

    right:18px;

    bottom:55px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:5;
}


.hero-scroll span{

    writing-mode:vertical-rl;

    color:#66615a;

    font-size:7px;

    letter-spacing:2px;
}


.scroll-line{

    width:1px;

    height:38px;

    background:linear-gradient(
        to bottom,
        var(--gold),
        transparent
    );
}


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

@media(max-width:1100px){

    .sunno-hero-container{

        grid-template-columns:1fr;

        padding:
            70px 0
            140px;

        gap:20px;
    }


    .sunno-hero-content{

        max-width:700px;

        margin:auto;

        text-align:center;
    }


    .hero-eyebrow{

        justify-content:center;
    }


    .hero-description{

        margin-left:auto;

        margin-right:auto;
    }


    .hero-features{

        justify-content:center;
    }


    .hero-buttons{

        justify-content:center;
    }


    .hero-trust{

        justify-content:center;
    }


    .sunno-hero-visual{

        height:590px;

        max-width:720px;

        width:100%;

        margin:auto;
    }


    .hero-stats{

        width:90%;
    }

}


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

@media(max-width:700px){

    .sunno-hero-container{

        width:92%;

        padding-top:55px;

        padding-bottom:130px;
    }


    .hero-title{

        font-size:clamp(42px,12vw,58px);

        letter-spacing:-2px;
    }


    .hero-description{

        font-size:12px;

        line-height:1.8;
    }


    .hero-features{

        gap:7px;
    }


    .hero-feature{

        padding:7px 10px;
    }


    .feature-icon{

        width:25px;

        height:25px;
    }


    .feature-text strong{

        font-size:14px;
    }


    .feature-text span{

        font-size:10px;
    }


    .sunno-hero-visual{

        height:500px;
    }


    .coffee-image-wrapper{

        width:290px;

        height:390px;
    }


     .coffee-info-card{
        width:165px;
        min-height:60px;
        padding:9px 10px;
        gap:9px;
    }


     .info-icon{
        width:31px;
        height:31px;
        flex-basis:31px;
        font-size:13px;
    }


     .info-content strong{
        font-size:12px;
    }


    .info-content small{

        font-size:8.5px;

        margin-top:3px;
    }


    .card-coffee{

        left:0;

        top:15%;
    }


    .card-juice{

        right:0;

        bottom:25%;
    }


    .card-food{

        left:0;

        bottom:15%;
    }


    .card-dessert{

        right:0;

        bottom:7%;
    }


    .coffee-badge{

        right:2%;

        top:7%;

        min-width:95px;

        padding:9px 10px;
    }


    .coffee-badge strong{

        font-size:12px;
    }


    .coffee-badge small{

        font-size:12px;
    }


    .hero-stats{

        width:94%;

        bottom:25px;
    }


    .hero-stat strong{

        font-size:16px;
    }


    .hero-stat p{

        font-size:6px;
    }


    .stat-divider{

        height:22px;
    }


    .hero-scroll{

        display:none;
    }


    .hero-bean{

        opacity:.3;
    }

}


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

@media(max-width:480px){

    .sunno-hero-container{

        padding-top:45px;
    }


    .hero-title{

        font-size:39px;
    }


    .hero-description{

        font-size:11px;
    }


    .hero-feature:nth-child(3){

        display:none;
    }


    .sunno-hero-visual{

        height:430px;
    }


    .coffee-image-wrapper{

        width:235px;

        height:330px;
    }


     .coffee-info-card{
        width:142px;
        min-height:52px;
        padding:7px 8px;
        gap:7px;
    }


     .info-icon{
        width:26px;
        height:26px;
        flex-basis:26px;
        font-size:11px;
    }


     .info-content strong{
        font-size:10.5px;
    }


    .info-content small{

        font-size:7.5px;
    }


    .card-coffee{

        left:-3%;

        top:13%;
    }


    .card-juice{

        right:-1%;

        bottom:25%;
    }


    .card-food{

        left:-3%;

        bottom:14%;
    }


    .card-dessert{

        right:-1%;

        bottom:5%;
    }


    .coffee-badge{

        right: 3%;
        top: 10%;

        min-width:82px;

        padding:7px 8px;
    }


    .badge-icon{

        font-size:9px;
    }


    .coffee-badge strong{

        font-size:10px;
    }


    .coffee-badge small{

        font-size:12px;
    }


    .hero-stats{

        gap:3px;
    }


    .hero-stat strong{

        font-size:14px;
    }


    .hero-stat p{

        font-size:5px;
    }


    .hero-stat span{

        font-size:8px;
    }

}
/* short about start  */
/* =========================================
   MAIN SECTION
========================================= */

.sunno-about-section{
    position:relative;
    width:100%;
    padding:130px 0 120px;
    background:
        radial-gradient(
            circle at 10% 40%,
            rgba(212,175,55,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(212,175,55,.045),
            transparent 28%
        ),
        var(--dark);

    overflow:hidden;
}


/* subtle grid */

.sunno-about-section::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 85%,
        transparent
    );

    pointer-events:none;
}


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

.sunno-about-container{
    width:min(1240px, calc(100% - 100px));
    margin:0 auto;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    align-items:center;
    gap:100px;

    position:relative;
    z-index:2;
}


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

.sunno-about-glow{
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;

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

    filter:blur(100px);

    pointer-events:none;
}

.sunno-about-glow-1{
    top:5%;
    left:-250px;
}

.sunno-about-glow-2{
    right:-280px;
    bottom:-100px;
}


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

.sunno-about-visual{
    position:relative;
    min-height:570px;

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


/* Image wrapper */

.sunno-about-image-wrap{
    position:relative;
    width:100%;
    max-width:500px;
}


/* decorative outline */

.sunno-about-outline{
    position:absolute;
    width:92%;
    height:96%;

    top:-20px;
    right:-20px;

    border:1px solid var(--border);
    border-radius:210px 210px 35px 35px;

    transform:rotate(3deg);

    transition:all .6s ease;
}


/* image */

.sunno-about-image-box{
    position:relative;
    width:100%;
    height:570px;

    overflow:hidden;

    border-radius:210px 210px 35px 35px;

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

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

    background:var(--card);
}


/* image */

.sunno-about-image-box img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    filter:
        brightness(.72)
        contrast(1.05)
        saturate(.85);

    transform:scale(1.03);

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}


/* image hover */

.sunno-about-image-box:hover img{
    transform:scale(1.10);

    filter:
        brightness(.82)
        contrast(1.08)
        saturate(1);
}


/* image overlay */

.sunno-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(10,8,5,.65),
            transparent 50%
        );

    pointer-events:none;
}


/* side text */

.sunno-image-side-text{
    position:absolute;

    right:22px;
    top:50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin:center;

    color:rgba(255,244,223,.45);

    font-size:9px;
    letter-spacing:4px;
    font-weight:600;

    white-space:nowrap;
}


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

.sunno-experience-card{
    position:absolute;

    left:-65px;
    bottom:60px;

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

    min-width:250px;

    padding:17px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(32,29,25,.96),
            rgba(23,23,23,.96)
        );

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

    border-radius:16px;

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

    backdrop-filter:blur(15px);

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

    z-index:5;
}


/* icon */

.sunno-experience-icon{
    width:45px;
    height:45px;

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

    border-radius:50%;

    background:var(--gold-soft);

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

    color:var(--gold);

    font-size:18px;
}


/* content */

.sunno-experience-content{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sunno-experience-content > span{
    color:var(--gold);
    font-size:9px;
    letter-spacing:2px;
    font-weight:700;
}

.sunno-experience-content strong{
    color:var(--cream);

    font-size:20px;
    font-weight:700;
}

.sunno-experience-content small{
    color:var(--muted);
    font-size:10px;
}


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

.sunno-about-badge{
    position:absolute;

    right:-40px;
    top:75px;

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

    padding:13px 18px;

    background:rgba(29,26,23,.94);

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

    border-radius:10px;

    color:var(--gold-light);

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

    letter-spacing:2px;

    transform:rotate(-4deg);

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

    z-index:5;
}

.sunno-badge-star{
    font-size:14px;
    animation:sunnoStarPulse 2s infinite;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.sunno-circle-decoration{
    position:absolute;

    width:70px;
    height:70px;

    right:-85px;
    bottom:25px;

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

    border-radius:50%;

    animation:sunnoRotate 12s linear infinite;
}

.sunno-circle-decoration::before{
    content:"✦";

    position:absolute;

    top:50%;
    left:50%;

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

    color:var(--gold);

    font-size:15px;
}


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

.sunno-about-content{
    max-width:620px;
}


/* label */

.sunno-section-label{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:25px;

    color:var(--gold);

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

    letter-spacing:4px;
}

.sunno-label-line{
    width:30px;
    height:1px;

    background:var(--gold);
}


/* title */

.sunno-about-title{
    margin:0 0 28px;

    color:var(--text);

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

    line-height:1.03;

    letter-spacing:-2.5px;

    font-weight:700;
}

.sunno-about-title span{
    display:block;

    color:var(--gold);

    font-weight:500;

    font-style:italic;

    font-family:Georgia, "Times New Roman", serif;

    letter-spacing:-2px;
}


/* description */

.sunno-about-description{
    max-width:590px;

    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;
}

.sunno-description-second{
    margin-top:13px;
}


/* =========================================
   FEATURES
========================================= */

.sunno-about-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-top:35px;
}


/* feature */

.sunno-feature{
    padding:20px 15px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(212,175,55,.018)
        );

    border-radius:15px;

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease;
}

.sunno-feature:hover{
    transform:translateY(-7px);

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

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


/* icon */

.sunno-feature-icon{
    width:40px;
    height:40px;

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

    margin-bottom:14px;

    border-radius:50%;

    color:var(--gold);

    background:var(--gold-soft);

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

    font-size:14px;

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

.sunno-feature:hover .sunno-feature-icon{
    transform:rotateY(180deg);

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


/* feature heading */

.sunno-feature h4{
    margin:0 0 7px;

    color:var(--cream);

    font-size:13px;
    font-weight:700;
}


/* feature text */

.sunno-feature p{
    margin:0;

    color:#8f8a83;

    font-size:10px;

    line-height:1.7;
}


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

.sunno-about-bottom{
    display:flex;
    align-items:center;

    gap:28px;

    margin-top:35px;
}


/* button */

.sunno-about-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    padding:15px 21px;

    color:#191713;

    background:var(--gold);

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

    border-radius:6px;

    text-decoration:none;

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

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.sunno-about-btn i{
    transition:transform .35s ease;
}

.sunno-about-btn:hover{
    background:transparent;

    color:var(--gold-light);

    transform:translateY(-3px);

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

.sunno-about-btn:hover i{
    transform:translateX(6px);
}


/* =========================================
   RATING
========================================= */

.sunno-mini-rating{
    display:flex;
    align-items:center;
    gap:10px;
}

.sunno-stars{
    color:var(--gold);

    font-size:10px;

    letter-spacing:1px;
}

.sunno-rating-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sunno-rating-text strong{
    color:var(--cream);
    font-size:12px;
}

.sunno-rating-text span{
    color:#77736d;
    font-size:8px;
}


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

.sunno-about-bottom-line{
    width:min(850px, calc(100% - 100px));

    margin:100px auto 0;

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

    opacity:.5;
}

.sunno-about-bottom-line span{
    flex:1;

    height:1px;

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

.sunno-about-bottom-line span:last-child{
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.sunno-about-bottom-line i{
    color:var(--gold);
    font-size:12px;
    font-style:normal;

    animation:sunnoStarPulse 2s ease-in-out infinite;
}


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

.sunno-reveal-left,
.sunno-reveal-right{
    opacity:0;

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}

.sunno-reveal-left{
    transform:translateX(-70px);
}

.sunno-reveal-right{
    transform:translateX(70px);
}

.sunno-reveal-left.sunno-visible,
.sunno-reveal-right.sunno-visible{
    opacity:1;
    transform:translateX(0);
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes sunnoFloatCard{

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

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

}


@keyframes sunnoStarPulse{

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

    50%{
        transform:scale(1.2);
        opacity:1;
    }

}


@keyframes sunnoRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


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

@media (max-width:1100px){

    .sunno-about-container{
        width:min(100% - 70px, 1000px);

        gap:65px;
    }

    .sunno-about-image-box{
        height:510px;
    }

    .sunno-about-visual{
        min-height:510px;
    }

    .sunno-experience-card{
        left:-35px;
    }

    .sunno-about-badge{
        right:-25px;
    }

    .sunno-about-features{
        gap:10px;
    }

}


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

@media (max-width:850px){

    .sunno-about-section{
        padding:100px 0;
    }

    .sunno-about-container{
        width:min(100% - 50px, 650px);

        grid-template-columns:1fr;

        gap:80px;
    }

    .sunno-about-visual{
        min-height:auto;
    }

    .sunno-about-image-wrap{
        max-width:500px;
        margin:0 auto;
    }

    .sunno-about-image-box{
        height:560px;
    }

    .sunno-about-content{
        max-width:none;
    }

    .sunno-about-title{
        font-size:55px;
    }

    .sunno-about-description{
        max-width:none;
    }

}


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

@media (max-width:600px){

    .sunno-about-section{
        padding:80px 0 75px;
    }

    .sunno-about-container{
        width:calc(100% - 36px);

        gap:65px;
    }


    /* image */

    .sunno-about-image-box{
        height:430px;

        border-radius:150px 150px 25px 25px;
    }

    .sunno-about-outline{
        top:-12px;
        right:-12px;
    }


    /* experience card */

    .sunno-experience-card{
        left:10px;
        bottom:25px;

        min-width:auto;

        padding:13px 15px;
    }

    .sunno-experience-icon{
        width:38px;
        height:38px;
        font-size:15px;
    }

    .sunno-experience-content strong{
        font-size:16px;
    }

    .sunno-experience-content small{
        font-size:8px;
    }


    /* badge */

    .sunno-about-badge{
        right:5px;
        top:35px;

        padding:10px 12px;

        font-size:8px;
        letter-spacing:1.5px;
    }


    /* circle */

    .sunno-circle-decoration{
        right:-10px;
        bottom:-35px;

        width:55px;
        height:55px;
    }


    /* content */

    .sunno-section-label{
        font-size:9px;
        letter-spacing:3px;
    }

    .sunno-about-title{
        font-size:43px;

        letter-spacing:-1.8px;

        margin-bottom:22px;
    }

    .sunno-about-title span{
        letter-spacing:-1px;
    }

    .sunno-about-description{
        font-size:13px;
        line-height:1.8;
    }


    /* features */

    .sunno-about-features{
        grid-template-columns:1fr;

        gap:10px;

        margin-top:28px;
    }

    .sunno-feature{
        display:flex;
        align-items:flex-start;
        gap:14px;

        padding:15px;
    }

    .sunno-feature-icon{
        flex-shrink:0;

        margin-bottom:0;
    }

    .sunno-feature h4{
        margin-top:2px;
    }


    /* action */

    .sunno-about-bottom{
        flex-direction:column;
        align-items:flex-start;

        gap:20px;

        margin-top:28px;
    }

    .sunno-about-btn{
        width:100%;
    }


    /* line */

    .sunno-about-bottom-line{
        width:calc(100% - 40px);

        margin-top:70px;
    }

}


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

@media (max-width:380px){

    .sunno-about-container{
        width:calc(100% - 28px);
    }

    .sunno-about-image-box{
        height:390px;
    }

    .sunno-about-title{
        font-size:37px;
    }

    .sunno-experience-card{
        left:0;
    }

    .sunno-about-badge{
        right:0;
    }

}
/* fetured section start  */
/* =========================================
   SUNNO CAFE - FEATURED MENU
========================================= */

.sunno-menu-section{
    position:relative;
    width:100%;

    padding:125px 0 120px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(212,175,55,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(212,175,55,.04),
            transparent 30%
        ),
        var(--dark);

    overflow:hidden;
}


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

.sunno-menu-section::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.014) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    pointer-events:none;
}


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

.sunno-menu-container{
    position:relative;
    z-index:2;

    width:min(1240px, calc(100% - 100px));

    margin:0 auto;
}


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

.sunno-menu-glow{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    filter:blur(110px);

    pointer-events:none;
}

.sunno-menu-glow-left{
    left:-350px;
    top:20%;
}

.sunno-menu-glow-right{
    right:-350px;
    bottom:5%;
}


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

.sunno-menu-header{
    max-width:720px;

    margin:0 auto;

    text-align:center;
}


/* label */

.sunno-menu-label{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:13px;

    margin-bottom:24px;
}

.sunno-menu-label span{
    width:35px;
    height:1px;

    background:var(--gold);
}

.sunno-menu-label small{
    color:var(--gold);

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

    letter-spacing:4px;
}


/* title */

.sunno-menu-title{
    margin:0;

    color:var(--text);

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

    line-height:1.05;

    letter-spacing:-2.8px;

    font-weight:700;
}

.sunno-menu-title span{
    display:block;

    color:var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:italic;

    font-weight:500;

    letter-spacing:-2px;
}


/* subtitle */

.sunno-menu-subtitle{
    max-width:590px;

    margin:25px auto 0;

    color:var(--muted);

    font-size:14px;

    line-height:1.9;
}


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

.sunno-menu-filter{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin:50px 0 45px;

    padding:7px;

    width:max-content;

    max-width:100%;

    margin-left:auto;
    margin-right:auto;

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

    background:rgba(32,29,25,.65);

    border-radius:50px;

    backdrop-filter:blur(15px);
}


/* filter button */

.sunno-menu-filter-btn{
    position:relative;

    border:0;
    outline:none;

    background:transparent;

    color:#89847c;

    padding:11px 20px;

    border-radius:40px;

    cursor:pointer;

    font-family:inherit;

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

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.sunno-menu-filter-btn:hover{
    color:var(--cream);
}

.sunno-menu-filter-btn.active{
    color:#1a1814;

    background:var(--gold);

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

.sunno-menu-filter-btn:active{
    transform:scale(.96);
}


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

.sunno-menu-grid{
    display:grid;

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

    gap:20px;
}


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

.sunno-menu-card{
    position:relative;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(32,29,25,.95),
            rgba(25,23,20,.98)
        );

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

    border-radius:18px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .45s ease;

    opacity:1;
}

.sunno-menu-card:hover{
    transform:translateY(-9px);

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

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


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

.sunno-menu-card-image{
    position:relative;

    height:245px;

    overflow:hidden;

    background:var(--dark-soft);
}


/* image */

.sunno-menu-card-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:
        brightness(.78)
        saturate(.82);

    transform:scale(1.02);

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}

.sunno-menu-card:hover
.sunno-menu-card-image img{
    transform:scale(1.10);

    filter:
        brightness(.88)
        saturate(1);
}


/* overlay */

.sunno-menu-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(10,9,7,.1),
            transparent 40%,
            rgba(10,9,7,.65)
        );

    pointer-events:none;
}


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

.sunno-menu-badge{
    position:absolute;

    top:15px;
    left:15px;

    padding:7px 10px;

    color:var(--gold-light);

    background:rgba(23,23,23,.82);

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

    border-radius:5px;

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

    letter-spacing:1.5px;

    backdrop-filter:blur(10px);

    z-index:2;
}

.sunno-menu-badge-gold{
    color:#1b1914;

    background:var(--gold);

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


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

.sunno-menu-view-btn{
    position:absolute;

    right:14px;
    bottom:14px;

    width:38px;
    height:38px;

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

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

    border-radius:50%;

    background:rgba(23,23,23,.8);

    color:var(--gold);

    cursor:pointer;

    opacity:0;

    transform:
        translateY(8px)
        rotate(-20deg);

    transition:
        opacity .35s ease,
        transform .4s ease,
        background .35s ease,
        color .35s ease;

    backdrop-filter:blur(10px);

    z-index:3;
}

.sunno-menu-card:hover
.sunno-menu-view-btn{
    opacity:1;

    transform:
        translateY(0)
        rotate(0);
}

.sunno-menu-view-btn:hover{
    color:#1a1814;

    background:var(--gold);

    transform:rotate(0) scale(1.08) !important;
}


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

.sunno-menu-card-content{
    padding:21px 19px 18px;
}


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

.sunno-menu-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:10px;
}


/* category */

.sunno-menu-category{
    display:block;

    margin-bottom:6px;

    color:var(--gold);

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

    letter-spacing:2px;
}


/* title */

.sunno-menu-card h3{
    margin:0;

    color:var(--cream);

    font-size:16px;

    line-height:1.25;

    font-weight:700;
}


/* price */

.sunno-menu-price{
    flex-shrink:0;

    color:var(--gold-light);

    font-size:15px;

    font-weight:700;
}


/* description */

.sunno-menu-card-content > p{
    min-height:50px;

    margin:13px 0 17px;

    color:#858079;

    font-size:10px;

    line-height:1.7;
}


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

.sunno-menu-card-bottom{
    display:flex;

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

    gap:10px;

    padding-top:14px;

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


/* meta */

.sunno-menu-meta{
    display:flex;
    align-items:center;

    gap:6px;

    color:#716d67;

    font-size:8px;
}

.sunno-menu-meta i{
    color:var(--gold);

    font-size:9px;
}


/* order */

.sunno-menu-order{
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:var(--gold-light);

    text-decoration:none;

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

    transition:
        color .3s ease,
        gap .3s ease;
}

.sunno-menu-order i{
    font-size:8px;

    transition:transform .3s ease;
}

.sunno-menu-order:hover{
    color:var(--cream);

    gap:10px;
}

.sunno-menu-order:hover i{
    transform:translateX(3px);
}


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

.sunno-menu-bottom{
    margin-top:70px;

    text-align:center;
}


/* decorative line */

.sunno-menu-bottom-line{
    width:min(500px, 80%);

    margin:0 auto 22px;

    display:flex;
    align-items:center;

    gap:15px;
}

.sunno-menu-bottom-line span{
    flex:1;

    height:1px;

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

.sunno-menu-bottom-line span:last-child{
    background:
        linear-gradient(
            90deg,
            var(--border),
            transparent
        );
}

.sunno-menu-bottom-line i{
    color:var(--gold);

    font-size:10px;

    font-style:normal;
}


/* text */

.sunno-menu-bottom p{
    margin:0 0 17px;

    color:#77726b;

    font-size:11px;
}


/* all menu button */

.sunno-menu-all-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:17px;

    padding:14px 21px;

    color:var(--gold-light);

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

    border-radius:6px;

    background:transparent;

    text-decoration:none;

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

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;
}

.sunno-menu-all-btn i{
    transition:transform .35s ease;
}

.sunno-menu-all-btn:hover{
    color:#1a1814;

    background:var(--gold);

    border-color:var(--gold);

    transform:translateY(-3px);
}

.sunno-menu-all-btn:hover i{
    transform:translateX(5px);
}


/* =========================================
   REVEAL
========================================= */

.sunno-menu-reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}

.sunno-menu-reveal.sunno-menu-visible{
    opacity:1;

    transform:translateY(0);
}


/* card reveal */

.sunno-menu-reveal-card{
    opacity:0;

    transform:translateY(45px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.16,1,.3,1),
        border-color .45s ease,
        box-shadow .45s ease;
}

.sunno-menu-reveal-card.sunno-menu-card-visible{
    opacity:1;

    transform:translateY(0);
}

.sunno-menu-reveal-card.sunno-menu-card-visible:hover{
    transform:translateY(-9px);
}


/* =========================================
   FILTER HIDDEN ANIMATION
========================================= */

.sunno-menu-card.sunno-menu-hidden{
    display:none;
}


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

@media (max-width:1100px){

    .sunno-menu-container{
        width:min(100% - 70px, 1000px);
    }

    .sunno-menu-grid{
        grid-template-columns:
            repeat(2, 1fr);

        gap:18px;
    }

    .sunno-menu-card-image{
        height:280px;
    }

}


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

@media (max-width:750px){

    .sunno-menu-section{
        padding:100px 0;
    }

    .sunno-menu-container{
        width:min(100% - 50px, 650px);
    }

    .sunno-menu-title{
        font-size:53px;
    }

    .sunno-menu-filter{
        width:100%;

        overflow-x:auto;

        justify-content:flex-start;

        scrollbar-width:none;
    }

    .sunno-menu-filter::-webkit-scrollbar{
        display:none;
    }

    .sunno-menu-filter-btn{
        flex-shrink:0;
    }

}


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

@media (max-width:600px){

    .sunno-menu-section{
        padding:80px 0;
    }

    .sunno-menu-container{
        width:calc(100% - 36px);
    }


    /* header */

    .sunno-menu-label small{
        font-size:8px;

        letter-spacing:3px;
    }

    .sunno-menu-label span{
        width:25px;
    }

    .sunno-menu-title{
        font-size:43px;

        letter-spacing:-2px;
    }

    .sunno-menu-title span{
        letter-spacing:-1px;
    }

    .sunno-menu-subtitle{
        font-size:12px;

        line-height:1.8;

        margin-top:20px;
    }


    /* filter */

    .sunno-menu-filter{
        margin-top:35px;
        margin-bottom:30px;

        padding:5px;
    }

    .sunno-menu-filter-btn{
        padding:10px 15px;

        font-size:10px;
    }


    /* grid */

    .sunno-menu-grid{
        grid-template-columns:1fr;

        gap:16px;
    }


    /* image */

    .sunno-menu-card-image{
        height:280px;
    }


    /* mobile view button */

    .sunno-menu-view-btn{
        opacity:1;

        transform:none;
    }


    /* card */

    .sunno-menu-card-content{
        padding:18px 16px 16px;
    }

    .sunno-menu-card h3{
        font-size:15px;
    }

    .sunno-menu-card-content > p{
        min-height:auto;

        margin:11px 0 15px;

        font-size:10px;
    }


    /* bottom */

    .sunno-menu-bottom{
        margin-top:55px;
    }

}


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

@media (max-width:380px){

    .sunno-menu-container{
        width:calc(100% - 28px);
    }

    .sunno-menu-title{
        font-size:37px;
    }

    .sunno-menu-card-image{
        height:245px;
    }

    .sunno-menu-meta{
        font-size:7px;
    }

    .sunno-menu-order{
        font-size:8px;
    }

}
/* signature section start  */
/* =========================================
   SUNNO CAFE - SIGNATURE ITEM
========================================= */

.sunno-signature-section{
    position:relative;

    width:100%;

    padding:125px 0 120px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(212,175,55,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(212,175,55,.035),
            transparent 28%
        ),
        var(--dark-soft);

    overflow:hidden;
}


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

.sunno-signature-section::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    pointer-events:none;
}


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

.sunno-signature-glow{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    filter:blur(120px);

    pointer-events:none;
}

.sunno-signature-glow-1{
    left:-320px;
    top:15%;
}

.sunno-signature-glow-2{
    right:-350px;
    bottom:-100px;
}


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

.sunno-signature-container{
    position:relative;

    z-index:2;

    width:min(
        1240px,
        calc(100% - 100px)
    );

    margin:0 auto;
}


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

.sunno-signature-top-label{
    display:flex;

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

    gap:14px;

    margin-bottom:65px;
}

.sunno-signature-top-label span{
    width:45px;
    height:1px;

    background:var(--gold);
}

.sunno-signature-top-label small{
    color:var(--gold);

    font-size:10px;

    font-weight:700;

    letter-spacing:4px;
}


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

.sunno-signature-main{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    align-items:center;

    gap:100px;
}


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

.sunno-signature-visual{
    position:relative;

    display:flex;

    justify-content:center;
}


/* image wrap */

.sunno-signature-image-wrap{
    position:relative;

    width:100%;

    max-width:520px;

    transition:
        transform .25s ease;
}


/* =========================================
   FRAMES
========================================= */

.sunno-signature-frame{
    position:absolute;

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

    border-radius:25px;

    pointer-events:none;
}

.frame-one{
    inset:-15px;

    transform:rotate(-2deg);

    opacity:.65;
}

.frame-two{
    inset:-28px;

    transform:rotate(2.5deg);

    opacity:.35;
}


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

.sunno-signature-image{
    position:relative;

    width:100%;

    height:570px;

    overflow:hidden;

    border-radius:25px;

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

    background:var(--card);

    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        0 0 70px rgba(
            212,
            175,
            55,
            .035
        );
}


/* image */

.sunno-signature-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:
        brightness(.68)
        contrast(1.08)
        saturate(.82);

    transform:scale(1.03);

    transition:
        transform 1.2s
        cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}

.sunno-signature-image-wrap:hover
.sunno-signature-image img{
    transform:scale(1.09);

    filter:
        brightness(.78)
        contrast(1.08)
        saturate(.95);
}


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

.sunno-signature-image-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(10,8,5,.78),
            rgba(10,8,5,.05) 60%
        );

    pointer-events:none;
}


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

.sunno-signature-image-caption{
    position:absolute;

    left:25px;
    right:25px;
    bottom:24px;

    display:flex;

    align-items:center;

    gap:12px;

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

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

    z-index:2;
}

.sunno-signature-image-caption i{
    color:var(--gold);

    font-size:11px;

    font-style:normal;
}


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

.sunno-signature-rating-card{
    position:absolute;

    left:-55px;

    bottom:55px;

    display:flex;

    align-items:center;

    gap:13px;

    min-width:170px;

    padding:15px 17px;

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

    border-radius:14px;

    background:
        rgba(
            29,
            26,
            23,
            .94
        );

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

    backdrop-filter:blur(16px);

    z-index:5;

    animation:
        sunnoSignatureFloat
        4.5s ease-in-out infinite;
}


/* icon */

.sunno-signature-rating-icon{
    width:38px;
    height:38px;

    display:flex;

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

    border-radius:50%;

    color:var(--gold);

    background:var(--gold-soft);

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

    font-size:12px;
}


/* rating */

.sunno-signature-rating-card strong{
    color:var(--cream);

    font-size:17px;
}

.sunno-rating-stars{
    color:var(--gold);

    font-size:8px;

    letter-spacing:1px;
}

.sunno-signature-rating-card small{
    display:block;

    margin-top:2px;

    color:#79736b;

    font-size:8px;
}


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

.sunno-signature-badge{
    position:absolute;

    right:-40px;

    top:65px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 17px;

    background:
        rgba(
            29,
            26,
            23,
            .95
        );

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

    border-radius:9px;

    transform:rotate(4deg);

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

    z-index:5;
}

.sunno-signature-badge-star{
    width:30px;
    height:30px;

    display:flex;

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

    border-radius:50%;

    color:#191713;

    background:var(--gold);

    font-size:13px;
}

.sunno-signature-badge div:last-child{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.sunno-signature-badge span{
    color:#777168;

    font-size:7px;

    letter-spacing:2px;

    font-weight:700;
}

.sunno-signature-badge strong{
    color:var(--gold-light);

    font-size:12px;

    letter-spacing:2px;
}


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

.sunno-signature-dot{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--gold);

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

.dot-one{
    right:-65px;
    bottom:150px;
}

.dot-two{
    left:-80px;
    top:170px;

    width:4px;
    height:4px;

    opacity:.7;
}


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

.sunno-signature-content{
    max-width:600px;
}


/* eyebrow */

.sunno-signature-eyebrow{
    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:23px;

    color:var(--gold);

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.sunno-eyebrow-line{
    width:32px;
    height:1px;

    background:var(--gold);
}


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

.sunno-signature-title{
    margin:0 0 25px;

    color:var(--text);

    font-size:
        clamp(
            43px,
            4.8vw,
            68px
        );

    line-height:1.02;

    letter-spacing:-2.8px;

    font-weight:700;
}

.sunno-signature-title span{
    display:block;

    color:var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:italic;

    font-weight:500;

    letter-spacing:-2px;
}


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

.sunno-signature-description{
    max-width:560px;

    margin:0;

    color:var(--muted);

    font-size:14px;

    line-height:1.9;
}


/* =========================================
   INGREDIENTS
========================================= */

.sunno-signature-ingredients{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:32px;
}

.sunno-ingredient{
    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 12px;

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

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

    border-radius:7px;

    color:#aaa39a;

    font-size:9px;

    transition:
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.sunno-ingredient:hover{
    transform:translateY(-3px);

    border-color:var(--border);

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


/* ingredient icon */

.sunno-ingredient-icon{
    color:var(--gold);

    font-size:10px;
}


/* =========================================
   PRODUCT INFO
========================================= */

.sunno-signature-info{
    display:flex;

    align-items:center;

    gap:24px;

    margin-top:35px;

    padding:20px 0;

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

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


/* price */

.sunno-signature-price-box{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.sunno-signature-price-box span{
    color:#777168;

    font-size:7px;

    font-weight:700;

    letter-spacing:2px;
}

.sunno-signature-price-box strong{
    color:var(--gold-light);

    font-size:26px;

    line-height:1;
}


/* divider */

.sunno-signature-divider{
    width:1px;

    height:45px;

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


/* info item */

.sunno-signature-info-item{
    display:flex;

    align-items:center;

    gap:9px;
}

.sunno-signature-info-item > i{
    color:var(--gold);

    font-size:14px;
}

.sunno-signature-info-item div{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.sunno-signature-info-item strong{
    color:var(--cream);

    font-size:10px;
}

.sunno-signature-info-item span{
    color:#716d66;

    font-size:8px;
}


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

.sunno-signature-actions{
    display:flex;

    align-items:center;

    gap:25px;

    margin-top:30px;
}


/* order button */

.sunno-signature-order-btn{
    display:inline-flex;

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

    gap:17px;

    padding:15px 22px;

    color:#1b1914;

    background:var(--gold);

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

    border-radius:6px;

    text-decoration:none;

    font-size:10px;

    font-weight:700;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.sunno-signature-order-btn i{
    transition:
        transform .35s ease;
}

.sunno-signature-order-btn:hover{
    transform:translateY(-3px);

    color:var(--gold-light);

    background:transparent;

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

.sunno-signature-order-btn:hover i{
    transform:translateX(5px);
}


/* menu link */

.sunno-signature-menu-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#8e8981;

    text-decoration:none;

    font-size:9px;

    font-weight:600;

    transition:
        color .3s ease;
}

.sunno-signature-menu-link i{
    color:var(--gold);

    font-size:8px;
}

.sunno-signature-menu-link:hover{
    color:var(--cream);
}


/* =========================================
   TRUST
========================================= */

.sunno-signature-trust{
    display:flex;

    align-items:center;

    gap:9px;

    margin-top:22px;
}

.sunno-trust-icon{
    width:24px;
    height:24px;

    display:flex;

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

    border-radius:50%;

    color:var(--gold);

    background:var(--gold-soft);

    font-size:9px;
}

.sunno-signature-trust p{
    margin:0;

    color:#6f6b64;

    font-size:9px;
}

.sunno-signature-trust strong{
    color:#a59d91;
}


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

.sunno-signature-bottom{
    display:grid;

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

    align-items:center;

    gap:30px;

    margin-top:105px;

    padding:28px 35px;

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

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

    background:
        rgba(
            255,
            255,
            255,
            .012
        );
}


/* bottom item */

.sunno-signature-bottom-item{
    display:flex;

    align-items:center;

    gap:13px;
}


/* number */

.sunno-bottom-number{
    color:var(--gold);

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;
}


/* bottom text */

.sunno-signature-bottom-item div{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.sunno-signature-bottom-item strong{
    color:var(--cream);

    font-size:10px;
}

.sunno-signature-bottom-item small{
    color:#68635c;

    font-size:8px;
}


/* bottom divider */

.sunno-signature-bottom-line{
    width:1px;

    height:32px;

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


/* =========================================
   REVEAL
========================================= */

.sunno-signature-reveal,
.sunno-signature-reveal-left,
.sunno-signature-reveal-right{
    opacity:0;

    transition:
        opacity .9s ease,
        transform 1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}

.sunno-signature-reveal{
    transform:translateY(30px);
}

.sunno-signature-reveal-left{
    transform:translateX(-65px);
}

.sunno-signature-reveal-right{
    transform:translateX(65px);
}

.sunno-signature-reveal.sunno-signature-visible,
.sunno-signature-reveal-left.sunno-signature-visible,
.sunno-signature-reveal-right.sunno-signature-visible{
    opacity:1;

    transform:translate(0);
}


/* =========================================
   KEYFRAME
========================================= */

@keyframes sunnoSignatureFloat{

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

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

}


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

@media (max-width:1100px){

    .sunno-signature-container{
        width:min(
            100% - 70px,
            1000px
        );
    }

    .sunno-signature-main{
        gap:60px;
    }

    .sunno-signature-image{
        height:500px;
    }

    .sunno-signature-rating-card{
        left:-30px;
    }

    .sunno-signature-badge{
        right:-25px;
    }

    .dot-one{
        right:-35px;
    }

    .dot-two{
        left:-35px;
    }

    .sunno-signature-bottom{
        gap:18px;

        padding:25px 20px;
    }

}


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

@media (max-width:850px){

    .sunno-signature-section{
        padding:100px 0;
    }

    .sunno-signature-container{
        width:min(
            100% - 50px,
            650px
        );
    }

    .sunno-signature-main{
        grid-template-columns:1fr;

        gap:80px;
    }

    .sunno-signature-image-wrap{
        max-width:520px;

        margin:0 auto;
    }

    .sunno-signature-content{
        max-width:none;
    }

    .sunno-signature-title{
        font-size:55px;
    }

    .sunno-signature-description{
        max-width:none;
    }

}


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

@media (max-width:600px){

    .sunno-signature-section{
        padding:80px 0;
    }

    .sunno-signature-container{
        width:calc(100% - 36px);
    }


    /* label */

    .sunno-signature-top-label{
        margin-bottom:45px;
    }

    .sunno-signature-top-label small{
        font-size:8px;

        letter-spacing:3px;
    }

    .sunno-signature-top-label span{
        width:25px;
    }


    /* image */

    .sunno-signature-image{
        height:430px;

        border-radius:20px;
    }

    .frame-one{
        inset:-9px;
    }

    .frame-two{
        inset:-17px;
    }


    /* rating */

    .sunno-signature-rating-card{
        left:8px;
        bottom:25px;

        min-width:auto;

        padding:12px 14px;
    }

    .sunno-signature-rating-icon{
        width:34px;
        height:34px;
    }


    /* badge */

    .sunno-signature-badge{
        right:4px;
        top:30px;

        padding:9px 12px;
    }

    .sunno-signature-badge-star{
        width:26px;
        height:26px;

        font-size:11px;
    }


    /* dots */

    .dot-one{
        right:5px;
        bottom:110px;
    }

    .dot-two{
        left:5px;
        top:130px;
    }


    /* content */

    .sunno-signature-eyebrow{
        font-size:8px;

        letter-spacing:2.3px;
    }

    .sunno-signature-title{
        font-size:43px;

        letter-spacing:-2px;
    }

    .sunno-signature-title span{
        letter-spacing:-1px;
    }

    .sunno-signature-description{
        font-size:12px;

        line-height:1.85;
    }


    /* ingredients */

    .sunno-signature-ingredients{
        margin-top:25px;

        gap:7px;
    }

    .sunno-ingredient{
        padding:8px 10px;

        font-size:8px;
    }


    /* info */

    .sunno-signature-info{
        flex-wrap:wrap;

        gap:18px;

        margin-top:28px;

        padding:18px 0;
    }

    .sunno-signature-divider{
        display:none;
    }

    .sunno-signature-price-box strong{
        font-size:23px;
    }


    /* actions */

    .sunno-signature-actions{
        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        margin-top:25px;
    }

    .sunno-signature-order-btn{
        width:100%;
    }


    /* bottom strip */

    .sunno-signature-bottom{
        grid-template-columns:1fr;

        gap:18px;

        margin-top:65px;

        padding:22px 18px;
    }

    .sunno-signature-bottom-line{
        width:100%;
        height:1px;
    }

}


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

@media (max-width:380px){

    .sunno-signature-container{
        width:calc(100% - 28px);
    }

    .sunno-signature-image{
        height:390px;
    }

    .sunno-signature-title{
        font-size:37px;
    }

    .sunno-signature-rating-card{
        left:0;
    }

    .sunno-signature-badge{
        right:0;
    }

}
/* why chose section  */
/* =========================================
   SUNNO EXPERIENCE SECTION
========================================= */

.sunno-experience-section{
    position:relative;

    width:100%;

    padding:125px 0 115px;

    overflow:hidden;

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


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

.sunno-experience-section::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:75px 75px;

    pointer-events:none;
}


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

.sunno-experience-bg-glow{
    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

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

    filter:blur(120px);

    pointer-events:none;
}

.sunno-experience-glow-one{
    left:-300px;
    top:30%;
}

.sunno-experience-glow-two{
    right:-300px;
    bottom:5%;
}


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

.sunno-experience-container{
    position:relative;

    z-index:2;

    width:min(
        1240px,
        calc(100% - 100px)
    );

    margin:0 auto;
}


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

.sunno-experience-header{
    max-width:700px;

    margin:0 auto 85px;

    text-align:center;
}


/* Label */

.sunno-experience-label{
    display:flex;

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

    gap:14px;

    margin-bottom:22px;
}

.sunno-experience-label span{
    width:40px;
    height:1px;

    background:var(--gold);
}

.sunno-experience-label small{
    color:var(--gold);

    font-size:9px;

    font-weight:700;

    letter-spacing:3.5px;
}


/* Heading */

.sunno-experience-header h2{
    margin:0;

    color:var(--text);

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

    line-height:1.04;

    letter-spacing:-3px;

    font-weight:700;
}

.sunno-experience-header h2 em{
    display:block;

    color:var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:400;

    font-style:italic;

    letter-spacing:-2px;
}


/* Description */

.sunno-experience-header p{
    max-width:570px;

    margin:25px auto 0;

    color:var(--muted);

    font-size:13px;

    line-height:1.9;
}


/* =========================================
   MAIN EXPERIENCE GRID
========================================= */

.sunno-experience-content{
    display:grid;

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

    align-items:center;

    gap:55px;
}


/* =========================================
   SIDE COLUMNS
========================================= */

.sunno-experience-side{
    display:flex;

    flex-direction:column;

    gap:22px;
}


/* =========================================
   EXPERIENCE ITEM
========================================= */

.sunno-experience-item{
    position:relative;

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:21px 20px;

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

    border-radius:12px;

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

    cursor:pointer;

    transition:
        transform .4s
            cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* hover */

.sunno-experience-item:hover{
    transform:translateY(-5px);

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

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

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


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

.sunno-experience-number{
    flex-shrink:0;

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

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    padding-top:5px;
}


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

.sunno-experience-item-content{
    display:flex;

    align-items:flex-start;

    gap:12px;

    flex:1;
}


/* icon */

.sunno-experience-icon{
    flex-shrink:0;

    width:36px;
    height:36px;

    display:flex;

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

    border-radius:9px;

    color:var(--gold);

    background:
        var(--gold-soft);

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

    font-size:12px;

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

.sunno-experience-item:hover
.sunno-experience-icon{
    transform:
        rotate(-7deg)
        scale(1.08);

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


/* title */

.sunno-experience-item h3{
    margin:2px 0 7px;

    color:var(--cream);

    font-size:12px;

    font-weight:700;
}


/* text */

.sunno-experience-item p{
    margin:0;

    color:#77726a;

    font-size:9px;

    line-height:1.7;
}


/* arrow */

.sunno-experience-arrow{
    position:absolute;

    right:16px;
    top:16px;

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

    font-size:12px;

    opacity:0;

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

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

.sunno-experience-item:hover
.sunno-experience-arrow{
    opacity:1;

    transform:
        translate(0,0);
}


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

.sunno-experience-center{
    position:relative;

    display:flex;

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

    min-height:540px;
}


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

.sunno-experience-image-wrap{
    position:relative;

    width:380px;
    height:480px;

    display:flex;

    align-items:center;
    justify-content:center;
}


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

.sunno-experience-image{
    position:relative;

    width:310px;
    height:410px;

    overflow:hidden;

    border-radius:
        155px 155px 20px 20px;

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

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

    z-index:2;
}

.sunno-experience-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:
        brightness(.62)
        contrast(1.08)
        saturate(.8);

    transform:scale(1.03);

    transition:
        transform 1.2s
        cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}

.sunno-experience-image-wrap:hover
.sunno-experience-image img{
    transform:scale(1.1);

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.92);
}


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

.sunno-experience-image-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(10,8,5,.7),
            transparent 65%
        );
}


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

.sunno-experience-image-ring{
    position:absolute;

    width:350px;
    height:450px;

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

    border-radius:
        175px 175px 25px 25px;

    transform:rotate(5deg);

    z-index:1;

    transition:
        transform .8s ease;
}

.sunno-experience-image-wrap:hover
.sunno-experience-image-ring{
    transform:
        rotate(8deg)
        scale(1.02);
}


/* =========================================
   ORBITS
========================================= */

.sunno-experience-orbit{
    position:absolute;

    border-radius:50%;

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

    pointer-events:none;
}

.orbit-one{
    width:510px;
    height:510px;

    animation:
        sunnoOrbitRotate
        24s
        linear
        infinite;
}

.orbit-two{
    width:560px;
    height:560px;

    border-style:dashed;

    opacity:.35;

    animation:
        sunnoOrbitRotateReverse
        32s
        linear
        infinite;
}


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

.sunno-experience-center-badge{
    position:absolute;

    right:3px;
    top:68px;

    width:78px;
    height:78px;

    display:flex;

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

    flex-direction:column;

    gap:2px;

    border-radius:50%;

    background:
        var(--dark-soft);

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

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

    z-index:5;

    transform:rotate(8deg);

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

.sunno-experience-center-badge span{
    color:#706b62;

    font-size:6px;

    letter-spacing:2px;

    font-weight:700;
}

.sunno-experience-center-badge strong{
    color:var(--gold-light);

    font-size:14px;

    letter-spacing:2px;
}

.sunno-experience-center-badge i{
    color:var(--gold);

    font-size:8px;

    font-style:normal;
}


/* =========================================
   FLOATING COFFEE
========================================= */

.sunno-floating-coffee{
    position:absolute;

    left:10px;
    bottom:72px;

    width:47px;
    height:47px;

    display:flex;

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

    color:var(--gold);

    background:
        rgba(
            29,
            26,
            23,
            .94
        );

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

    border-radius:50%;

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

    z-index:5;

    animation:
        sunnoExperienceFloatReverse
        4s
        ease-in-out
        infinite;
}


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

.sunno-experience-bottom{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:80px;
}

.sunno-experience-bottom-line{
    width:100px;

    height:1px;

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

.sunno-experience-bottom-text{
    display:flex;

    align-items:center;

    gap:12px;

    white-space:nowrap;
}

.sunno-experience-bottom-text span{
    color:#68635b;

    font-size:7px;

    letter-spacing:2px;

    font-weight:700;
}

.sunno-experience-bottom-text strong{
    color:var(--gold);

    font-size:8px;

    letter-spacing:2.5px;
}

.sunno-experience-bottom-text i{
    color:var(--gold);

    font-size:9px;

    font-style:normal;
}


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

@keyframes sunnoOrbitRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes sunnoOrbitRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes sunnoExperienceFloat{

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

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

}

@keyframes sunnoExperienceFloatReverse{

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

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

}


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

.sunno-experience-reveal,
.sunno-experience-reveal-left,
.sunno-experience-reveal-right{
    opacity:0;

    transition:
        opacity .9s ease,
        transform 1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}

.sunno-experience-reveal{
    transform:translateY(35px);
}

.sunno-experience-reveal-left{
    transform:translateX(-55px);
}

.sunno-experience-reveal-right{
    transform:translateX(55px);
}

.sunno-experience-visible{
    opacity:1;

    transform:
        translate(0);
}


/* =========================================
   ITEM STAGGER
========================================= */

.sunno-experience-left
.sunno-experience-item:nth-child(2){
    transition-delay:.15s;
}

.sunno-experience-right
.sunno-experience-item:nth-child(2){
    transition-delay:.15s;
}


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

@media (max-width:1100px){

    .sunno-experience-container{
        width:min(
            100% - 70px,
            1000px
        );
    }

    .sunno-experience-content{
        gap:25px;
    }

    .sunno-experience-image-wrap{
        transform:scale(.9);
    }

    .sunno-experience-center{
        min-height:500px;
    }

    .sunno-experience-item{
        padding:17px 15px;
    }

    .sunno-experience-item p{
        font-size:8px;
    }

}


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

@media (max-width:900px){

    .sunno-experience-section{
        padding:100px 0;
    }

    .sunno-experience-container{
        width:min(
            100% - 50px,
            680px
        );
    }

    .sunno-experience-header{
        margin-bottom:60px;
    }

    .sunno-experience-content{
        grid-template-columns:1fr;

        gap:40px;
    }


    /* Center first */

    .sunno-experience-center{
        order:1;

        min-height:500px;
    }

    .sunno-experience-left{
        order:2;
    }

    .sunno-experience-right{
        order:3;
    }


    .sunno-experience-side{
        display:grid;

        grid-template-columns:1fr 1fr;

        gap:15px;
    }

    .sunno-experience-item{
        min-height:150px;
    }

}


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

@media (max-width:600px){

    .sunno-experience-section{
        padding:80px 0;
    }

    .sunno-experience-container{
        width:calc(100% - 36px);
    }


    /* Header */

    .sunno-experience-header{
        margin-bottom:35px;
    }

    .sunno-experience-label{
        gap:9px;
    }

    .sunno-experience-label span{
        width:24px;
    }

    .sunno-experience-label small{
        font-size:7px;

        letter-spacing:2.4px;
    }

    .sunno-experience-header h2{
        font-size:43px;

        letter-spacing:-2px;
    }

    .sunno-experience-header h2 em{
        letter-spacing:-1px;
    }

    .sunno-experience-header p{
        font-size:11px;

        line-height:1.8;

        margin-top:20px;
    }


    /* Center */

    .sunno-experience-center{
        min-height:410px;
    }

    .sunno-experience-image-wrap{
        width:300px;
        height:390px;

        transform:scale(.9);
    }

    .sunno-experience-image{
        width:250px;
        height:340px;
    }

    .sunno-experience-image-ring{
        width:285px;
        height:375px;
    }

    .orbit-one{
        width:390px;
        height:390px;
    }

    .orbit-two{
        width:430px;
        height:430px;
    }

    .sunno-experience-center-badge{
        right:-2px;
        top:45px;

        width:65px;
        height:65px;
    }

    .sunno-floating-coffee{
        left:10px;
        bottom:50px;

        width:40px;
        height:40px;

        font-size:11px;
    }


    /* Items */

    .sunno-experience-side{
        display:flex;

        gap:12px;
    }

    .sunno-experience-item{
        min-height:auto;

        padding:17px 15px;
    }

    .sunno-experience-number{
        font-size:8px;
    }

    .sunno-experience-icon{
        width:32px;
        height:32px;

        font-size:10px;
    }

    .sunno-experience-item h3{
        font-size:11px;
    }

    .sunno-experience-item p{
        font-size:8px;

        line-height:1.7;

        padding-right:12px;
    }

    .sunno-experience-arrow{
        opacity:1;

        right:12px;
        top:13px;

        transform:none;
    }


    /* Bottom */

    .sunno-experience-bottom{
        margin-top:50px;

        gap:10px;
    }

    .sunno-experience-bottom-line{
        width:25px;
    }

    .sunno-experience-bottom-text{
        gap:7px;
    }

    .sunno-experience-bottom-text span{
        font-size:5px;

        letter-spacing:1px;
    }

    .sunno-experience-bottom-text strong{
        font-size:6px;

        letter-spacing:1.3px;
    }

    .sunno-experience-bottom-text i{
        font-size:6px;
    }

}


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

@media (max-width:380px){

    .sunno-experience-container{
        width:calc(100% - 28px);
    }

    .sunno-experience-header h2{
        font-size:37px;
    }

    .sunno-experience-center{
        min-height:370px;
    }

    .sunno-experience-image-wrap{
        transform:scale(.78);
    }

    .sunno-experience-item{
        padding:14px 12px;
    }

}
/* gallery section  */
/* =========================================
   SUNNO GALLERY
========================================= */

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

.sunno-gallery-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: 10%;
    left: -250px;
    background: var(--gold-soft);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}

.sunno-gallery-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -220px;
    bottom: 5%;
    background: rgba(212, 175, 55, .07);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
}

.sunno-gallery-container {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.sunno-gallery-header {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.sunno-gallery-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 20px;

    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.sunno-gallery-eyebrow span {
    width: 35px;
    height: 1px;
    background: var(--gold);
    opacity: .6;
}

.sunno-gallery-header h2 {
    margin: 0;

    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -2px;
}

.sunno-gallery-header h2 span {
    display: block;
    color: var(--gold);
    font-style: italic;
}

.sunno-gallery-header p {
    max-width: 590px;
    margin: 24px auto 0;

    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


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

.sunno-gallery-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 42px;
}

.sunno-gallery-filter-btn {
    position: relative;

    padding: 11px 22px;

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

    background: transparent;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.sunno-gallery-filter-btn:hover {
    color: var(--cream);
    border-color: rgba(212,175,55,.55);
    transform: translateY(-2px);
}

.sunno-gallery-filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #171717;
}


/* =========================================
   EQUAL GALLERY GRID
========================================= */

.sunno-gallery-grid {
    display: grid;

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

    gap: 18px;
}


/*
   IMPORTANT:
   Every gallery card gets exactly
   the same aspect ratio.
*/

.sunno-gallery-item {
    width: 100%;
    aspect-ratio: 1 / 1;

    min-width: 0;

    opacity: 1;
    transform: scale(1);

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


/* Remove old large/tall/wide behavior */
.sunno-gallery-large,
.sunno-gallery-wide,
.sunno-gallery-tall {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
}


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

.sunno-gallery-image {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

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

    background: var(--card);

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

    cursor: pointer;
}

.sunno-gallery-image::after {
    content: "";

    position: absolute;
    inset: 0;

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

    pointer-events: none;
}

.sunno-gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.sunno-gallery-image:hover img {
    transform: scale(1.08);
    filter: brightness(.72);
}


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

.sunno-gallery-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 24px;

    background:
        linear-gradient(
            to top,
            rgba(10,9,8,.95) 0%,
            rgba(10,9,8,.55) 38%,
            rgba(10,9,8,.05) 75%
        );

    opacity: 0;

    transition: opacity .45s ease;
}

.sunno-gallery-image:hover .sunno-gallery-overlay {
    opacity: 1;
}

.sunno-gallery-overlay-content {
    width: 100%;

    transform: translateY(15px);

    transition: transform .45s ease;
}

.sunno-gallery-image:hover
.sunno-gallery-overlay-content {
    transform: translateY(0);
}

.sunno-gallery-category {
    display: block;

    margin-bottom: 7px;

    color: var(--gold-light);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sunno-gallery-overlay h3 {
    margin: 0;

    padding-right: 55px;

    color: var(--cream);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;
    line-height: 1.2;
    font-weight: 400;
}


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

.sunno-gallery-view {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 43px;
    height: 43px;

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

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

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

    color: var(--gold-light);

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.sunno-gallery-view:hover {
    background: var(--gold);
    color: #171717;

    transform: rotate(45deg);
}


/* =========================================
   FILTER HIDE ANIMATION
========================================= */

.sunno-gallery-item.sunno-gallery-hidden {
    display: none;
}


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

.sunno-gallery-bottom {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-top: 55px;
}

.sunno-gallery-bottom-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sunno-gallery-bottom-content {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
}

.sunno-gallery-bottom-content span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sunno-gallery-bottom-content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--gold);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;

    transition: color .3s ease;
}

.sunno-gallery-bottom-content a i {
    transition: transform .3s ease;
}

.sunno-gallery-bottom-content a:hover {
    color: var(--gold-light);
}

.sunno-gallery-bottom-content a:hover i {
    transform: translateX(5px);
}


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

.sunno-gallery-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 30px;

    background: rgba(8,7,6,.94);

    backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;

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

.sunno-gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.sunno-gallery-lightbox-inner {
    position: relative;

    max-width: 1100px;
    max-height: 85vh;

    transform: scale(.92);

    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.sunno-gallery-lightbox.active
.sunno-gallery-lightbox-inner {
    transform: scale(1);
}

.sunno-gallery-lightbox-inner img {
    display: block;

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

    object-fit: contain;

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);
}

.sunno-gallery-lightbox-close {
    position: absolute;

    top: 25px;
    right: 25px;

    z-index: 5;

    width: 48px;
    height: 48px;

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

    border: 1px solid var(--border);
    border-radius: 50%;

    background: rgba(30,28,25,.8);

    color: var(--cream);

    font-size: 18px;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.sunno-gallery-lightbox-close:hover {
    background: var(--gold);
    color: #171717;

    transform: rotate(90deg);
}


/* =========================================
   SCROLL REVEAL
========================================= */

.sunno-gallery-reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.sunno-gallery-reveal.sunno-gallery-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Individual card delay */

.sunno-gallery-item:nth-child(1) {
    transition-delay: .05s;
}

.sunno-gallery-item:nth-child(2) {
    transition-delay: .12s;
}

.sunno-gallery-item:nth-child(3) {
    transition-delay: .19s;
}

.sunno-gallery-item:nth-child(4) {
    transition-delay: .26s;
}

.sunno-gallery-item:nth-child(5) {
    transition-delay: .33s;
}

.sunno-gallery-item:nth-child(6) {
    transition-delay: .40s;
}


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

@media (max-width: 900px) {

    .sunno-gallery-section {
        padding: 95px 0;
    }

    .sunno-gallery-container {
        width: min(100% - 32px, 720px);
    }

    .sunno-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .sunno-gallery-header {
        margin-bottom: 38px;
    }

    .sunno-gallery-header h2 {
        font-size: clamp(38px, 7vw, 55px);
    }

    .sunno-gallery-bottom-content {
        gap: 15px;
    }

}


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

@media (max-width: 600px) {

    .sunno-gallery-section {
        padding: 75px 0;
    }

    .sunno-gallery-container {
        width: calc(100% - 28px);
    }

    .sunno-gallery-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
        gap: 10px;
    }

    .sunno-gallery-eyebrow span {
        width: 24px;
    }

    .sunno-gallery-header h2 {
        font-size: 39px;
        letter-spacing: -1.5px;
    }

    .sunno-gallery-header p {
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.7;
    }

    .sunno-gallery-filter {
        gap: 7px;
        margin-bottom: 28px;
    }

    .sunno-gallery-filter-btn {
        padding: 9px 15px;
        font-size: 9px;
    }

    .sunno-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /*
       Still exactly equal size
    */
    .sunno-gallery-item {
        aspect-ratio: 1 / 1;
    }

    .sunno-gallery-overlay {
        padding: 14px;
    }

    .sunno-gallery-overlay h3 {
        font-size: 15px;
        padding-right: 0;
    }

    .sunno-gallery-category {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .sunno-gallery-view {
        right: 12px;
        bottom: 12px;

        width: 34px;
        height: 34px;

        font-size: 11px;
    }

    .sunno-gallery-bottom {
        margin-top: 35px;
    }

    .sunno-gallery-bottom-line {
        display: none;
    }

    .sunno-gallery-bottom-content {
        width: 100%;

        flex-direction: column;
        gap: 13px;

        text-align: center;
    }

    .sunno-gallery-bottom-content span {
        font-size: 8px;
    }

}


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

@media (max-width: 380px) {

    .sunno-gallery-grid {
        gap: 8px;
    }

    .sunno-gallery-header h2 {
        font-size: 34px;
    }

    .sunno-gallery-filter-btn {
        padding: 8px 12px;
    }

    .sunno-gallery-overlay {
        padding: 10px;
    }

    .sunno-gallery-overlay h3 {
        font-size: 13px;
    }

    .sunno-gallery-view {
        width: 30px;
        height: 30px;

        right: 8px;
        bottom: 8px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .sunno-gallery-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sunno-gallery-image img,
    .sunno-gallery-overlay,
    .sunno-gallery-overlay-content,
    .sunno-gallery-view {
        transition: none;
    }

}
/* visit sunno section  */
/* =========================================
   SUNNO VISIT / LOCATION SECTION
========================================= */

.sunno-visit-section {
    position: relative;

    padding: 120px 0;

    background: var(--dark-soft);

    overflow: hidden;
}


/* Background glow */

.sunno-visit-section::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    top: -250px;
    right: -220px;

    background: var(--gold-soft);

    filter: blur(120px);

    border-radius: 50%;

    pointer-events: none;
}


.sunno-visit-section::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -250px;
    bottom: -200px;

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

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;
}


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

.sunno-visit-container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;
}


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

.sunno-visit-header {
    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;
}


.sunno-visit-eyebrow {
    display: flex;

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

    gap: 14px;

    margin-bottom: 20px;

    color: var(--gold);

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

    letter-spacing: 3px;
}


.sunno-visit-eyebrow span {
    width: 35px;
    height: 1px;

    background: var(--gold);

    opacity: .65;
}


.sunno-visit-header h2 {
    margin: 0;

    color: var(--text);

    font-family: Georgia, "Times New Roman", serif;

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

    line-height: 1.03;

    font-weight: 400;

    letter-spacing: -2px;
}


.sunno-visit-header h2 span {
    display: block;

    color: var(--gold);

    font-style: italic;
}


.sunno-visit-header p {
    max-width: 590px;

    margin: 24px auto 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


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

.sunno-visit-main {
    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 55px;

    align-items: stretch;
}


/* =========================================
   INFORMATION SIDE
========================================= */

.sunno-visit-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.sunno-visit-small-label {
    display: block;

    margin-bottom: 16px;

    color: var(--gold);

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

    letter-spacing: 2.5px;
}


.sunno-visit-info-top h3 {
    margin: 0;

    color: var(--text);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 400;

    letter-spacing: -1px;
}


.sunno-visit-info-top h3 em {
    color: var(--gold);

    font-weight: 400;
}


.sunno-visit-gold-line {
    width: 55px;
    height: 2px;

    margin: 27px 0 32px;

    background: var(--gold);
}


/* =========================================
   DETAILS
========================================= */

.sunno-visit-detail {
    display: flex;

    align-items: flex-start;

    gap: 17px;

    padding: 19px 0;

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


.sunno-visit-detail:first-of-type {
    border-top: 1px solid rgba(212,175,55,.10);
}


.sunno-visit-icon {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

    display: flex;

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

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

    border-radius: 50%;

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

    color: var(--gold);

    font-size: 14px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.sunno-visit-detail:hover .sunno-visit-icon {
    background: var(--gold);

    color: var(--dark);

    transform: translateY(-3px);
}


.sunno-visit-detail-content {
    min-width: 0;
}


.sunno-visit-detail-content > span {
    display: block;

    margin-bottom: 5px;

    color: var(--gold);

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

    letter-spacing: 1.8px;
}


.sunno-visit-detail-content h4 {
    margin: 0;

    color: var(--text);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;

    font-weight: 400;
}


.sunno-visit-detail-content p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.5;
}


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

.sunno-visit-actions {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;
}


.sunno-visit-primary-btn,
.sunno-visit-secondary-btn {
    display: inline-flex;

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

    gap: 11px;

    min-height: 48px;

    padding: 0 19px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.sunno-visit-primary-btn {
    background: var(--gold);

    color: var(--dark);

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


.sunno-visit-primary-btn:hover {
    background: var(--gold-light);

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

    transform: translateY(-3px);
}


.sunno-visit-primary-btn i {
    font-size: 9px;
}


.sunno-visit-secondary-btn {
    border: 1px solid var(--border);

    color: var(--cream);

    background: transparent;
}


.sunno-visit-secondary-btn:hover {
    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-3px);
}


.sunno-visit-secondary-btn i {
    font-size: 9px;

    transition: transform .3s ease;
}


.sunno-visit-secondary-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   MAP
========================================= */

.sunno-visit-map-wrap {
    position: relative;

    min-height: 570px;
}


.sunno-visit-map {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 570px;

    overflow: hidden;

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

    background: #25221e;

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


/* Google Map */

.sunno-visit-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 570px;

    border: 0;

    filter:
        grayscale(1)
        contrast(1.05)
        brightness(.72)
        sepia(.12);

    transition: filter .5s ease;
}


.sunno-visit-map:hover iframe {
    filter:
        grayscale(.75)
        contrast(1.05)
        brightness(.78)
        sepia(.12);
}


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

.sunno-visit-map-overlay {
    position: absolute;

    top: 25px;
    left: 25px;

    z-index: 3;
}


.sunno-visit-map-card {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    background: rgba(23,23,23,.92);

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

    backdrop-filter: blur(12px);

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


.sunno-visit-map-logo {
    width: 38px;
    height: 38px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--gold);

    font-family: Georgia, serif;

    font-size: 19px;

    font-style: italic;
}


.sunno-visit-map-card strong {
    display: block;

    color: var(--cream);

    font-size: 10px;

    letter-spacing: 1.5px;
}


.sunno-visit-map-card small {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================
   MAP DECORATIVE CORNERS
========================================= */

.sunno-visit-map-corner {
    position: absolute;

    z-index: 4;

    width: 35px;
    height: 35px;

    pointer-events: none;
}


.sunno-visit-map-corner.top-left {
    top: 15px;
    left: 15px;

    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}


.sunno-visit-map-corner.top-right {
    top: 15px;
    right: 15px;

    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}


.sunno-visit-map-corner.bottom-left {
    bottom: 15px;
    left: 15px;

    border-bottom: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}


.sunno-visit-map-corner.bottom-right {
    bottom: 15px;
    right: 15px;

    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}


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

.sunno-visit-bottom {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 60px;
}


.sunno-visit-bottom-line {
    flex: 1;

    height: 1px;

    background: var(--border);
}


.sunno-visit-bottom-text {
    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.sunno-visit-bottom-text i {
    color: var(--gold);

    font-size: 11px;

    animation: sunnoVisitPulse 2s ease-in-out infinite;
}


@keyframes sunnoVisitPulse {

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

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

}


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

.sunno-visit-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.sunno-visit-reveal.sunno-visit-visible {
    opacity: 1;

    transform: translateY(0);
}


.sunno-visit-main
.sunno-visit-reveal:nth-child(2) {
    transition-delay: .15s;
}


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

@media (max-width: 950px) {

    .sunno-visit-section {
        padding: 95px 0;
    }


    .sunno-visit-container {
        width: min(100% - 32px, 760px);
    }


    .sunno-visit-header {
        margin-bottom: 50px;
    }


    .sunno-visit-main {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .sunno-visit-info {
        max-width: 650px;

        margin: 0 auto;

        width: 100%;
    }


    .sunno-visit-map-wrap,
    .sunno-visit-map,
    .sunno-visit-map iframe {
        min-height: 500px;
    }

}


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

@media (max-width: 600px) {

    .sunno-visit-section {
        padding: 75px 0;
    }


    .sunno-visit-container {
        width: calc(100% - 28px);
    }


    .sunno-visit-header {
        margin-bottom: 40px;
    }


    .sunno-visit-eyebrow {
        gap: 9px;

        font-size: 8px;

        letter-spacing: 2px;
    }


    .sunno-visit-eyebrow span {
        width: 23px;
    }


    .sunno-visit-header h2 {
        font-size: 39px;

        letter-spacing: -1.5px;
    }


    .sunno-visit-header p {
        margin-top: 18px;

        font-size: 13px;

        line-height: 1.7;
    }


    .sunno-visit-main {
        gap: 35px;
    }


    .sunno-visit-info-top h3 {
        font-size: 32px;
    }


    .sunno-visit-gold-line {
        margin: 22px 0 24px;
    }


    .sunno-visit-detail {
        gap: 12px;

        padding: 16px 0;
    }


    .sunno-visit-icon {
        width: 38px;
        height: 38px;

        font-size: 12px;
    }


    .sunno-visit-detail-content h4 {
        font-size: 16px;
    }


    .sunno-visit-detail-content p {
        font-size: 11px;
    }


    .sunno-visit-actions {
        flex-direction: column;

        align-items: stretch;

        margin-top: 25px;
    }


    .sunno-visit-primary-btn,
    .sunno-visit-secondary-btn {
        width: 100%;
    }


    .sunno-visit-map-wrap,
    .sunno-visit-map,
    .sunno-visit-map iframe {
        min-height: 390px;
    }


    .sunno-visit-map-overlay {
        top: 18px;
        left: 18px;
    }


    .sunno-visit-map-card {
        padding: 10px 12px;
    }


    .sunno-visit-map-logo {
        width: 32px;
        height: 32px;

        font-size: 16px;
    }


    .sunno-visit-map-card strong {
        font-size: 8px;
    }


    .sunno-visit-map-card small {
        font-size: 8px;
    }


    .sunno-visit-map-corner {
        width: 25px;
        height: 25px;
    }


    .sunno-visit-bottom {
        margin-top: 35px;
    }


    .sunno-visit-bottom-line {
        display: none;
    }


    .sunno-visit-bottom-text {
        width: 100%;

        justify-content: center;

        font-size: 8px;
    }

}


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

@media (max-width: 380px) {

    .sunno-visit-header h2 {
        font-size: 34px;
    }


    .sunno-visit-info-top h3 {
        font-size: 29px;
    }


    .sunno-visit-map-wrap,
    .sunno-visit-map,
    .sunno-visit-map iframe {
        min-height: 340px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .sunno-visit-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .sunno-visit-bottom-text i {
        animation: none;
    }

}
/* cta section start  */

/* =========================================================
   ROOT
========================================================= */

.sunno-final-cta {

    --cta-gold: var(--gold, #d4af37);
    --cta-gold-light: var(--gold-light, #e8c95a);
    --cta-dark: var(--dark, #171717);
    --cta-dark-soft: var(--dark-soft, #1d1a17);
    --cta-text: var(--text, #f8f2e8);
    --cta-cream: var(--cream, #fff4df);
    --cta-muted: var(--muted, #a9a39a);

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #151515 0%,
            #191817 50%,
            #171614 100%
        );

    color: var(--cta-text);

    isolation: isolate;

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

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

}


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

.sunno-final-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;

}


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

.sunno-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(212,175,55,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,.055) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: .8;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.8) 45%,
            transparent 90%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.8) 45%,
            transparent 90%
        );

}


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

.sunno-grid-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .10;

}


.sunno-grid-glow-one {

    background: var(--cta-gold);

    left: -250px;

    top: 10%;

}


.sunno-grid-glow-two {

    background: var(--cta-gold-light);

    right: -250px;

    bottom: 0;

}


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

.sunno-final-dot {

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--cta-gold);

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

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

}


.sunno-dot-one {

    top: 18%;

    left: 12%;

}


.sunno-dot-two {

    top: 28%;

    right: 13%;

    animation-delay: 1s;

}


.sunno-dot-three {

    bottom: 21%;

    left: 24%;

    animation-delay: 2s;

}


.sunno-dot-four {

    bottom: 17%;

    right: 28%;

    animation-delay: 1.5s;

}


@keyframes sunnoDotFloat {

    0%,
    100% {

        transform: translateY(0);

        opacity: .25;

    }

    50% {

        transform: translateY(-18px);

        opacity: 1;

    }

}


/* =========================================================
   DECORATIVE DIAGONAL LINES
========================================================= */

.sunno-final-line {

    position: absolute;

    height: 1px;

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

    transition:
        transform .5s ease;

}


.sunno-line-one {

    width: 650px;

    right: -200px;

    top: 130px;

    transform: rotate(-25deg);

}


.sunno-line-two {

    width: 500px;

    left: -200px;

    bottom: 140px;

    transform: rotate(25deg);

}


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

.sunno-final-container {

    position: relative;

    width: min(1180px, 92%);

    margin: 0 auto;

    padding: 105px 0 65px;

}


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

.sunno-final-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 32px;

}


.sunno-final-label span {

    display: block;

    width: 42px;

    height: 1px;

    background: var(--cta-gold);

    opacity: .55;

}


.sunno-final-label strong {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    color: var(--cta-gold);

}


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

.sunno-final-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


.sunno-final-mini-title {

    margin-bottom: 20px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 5px;

    color: var(--cta-muted);

}


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

.sunno-final-heading {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        58px,
        8vw,
        105px
    );

    line-height: .92;

    font-weight: 400;

    letter-spacing: -4px;

    color: var(--cta-cream);

}


.sunno-final-heading span {

    color: transparent;

    -webkit-text-stroke:
        1px var(--cta-gold);

    text-stroke:
        1px var(--cta-gold);

    transition:
        all .4s ease;

}


.sunno-final-heading:hover span {

    color: var(--cta-gold);

}


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

.sunno-final-description {

    max-width: 570px;

    margin: 32px auto 0;

    font-size: 15px;

    line-height: 1.85;

    color: var(--cta-muted);

}


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

.sunno-final-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 38px;

    flex-wrap: wrap;

}


.sunno-final-btn {

    min-height: 56px;

    padding: 0 27px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}


/* Primary */

.sunno-final-btn-primary {

    color: #171717;

    background: var(--cta-gold);

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

}


.sunno-final-btn-primary:hover {

    color: #171717;

    background: var(--cta-gold-light);

    transform: translateY(-4px);

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

}


.sunno-final-btn-primary i {

    transition:
        transform .35s ease;

}


.sunno-final-btn-primary:hover i {

    transform:
        translateX(5px);

}


/* Outline */

.sunno-final-btn-outline {

    color: var(--cta-cream);

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

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

}


.sunno-final-btn-outline:hover {

    color: var(--cta-gold);

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

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

    transform:
        translateY(-4px);

}


.sunno-final-btn-outline i {

    transition:
        transform .35s ease;

}


.sunno-final-btn-outline:hover i {

    transform:
        translateY(-3px);

}


/* =========================================================
   FEATURE ROW
========================================================= */

.sunno-final-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-top: 95px;

    padding-top: 28px;

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

}


.sunno-final-bottom-item {

    display: flex;

    align-items: center;

    gap: 12px;

}


.sunno-feature-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    color: var(--cta-gold);

}


.sunno-feature-icon i {

    font-size: 13px;

}


.sunno-final-bottom-item div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.sunno-final-bottom-item small {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--cta-gold);

}


.sunno-final-bottom-item span {

    font-size: 11px;

    color: var(--cta-muted);

    letter-spacing: .5px;

    white-space: nowrap;

}


.sunno-final-separator {

    width: 1px;

    height: 32px;

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

}


/* =========================================================
   QUOTE
========================================================= */

.sunno-final-quote {

    max-width: 650px;

    margin: 58px auto 0;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 8px;

    text-align: center;

}


.sunno-final-quote p {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    line-height: 1.7;

    font-style: italic;

    color: var(--cta-muted);

}


.sunno-quote-mark {

    color: var(--cta-gold);

    font-family: Georgia, serif;

    font-size: 28px;

    line-height: 20px;

    opacity: .7;

}


.sunno-quote-right {

    align-self: flex-end;

}


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

.sunno-final-accent {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 45px;

}


.sunno-final-accent span {

    width: 50px;

    height: 1px;

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

}


.sunno-final-accent small {

    font-size: 8px;

    letter-spacing: 4px;

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

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.sunno-reveal {

    opacity: 0;

    transform:
        translateY(28px);

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

}


.sunno-reveal.active {

    opacity: 1;

    transform:
        translateY(0);

}


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

@media (max-width: 991px) {

    .sunno-final-container {

        padding:
            90px 0 60px;

    }


    .sunno-final-heading {

        font-size:
            clamp(55px, 10vw, 82px);

    }


    .sunno-final-bottom {

        gap: 22px;

    }

}


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

@media (max-width: 767px) {

    .sunno-final-container {

        width: 90%;

        padding:
            75px 0 50px;

    }


    /* Grid */

    .sunno-grid {

        background-size:
            38px 38px;

    }


    /* Label */

    .sunno-final-label {

        gap: 9px;

        margin-bottom: 27px;

    }


    .sunno-final-label span {

        width: 25px;

    }


    .sunno-final-label strong {

        font-size: 8px;

        letter-spacing: 3px;

    }


    /* Mini */

    .sunno-final-mini-title {

        font-size: 9px;

        letter-spacing: 3.5px;

        margin-bottom: 17px;

    }


    /* Heading */

    .sunno-final-heading {

        font-size:
            clamp(44px, 13vw, 65px);

        line-height: .96;

        letter-spacing: -2px;

    }


    /* Description */

    .sunno-final-description {

        font-size: 13px;

        line-height: 1.75;

        margin-top: 25px;

    }


    /* Buttons */

    .sunno-final-buttons {

        flex-direction: column;

        width: 100%;

        margin-top: 30px;

    }


    .sunno-final-btn {

        width: 100%;

        max-width: 310px;

        min-height: 54px;

    }


    /* Feature */

    .sunno-final-bottom {

        flex-wrap: wrap;

        gap: 20px 15px;

        margin-top: 70px;

        padding-top: 25px;

    }


    .sunno-final-bottom-item {

        min-width: 135px;

    }


    .sunno-final-separator {

        display: none;

    }


    .sunno-feature-icon {

        width: 34px;

        height: 34px;

    }


    .sunno-final-bottom-item span {

        font-size: 9px;

    }


    /* Quote */

    .sunno-final-quote {

        margin-top: 45px;

        gap: 4px;

    }


    .sunno-final-quote p {

        font-size: 12px;

        line-height: 1.65;

    }


    .sunno-quote-mark {

        font-size: 22px;

    }


    /* Accent */

    .sunno-final-accent {

        margin-top: 38px;

    }


    .sunno-final-accent span {

        width: 25px;

    }


    .sunno-final-accent small {

        font-size: 7px;

        letter-spacing: 3px;

    }


    /* Decorative Lines */

    .sunno-line-one {

        width: 350px;

        right: -180px;

    }


    .sunno-line-two {

        width: 300px;

        left: -160px;

    }

}


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

@media (max-width: 400px) {

    .sunno-final-container {

        padding-top: 65px;

    }


    .sunno-final-heading {

        font-size: 41px;

        letter-spacing: -1.5px;

    }


    .sunno-final-description {

        font-size: 12.5px;

    }


    .sunno-final-btn {

        font-size: 11px;

    }


    .sunno-final-bottom {

        margin-top: 60px;

    }


    .sunno-final-bottom-item {

        min-width: 125px;

    }


    .sunno-final-bottom-item span {

        font-size: 8.5px;

    }

}
/* footer sectiono start  */
/* gallery section start  */
/* =========================================================
   SUNNO GALLERY PAGE
========================================================= */

.sunno_gallery_page_section{
    background:var(--dark);
    color:var(--text);
    overflow:hidden;
}


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

.sunno_gallery_page_hero{
    min-height:650px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25),
            rgba(0,0,0,.78)
        ),
        url("https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=2000&q=90")
        center/cover no-repeat;

    isolation:isolate;
}

.sunno_gallery_page_hero_overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(23,23,23,.65),
            transparent 50%,
            rgba(23,23,23,.65)
        );
    z-index:-1;
}

.sunno_gallery_page_hero_content{
    max-width:850px;
    padding:80px 25px;
}

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

    color:var(--gold-light);
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;

    margin-bottom:25px;
}

.sunno_gallery_page_eyebrow i{
    font-size:13px;
}

.sunno_gallery_page_hero h1{
    margin:0;
    color:#fff;

    font-size:clamp(48px,7vw,92px);
    line-height:.95;
    font-weight:700;
    letter-spacing:-4px;
}

.sunno_gallery_page_hero h1 span{
    display:block;
    color:var(--gold);
    font-family:Georgia,serif;
    font-style:italic;
    font-weight:400;
    margin-top:8px;
}

.sunno_gallery_page_hero p{
    max-width:570px;
    margin:30px auto 35px;

    color:#ddd4c7;
    font-size:16px;
    line-height:1.8;
}

.sunno_gallery_page_hero_btn{
    display:inline-flex;
    align-items:center;
    gap:15px;

    padding:15px 23px;

    color:#171717;
    background:var(--gold);

    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-decoration:none;

    transition:.35s ease;
}

.sunno_gallery_page_hero_btn i{
    transition:.35s ease;
}

.sunno_gallery_page_hero_btn:hover{
    background:var(--gold-light);
    color:#171717;
    transform:translateY(-4px);
}

.sunno_gallery_page_hero_btn:hover i{
    transform:translateY(4px);
}

.sunno_gallery_page_hero_scroll{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);

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

    color:#c9c1b5;
    font-size:9px;
    letter-spacing:3px;
}

.sunno_gallery_page_hero_scroll i{
    color:var(--gold);
    animation:sunnoGalleryScroll 1.8s infinite;
}

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

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


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

.sunno_gallery_page_intro{
    max-width:1250px;
    margin:auto;

    padding:110px 30px;

    display:grid;
    grid-template-columns:20px 1fr 380px;
    gap:45px;
    align-items:center;
}

.sunno_gallery_page_intro_line{
    width:1px;
    height:180px;
    background:linear-gradient(
        to bottom,
        transparent,
        var(--gold),
        transparent
    );
}

.sunno_gallery_page_intro_text span,
.sunno_gallery_page_intro_desc span{
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_gallery_page_intro_text h2{
    margin:18px 0 0;

    font-size:clamp(36px,4vw,58px);
    line-height:1.05;
    letter-spacing:-2px;
    font-weight:600;
}

.sunno_gallery_page_intro_text h2 strong{
    color:var(--gold);
    font-family:Georgia,serif;
    font-style:italic;
    font-weight:400;
}

.sunno_gallery_page_intro_desc{
    padding-left:30px;
    border-left:1px solid var(--border);
}

.sunno_gallery_page_intro_desc p{
    margin:0;

    color:var(--muted);
    font-size:15px;
    line-height:1.9;
}


/* =========================================================
   COLLECTION
========================================================= */

.sunno_gallery_page_collection{
    max-width:1400px;
    margin:auto;
    padding:20px 30px 120px;
}

.sunno_gallery_page_section_head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;

    margin-bottom:45px;
}

.sunno_gallery_page_section_head span{
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_gallery_page_section_head h2{
    margin:12px 0 0;

    font-size:clamp(38px,5vw,65px);
    line-height:1;
    letter-spacing:-3px;
}

.sunno_gallery_page_section_head h2 em{
    color:var(--gold);
    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_gallery_page_section_head p{
    max-width:420px;
    margin:0;

    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}


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

.sunno_gallery_page_filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:35px;
}

.sunno_gallery_page_filter{
    border:1px solid var(--border);
    background:transparent;

    color:#aaa49b;

    padding:11px 19px;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;

    cursor:pointer;
    transition:.3s ease;
}

.sunno_gallery_page_filter:hover,
.sunno_gallery_page_filter.active{
    color:#171717;
    background:var(--gold);
    border-color:var(--gold);
}


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

.sunno_gallery_page_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.sunno_gallery_page_card{
    position:relative;
    width:100%;

    /* IMPORTANT: EVERY CARD SAME SIZE */
    aspect-ratio:1 / 1;

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

    cursor:pointer;

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

.sunno_gallery_page_card img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.sunno_gallery_page_card:hover img{
    transform:scale(1.08);
    filter:brightness(.72);
}


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

.sunno_gallery_page_card_overlay{
    position:absolute;
    inset:0;

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

    padding:25px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.15) 65%,
            transparent
        );

    opacity:0;

    transition:.4s ease;
}

.sunno_gallery_page_card:hover .sunno_gallery_page_card_overlay{
    opacity:1;
}

.sunno_gallery_page_card_overlay span{
    color:var(--gold-light);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.sunno_gallery_page_card_overlay h3{
    margin:7px 0 0;

    color:#fff;
    font-size:20px;
    font-weight:600;
}

.sunno_gallery_page_view{
    width:45px;
    height:45px;

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

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

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);

    color:#fff;

    cursor:pointer;

    transition:.35s ease;
}

.sunno_gallery_page_view:hover{
    background:var(--gold);
    color:#171717;
    border-color:var(--gold);

    transform:rotate(45deg);
}

.sunno_gallery_page_view:hover i{
    transform:rotate(-45deg);
}


/* FILTER HIDE */

.sunno_gallery_page_card.gallery-hidden{
    display:none;
}


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

.sunno_gallery_page_quote{
    max-width:1400px;
    margin:0 auto 120px;

    padding:0 30px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
}

.sunno_gallery_page_quote_image{
    min-height:550px;
    overflow:hidden;
}

.sunno_gallery_page_quote_image img{
    width:100%;
    height:100%;
    min-height:550px;

    object-fit:cover;
    display:block;

    transition:transform 1s ease;
}

.sunno_gallery_page_quote:hover
.sunno_gallery_page_quote_image img{
    transform:scale(1.04);
}

.sunno_gallery_page_quote_content{
    padding:70px;

    background:
        linear-gradient(
            135deg,
            #201d19,
            #171717
        );

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.sunno_gallery_page_quote_content > span{
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_gallery_page_quote_content h2{
    margin:20px 0;

    font-size:clamp(35px,4vw,55px);
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:500;
}

.sunno_gallery_page_quote_content h2 strong{
    display:block;

    color:var(--gold);

    font-family:Georgia,serif;
    font-style:italic;
    font-weight:400;
}

.sunno_gallery_page_quote_content p{
    max-width:450px;

    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}

.sunno_gallery_page_quote_content a{
    display:inline-flex;
    align-items:center;
    gap:12px;

    width:max-content;

    margin-top:20px;

    color:var(--gold-light);
    text-decoration:none;

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;

    transition:.3s ease;
}

.sunno_gallery_page_quote_content a i{
    transition:.3s ease;
}

.sunno_gallery_page_quote_content a:hover{
    color:#fff;
}

.sunno_gallery_page_quote_content a:hover i{
    transform:translateX(6px);
}


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

.sunno_gallery_page_cta{
    max-width:1250px;
    min-height:480px;

    margin:0 auto 120px;

    padding:80px 70px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            100deg,
            rgba(20,19,17,.98),
            rgba(20,19,17,.8)
        ),
        url("https://images.unsplash.com/photo-1498804103079-a6351b050096?auto=format&fit=crop&w=1800&q=85")
        center/cover;

    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.sunno_gallery_page_cta_content{
    max-width:650px;
}

.sunno_gallery_page_cta_content > span{
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_gallery_page_cta h2{
    margin:18px 0;

    font-size:clamp(42px,5vw,70px);
    line-height:1;
    letter-spacing:-3px;
}

.sunno_gallery_page_cta h2 em{
    display:block;

    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_gallery_page_cta p{
    max-width:500px;

    color:#b6afa5;
    line-height:1.8;
    font-size:14px;
}

.sunno_gallery_page_cta a{
    display:inline-flex;
    align-items:center;
    gap:15px;

    margin-top:15px;

    padding:15px 22px;

    color:#171717;
    background:var(--gold);

    text-decoration:none;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    transition:.35s ease;
}

.sunno_gallery_page_cta a:hover{
    background:var(--gold-light);
    transform:translateY(-4px);
}

.sunno_gallery_page_cta a i{
    transition:.3s ease;
}

.sunno_gallery_page_cta a:hover i{
    transform:translateX(5px);
}


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

.sunno_gallery_page_lightbox{
    position:fixed;
    inset:0;

    z-index:99999;

    padding:30px;

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

    background:rgba(10,10,10,.94);
    backdrop-filter:blur(12px);

    opacity:0;
    visibility:hidden;

    transition:.4s ease;
}

.sunno_gallery_page_lightbox.active{
    opacity:1;
    visibility:visible;
}

.sunno_gallery_page_lightbox_inner{
    max-width:1000px;
    width:100%;

    transform:translateY(30px) scale(.96);

    transition:.45s ease;
}

.sunno_gallery_page_lightbox.active
.sunno_gallery_page_lightbox_inner{
    transform:translateY(0) scale(1);
}

.sunno_gallery_page_lightbox_inner img{
    display:block;

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

    object-fit:contain;
}

.sunno_gallery_page_lightbox_caption{
    padding-top:18px;
    text-align:center;
}

.sunno_gallery_page_lightbox_caption span{
    color:var(--gold);
    font-size:9px;
    letter-spacing:3px;
    font-weight:800;
}

.sunno_gallery_page_lightbox_caption h3{
    margin:7px 0 0;

    color:#fff;
    font-size:22px;
}

.sunno_gallery_page_lightbox_close{
    position:absolute;
    top:25px;
    right:25px;

    width:48px;
    height:48px;

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

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

    color:#fff;

    cursor:pointer;

    transition:.3s ease;
}

.sunno_gallery_page_lightbox_close:hover{
    background:var(--gold);
    color:#171717;
    border-color:var(--gold);
    transform:rotate(90deg);
}


/* =========================================================
   REVEAL
========================================================= */

.sunno_gallery_page_reveal{
    opacity:0;
    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.sunno_gallery_page_reveal.sunno_gallery_page_show{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:991px){

    .sunno_gallery_page_hero{
        min-height:580px;
    }

    .sunno_gallery_page_intro{
        grid-template-columns:10px 1fr;
        gap:30px;
        padding:80px 25px;
    }

    .sunno_gallery_page_intro_desc{
        grid-column:2;
        padding-left:0;
        border-left:0;
        max-width:600px;
    }

    .sunno_gallery_page_grid{
        grid-template-columns:repeat(2,1fr);
    }

    .sunno_gallery_page_quote{
        grid-template-columns:1fr;
    }

    .sunno_gallery_page_quote_image,
    .sunno_gallery_page_quote_image img{
        min-height:450px;
    }

    .sunno_gallery_page_quote_content{
        padding:55px 45px;
    }

    .sunno_gallery_page_cta{
        margin-left:25px;
        margin-right:25px;
        padding:60px 45px;
    }

}


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

@media(max-width:767px){

    .sunno_gallery_page_hero{
        min-height:560px;
    }

    .sunno_gallery_page_hero_content{
        padding:60px 20px;
    }

    .sunno_gallery_page_hero h1{
        font-size:52px;
        letter-spacing:-2.5px;
    }

    .sunno_gallery_page_hero p{
        font-size:14px;
        line-height:1.7;
        margin-top:25px;
    }

    .sunno_gallery_page_hero_scroll{
        display:none;
    }

    .sunno_gallery_page_intro{
        padding:75px 20px;
        grid-template-columns:1fr;
        gap:25px;
    }

    .sunno_gallery_page_intro_line{
        width:70px;
        height:1px;
    }

    .sunno_gallery_page_intro_text h2{
        font-size:40px;
    }

    .sunno_gallery_page_intro_desc{
        grid-column:auto;
    }

    .sunno_gallery_page_collection{
        padding:10px 20px 80px;
    }

    .sunno_gallery_page_section_head{
        display:block;
        margin-bottom:30px;
    }

    .sunno_gallery_page_section_head h2{
        font-size:45px;
    }

    .sunno_gallery_page_section_head p{
        margin-top:20px;
    }

    .sunno_gallery_page_filters{
        gap:7px;
        overflow-x:auto;
        flex-wrap:nowrap;

        padding-bottom:8px;

        scrollbar-width:none;
    }

    .sunno_gallery_page_filters::-webkit-scrollbar{
        display:none;
    }

    .sunno_gallery_page_filter{
        white-space:nowrap;
        padding:10px 15px;
    }

    .sunno_gallery_page_grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .sunno_gallery_page_card_overlay{
        padding:13px;
    }

    .sunno_gallery_page_card_overlay h3{
        font-size:13px;
    }

    .sunno_gallery_page_card_overlay span{
        font-size:7px;
        letter-spacing:1.3px;
    }

    .sunno_gallery_page_view{
        width:34px;
        height:34px;
        font-size:10px;
    }

    .sunno_gallery_page_quote{
        padding:0 20px;
        margin-bottom:80px;
    }

    .sunno_gallery_page_quote_image,
    .sunno_gallery_page_quote_image img{
        min-height:350px;
    }

    .sunno_gallery_page_quote_content{
        padding:45px 25px;
    }

    .sunno_gallery_page_quote_content h2{
        font-size:38px;
    }

    .sunno_gallery_page_cta{
        min-height:450px;

        margin:0 20px 80px;

        padding:45px 25px;
    }

    .sunno_gallery_page_cta h2{
        font-size:45px;
        letter-spacing:-2px;
    }

    .sunno_gallery_page_lightbox{
        padding:20px;
    }

}


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

@media(max-width:420px){

    .sunno_gallery_page_hero h1{
        font-size:44px;
    }

    .sunno_gallery_page_intro_text h2{
        font-size:34px;
    }

    .sunno_gallery_page_section_head h2{
        font-size:39px;
    }

    .sunno_gallery_page_card_overlay{
        padding:10px;
    }

    .sunno_gallery_page_card_overlay h3{
        font-size:11px;
    }

    .sunno_gallery_page_view{
        width:30px;
        height:30px;
    }

}
/* contact page start  */
/* =========================================================
   SUNNO CAFE CONTACT PAGE
========================================================= */

.sunno_contact_page_section{
    background:var(--dark);
    color:var(--text);
    overflow:hidden;
}


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

.sunno_contact_page_hero{
    min-height:650px;
    position:relative;

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

    text-align:center;

    isolation:isolate;
}

.sunno_contact_page_hero_bg{
    position:absolute;
    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.82)
        ),
        url("https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=2000&q=90")
        center/cover no-repeat;

    transform:scale(1.02);
}

.sunno_contact_page_hero::after{
    content:"";
    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            90deg,
            rgba(23,23,23,.7),
            transparent 50%,
            rgba(23,23,23,.7)
        );
}

.sunno_contact_page_hero_content{
    max-width:850px;
    padding:80px 25px;
}

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

    color:var(--gold-light);

    font-size:11px;
    font-weight:800;
    letter-spacing:4px;

    margin-bottom:25px;
}

.sunno_contact_page_hero h1{
    margin:0;

    color:#fff;

    font-size:clamp(52px,7vw,92px);
    line-height:.95;

    letter-spacing:-4px;
}

.sunno_contact_page_hero h1 span{
    display:block;

    color:var(--gold);

    font-family:Georgia,serif;
    font-style:italic;
    font-weight:400;

    margin-top:8px;
}

.sunno_contact_page_hero p{
    max-width:590px;

    margin:30px auto 35px;

    color:#d2cbc0;

    font-size:16px;
    line-height:1.8;
}

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

    padding:15px 23px;

    color:#171717;
    background:var(--gold);

    text-decoration:none;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    transition:.35s ease;
}

.sunno_contact_page_hero_btn:hover{
    color:#171717;
    background:var(--gold-light);

    transform:translateY(-4px);
}

.sunno_contact_page_hero_btn i{
    transition:.35s ease;
}

.sunno_contact_page_hero_btn:hover i{
    transform:translateY(5px);
}

.sunno_contact_page_scroll{
    position:absolute;
    bottom:28px;
    left:50%;

    transform:translateX(-50%);

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

    color:#c3bbb0;

    font-size:8px;
    letter-spacing:3px;
}

.sunno_contact_page_scroll i{
    color:var(--gold);

    animation:sunnoContactScroll 1.7s infinite;
}

@keyframes sunnoContactScroll{

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

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

}


/* =========================================================
   QUICK CONTACT
========================================================= */

.sunno_contact_page_quick{
    max-width:1250px;

    margin:-55px auto 0;

    position:relative;
    z-index:3;

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

    background:var(--card);

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

.sunno_contact_page_quick_card{
    min-height:145px;

    padding:28px;

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

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

.sunno_contact_page_quick_card:last-child{
    border-right:0;
}

.sunno_contact_page_quick_icon{
    width:48px;
    height:48px;

    flex-shrink:0;

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

    color:var(--gold);

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

    background:var(--dark-soft);

    font-size:16px;

    transition:.35s ease;
}

.sunno_contact_page_quick_card:hover
.sunno_contact_page_quick_icon{
    color:#171717;
    background:var(--gold);
    border-color:var(--gold);

    transform:translateY(-4px);
}

.sunno_contact_page_quick_card span{
    display:block;

    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;

    margin-bottom:7px;
}

.sunno_contact_page_quick_card h3{
    margin:0;

    color:#fff;

    font-size:15px;
    font-weight:600;
}

.sunno_contact_page_quick_card p{
    margin:5px 0 0;

    color:var(--muted);

    font-size:11px;
}


/* =========================================================
   MAIN CONTACT
========================================================= */

.sunno_contact_page_main{
    max-width:1250px;

    margin:auto;

    padding:125px 25px 110px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;

    gap:90px;

    align-items:start;
}


/* LEFT */

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

    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_contact_page_info h2{
    margin:18px 0;

    font-size:clamp(42px,5vw,65px);
    line-height:1;

    letter-spacing:-3px;
}

.sunno_contact_page_info h2 em{
    display:block;

    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_contact_page_info_intro{
    max-width:490px;

    color:var(--muted);

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

    margin-bottom:45px;
}


/* INFO ITEM */

.sunno_contact_page_info_item{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px 0;

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

.sunno_contact_page_info_icon{
    width:45px;
    height:45px;

    flex-shrink:0;

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

    color:var(--gold);

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

    background:var(--dark-soft);
}

.sunno_contact_page_info_item span{
    display:block;

    color:#88837c;

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;

    margin-bottom:5px;
}

.sunno_contact_page_info_item a{
    display:block;

    color:#f4eee5;

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

    text-decoration:none;

    transition:.3s ease;
}

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

.sunno_contact_page_info_item small{
    display:block;

    color:#77726c;

    font-size:10px;

    margin-top:4px;
}


/* SOCIAL */

.sunno_contact_page_social{
    padding-top:35px;
}

.sunno_contact_page_social > span{
    color:#77726c;

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.sunno_contact_page_social_links{
    display:flex;
    gap:9px;

    margin-top:15px;
}

.sunno_contact_page_social_links a{
    width:38px;
    height:38px;

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

    color:#aaa49a;

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

    text-decoration:none;

    transition:.3s ease;
}

.sunno_contact_page_social_links a:hover{
    color:#171717;
    background:var(--gold);
    border-color:var(--gold);

    transform:translateY(-4px);
}


/* =========================================================
   FORM
========================================================= */

.sunno_contact_page_form_box{
    padding:45px;

    background:
        linear-gradient(
            145deg,
            #211e1a,
            #1a1815
        );

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

    position:relative;
}

.sunno_contact_page_form_box::before{
    content:"";

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

    width:70px;
    height:2px;

    background:var(--gold);
}

.sunno_contact_page_form_top > span{
    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_contact_page_form_top h3{
    margin:14px 0 10px;

    color:#fff;

    font-size:38px;
    line-height:1.05;
    letter-spacing:-1.5px;
}

.sunno_contact_page_form_top h3 em{
    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_contact_page_form_top p{
    margin:0 0 32px;

    color:var(--muted);

    font-size:12px;
    line-height:1.7;
}


/* FORM ROW */

.sunno_contact_page_form_row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}


/* FIELD */

.sunno_contact_page_field{
    margin-bottom:20px;
}

.sunno_contact_page_field label{
    display:block;

    margin-bottom:8px;

    color:#8d8880;

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.sunno_contact_page_field input,
.sunno_contact_page_field select,
.sunno_contact_page_field textarea{

    width:100%;

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

    outline:none;

    background:#171614;

    color:#eee8de;

    padding:14px 15px;

    font-family:inherit;
    font-size:13px;

    transition:.3s ease;

    box-sizing:border-box;
}

.sunno_contact_page_field input{
    height:48px;
}

.sunno_contact_page_field select{
    height:48px;

    cursor:pointer;
}

.sunno_contact_page_field textarea{
    min-height:125px;

    resize:vertical;
}

.sunno_contact_page_field input::placeholder,
.sunno_contact_page_field textarea::placeholder{
    color:#5f5b55;
}

.sunno_contact_page_field input:focus,
.sunno_contact_page_field select:focus,
.sunno_contact_page_field textarea:focus{
    border-color:var(--gold);

    background:#191816;

    box-shadow:0 0 0 3px rgba(212,175,55,.06);
}


/* SUBMIT */

.sunno_contact_page_submit{
    width:100%;

    min-height:52px;

    margin-top:5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    border:0;

    background:var(--gold);

    color:#171717;

    font-family:inherit;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    cursor:pointer;

    transition:.35s ease;
}

.sunno_contact_page_submit i{
    transition:.35s ease;
}

.sunno_contact_page_submit:hover{
    background:var(--gold-light);

    transform:translateY(-3px);
}

.sunno_contact_page_submit:hover i{
    transform:translateX(6px);
}


/* SUCCESS */

.sunno_contact_page_form_success{
    display:none;

    align-items:center;
    justify-content:center;
    gap:9px;

    padding:13px;

    margin-top:15px;

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

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

    color:var(--gold-light);

    font-size:11px;
}

.sunno_contact_page_form_success.show{
    display:flex;
}


/* =========================================================
   LOCATION
========================================================= */

.sunno_contact_page_location{
    padding:100px 25px 120px;

    background:
        linear-gradient(
            180deg,
            #1b1916,
            #171717
        );
}

.sunno_contact_page_location_head{
    max-width:1250px;

    margin:0 auto 45px;

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

    gap:40px;
}

.sunno_contact_page_location_head > div span{
    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_contact_page_location_head h2{
    margin:13px 0 0;

    font-size:clamp(40px,5vw,62px);
    line-height:1;

    letter-spacing:-3px;
}

.sunno_contact_page_location_head h2 em{
    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_contact_page_location_head > p{
    max-width:410px;

    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.8;
}


/* MAP */

.sunno_contact_page_map_wrap{
    max-width:1250px;

    height:570px;

    margin:auto;

    position:relative;

    overflow:hidden;

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

.sunno_contact_page_map{
    width:100%;
    height:100%;
}

.sunno_contact_page_map iframe{
    width:100%;
    height:100%;

    display:block;

    border:0;

    filter:grayscale(.8) contrast(1.05);
}


/* MAP CARD */

.sunno_contact_page_map_card{
    position:absolute;

    left:30px;
    bottom:30px;

    width:330px;

    background:rgba(23,23,23,.96);

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

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

.sunno_contact_page_map_logo{
    padding:20px 25px;

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

    color:var(--gold);

    font-family:Georgia,serif;

    font-size:22px;
    letter-spacing:3px;
}

.sunno_contact_page_map_logo span{
    color:#a8a198;

    font-family:inherit;

    font-size:8px;
    letter-spacing:4px;

    margin-left:6px;
}

.sunno_contact_page_map_card_content{
    padding:25px;
}

.sunno_contact_page_map_card_content > span{
    color:#817b73;

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.sunno_contact_page_map_card_content h3{
    margin:8px 0 3px;

    color:#fff;

    font-size:17px;
}

.sunno_contact_page_map_card_content p{
    margin:0;

    color:var(--muted);

    font-size:11px;
}

.sunno_contact_page_map_card_line{
    height:1px;

    margin:20px 0;

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

.sunno_contact_page_map_hours{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:15px;
}

.sunno_contact_page_map_hours span{
    display:block;

    color:#77726c;

    font-size:7px;
    letter-spacing:1.5px;
}

.sunno_contact_page_map_hours strong{
    display:block;

    color:#ddd6cc;

    font-size:10px;

    margin-top:5px;
}

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

    margin-top:22px;

    padding:12px 14px;

    color:#171717;
    background:var(--gold);

    text-decoration:none;

    font-size:9px;
    font-weight:800;
    letter-spacing:1px;

    transition:.3s ease;
}

.sunno_contact_page_direction_btn:hover{
    background:var(--gold-light);
}

.sunno_contact_page_direction_btn i{
    transition:.3s ease;
}

.sunno_contact_page_direction_btn:hover i{
    transform:translate(3px,-3px);
}


/* =========================================================
   HELP / FAQ
========================================================= */

.sunno_contact_page_help{
    max-width:1050px;

    margin:auto;

    padding:110px 25px;
}

.sunno_contact_page_help_head{
    text-align:center;

    margin-bottom:50px;
}

.sunno_contact_page_help_head span{
    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_contact_page_help_head h2{
    margin:13px 0 0;

    font-size:clamp(40px,5vw,58px);
    line-height:1;

    letter-spacing:-2.5px;
}

.sunno_contact_page_help_head h2 em{
    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_contact_page_help_grid{
    border-top:1px solid rgba(212,175,55,.2);
}

.sunno_contact_page_help_item{
    border-bottom:1px solid rgba(212,175,55,.2);
}

.sunno_contact_page_help_question{
    width:100%;

    padding:24px 5px;

    border:0;

    background:transparent;

    color:#e9e3da;

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

    font-family:inherit;

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

    text-align:left;

    cursor:pointer;
}

.sunno_contact_page_help_question i{
    color:var(--gold);

    transition:.35s ease;
}

.sunno_contact_page_help_item.active
.sunno_contact_page_help_question i{
    transform:rotate(45deg);
}

.sunno_contact_page_help_answer{
    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;
}

.sunno_contact_page_help_answer p{
    max-width:750px;

    margin:0;

    padding:0 40px 24px 5px;

    color:var(--muted);

    font-size:12px;
    line-height:1.8;
}


/* =========================================================
   FINAL
========================================================= */

.sunno_contact_page_final{
    min-height:520px;

    margin:0 25px 100px;

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

    text-align:center;

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(23,23,23,.8),
            rgba(23,23,23,.92)
        ),
        url("https://images.unsplash.com/photo-1498804103079-a6351b050096?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

.sunno_contact_page_final_content{
    padding:70px 25px;
}

.sunno_contact_page_final_content > span{
    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
}

.sunno_contact_page_final h2{
    margin:18px 0 5px;

    color:#fff;

    font-size:clamp(48px,7vw,82px);
    line-height:.95;

    letter-spacing:-4px;
}

.sunno_contact_page_final h2 em{
    color:var(--gold);

    font-family:Georgia,serif;
    font-weight:400;
}

.sunno_contact_page_final p{
    margin:15px 0 28px;

    color:#b6afa5;

    font-size:15px;
}

.sunno_contact_page_final a{
    display:inline-flex;
    align-items:center;
    gap:13px;

    padding:15px 23px;

    color:#171717;
    background:var(--gold);

    text-decoration:none;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    transition:.35s ease;
}

.sunno_contact_page_final a:hover{
    background:var(--gold-light);

    transform:translateY(-4px);
}

.sunno_contact_page_final a i{
    transition:.3s ease;
}

.sunno_contact_page_final a:hover i{
    transform:translateX(5px);
}


/* =========================================================
   REVEAL
========================================================= */

.sunno_contact_page_reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.sunno_contact_page_reveal.sunno_contact_page_show{
    opacity:1;

    transform:translateY(0);
}


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

@media(max-width:991px){

    .sunno_contact_page_quick{
        margin-left:20px;
        margin-right:20px;
    }

    .sunno_contact_page_main{
        grid-template-columns:1fr;

        gap:65px;

        max-width:800px;
    }

    .sunno_contact_page_info_intro{
        max-width:650px;
    }

    .sunno_contact_page_location_head{
        max-width:800px;
    }

    .sunno_contact_page_map_wrap{
        max-width:900px;
    }

}


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

@media(max-width:767px){

    .sunno_contact_page_hero{
        min-height:560px;
    }

    .sunno_contact_page_hero_content{
        padding:60px 20px;
    }

    .sunno_contact_page_hero h1{
        font-size:52px;
        letter-spacing:-2.5px;
    }

    .sunno_contact_page_hero p{
        font-size:14px;
        line-height:1.7;
    }

    .sunno_contact_page_scroll{
        display:none;
    }


    /* QUICK */

    .sunno_contact_page_quick{
        grid-template-columns:1fr;

        margin:-35px 20px 0;
    }

    .sunno_contact_page_quick_card{
        min-height:110px;

        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .sunno_contact_page_quick_card:last-child{
        border-bottom:0;
    }


    /* MAIN */

    .sunno_contact_page_main{
        padding:85px 20px 80px;

        gap:55px;
    }

    .sunno_contact_page_info h2{
        font-size:43px;
    }

    .sunno_contact_page_info_intro{
        font-size:13px;
    }


    /* FORM */

    .sunno_contact_page_form_box{
        padding:30px 20px;
    }

    .sunno_contact_page_form_top h3{
        font-size:34px;
    }

    .sunno_contact_page_form_row{
        grid-template-columns:1fr;

        gap:0;
    }


    /* LOCATION */

    .sunno_contact_page_location{
        padding:80px 20px;
    }

    .sunno_contact_page_location_head{
        display:block;
    }

    .sunno_contact_page_location_head h2{
        font-size:43px;
    }

    .sunno_contact_page_location_head > p{
        margin-top:20px;
    }

    .sunno_contact_page_map_wrap{
        height:620px;
    }

    .sunno_contact_page_map_card{
        left:15px;
        right:15px;
        bottom:15px;

        width:auto;
    }


    /* HELP */

    .sunno_contact_page_help{
        padding:80px 20px;
    }

    .sunno_contact_page_help_head{
        margin-bottom:35px;
    }

    .sunno_contact_page_help_head h2{
        font-size:43px;
    }

    .sunno_contact_page_help_question{
        padding:21px 0;

        font-size:13px;
    }


    /* FINAL */

    .sunno_contact_page_final{
        min-height:450px;

        margin:0 20px 80px;
    }

    .sunno_contact_page_final h2{
        font-size:52px;

        letter-spacing:-2.5px;
    }

}


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

@media(max-width:420px){

    .sunno_contact_page_hero h1{
        font-size:45px;
    }

    .sunno_contact_page_quick_card{
        padding:22px 18px;
    }

    .sunno_contact_page_info h2{
        font-size:37px;
    }

    .sunno_contact_page_form_box{
        padding:27px 17px;
    }

    .sunno_contact_page_map_hours{
        grid-template-columns:1fr;
        gap:10px;
    }

    .sunno_contact_page_map_wrap{
        height:650px;
    }

    .sunno_contact_page_final h2{
        font-size:45px;
    }

}
/* comming soon section  */
/* =========================================================
   SUNNO COMING SOON SECTION
========================================================= */

.sunno_coming_soon_section{
    position:relative;

    min-height:750px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:100px 30px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #171717 0%,
            #1d1a17 55%,
            #171717 100%
        );

    color:var(--text);
}


/* subtle background light */

.sunno_coming_soon_section::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    right:-180px;

    background:var(--gold-soft);

    filter:blur(120px);

    opacity:.25;

    pointer-events:none;
}


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

.sunno_coming_soon_container{
    width:100%;
    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr .85fr;

    gap:90px;

    align-items:center;
}


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

.sunno_coming_soon_content{
    position:relative;

    z-index:2;
}

.sunno_coming_soon_eyebrow{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gold-light);

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

    letter-spacing:3px;

    margin-bottom:25px;
}

.sunno_coming_soon_eyebrow i{
    font-size:12px;
}


.sunno_coming_soon_content h1{
    max-width:650px;

    margin:0;

    color:#fff;

    font-size:clamp(55px,7vw,88px);

    line-height:.94;

    letter-spacing:-4px;

    font-weight:700;
}

.sunno_coming_soon_content h1 span{
    display:block;

    color:var(--gold);

    font-family:Georgia,serif;

    font-style:italic;

    font-weight:400;

    margin:7px 0;
}


.sunno_coming_soon_desc{
    max-width:560px;

    margin:30px 0 35px;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.sunno_coming_soon_countdown{
    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:35px;
}

.sunno_coming_soon_time{
    min-width:65px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.sunno_coming_soon_time strong{
    color:#fff;

    font-size:30px;

    line-height:1;

    font-weight:500;

    letter-spacing:-1px;
}

.sunno_coming_soon_time span{
    margin-top:8px;

    color:#77736d;

    font-size:7px;

    font-weight:800;

    letter-spacing:1.5px;
}

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

    font-size:22px;

    margin-top:-12px;

    opacity:.7;
}


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

.sunno_coming_soon_actions{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:25px;
}

.sunno_coming_soon_btn{
    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:15px 22px;

    background:var(--gold);

    color:#171717;

    text-decoration:none;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.3px;

    transition:.35s ease;
}

.sunno_coming_soon_btn i{
    transition:.35s ease;
}

.sunno_coming_soon_btn:hover{
    background:var(--gold-light);

    color:#171717;

    transform:translateY(-4px);
}

.sunno_coming_soon_btn:hover i{
    transform:translateX(5px);
}


.sunno_coming_soon_link{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#aaa39a;

    text-decoration:none;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;

    transition:.3s ease;
}

.sunno_coming_soon_link i{
    color:var(--gold);

    transition:.3s ease;
}

.sunno_coming_soon_link:hover{
    color:#fff;
}

.sunno_coming_soon_link:hover i{
    transform:translateY(4px);
}


/* =========================================================
   VISUAL
========================================================= */

.sunno_coming_soon_visual{
    position:relative;

    padding:20px;
}

.sunno_coming_soon_image_wrap{
    position:relative;

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

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

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

.sunno_coming_soon_image_wrap img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

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

.sunno_coming_soon_visual:hover
.sunno_coming_soon_image_wrap img{
    transform:scale(1.06);
}

.sunno_coming_soon_image_overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(0,0,0,.72)
        );
}

.sunno_coming_soon_image_text{
    position:absolute;

    left:28px;
    bottom:25px;

    display:flex;

    align-items:baseline;

    gap:10px;
}

.sunno_coming_soon_image_text span{
    color:#fff;

    font-family:Georgia,serif;

    font-size:28px;

    letter-spacing:4px;
}

.sunno_coming_soon_image_text strong{
    color:var(--gold);

    font-size:8px;

    letter-spacing:4px;
}


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

.sunno_coming_soon_status{
    position:absolute;

    left:-10px;

    bottom:55px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:16px 20px;

    background:rgba(29,26,23,.96);

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

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

    backdrop-filter:blur(12px);
}

.sunno_coming_soon_status_dot{
    width:8px;
    height:8px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--gold);

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

    animation:
        sunnoComingPulse 1.8s infinite;
}

@keyframes sunnoComingPulse{

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

    50%{
        opacity:.5;
        transform:scale(.75);
    }

}

.sunno_coming_soon_status strong{
    display:block;

    color:#eee8df;

    font-size:8px;

    letter-spacing:1.8px;
}

.sunno_coming_soon_status small{
    display:block;

    color:#77736c;

    font-size:9px;

    margin-top:4px;
}


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

.sunno_coming_soon_bottom{
    width:100%;
    max-width:1250px;

    margin:90px auto 0;

    display:flex;

    align-items:center;

    gap:25px;
}

.sunno_coming_soon_bottom_line{
    flex:1;

    height:1px;

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

.sunno_coming_soon_bottom_line:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.25),
            transparent
        );
}

.sunno_coming_soon_bottom p{
    margin:0;

    color:#77736d;

    font-family:Georgia,serif;

    font-style:italic;

    font-size:13px;

    text-align:center;

    white-space:nowrap;
}

.sunno_coming_soon_bottom p strong{
    color:var(--gold);

    font-weight:400;
}


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

.sunno_coming_soon_content,
.sunno_coming_soon_visual{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.sunno_coming_soon_section.sunno_coming_soon_visible
.sunno_coming_soon_content{
    opacity:1;

    transform:translateY(0);
}

.sunno_coming_soon_section.sunno_coming_soon_visible
.sunno_coming_soon_visual{
    opacity:1;

    transform:translateY(0);

    transition-delay:.15s;
}


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

@media(max-width:991px){

    .sunno_coming_soon_section{
        padding:90px 25px;
    }

    .sunno_coming_soon_container{
        grid-template-columns:1fr;

        gap:60px;

        max-width:700px;
    }

    .sunno_coming_soon_content{
        text-align:center;
    }

    .sunno_coming_soon_content h1{
        margin:auto;
    }

    .sunno_coming_soon_desc{
        margin-left:auto;
        margin-right:auto;
    }

    .sunno_coming_soon_countdown{
        justify-content:center;
    }

    .sunno_coming_soon_actions{
        justify-content:center;
    }

    .sunno_coming_soon_visual{
        max-width:500px;

        width:100%;

        margin:auto;
    }

    .sunno_coming_soon_status{
        left:-5px;
    }

}


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

@media(max-width:767px){

    .sunno_coming_soon_section{
        min-height:auto;

        padding:75px 20px;
    }

    .sunno_coming_soon_container{
        gap:50px;
    }

    .sunno_coming_soon_eyebrow{
        font-size:8px;

        letter-spacing:2px;
    }

    .sunno_coming_soon_content h1{
        font-size:52px;

        letter-spacing:-2.5px;
    }

    .sunno_coming_soon_desc{
        margin-top:25px;

        font-size:13px;

        line-height:1.8;
    }

    .sunno_coming_soon_countdown{
        gap:9px;
    }

    .sunno_coming_soon_time{
        min-width:52px;
    }

    .sunno_coming_soon_time strong{
        font-size:23px;
    }

    .sunno_coming_soon_time span{
        font-size:6px;
    }

    .sunno_coming_soon_separator{
        font-size:17px;
    }

    .sunno_coming_soon_actions{
        flex-direction:column;

        gap:20px;
    }

    .sunno_coming_soon_btn{
        width:100%;

        justify-content:center;
    }

    .sunno_coming_soon_visual{
        padding:10px;
    }

    .sunno_coming_soon_status{
        left:-2px;

        bottom:35px;

        padding:13px 15px;
    }

    .sunno_coming_soon_status small{
        font-size:8px;
    }

    .sunno_coming_soon_bottom{
        margin-top:60px;

        gap:12px;
    }

    .sunno_coming_soon_bottom p{
        font-size:10px;

        white-space:normal;

        min-width:150px;
    }

}


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

@media(max-width:420px){

    .sunno_coming_soon_content h1{
        font-size:44px;
    }

    .sunno_coming_soon_countdown{
        gap:5px;
    }

    .sunno_coming_soon_time{
        min-width:44px;
    }

    .sunno_coming_soon_time strong{
        font-size:20px;
    }

    .sunno_coming_soon_separator{
        font-size:14px;
    }

    .sunno_coming_soon_status{
        position:relative;

        left:auto;
        bottom:auto;

        margin:-35px 15px 0;

        z-index:3;
    }

}