/*==================================================
    HOUSE OF SAACHI
    Premium Landing Page
===================================================*/

/*==============================
        Google Variables
==============================*/

:root{

    --cream:#f8f4ee;
    --light:#fffdf9;
    --rose:#d69b87;
    --gold:#c8a15a;
    --gold-light:#f3deb2;
    --wine:#7d2945;
    --brown:#4b352f;
    --text:#5d4a43;

    --shadow:0 15px 45px rgba(0,0,0,.08);
    --radius:22px;
    --transition:.35s ease;

}

/*==============================
        Reset
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--cream);
    color:var(--text);
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    position:relative;
    min-height:100vh;

}


/*==============================
        Luxury Background
==============================*/

body::before{

    content:"";
    position:fixed;
    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(214,155,135,.12),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(200,161,90,.10),
        transparent 40%),

        linear-gradient(135deg,#fffdf8,#f8f4ee);

    z-index:-5;

}

/* Silk Texture */

body::after{

    content:"";
    position:fixed;
    inset:0;

    background-image:

    repeating-linear-gradient(
        120deg,
        transparent 0px,
        rgba(255,255,255,.15) 1px,
        transparent 3px,
        transparent 16px
    );

    opacity:.4;

    z-index:-4;

}

/*==============================
        Floating Circles
==============================*/

.bg-circle{

    position:fixed;
    border-radius:50%;
    filter:blur(60px);
    z-index:-3;

}

.circle1{

    width:420px;
    height:420px;

    background:#e8c7bb;

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

    opacity:.45;

}

.circle2{

    width:320px;
    height:320px;

    background:#f3deb2;

    right:-80px;
    top:120px;

    opacity:.35;

}

.circle3{

    width:380px;
    height:380px;

    background:#d69b87;

    bottom:-120px;
    left:30%;

    opacity:.15;

}

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

header{

    padding:35px 20px;

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

}

.logo-area{

    animation:fadeDown 1.2s;

}

.logo-area img{

    width:260px;
    max-width:90%;

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

}

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

.hero{

    min-height:72vh;

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

    padding:20px;

}

.hero-content{

    max-width:900px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(200,161,90,.22);

    border-radius:var(--radius);

    padding:70px;

    text-align:center;

    box-shadow:var(--shadow);

    animation:fadeUp 1.2s;

}

/*==============================
        Welcome Text
==============================*/

.welcome-text{

    display:inline-block;

    font-family:'Cinzel',serif;

    color:var(--gold);

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:8px;

    margin-bottom:18px;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:78px;

    color:var(--wine);

    line-height:1.05;

    margin-bottom:20px;

    font-weight:600;

}

.gold-line{

    width:120px;
    height:2px;

    margin:25px auto;

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

}

.hero p{

    max-width:650px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#6b5550;

}

/*==============================
        Categories
==============================*/

.categories{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.category{

    background:white;

    border-radius:18px;

    padding:28px 20px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:var(--transition);

}

.category:hover{

    transform:translateY(-10px);

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

}

.category i{

    font-size:34px;

    color:var(--gold);

    margin-bottom:15px;

}

.category span{

    display:block;

    margin-top:12px;

    font-weight:600;

    color:var(--brown);

}

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

.hero-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.btn{

    text-decoration:none;

    padding:15px 38px;

    border-radius:60px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

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

    color:white;

    box-shadow:0 12px 30px rgba(200,161,90,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-outline{

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

    color:var(--wine);

}

.btn-outline:hover{

    background:var(--wine);

    color:white;

}

/*==============================
        Divider
==============================*/

.divider-section{

    padding:70px 20px;

}

.divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.divider span{

    width:120px;

    height:2px;

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

}

.divider i{

    color:var(--gold);

    font-size:22px;

}

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

footer{

    margin-top:80px;

    background:linear-gradient(135deg,#6f1d38,#4b1427);

    color:#fff;

    padding:70px 20px 30px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

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

}

footer::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

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

    border-radius:50%;

    right:-120px;
    bottom:-120px;

}

.footer-logo{

    position:relative;
    z-index:2;

}

.footer-logo img{

    width:140px;

    filter:drop-shadow(0 8px 15px rgba(0,0,0,.3));

}

footer h3{

    font-family:'Cinzel',serif;

    font-size:34px;

    margin-top:20px;

    color:#fff;

}

footer p{

    margin-top:15px;

    color:#edd9d9;

    font-size:15px;

    letter-spacing:1px;

}

/*==================================================
            SOCIAL ICONS
==================================================*/

.social-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

    position:relative;
    z-index:2;

}

.social-links a{

    width:60px;
    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:white;

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

    backdrop-filter:blur(10px);

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

    transition:.35s;

    font-size:22px;

}

.social-links a:hover{

    transform:translateY(-8px) scale(1.08);

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

    color:#fff;

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

}

/*==================================================
            COPYRIGHT
==================================================*/

.copyright{

    margin-top:40px;

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

    padding-top:20px;

    font-size:14px;

    color:#d9c8c8;

    position:relative;

    z-index:2;

}

/*==================================================
        FLOATING WHATSAPP
==================================================*/

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:32px;

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

    z-index:999;

    animation:floatWhatsapp 2.8s ease-in-out infinite;

    transition:.3s;

}

.floating-whatsapp:hover{

    transform:scale(1.1);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f5efe7;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--gold),
        var(--rose)
    );

    border-radius:50px;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes floatWhatsapp{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes sparkle{

    0%{

        opacity:.3;

        transform:scale(.9);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

    100%{

        opacity:.3;

        transform:scale(.9);

    }

}

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

@media(max-width:1100px){

    .hero h1{

        font-size:60px;

    }

    .categories{

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

    }

}

@media(max-width:768px){

    .logo-area img{

        width:180px;

    }

    .hero{

        padding:30px 15px;

    }

    .hero-content{

        padding:45px 25px;

    }

    .hero h1{

        font-size:46px;

    }

    .hero p{

        font-size:16px;

    }

    .welcome-text{

        letter-spacing:4px;

        font-size:15px;

    }

    .categories{

        grid-template-columns:1fr;

        gap:18px;

    }

    .category{

        padding:25px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    footer h3{

        font-size:28px;

    }

}

@media(max-width:480px){

    .hero h1{

        font-size:38px;

    }

    .hero-content{

        padding:35px 20px;

    }

    .divider span{

        width:70px;

    }

    .social-links{

        gap:12px;

    }

    .social-links a{

        width:52px;

        height:52px;

        font-size:20px;

    }

    .floating-whatsapp{

        width:58px;

        height:58px;

        font-size:28px;

    }

}

/* Floating Particles */

.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-2;
}

.particle{
    position:absolute;
    width:8px;
    height:8px;
    background:rgba(200,161,90,.6);
    border-radius:50%;
    animation:particleMove linear infinite;
}

@keyframes particleMove{

    from{
        transform:translateY(20px);
        opacity:0;
    }

    20%{
        opacity:.8;
    }

    to{
        transform:translateY(-120vh);
        opacity:0;
    }

}

/* Button Ripple */

.btn{
    position:relative;
    overflow:hidden;
}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:rippleAnimation .7s linear;

}

@keyframes rippleAnimation{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*=====================================
        Coming Soon Section
======================================*/

.coming-soon{

    padding:100px 20px;

    background:linear-gradient(
        180deg,
        #fffdf9,
        #f8f4ee
    );

}

.coming-soon-box{

    max-width:850px;

    margin:auto;

    background:white;

    border-radius:24px;

    padding:60px 40px;

    text-align:center;

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

    border:1px solid rgba(200,161,90,.25);

}

.coming-soon-box i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:25px;

}

.coming-soon-box h2{

    font-family:'Cormorant Garamond', serif;

    font-size:42px;

    color:var(--wine);

    margin-bottom:20px;

}

.coming-soon-box p{

    font-size:18px;

    line-height:1.9;

    color:#6b5550;

    max-width:650px;

    margin:0 auto 25px;

}

.coming-soon-box span{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

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

    color:white;

    font-weight:600;

    letter-spacing:1px;

}

/*==================================================
            END OF STYLE.CSS
==================================================*/