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

@media (max-width:1024px)
{

    .slide-content h1 {

        font-size: 42px;
    }

    .slide-content p {

        font-size: 18px;
    }

    .devices-grid {

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

    #packages-container {

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

    #testimonials-container {

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

    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }

}

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

@media (max-width:768px)
{

    /* HEADER */

    .mobile-menu-btn {

        display: block;
    }

    .main-nav {

        position: fixed;

        top: 80px;
        left: -100%;

        width: 100%;

        background: white;

        flex-direction: column;

        padding: 25px;

        gap: 25px;

        transition: .3s;
    }

    .main-nav.active {

        left: 0;
    }

    /* SLIDER */

    .hero-slider {

        min-height: 500px;
        height: 65vh;
    }

    .slide-content h1 {

        font-size: 32px;
    }

    .slide-content p {

        font-size: 16px;
    }

    .slider-arrow {

        width: 45px;
        height: 45px;
    }

    /* DEVICES */

    .devices-section {

        padding: 70px 0;
    }

    .devices-grid {

        grid-template-columns: 1fr;
    }

    /* PACKAGES */

    .packages-section {

        padding: 70px 0;
    }

    #packages-container {

        grid-template-columns: 1fr;
    }

    /* TESTIMONIALS */

    .testimonials-section {

        padding: 70px 0;
    }

    #testimonials-container {

        grid-template-columns: 1fr;
    }

    /* FOOTER */

    .footer-grid {

        grid-template-columns: 1fr;
    }

    /* TITLES */

    .section-title h2 {

        font-size: 32px;
    }

    .section-title p {

        font-size: 16px;
    }

    /* WHATSAPP */

    .whatsapp-btn {

        left: 15px;
        bottom: 15px;

        padding: 12px 18px;

        font-size: 14px;
    }

}

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

@media (max-width:480px)
{

    .container {

        padding: 0 15px;
    }

    .slide-content h1 {

        font-size: 26px;
    }

    .slide-content p {

        font-size: 15px;
    }

    .package-price {

        font-size: 38px;
    }

}