/* ==========================================================
   ERNANOEVENTI
   Responsive Layout
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */


@media (max-width: 1200px) {


    .services-grid {

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

    }


    .gallery-grid {

        grid-auto-rows:
        240px;

    }


    .about-grid {

        gap:50px;

    }


}



/* ==========================================================
   TABLET
   ========================================================== */


@media (max-width: 992px) {


    .section {

        padding:
        90px 0;

    }


    /* NAVBAR */


    #navbar ul {

        display:none;

    }


    .menu-mobile {

        display:block;

        cursor:pointer;

    }



    /* HERO */


    .hero {

        min-height:
        90vh;

    }


    .hero-highlights {

        grid-template-columns:
        1fr;

        margin-top:
        -40px;

    }



    /* ABOUT */


    .about-grid {

        grid-template-columns:
        1fr;

    }


    .about-image {

        max-width:
        500px;

        margin:auto;

    }



    /* NUMBERS */


    .numbers-grid {

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

        row-gap:
        40px;

    }


    .number-box:nth-child(2) {

        border-right:none;

    }



    /* SERVICES */


    .services-grid {

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

    }



    /* TIMELINE */


    .timeline-wrapper::before {

        left:
        20px;

    }


    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {

        width:100%;

        left:0;

        padding-left:
        70px;

        padding-right:
        0;

        text-align:left;

    }



    .timeline-item::before,
    .timeline-item.left::before,
    .timeline-item.right::before {

        left:
        13px;

        right:auto;

    }



    /* PORTFOLIO */


    .gallery-grid {

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

        grid-auto-rows:
        260px;

    }


    .gallery-item.large,
    .gallery-item.wide,
    .gallery-item:not(.large):not(.wide) {

        grid-column:
        span 1;

        grid-row:
        span 1;

    }



    /* CONTACT */


    .contact-grid {

        grid-template-columns:
        1fr;

        gap:50px;

    }



    /* FOOTER */


    .footer-grid {

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

    }



}



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


@media (max-width: 600px) {



    .container {

        width:
        88%;

    }



    .section-title h2 {

        font-size:
        2.1rem;

    }



    /* NAV */


    #navbar {

        padding:
        25px 0;

    }



    .logo {

        font-size:
        1.2rem;

    }


    .logo-mark {

        width:
        32px;

        height:
        32px;

    }



    /* HERO */


    .hero-content {

        padding:
        0 10px;

    }



    .eyebrow {

        letter-spacing:
        3px;

        font-size:
        .7rem;

    }



    .hero-title {

        font-size:
        3rem;

    }



    .hero-content h2 {

        font-size:
        1.25rem;

    }



    .hero-description {

        font-size:
        .95rem;

    }



    .hero-buttons {

        flex-direction:
        column;

        align-items:
        center;

    }



    .btn-gold,
    .btn-outline {

        width:
        100%;

        max-width:
        280px;

    }



    /* HIGHLIGHTS */


    .highlight-card {

        padding:
        30px 25px;

    }



    /* NUMBERS */


    .numbers-grid {

        grid-template-columns:
        1fr;

    }


    .number-box {

        border-right:none;

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

    }


    .number-box:last-child {

        border-bottom:none;

    }



    .number-box h3 {

        font-size:
        2.5rem;

    }



    /* SERVICES */


    .services-grid {

        grid-template-columns:
        1fr;

    }



    .service-card {

        padding:
        35px 25px;

    }



    /* TIMELINE */


    .timeline-content {

        padding:
        25px;

    }



    .timeline-content h3 {

        font-size:
        1.25rem;

    }



    /* GALLERY */


    .gallery-grid {

        display:flex;

        flex-direction:
        column;

    }



    .gallery-item {

        height:
        280px;

    }



    .gallery-item figcaption {

        opacity:
        1;

        transform:
        translateY(0);

        bottom:
        20px;

        left:
        20px;

    }



    /* CONTACT */


    .contact-form input,
    .contact-form textarea {

        padding:
        15px;

    }



    /* FOOTER */


    footer {

        padding:
        60px 0 25px;

    }



    .footer-grid {

        grid-template-columns:
        1fr;

        gap:
       35px;

    }



    .footer-bottom {

        margin-top:
        40px;

    }



    /* LIGHTBOX */


    .lightbox img {

        max-width:
        95%;

    }



    .close-lightbox {

        top:
        20px;

        right:
        25px;

        font-size:
        2.5rem;

    }



}



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


@media (max-width: 380px) {


    .hero-title {

        font-size:
        2.5rem;

    }


    .hero-description {

        line-height:
        1.6;

    }


    .service-card h3 {

        font-size:
        1.3rem;

    }


}