/*==========  Desktop First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1366px) {}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1280px) {}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}

/* Small Devices, Tablets */
@media only screen and (max-width : 765px) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 100%;
        grid-gap: 15px;
    }

    .main-banner .grid-2 {
        grid-template-columns: 100%;
        grid-gap: 40px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
    }

    .header-menu {
        display: none;
    }

    .mob-menu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding-top: 80px;
        background: var(--base);
        z-index: 9;

    }

    .mob-menu .header-menu {
        display: block;
    }

    .header-menu .flex {
        display: grid;
        grid-gap: 20px;
        text-align: center;
    }

    .header-menu a {
        color: var(--dark-green);
    }

    .container {
        padding: 0 15px;
    }

    footer .flex {
        display: grid;
        grid-gap: 30px;
    }

    .burger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header {
        height: 60px;
    }

    .header-logo img {
        height: 55px;
    }

    .main-banner h1 {
        font-size: 48px;
    }

    #reviews-slider img {
        height: 260px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}