/* ==========================================================
   MOAKHAT HERO 1.0
   Home Sweet Home
========================================================== */

.hero{
    background:#f7f3eb;
    padding:90px 0;
}

.hero-layout{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.hero-story{

    max-width:620px;

}

.hero-kicker{

    display:inline-block;

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:.75rem;

    color:#8c6b3f;

    margin-bottom:20px;

    font-weight:700;

}

.hero-logo img{

    width:110px;

    margin-bottom:28px;

}

.hero-title{

    font-size:clamp(2.8rem,5vw,4.6rem);

    line-height:1.08;

    color:#202020;

    font-weight:700;

    margin-bottom:30px;

}

.hero-ar{

    font-size:1.35rem;

    line-height:2;

    color:#4d4035;

    margin-bottom:28px;

}

.hero-subtitle{

    font-size:1.15rem;

    line-height:1.9;

    color:#666;

    max-width:540px;

    margin-bottom:42px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.hero-buttons .btn{

    padding:15px 34px;

    border-radius:999px;

    font-weight:600;

    transition:.30s;

}

.hero-buttons .btn-primary{

    background:#8d1d2c;

    color:#fff;

}

.hero-buttons .btn-primary:hover{

    background:#741624;

    transform:translateY(-2px);

}

.hero-buttons .btn-secondary{

    background:#fff;

    color:#333;

    border:1px solid #ddd;

}

.hero-buttons .btn-secondary:hover{

    background:#f3f3f3;

}

.hero-highlights{

    display:grid;

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

    gap:20px;

}

.hero-highlight{

    background:#fff;

    border-radius:18px;

    padding:22px;

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

}

.hero-icon{

    font-size:28px;

    display:block;

    margin-bottom:15px;

}

.hero-highlight strong{

    display:block;

    color:#222;

    margin-bottom:6px;

}

.hero-highlight small{

    color:#777;

    line-height:1.6;

}

.hero-window{

    margin:0;

}

.hero-window img{

    width:100%;

    display:block;

    border-radius:34px;

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

}

/* ===========================
   Responsive
=========================== */

@media (max-width:992px){

    .hero-layout{

        grid-template-columns:1fr;

    }

    .hero-window{

        order:-1;

        margin-bottom:50px;

    }

    .hero-highlights{

        grid-template-columns:1fr;

    }

}

@media (max-width:640px){

    .hero{

        padding:60px 0;

    }

    .hero-title{

        font-size:2.3rem;

    }

    .hero-ar{

        font-size:1.15rem;

    }

}