/* =====================================================
   HOME PAGE
===================================================== */

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

.hero {

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

    display: flex;
    align-items: center;

    background:
            linear-gradient(
                    rgba(255,255,255,.92),
                    rgba(255,255,255,.92)
            ),
            url("../images/banner/hero.jpg");

    background-size: cover;
    background-position: center;

}

.hero__content {

    max-width: 720px;

}

.hero h1 {

    font-size: 56px;

    line-height: 1.1;

    margin-bottom: 28px;

    color: var(--color-dark);

}

.hero p {

    font-size: 20px;

    max-width: 650px;

    margin-bottom: 40px;

}

/* =====================================================
   ADVANTAGES
===================================================== */

.advantages {

    background: var(--color-light);

}

.advantages h2 {

    text-align: center;

    font-size: 40px;

    margin-bottom: 60px;

}

.advantages__grid {

    display: grid;

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

    gap: 30px;

}

.advantages article {

    background: white;

    padding: 35px;

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

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

    transition: var(--transition);

}

.advantages article:hover {

    transform: translateY(-8px);

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

}

.advantages h3 {

    margin-bottom: 15px;

    font-size: 22px;

}

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

.about-preview {

    background: white;

}

.about-preview h2 {

    font-size: 40px;

    margin-bottom: 30px;

}

.about-preview p {

    max-width: 900px;

    margin-bottom: 40px;

    font-size: 18px;

}

/* =====================================================
   CONTACTS
===================================================== */

.contacts-preview {

    background: var(--color-light);
    text-align: center;

}

.contacts-preview h2 {

    font-size: 40px;

    margin-bottom: 25px;

}

.contacts-preview p {

    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 18px;

}