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

@media (max-width: 1100px) {

    .navbar {
        gap: 18px;
    }

    .navbar a {
        font-size: 14px;
    }

    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 768px) {

    .header .container {
        min-height: 75px;
    }

    .logo img {
        width: 175px;
    }

    .navbar {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        padding: 25px;
        background: #ffffff;
        border-top: 1px solid #eeeeee;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .navbar.active {
        display: flex;
    }

    .btn-header {
        display: none;
    }

    .menu-toggle {
        display: block;
    }


    .hero {
        min-height: 600px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }


    .activities {
        padding: 70px 0;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 480px) {

    .container {
        width: 90%;
    }

    .logo img {
        width: 155px;
    }

    .hero h1 {
        font-size: 38px;
    }

}