@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#fffdf9;
    color:#1b1b1b;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

button,
input,
textarea,
select{

    font-family:inherit;

}



/*================ VARIABLES ================*/

:root{

    --primary:#b08d57;
    --dark:#171717;
    --text:#555;
    --light:#fffdf9;
    --white:#ffffff;

    --ocean:#2f80ed;
    --green:#4caf50;

    --border:#eee6db;

    --shadow:0 20px 50px rgba(0,0,0,0.08);

    --transition:.35s ease;

}



/*================ COMMON ================*/

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

.section{

    padding:100px 0;

}


.section-title{

    text-align:center;
    max-width:700px;
    margin:0 auto 60px;

}


.section-title span{

    color:var(--primary);
    font-size:14px;
    letter-spacing:3px;
    font-weight:600;

}


.section-title h2{

    font-family:'Cormorant Garamond',serif;
    font-size:52px;
    line-height:1.1;
    margin:15px 0;

}


.section-title p{

    color:var(--text);
    font-size:16px;

}



/*================ PRELOADER ================*/

.preloader{

    position:fixed;
    inset:0;
    background:#fffdf9;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;

}


.loader-text{

    font-family:'Cormorant Garamond',serif;
    font-size:55px;
    font-weight:700;
    color:var(--dark);

}



/*================ LIVE WALLPAPER BACKGROUND ================*/

.live-wallpaper{

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

    background:
        radial-gradient(circle at 18% 20%, rgba(140,150,168,.35), transparent 45%),
        radial-gradient(circle at 82% 15%, rgba(100,110,130,.4), transparent 48%),
        radial-gradient(circle at 50% 90%, rgba(70,78,96,.3), transparent 55%),
        linear-gradient(160deg,#aab3c4 0%,#8a94a8 45%,#6f7890 100%);

    background-size:220% 220%;

    animation:wallpaperShift 22s ease-in-out infinite;

    transition:background 1.2s ease;

}


@keyframes wallpaperShift{

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

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

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

}



/*================ FLOATING CLOUD SCENE ================*/

.cloud-scene{

    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
    opacity:1;
    transition:opacity 1.5s ease;

}


.cloud{

    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    opacity:1;
    transition:opacity 1.5s ease;

}


body.rain-active .cloud-scene{

    opacity:1;

}


body.rain-active .cloud{

    opacity:1;

}


.cloud-1{

    top:6%;
    left:-30%;
    width:620px;
    height:220px;
    background:radial-gradient(ellipse at center, rgba(55,58,68,.6), transparent 70%);
    animation:driftRight 90s linear infinite;

}


.cloud-2{

    top:18%;
    left:-45%;
    width:820px;
    height:280px;
    background:radial-gradient(ellipse at center, rgba(35,38,46,.68), transparent 70%);
    animation:driftRight 130s linear infinite;
    animation-delay:-40s;

}


.cloud-3{

    top:38%;
    left:-40%;
    width:720px;
    height:250px;
    background:radial-gradient(ellipse at center, rgba(25,27,34,.62), transparent 70%);
    animation:driftRight 110s linear infinite;
    animation-delay:-70s;

}


.cloud-4{

    top:58%;
    left:-35%;
    width:560px;
    height:200px;
    background:radial-gradient(ellipse at center, rgba(45,49,58,.5), transparent 70%);
    animation:driftRight 150s linear infinite;
    animation-delay:-20s;

}


.cloud-5{

    top:78%;
    left:-50%;
    width:900px;
    height:300px;
    background:radial-gradient(ellipse at center, rgba(15,17,22,.65), transparent 70%);
    animation:driftRight 170s linear infinite;
    animation-delay:-100s;

}


@keyframes driftRight{

    0%{transform:translateX(0) translateY(0);}

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

    100%{transform:translateX(140vw) translateY(0);}

}


@media(max-width:768px){

    .cloud{

        filter:blur(30px);

    }


    .cloud-1,.cloud-2,.cloud-3,.cloud-4,.cloud-5{

        width:380px;
        height:160px;

    }

}



/*================ RAIN CANVAS ================*/

#rainCanvas{

    position:fixed;
    inset:0;
    z-index:500;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.2s ease;

}


body.rain-active #rainCanvas{

    opacity:1;

}


body.rain-active .live-wallpaper{

    background:
        radial-gradient(circle at 20% 15%, rgba(96,106,124,.55), transparent 48%),
        radial-gradient(circle at 78% 25%, rgba(52,58,72,.65), transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(24,27,34,.65), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(70,77,92,.45), transparent 50%),
        linear-gradient(160deg,#262b34 0%,#171a20 45%,#1d2129 100%);

    animation-duration:30s;

}


/*================ RAIN THEME TEXT CONTRAST FIX ================*/

/* Only the text sitting directly on the dark wallpaper needs to
   change — text inside white cards (product-card, benefit-card,
   review-card, order-form-box etc.) already has full contrast and
   is intentionally left untouched. */

.hero-content h1,
.hero-info h3,
.about-content h2,
.section-title h2,
.point{

    color:#f3f4f6;

}


.hero-content p,
.hero-info p,
.about-content p,
.section-title p{

    color:#dde1e7;

}


.section-title span,
.section-tag,
.point i{

    color:#e6c78f;

}


.hero-badge{

    background:rgba(255,255,255,.14);
    color:#e6c78f;

}


.btn-outline{

    border-color:#f3f4f6;
    color:#f3f4f6;

}


.btn-outline:hover{

    background:#f3f4f6;
    color:#15171b;

}


.hero-bottom{

    border-top-color:rgba(255,255,255,.15);

}



/*================ RAIN TOGGLE BUTTON ================*/

.rain-toggle{

    position:fixed;
    right:25px;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    border:none;
    background:var(--dark);
    color:white;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    z-index:900;
    transition:var(--transition);

}


.rain-toggle:hover{

    background:var(--primary);
    transform:translateY(-50%) scale(1.08);

}


.rain-toggle.active{

    background:#2f80ed;

}


@media(max-width:600px){

    .rain-toggle{

        right:15px;
        width:46px;
        height:46px;
        font-size:18px;

    }

}



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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:transparent;
    border-bottom:1px solid transparent;

}


.nav{

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

}


.logo{

    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    font-weight:700;
    letter-spacing:1px;
    color:#f5f5f5;

}


.logo img{

    width:45px;
    height:45px;
    object-fit:contain;

}



.nav-list{

    display:flex;
    gap:35px;

}


.nav-list a{

    font-size:14px;
    color:#f0f1f3;
    transition:var(--transition);

}


.nav-list a:hover{

    color:var(--primary);

}


.nav-order-btn{

    background:var(--dark);
    color:white;
    padding:13px 28px;
    border-radius:50px;
    font-size:14px;
    transition:var(--transition);

}


.nav-order-btn:hover{

    background:var(--primary);

}


.menu-btn{

    display:none;
    border:none;
    background:none;
    font-size:25px;
    color:#f5f5f5;

}



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

.hero{

    padding-top:150px;
    min-height:100vh;
    position:relative;
    overflow:hidden;

}


.hero-bg{

    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;

    background:
        radial-gradient(circle at 15% 20%, rgba(176,141,87,.18), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(60,70,110,.35), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(30,20,50,.5), transparent 60%),
        linear-gradient(160deg,#0d0f14 0%,#161b26 45%,#1c1420 100%);

    background-size:220% 220%;

    animation:heroBgShift 26s ease-in-out infinite;

}


.hero-bg::before,
.hero-bg::after{

    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.5;

}


.hero-bg::before{

    top:-10%;
    right:-10%;
    width:520px;
    height:520px;
    background:radial-gradient(circle, rgba(176,141,87,.35), transparent 70%);

}


.hero-bg::after{

    bottom:-15%;
    left:-10%;
    width:600px;
    height:600px;
    background:radial-gradient(circle, rgba(47,80,180,.3), transparent 70%);

}


@keyframes heroBgShift{

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

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

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

}


.hero-wrapper{

    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;

}


.hero-badge{

    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#f5eee4;
    color:var(--primary);
    font-size:13px;
    letter-spacing:1px;
    margin-bottom:25px;

}


.hero-title-row{

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

}


.hero-logo{

    width:220px;
    height:220px;
    object-fit:contain;
    flex-shrink:0;
    margin-left:-70px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));

}


.hero-content h1{

    font-family:'Cormorant Garamond',serif;
    font-size:75px;
    line-height:.95;
    font-weight:700;

}


.hero-content p{

    margin:30px 0;
    color:var(--text);
    max-width:520px;
    line-height:1.8;

}


.hero-buttons{

    display:flex;
    gap:20px;

}


.btn{

    padding:15px 35px;
    border-radius:50px;
    transition:var(--transition);

}


.btn-primary{

    background:var(--dark);
    color:white;

}


.btn-primary:hover{

    background:var(--primary);

}


.btn-outline{

    border:1px solid #222;

}


.btn-outline:hover{

    background:#222;
    color:white;

}


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

.hero-features{

    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:35px;

}


.feature{

    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 20px 10px 10px;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:50px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:var(--transition);

}


.feature:hover{

    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
    border-color:var(--primary);

}


.feature i{

    width:34px;
    height:34px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5eee4;
    color:var(--primary);
    font-size:16px;

}


.feature span{

    font-size:14px;
    font-weight:600;
    color:var(--dark);
    letter-spacing:.2px;

}


body.rain-active .feature{

    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);

}


body.rain-active .feature i{

    background:rgba(255,255,255,.14);
    color:#e6c78f;

}


body.rain-active .feature span{

    color:#f3f4f6;

}


@media(max-width:600px){

    .hero-features{

        gap:10px;

    }


    .feature{

        padding:8px 16px 8px 8px;

    }


    .feature i{

        width:30px;
        height:30px;
        font-size:14px;

    }


    .feature span{

        font-size:13px;

    }

}

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

.hero-products{

    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;

}


.hero-product{

    width:260px;
    background:#ffffff;
    border-radius:30px;
    padding:25px;
    position:relative;
    box-shadow:var(--shadow);
    transition:var(--transition);

}


.hero-product:hover{

    transform:translateY(-15px);

}


.hero-product img{

    height:330px;
    width:100%;
    object-fit:contain;

}


.product-tag{

    position:absolute;
    top:20px;
    left:20px;
    background:var(--ocean);
    color:white;
    padding:7px 18px;
    border-radius:30px;
    font-size:12px;
    z-index:2;

}


.product-tag.green{

    background:var(--green);

}


.price{

    text-align:center;
    margin-top:15px;

}


.old-price{

    color:#999;
    text-decoration:line-through;
    margin-right:10px;
    font-size:16px;

}


.new-price{

    font-size:28px;
    font-weight:700;
    color:var(--dark);

}



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

.hero-bottom{

    margin-top:80px;
    border-top:1px solid var(--border);
    padding:35px 0;

}


.hero-bottom-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

}


.hero-info{

    text-align:center;

}


.hero-info h3{

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

}


.hero-info p{

    color:var(--text);
    font-size:14px;

}



/*================ COLLECTION ================*/

.collection{

    padding:100px 0;

}


.collection-wrapper{

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

}



.product-card{

    background:white;
    border-radius:35px;
    padding:35px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    transform-style:preserve-3d;
    will-change:transform;

}


.product-card:hover{

    transform:perspective(1000px) rotateX(3deg) rotateY(-3deg) translateY(-14px);
    box-shadow:0 40px 70px rgba(0,0,0,.16);

}


.product-card.ocean{

    border-top:5px solid var(--ocean);

}


.product-card.ocean:hover{

    box-shadow:0 40px 70px rgba(0,0,0,.14),
               0 0 45px rgba(47,128,237,.28);

}


.product-card.green{

    border-top:5px solid var(--green);

}


.product-card.green:hover{

    box-shadow:0 40px 70px rgba(0,0,0,.14),
               0 0 45px rgba(76,175,80,.28);

}



.offer-badge{

    position:absolute;
    top:25px;
    right:25px;
    background:var(--ocean);
    color:white;
    padding:8px 18px;
    border-radius:50px;
    font-size:12px;
    font-weight:600;

}


.green-badge{

    background:var(--green);

}



.product-image{

    height:350px;
    display:flex;
    justify-content:center;
    align-items:center;

}


.product-image img{

    height:320px;
    object-fit:contain;
    transition:var(--transition);

}


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

    transform:scale(1.08);

}



.product-category{

    color:var(--primary);
    font-size:13px;
    letter-spacing:2px;

}


.product-content h3{

    font-family:'Cormorant Garamond',serif;
    font-size:48px;
    margin:10px 0;

}



.product-description{

    color:var(--text);
    line-height:1.7;
    margin-bottom:20px;

}



.fragrance-notes{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;

}


.fragrance-notes span{

    background:#f8f5ef;
    padding:8px 15px;
    border-radius:30px;
    font-size:13px;

}



.price-area{

    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;

}


.price-area .old-price{

    font-size:20px;

}


.price-area .new-price{

    font-size:36px;

}



.product-features{

    margin-bottom:30px;

}


.product-features li{

    margin:12px 0;
    color:#555;
    display:flex;
    align-items:center;
    gap:10px;

}


.product-features i{

    color:var(--primary);

}



.select-product{

    width:100%;
    border:none;
    padding:16px;
    border-radius:50px;
    background:var(--ocean);
    color:white;
    font-size:16px;
    cursor:pointer;
    transition:var(--transition);

}


.select-product:hover{

    opacity:.85;

}


.select-product.green-btn{

    background:var(--green);

}



/*================ OFFER BANNER ================*/

.offer-banner{

    margin-top:70px;
    background:#171717;
    color:white;
    padding:45px;
    border-radius:35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

}


.offer-left span{

    color:#d4af72;
    font-size:13px;
    letter-spacing:3px;

}


.offer-left h3{

    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    margin:15px 0;

}


.offer-left p{

    color:#ccc;

}


.offer-btn{

    background:white;
    color:#171717;
    padding:15px 35px;
    border-radius:50px;
    white-space:nowrap;
    transition:var(--transition);

}


.offer-btn:hover{

    background:var(--primary);
    color:white;

}
 
/*================ BENEFITS ================*/

.benefits{

    background:rgba(255,250,242,.55);
    backdrop-filter:blur(8px);

}


.benefits-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


.benefit-card{

    background:white;
    padding:40px 30px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:var(--transition);

}


.benefit-card:hover{

    transform:perspective(900px) rotateX(3deg) translateY(-10px);
    box-shadow:0 30px 55px rgba(0,0,0,.12),
               0 0 35px rgba(176,141,87,.2);

}


.benefit-icon{

    width:75px;
    height:75px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8f1e6;
    color:var(--primary);
    font-size:32px;

}


.benefit-card h3{

    font-family:'Cormorant Garamond',serif;
    font-size:32px;
    margin-bottom:15px;

}


.benefit-card p{

    color:var(--text);
    line-height:1.7;
    font-size:15px;

}



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

.about-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}


.about-image{

    position:relative;
    perspective:1200px;

}


.about-image-frame{

    border-radius:40px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);

}


.about-image:hover .about-image-frame{

    transform:rotateY(-4deg) rotateX(2deg) translateY(-6px);
    box-shadow:0 35px 70px rgba(0,0,0,.22);

}


.about-image-frame img{

    width:100%;
    height:600px;
    object-fit:cover;
    display:block;

}


/* Big brand logo badge floating over the about image */

.about-logo-badge{

    position:absolute;
    left:-45px;
    bottom:-45px;
    width:200px;
    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 35% 30%,#ffffff,#f4efe8 70%);
    border-radius:50%;
    box-shadow:0 25px 55px rgba(0,0,0,.28),
               0 0 0 10px rgba(255,255,255,.55),
               0 0 45px rgba(176,141,87,.35);
    animation:logoFloat 5s ease-in-out infinite;
    transition:var(--transition);
    z-index:5;

}


.about-logo-badge:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.3),
               0 0 0 10px rgba(255,255,255,.6),
               0 0 65px rgba(176,141,87,.55);

}


.about-logo-badge img{

    width:70%;
    height:70%;
    object-fit:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));

}


@keyframes logoFloat{

    0%,100%{

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

    }

    50%{

        transform:translateY(-14px) rotate(3deg);

    }

}


.section-tag{

    color:var(--primary);
    letter-spacing:3px;
    font-size:13px;
    font-weight:600;

}



.about-content h2{

    font-family:'Cormorant Garamond',serif;
    font-size:55px;
    line-height:1.1;
    margin:20px 0;

}


.about-content p{

    color:var(--text);
    line-height:1.9;
    margin-bottom:20px;

}



.about-points{

    margin:30px 0;

}


.point{

    display:flex;
    align-items:center;
    gap:12px;
    margin:15px 0;
    font-weight:500;

}


.point i{

    color:var(--primary);
    font-size:20px;

}



/*================ FRAGRANCE EXPERIENCE ================*/

.fragrance{

    background:rgba(255,250,242,.55);
    backdrop-filter:blur(8px);

}



.fragrance-grid{

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

}



.fragrance-box{

    padding:45px;
    border-radius:35px;
    min-height:250px;
    transition:var(--transition);

}


.fragrance-box:hover{

    transform:perspective(900px) rotateX(3deg) rotateY(-2deg) translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);

}


.ocean-box:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.1),
               0 0 40px rgba(47,128,237,.22);

}


.green-box:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.1),
               0 0 40px rgba(76,175,80,.22);

}



.ocean-box{

    background:linear-gradient(
        135deg,
        #e8f3ff,
        #ffffff
    );

    border:1px solid #d5e8ff;

}


.green-box{

    background:linear-gradient(
        135deg,
        #edfff0,
        #ffffff
    );

    border:1px solid #d8f5dc;

}



.fragrance-box h3{

    font-family:'Cormorant Garamond',serif;
    font-size:45px;
    margin-bottom:20px;

}


.fragrance-box p{

    color:var(--text);
    line-height:1.8;

}



/*================ REVIEWS ================*/

.review-stats{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-bottom:60px;

}


.stat-box{

    text-align:center;
    background:white;
    padding:30px;
    border-radius:25px;
    box-shadow:var(--shadow);
    transition:var(--transition);

}


.stat-box:hover{

    transform:perspective(900px) rotateX(3deg) translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.12),
               0 0 30px rgba(176,141,87,.2);

}


.stat-box h3{

    font-size:35px;
    color:var(--primary);

}


.stat-box p{

    color:var(--text);

}



.reviews-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


.review-card{

    background:white;
    padding:35px;
    border-radius:30px;
    box-shadow:var(--shadow);
    transition:var(--transition);

}


.review-card:hover{

    transform:perspective(900px) rotateX(3deg) translateY(-8px);
    box-shadow:0 30px 55px rgba(0,0,0,.12),
               0 0 35px rgba(176,141,87,.2);

}


.review-stars{

    color:#d4af37;
    letter-spacing:3px;
    margin-bottom:20px;

}


.review-card p{

    color:var(--text);
    line-height:1.8;
    margin-bottom:25px;

}



.review-user{

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

}


.review-user img{

    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;

}


.review-user h4{

    font-size:15px;

}


.review-user span{

    font-size:12px;
    color:#888;

}
 
/*================ FAQ ================*/

.faq{

    background:rgba(255,250,242,.55);
    backdrop-filter:blur(8px);

}


.faq-wrapper{

    max-width:850px;
    margin:auto;

}


.faq-item{

    background:white;
    border-radius:20px;
    margin-bottom:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


.faq-question{

    width:100%;
    padding:25px 30px;
    border:none;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:17px;
    font-weight:600;
    cursor:pointer;

}


.faq-question i{

    font-size:22px;
    color:var(--primary);

}


.faq-answer{

    padding:0 30px 25px;
    color:var(--text);
    line-height:1.8;

}



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

.order-wrapper{

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:50px;
    align-items:start;

}



.order-form-box{

    background:white;
    padding:40px;
    border-radius:35px;
    box-shadow:var(--shadow);
    transition:var(--transition);

}


.order-form-box:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.1),
               0 0 40px rgba(176,141,87,.15);

}



.input-group{

    margin-bottom:22px;

}


.input-group label{

    display:block;
    margin-bottom:10px;
    font-weight:500;

}


.input-group input,
.input-group textarea,
.input-group select{

    width:100%;
    border:1px solid var(--border);
    padding:15px 18px;
    border-radius:15px;
    outline:none;
    background:#fffdf9;
    font-size:15px;
    transition:var(--transition);

}


.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

    border-color:var(--primary);

}



.double-input{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}



/*================ ORDER SUMMARY ================*/

.order-summary{

    background:#171717;
    color:white;
    padding:40px;
    border-radius:35px;
    position:sticky;
    top:110px;
    box-shadow:0 30px 60px rgba(0,0,0,.35),
               0 0 45px rgba(176,141,87,.18);

}


.order-summary h3{

    font-family:'Cormorant Garamond',serif;
    font-size:38px;
    margin-bottom:30px;

}


.summary-item{

    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.1);

}


.summary-item span{

    color:#ccc;

}


.summary-total{

    display:flex;
    justify-content:space-between;
    font-size:25px;
    font-weight:700;
    padding:25px 0;

}



.place-order-btn{

    width:100%;
    padding:17px;
    border:none;
    border-radius:50px;
    background:#d4af72;
    color:white;
    font-size:16px;
    cursor:pointer;
    transition:var(--transition);

}


.place-order-btn:hover{

    background:white;
    color:#171717;

}



.secure-info{

    margin-top:25px;
    color:#ccc;
    font-size:14px;
    line-height:2;

}



/*================ SUCCESS MODAL ================*/

.success-modal{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;

}


.success-box{

    background:white;
    padding:45px;
    border-radius:35px;
    text-align:center;
    max-width:420px;

}


.success-icon{

    font-size:60px;
    color:#4caf50;

}


.success-box h2{

    font-family:'Cormorant Garamond',serif;
    font-size:40px;
    margin:15px 0;

}


.success-box p{

    color:var(--text);
    line-height:1.7;

}


.success-box button{

    margin-top:25px;
    padding:14px 30px;
    border:none;
    border-radius:50px;
    background:#171717;
    color:white;
    cursor:pointer;

}



/*================ LOADING ================*/

.loading-screen{

    position:fixed;
    inset:0;
    background:white;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9998;

}


.loader{

    width:45px;
    height:45px;
    border:4px solid #eee;
    border-top-color:#b08d57;
    border-radius:50%;
    animation:spin 1s linear infinite;

}


@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}



/*================ FOOTER ================*/

.footer{

    background:#171717;
    color:white;
    padding:80px 0 25px;

}


.footer-grid{

    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;

}


.footer-logo{

    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Cormorant Garamond',serif;
    font-size:50px;

}


.footer-logo img{

    width:48px;
    height:48px;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(176,141,87,.45));

}


.footer p{

    color:#ccc;
    line-height:1.8;

}


.footer h3{

    margin-bottom:20px;

}


.footer ul li{

    margin:12px 0;
    color:#ccc;

}


.footer a:hover{

    color:#d4af72;

}


.footer-bottom{

    margin-top:50px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
    color:#aaa;

}



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

.scroll-top{

    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    border-radius:50%;
    border:none;
    background:#171717;
    color:white;
    cursor:pointer;
    display:none;

}
 
/*================ RESPONSIVE DESIGN ================*/


@media(max-width:1100px){

    .hero-wrapper{

        grid-template-columns:1fr;
        text-align:center;

    }


    .hero-content p{

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

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-products{

        margin-top:40px;

    }


    .about-wrapper{

        grid-template-columns:1fr;

    }


    .about-image-frame img{

        height:450px;

    }


    .about-logo-badge{

        width:150px;
        height:150px;
        left:-25px;
        bottom:-25px;

    }


    .order-wrapper{

        grid-template-columns:1fr;

    }


    .order-summary{

        position:relative;
        top:0;

    }


}




@media(max-width:900px){


    .nav-list{

        position:fixed;
        top:85px;
        left:-100%;
        width:100%;
        height:calc(100vh - 85px);
        background:#1a1d24;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:35px;
        transition:.4s;

    }


    .nav-list.active{

        left:0;

    }


    .menu-btn{

        display:block;

    }


    .nav-order-btn{

        display:none;

    }


    .hero-content h1{

        font-size:60px;

    }


    .hero-logo{

        width:100px;
        height:100px;
        margin-left:0;

    }


    .collection-wrapper,
    .fragrance-grid{

        grid-template-columns:1fr;

    }


    .benefits-grid{

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

    }


    .reviews-grid{

        grid-template-columns:1fr;

    }


    .review-stats{

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

    }


    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}





@media(max-width:600px){


    .container{

        width:92%;

    }


    .section{

        padding:70px 0;

    }


    .section-title h2{

        font-size:38px;

    }


    .logo{

        font-size:35px;

    }


    .hero{

        padding-top:120px;

    }


    .hero-content h1{

        font-size:45px;
        line-height:1.1;

    }


    .hero-title-row{

        gap:14px;

    }


    .hero-logo{

        width:70px;
        height:70px;
        margin-left:0;

    }


    .hero-buttons{

        flex-direction:column;

    }


    .hero-product{

        width:160px;
        padding:15px;

    }


    .hero-product img{

        height:220px;

    }


    .hero-products{

        gap:15px;

    }


    .hero-bottom-grid{

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

    }


    .product-card{

        padding:25px;

    }


    .product-image{

        height:260px;

    }


    .product-image img{

        height:240px;

    }


    .product-content h3{

        font-size:40px;

    }


    .offer-banner{

        flex-direction:column;
        text-align:center;
        padding:30px;

    }


    .offer-left h3{

        font-size:32px;

    }


    .benefits-grid{

        grid-template-columns:1fr;

    }


    .about-content h2{

        font-size:40px;

    }


    .about-image-frame img{

        height:350px;

    }


    .about-logo-badge{

        width:110px;
        height:110px;
        left:15px;
        bottom:-30px;
        box-shadow:0 15px 35px rgba(0,0,0,.28),
                   0 0 0 6px rgba(255,255,255,.55);

    }


    .fragrance-box{

        padding:30px;

    }


    .review-stats{

        grid-template-columns:1fr;

    }


    .order-form-box,
    .order-summary{

        padding:25px;

    }


    .double-input{

        grid-template-columns:1fr;

    }


    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-logo{

        font-size:42px;
        justify-content:center;

    }


}



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


.hero-content,
.hero-product{

    animation:fadeUp .8s ease forwards;

}


/* Scroll-triggered reveal — smooth fade + rise into view */

.product-card,
.benefit-card,
.review-card,
.fragrance-box,
.about-image,
.about-content,
.section-title,
.about-logo-badge{

    opacity:0;
    transform:translateY(35px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),
               transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;

}


.about-image.show{

    transition-delay:.05s;

}


.about-content.show{

    transition-delay:.18s;

}


.about-logo-badge.show{

    transition-delay:.35s;

}


.product-card.show,
.benefit-card.show,
.review-card.show,
.fragrance-box.show,
.about-image.show,
.about-content.show,
.section-title.show,
.about-logo-badge.show{

    opacity:1;
    transform:translateY(0);

}


/* Gentle stagger for grouped cards so they don't all pop at once */

.product-card:nth-child(2).show,
.benefit-card:nth-child(2).show,
.review-card:nth-child(2).show{

    transition-delay:.1s;

}


.product-card:nth-child(3).show,
.benefit-card:nth-child(3).show,
.review-card:nth-child(3).show{

    transition-delay:.2s;

}


.product-card:nth-child(4).show,
.benefit-card:nth-child(4).show{

    transition-delay:.3s;

}


@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



/* Floating perfume effect */

.hero-product img{

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

}


@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}



/* Luxury hover effect */

.product-card,
.benefit-card,
.review-card,
.fragrance-box{

    cursor:pointer;

}


.product-card::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );
    transform:translateX(-100%);
    transition:.6s;

}


.product-card:hover::before{

    transform:translateX(100%);

}

/*================================================================
   EXTRA POLISH — FULL RESPONSIVENESS + 3D / GLOW / ANIMATION VIBE
   (Added block — everything above this stays untouched)
================================================================*/

/*---------------- Global safety ----------------*/

html,body{

    overflow-x:hidden;
    max-width:100%;

}

*{

    -webkit-tap-highlight-color:transparent;

}

.container{

    max-width:100%;

}

/* Smooth GPU-friendly perspective root for 3D hover children */

.hero-wrapper,
.collection-wrapper,
.benefits-grid,
.reviews-grid,
.fragrance-grid{

    perspective:1600px;

}


/*---------------- Glassy header on scroll (JS adds .scrolled) ----------------*/

.header.scrolled{

    background:rgba(23,23,23,.55);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,.08);

}


/*---------------- Glow-pulse call-to-action buttons ----------------*/

.btn-primary,
.nav-order-btn,
.place-order-btn,
.select-product,
.offer-btn{

    position:relative;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(176,141,87,.25);

}

.btn-primary::after,
.nav-order-btn::after,
.place-order-btn::after,
.select-product::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:translateX(-120%);
    transition:transform .7s ease;

}

.btn-primary:hover::after,
.nav-order-btn:hover::after,
.place-order-btn:hover::after,
.select-product:hover::after{

    transform:translateX(120%);

}

.btn-primary:hover,
.nav-order-btn:hover{

    box-shadow:0 12px 35px rgba(176,141,87,.45);
    transform:translateY(-3px);

}

.place-order-btn:hover{

    box-shadow:0 15px 40px rgba(212,175,114,.5);
    transform:translateY(-3px);

}

.select-product:hover{

    box-shadow:0 15px 35px rgba(47,128,237,.4);
    transform:translateY(-3px);

}

.select-product.green-btn:hover{

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

}


/*---------------- 3D tilt for hero product cards (JS driven via CSS vars) ----------------*/

.hero-product{

    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .25s ease,box-shadow .35s ease;

}

.hero-product.ocean-card:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.18),0 0 45px rgba(47,128,237,.35);

}

.hero-product.green-card:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.18),0 0 45px rgba(76,175,80,.35);

}


/*---------------- Product / benefit / review card tilt via JS vars ----------------*/

.product-card,
.benefit-card,
.review-card,
.fragrance-box,
.stat-box{

    transform:perspective(1000px)
              rotateX(var(--ry,0deg))
              rotateY(var(--rx,0deg))
              translateY(var(--ty,0px));

}

/* Higher-specificity hover override so live mouse-tracked tilt
   (set via --rx/--ry/--ty in JS) takes over from the static
   hover tilt defined earlier, with the original values kept as
   sensible fallbacks for touch devices. */

.product-card:hover,
.fragrance-box:hover{

    transform:perspective(1000px)
              rotateX(var(--ry,3deg))
              rotateY(var(--rx,-3deg))
              translateY(var(--ty,-10px));

}

.benefit-card:hover,
.review-card:hover,
.stat-box:hover{

    transform:perspective(900px)
              rotateX(var(--ry,3deg))
              translateY(var(--ty,-10px));

}


/*---------------- Hero logo & about badge extra glow ----------------*/

.hero-logo{

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

}

.hero-content h1{

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

}


/*---------------- Floating glow orbs decoration ----------------*/

.section{

    position:relative;

}

.section::before{

    content:"";
    position:absolute;
    top:10%;
    right:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(176,141,87,.10),transparent 70%);
    filter:blur(10px);
    pointer-events:none;
    z-index:0;
    animation:orbFloat 12s ease-in-out infinite;

}

@keyframes orbFloat{

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

}


/*---------------- Product image subtle 3D float ----------------*/

.product-image img{

    filter:drop-shadow(0 20px 25px rgba(0,0,0,.12));

}

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

    filter:drop-shadow(0 30px 35px rgba(0,0,0,.18));

}


/*---------------- Order summary glow breathing ----------------*/

.order-summary{

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

}

@keyframes summaryGlow{

    0%,100%{box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 45px rgba(176,141,87,.18);}
    50%{box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 65px rgba(176,141,87,.32);}

}


/*---------------- Input focus glow ----------------*/

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

    box-shadow:0 0 0 4px rgba(176,141,87,.15);

}


/*================================================================
   RESPONSIVE FIXES — every breakpoint down to small phones
================================================================*/

@media(max-width:1300px){

    .hero-logo{

        width:180px;
        height:180px;
        margin-left:-50px;

    }

}


@media(max-width:1100px){

    .hero-content h1{

        font-size:64px;

    }


    .review-stats{

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

    }


    .footer-grid{

        grid-template-columns:1fr 1fr;
        gap:35px;

    }

}


@media(max-width:900px){

    .section{

        padding:80px 0;

    }


    .section::before{

        display:none;

    }


    .hero-title-row{

        flex-direction:column;

    }


    .hero-logo{

        margin-left:0;

    }


    .offer-banner{

        flex-direction:column;
        text-align:center;

    }


    .about-logo-badge{

        width:130px;
        height:130px;

    }

}


@media(max-width:768px){

    .hero-products{

        flex-direction:column;

    }


    .hero-product{

        width:100%;
        max-width:320px;

    }


    .hero-bottom-grid{

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

    }

}


@media(max-width:600px){

    .nav{

        height:70px;

    }


    .hero{

        padding-top:100px;

    }


    .hero-badge{

        font-size:12px;
        padding:8px 16px;

    }


    .hero-buttons{

        width:100%;

    }


    .hero-buttons .btn{

        width:100%;
        text-align:center;

    }


    .collection-wrapper{

        gap:25px;

    }


    .product-card:hover,
    .benefit-card:hover,
    .review-card:hover,
    .fragrance-box:hover,
    .stat-box:hover{

        transform:translateY(-6px);

    }


    .about-image-frame img{

        height:300px;

    }


    .offer-left h3{

        font-size:28px;

    }


    .rain-toggle{

        top:auto;
        bottom:90px;
        transform:none;

    }


    .rain-toggle:hover{

        transform:scale(1.08);

    }


    .order-summary{

        animation:none;

    }

}


@media(max-width:420px){

    .container{

        width:94%;

    }


    .logo{

        font-size:28px;

    }


    .logo img{

        width:36px;
        height:36px;

    }


    .hero-content h1{

        font-size:36px;

    }


    .hero-badge{

        font-size:11px;
        padding:7px 14px;

    }


    .hero-content p{

        font-size:14px;
        margin:20px 0;

    }


    .btn{

        padding:13px 24px;
        font-size:14px;

    }


    .hero-info h3{

        font-size:24px;

    }


    .hero-info p{

        font-size:12px;

    }


    .section-title h2{

        font-size:30px;

    }


    .product-content h3{

        font-size:34px;

    }


    .product-image{

        height:220px;

    }


    .product-image img{

        height:200px;

    }


    .price-area .new-price{

        font-size:28px;

    }


    .benefit-card h3{

        font-size:26px;

    }


    .about-content h2{

        font-size:32px;

    }


    .fragrance-box h3{

        font-size:34px;

    }


    .footer-grid{

        grid-template-columns:1fr;

    }


    .footer-logo{

        font-size:36px;

    }


    .order-summary h3{

        font-size:30px;

    }


    .summary-total{

        font-size:20px;

    }


    .success-box{

        padding:30px 22px;

    }


    .success-box h2{

        font-size:32px;

    }


    .scroll-top{

        right:15px;
        bottom:15px;
        width:44px;
        height:44px;

    }

}


@media(max-width:340px){

    .hero-content h1{

        font-size:30px;

    }


    .section-title h2{

        font-size:26px;

    }


    .btn{

        padding:12px 18px;
        font-size:13px;

    }

}


/* Landscape phones — keep hero from overflowing viewport height */

@media(max-height:480px) and (orientation:landscape){

    .hero{

        min-height:auto;
        padding-top:110px;
        padding-bottom:40px;

    }

}


/* Respect reduced-motion preference */

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

    *{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;

    }

}


/*================================================================
   THANK YOU PAGE
================================================================*/

.ty-header{

    position:relative;
    background:transparent;
    box-shadow:none;

}

.ty-header .logo{

    color:var(--dark);

}

.ty-header .nav{

    justify-content:center;

}


.thankyou-hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    padding:150px 0 80px;
    position:relative;

}


.thankyou-box{

    max-width:800px;
    margin:auto;
    text-align:center;
    background:#ffffff;
    border-radius:40px;
    padding:60px 50px;
    box-shadow:var(--shadow),0 0 60px rgba(176,141,87,.15);
    position:relative;
    overflow:hidden;
    animation:tyPopIn .7s cubic-bezier(.22,.61,.36,1);

}


.thankyou-box::before{

    content:"";
    position:absolute;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(176,141,87,.18),transparent 70%);
    pointer-events:none;

}


@keyframes tyPopIn{

    0%{

        opacity:0;
        transform:translateY(40px) scale(.96);

    }

    100%{

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

    }

}


.thankyou-icon{

    width:110px;
    height:110px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 35% 30%,#eafff0,#ffffff 70%);
    font-size:60px;
    color:#4caf50;
    box-shadow:0 25px 50px rgba(76,175,80,.25),
               0 0 0 8px rgba(76,175,80,.08);
    animation:tyIconPulse 2.4s ease-in-out infinite;
    position:relative;
    z-index:1;

}


@keyframes tyIconPulse{

    0%,100%{

        box-shadow:0 25px 50px rgba(76,175,80,.25),
                   0 0 0 8px rgba(76,175,80,.08);

    }

    50%{

        box-shadow:0 25px 55px rgba(76,175,80,.35),
                   0 0 0 14px rgba(76,175,80,.12);

    }

}


.thankyou-box h1{

    font-family:'Cormorant Garamond',serif;
    font-size:48px;
    margin:15px 0 10px;

}


.thankyou-sub{

    color:var(--text);
    max-width:480px;
    margin:0 auto 25px;
    line-height:1.8;

}


.order-id-badge{

    display:inline-block;
    background:#f5eee4;
    color:var(--dark);
    padding:12px 28px;
    border-radius:50px;
    font-size:14px;
    margin-bottom:40px;
    letter-spacing:.3px;

}


.order-id-badge strong{

    color:var(--primary);
    margin-left:6px;
    font-size:16px;

}


.thankyou-details{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    text-align:left;
    margin-bottom:40px;

}


.thankyou-card{

    background:#fffdf9;
    border:1px solid var(--border);
    border-radius:25px;
    padding:28px;
    transition:var(--transition);

}


.thankyou-card:hover{

    transform:translateY(-6px);
    box-shadow:0 25px 45px rgba(0,0,0,.1),
               0 0 30px rgba(176,141,87,.15);

}


.thankyou-card h3{

    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    margin-bottom:18px;
    color:var(--dark);

}


.thankyou-card .summary-item{

    border-bottom:1px solid var(--border);
    padding:10px 0;

}


.thankyou-card .summary-item span{

    color:#888;

}


.thankyou-card .summary-total{

    padding:16px 0 0;
    font-size:18px;

}


.thankyou-card p{

    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text);
    margin:12px 0;
    line-height:1.6;
    font-size:14px;

}


.thankyou-card p i{

    color:var(--primary);
    font-size:16px;
    margin-top:2px;

}


.thankyou-actions{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}


.thankyou-actions .btn-outline i{

    margin-right:6px;

}


.thankyou-note{

    margin-top:30px;
    color:#999;
    font-size:14px;
    line-height:1.7;

}


@media(max-width:700px){

    .thankyou-box{

        padding:45px 25px;
        border-radius:30px;

    }


    .thankyou-box h1{

        font-size:36px;

    }


    .thankyou-details{

        grid-template-columns:1fr;

    }


    .thankyou-actions{

        flex-direction:column;

    }


    .thankyou-actions .btn{

        width:100%;
        text-align:center;

    }

}


@media(max-width:420px){

    .thankyou-icon{

        width:85px;
        height:85px;
        font-size:46px;

    }


    .thankyou-box h1{

        font-size:28px;

    }


    .order-id-badge{

        font-size:12px;
        padding:10px 20px;

    }

}