@media(min-width:992px) {

    .menu-toggle {

        display: none;

    }

    .nav {

        position: static;

        width: auto;

        background: none;

        padding: 0;

    }

    .nav-list {

        flex-direction: row;

        gap: 40px;

    }

    .btn-header {

        display: flex;

    }

}

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

@media (min-width:992px) {

    .hero {

        min-height: 100vh;

        display: flex;

        align-items: center;

        padding-top: 100px;

    }

    .hero-container {

        display: grid;

        grid-template-columns: 1.1fr .9fr;

        align-items: center;

        gap: 80px;

    }

    .hero h1 {

        font-size: 3.7rem;

    }

    .hero p {

        font-size: 1.1rem;

        max-width: 560px;

    }

    .hero-buttons {

        flex-direction: row;

    }

}

/*==============================
      BENEFITS DESKTOP
==============================*/

@media(min-width:768px) {

    .benefits-grid {

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

    }

}

@media(min-width:1100px) {

    .benefits-grid {

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

    }

}

/*==============================
      CONTENT
==============================*/

@media (min-width:992px) {

    .subjects {

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

    }

}

/*==============================
         PRICING
==============================*/

@media(min-width:992px) {

    .pricing-grid {

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

        align-items: center;

    }

}

/*==============================
            FOOTER
==============================*/

@media(min-width:768px) {

    .footer-bottom {

        flex-direction: row;

        justify-content: space-between;

    }

}


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

@media (max-width:991px) {


    .hero-image {

        display: none;

    }

    body {

        background-color: #06121E;

        background-image:
            radial-gradient(
                circle at center,
                rgba(6, 18, 30, 0) 30%,
                rgba(6, 18, 30, .25) 55%,
                rgba(6, 18, 30, .65) 75%,
                #06121E 100%
            ),
            url("../images/backgrounds/compass.webp");

        background-repeat: no-repeat;

        background-position: center center;

        background-size: cover, 130%;

        background-attachment: fixed;

    }

    .nav {

        display: none;

    }

    .menu-toggle {

        display: none;

    }

    .header-btn {

        display: none;

    }

    .header-container {

        justify-content: center;

    }

}