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

.hero{

    background:var(--background);

    padding-top:calc(var(--header-height) + 40px);

}

.hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    min-height:calc(100vh - var(--header-height));

}

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

.hero-content{

    max-width:600px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    margin-bottom:24px;

    background:var(--surface);

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

    border-radius:var(--radius-round);

    color:var(--text-secondary);

    font-size:14px;

    font-weight:500;

}

.hero h1{

    margin-bottom:24px;

}

.hero p{

    max-width:540px;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

}

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

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

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

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:visible;

}

.hero-image img{

    width:130%;

    max-width:850px;

    min-width:700px;

    object-fit:contain;

    transform:scale(1.15);

    transform-origin:center;

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

    animation:heroFloat 7s ease-in-out infinite;

    user-select:none;

    pointer-events:none;

}

/* ==========================================================
   FLOAT
========================================================== */

@keyframes heroFloat{

    0%{

        transform:
            scale(1.15)
            translateY(0);

    }

    50%{

        transform:
            scale(1.18)
            translateY(-18px);

    }

    100%{

        transform:
            scale(1.15)
            translateY(0);

    }

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

@media(max-width:992px){

    .hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero p{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero{

        padding-top:120px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

}

@media(max-width:1200px){

    .hero-image img{

        width:120%;

        max-width:760px;

        min-width:620px;

    }

}

@media(max-width:992px){

    .hero-image{

        margin-top:30px;

    }

    .hero-image img{

        width:100%;

        max-width:520px;

        min-width:0;

        transform:scale(1.08);

    }

}

@media(max-width:768px){

    .hero-image img{

        width:100%;

        max-width:440px;

        transform:scale(1.05);

    }

}

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        rgba(196,155,58,.25),
        transparent 70%
    );

    filter:blur(35px);

    animation:heroGlow 7s ease-in-out infinite;

    z-index:-1;

}

@keyframes heroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.55;

    }

    50%{

        transform:scale(1.12);

        opacity:.9;

    }

}

/* Prevent iPhone Safari from zooming on form fields */
input,
textarea,
select,
button {
    font-size: 16px;
}