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

.hero{

position:relative;

overflow:hidden;

background:

radial-gradient(circle at top left,#F4E6D8 0%,transparent 30%),

radial-gradient(circle at bottom right,#EFE2D2 0%,transparent 35%),

#FAF8F5;

padding:120px 0 100px;

}

.hero-grid{

max-width:1320px;

margin:auto;

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:100px;

min-height:650px;

}

.hero-content{

max-width:620px;

z-index:2;

}

.hero-tag{

display:inline-flex;

align-items:center;

padding:10px 22px;

background:#fff;

border-radius:40px;

font-size:14px;

font-weight:600;

letter-spacing:1px;

color:#8B6B4A;

margin-bottom:25px;

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

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:78px;

    line-height:1.05;

    font-weight:600;

    letter-spacing:-1px;

    color:#222;

    margin:22px 0;

}

.hero p{

    font-size:20px;

    line-height:1.9;

    color:#666;

    max-width:560px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:22px;

    margin-top:15px;

    margin-bottom:60px;

}

.hero-stats{

    display:flex;

    gap:60px;

}

.hero-stats h3{

    font-size:46px;

    color:#8B6B4A;

    margin-bottom:8px;

}

.hero-stats p{

    color:#666;

    font-size:16px;

}

.hero-stats div{

transition:.35s;

cursor:default;

}

.hero-stats div:hover{

transform:translateY(-8px);

}

.hero-stats div:hover h3,
.numbers-grid div:hover h2{

color:#A37C4B;

text-shadow:0 0 20px rgba(163,124,75,.25);

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(232,210,180,.45) 0%,
        rgba(232,210,180,.15) 50%,
        transparent 75%);

    filter:blur(35px);

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

    z-index:0;

}
.hero-circle{

position:absolute;

width:560px;

height:560px;

border-radius:50%;

background:linear-gradient(135deg,#F0E5D8,#E5D2BD);

left:50%;

top:50%;

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

z-index:0;

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

}

.hero-product{

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

    border-radius:30px;

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

    transition:.4s;

    position:relative;

    z-index:2;

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

}

.hero-product:hover{

    transform:translateY(-10px) scale(1.02);

}

@keyframes pulseGlow{

    0%,100%{

        transform:scale(1);

        opacity:.45;

    }

    50%{

        transform:scale(1.08);

        opacity:.75;

    }

}

@keyframes floatProduct{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
BACKGROUND BLOBS
=========================================*/

.blob{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.35;

pointer-events:none;

}

.blob1{

width:320px;

height:320px;

background:#E9C477;

top:60px;

left:-120px;

}

.blob2{

width:380px;

height:380px;

background:#DCC5A8;

right:-100px;

bottom:-120px;

}