/* =========================
   Large Screens (Desktops)
   ========================= */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}


/* =========================
   Laptops / Small Desktops
   ========================= */
@media (max-width: 1199px) {

    .container {
        max-width: 960px;
    }

    .navbar {
        padding: 10px 20px;
    }
}


/* =========================
   Tablets
   ========================= */
@media (max-width: 991px) {

    .container {
        max-width: 720px;
    }

    .header-logo img {
        width: 150px;
    }

    .menu {
        display: none;
    }

    .mobile-menu {
        display: block;
    }
}


/* =========================
   Small Tablets / Large Phones
   ========================= */
@media (max-width: 768px) {

    body {
        font-size: 14px;
    }

    .container {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 24px;
    }

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

}


/* =========================
   Mobile Phones
   ========================= */
@media (max-width: 576px) {

    body {
        font-size: 13px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    .header-logo img {
        width: 120px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .row {
        flex-direction: column;
    }

}
img {
    max-width: 100%;
    height: auto;
}
.container {
    width: 100%;
    margin: auto;
    padding: 0 10px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .grid {
        grid-template-columns: 1fr;
    }
}