/* ==================================================
   MZ LANDING KIT v1.0
   Melodiya Zhiguley
   Drupal 10 / Vesta Theme
================================================== */


/* ==================================================
   ROOT VARIABLES
================================================== */

.mz-landing {

    --mz-radius: 20px;

    --mz-shadow:
        0 10px 30px rgba(0,0,0,.08);

    --mz-section-space: 80px;

}



/* ==================================================
   GLOBAL
================================================== */

.mz-landing,
.mz-landing * {

    font-family: 'Nunito Sans', sans-serif;

    box-sizing:border-box;

}



/* ==================================================
   CONTAINER
================================================== */

.mz-landing .mz-container {

    max-width:1170px;

    margin:0 auto;

    padding-left:0;

    padding-right:0;

}



/* ==================================================
   SECTION
================================================== */

.mz-landing .mz-section {

    padding:var(--mz-section-space) 0;

}


.mz-landing .mz-section h2 {

    font-size:36px;

    font-weight:900;

    line-height:1.2;

    text-transform:uppercase;

    color:var(--text-color);

    margin:0 0 40px;

}



/* ==================================================
   GRID
================================================== */

.mz-landing .mz-grid {

    display:grid;

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

    gap:25px;

}



/* ==================================================
   CARD
================================================== */

.mz-landing .mz-card {

    background:#ffffff;

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

    padding:35px;

    height:100%;

    box-shadow:var(--mz-shadow);

    transition:.3s ease;

}


.mz-landing .mz-card:hover {

    transform:translateY(-5px);

}


.mz-landing .mz-card h3 {

    margin:0 0 20px;

    font-size:22px;

    font-weight:900;

    line-height:1.3;

}


.mz-landing .mz-card p {

    line-height:1.6;

}


.mz-landing .mz-card ul {

    padding-left:20px;

    margin-bottom:0;

}


.mz-landing .mz-card li {

    margin-bottom:10px;

}



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

.mz-landing .mz-hero {

    min-height:600px;

    display:flex;

    align-items:center;

    background-size:cover;

    background-position:center;

    color:#ffffff;

}


.mz-landing .mz-hero__content {

    max-width:720px;

}


.mz-landing .mz-hero h1 {

    max-width:850px;

    font-size:46px;

    letter-spacing:.5px;

    line-height:1.15;

    font-weight:900;

    text-transform:uppercase;

    margin:0 0 25px;

}


.mz-landing .mz-hero__subtitle {

    font-size:22px;

    line-height:1.6;

    margin-bottom:35px;

}
.mz-landing .mz-hero__content {

    text-shadow:
    0 2px 10px rgba(0,0,0,.35);

}


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

.mz-landing .mz-button {

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:50px;

    padding:0 35px;

    border-radius:20px;

    font-size:16px;

    font-weight:800;

    text-transform:uppercase;

    text-decoration:none;

    transition:.3s ease;

    margin-right:15px;

}



/* Primary */

.mz-landing .mz-button--primary {

    background:var(--yellow);

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

    color:var(--text-color);

}


.mz-landing .mz-button--primary:hover {

    background:transparent;

    color:var(--yellow);

}



/* Secondary */

.mz-landing .mz-button--secondary {

    background:rgba(0,0,0,.2);

    border:1px solid #ffffff;

    color:#ffffff;

}


.mz-landing .mz-button--secondary:hover {

    background:var(--yellow);

    border-color:var(--yellow);

    color:var(--text-color);

}



/* ==================================================
   TWO COLUMN
================================================== */

.mz-landing .mz-two-column {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}


.mz-landing .mz-content {

    line-height:1.7;

}


.mz-landing .mz-content__image img {

    width:100%;

    height:auto;

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

}



/* ==================================================
   TIMELINE
================================================== */

.mz-landing .mz-timeline__list {

    display:grid;

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

    gap:30px;

}


.mz-landing .mz-timeline__item {

    text-align:center;

}


.mz-landing .mz-timeline__item span {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--yellow);

    color:var(--text-color);

    font-weight:900;

    margin-bottom:20px;

}


.mz-landing .mz-timeline__item h3 {

    font-size:22px;

    font-weight:900;

}



/* ==================================================
   RELATED OBJECTS
================================================== */

.mz-landing .mz-related {

    background:#f7f4ef;

}



/* ==================================================
   GALLERY
================================================== */

.mz-landing .mz-gallery__grid {

    display:grid;

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

    gap:20px;

}


.mz-landing .mz-gallery__grid img {

    width:100%;

    height:260px;

    object-fit:cover;

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

}



/* ==================================================
   STATS
================================================== */

.mz-landing .mz-stats-grid {

    display:grid;

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

    gap:25px;

}


.mz-landing .mz-stat-card {

    text-align:center;

}


.mz-landing .mz-stat-number {

    font-size:42px;

    font-weight:900;

    color:var(--yellow);

}



/* ==================================================
   CTA
================================================== */

.mz-landing .mz-cta {

    padding:80px 0;

    text-align:center;

    background:#f7f4ef;

}


.mz-landing .mz-cta h2 {

    margin-bottom:20px;

}



/* ==================================================
   FAQ
================================================== */

.mz-landing .mz-faq details {

    border-bottom:1px solid #ddd;

    padding:20px 0;

}


.mz-landing .mz-faq summary {

    cursor:pointer;

    font-size:20px;

    font-weight:800;

}



/* ==================================================
   MOBILE
================================================== */

@media(max-width:1199px){


    .mz-landing .mz-container {

        padding-left:15px;

        padding-right:15px;

    }


}



@media(max-width:991px){


    .mz-landing .mz-grid {

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

    }


    .mz-landing .mz-two-column {

        grid-template-columns:1fr;

        gap:30px;

    }


    .mz-landing .mz-timeline__list {

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

    }


    .mz-landing .mz-gallery__grid {

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

    }


}



@media(max-width:767px){


    .mz-landing .mz-section {

        padding:50px 0;

    }


    .mz-landing .mz-section h2 {

        font-size:28px;

    }


    .mz-landing .mz-grid {

        grid-template-columns:1fr;

    }


    .mz-landing .mz-timeline__list {

        grid-template-columns:1fr;

    }


    .mz-landing .mz-gallery__grid {

        grid-template-columns:1fr;

    }


    .mz-landing .mz-hero {

        min-height:450px;

    }


    .mz-landing .mz-hero h1 {

        font-size:34px;

    }


    .mz-landing .mz-hero__subtitle {

        font-size:18px;

    }


    .mz-landing .mz-button {

        width:100%;

        margin-right:0;

        margin-bottom:15px;

    }


}