/* ==========================================
   LARGE LAPTOPS
========================================== */

@media (max-width: 1400px) {

    .hero-content h1 {

        font-size: 58px;

    }

}

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width: 1200px) {

    .products-grid {

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

    }

    .why-grid {

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

    }

    .industry-grid {

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

    }

    .footer-grid {

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

    }

}

/* ==========================================
   TABLETS
========================================== */

@media (max-width: 992px) {

    .section {

        padding: 80px 0;

    }

    .hero-content h1 {

        font-size: 48px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .products-grid {

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

    }

    .industry-grid {

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

    }

    .cert-grid {

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

    }

    .testimonial-grid {

        grid-template-columns:
            1fr;

    }

    .stats-grid {

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

    }

    .cta-content h2 {

        font-size: 42px;

    }

}

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

@media (max-width: 768px) {

    .mobile-menu-btn {

        display: flex;

        flex-direction: column;

        gap: 5px;

        cursor: pointer;

    }

    .mobile-menu-btn span {

        width: 28px;

        height: 3px;

        background: var(--text);

        border-radius: 20px;

    }

    .navbar {

        position: fixed;

        top: 85px;

        left: -100%;

        width: 100%;

        background: var(--bg);

        padding: 30px;

        transition: .35s ease;

        box-shadow: var(--shadow);

    }

    .navbar.active {

        left: 0;

    }

    .navbar ul {

        flex-direction: column;

        gap: 25px;

    }

    .header-actions .quote-btn {

        display: none;

    }

    .hero {

        text-align: center;

    }

    .hero-content {

        margin: auto;

    }

    .hero-content h1 {

        font-size: 42px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .section-heading h2 {

        font-size: 34px;

    }

    .parallax-content h2 {

        font-size: 42px;

    }

    .timeline {

        flex-direction: column;

    }

}

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

@media (max-width: 576px) {

    .container {

        width: 92%;

    }

    .section {

        padding: 70px 0;

    }

    .hero-content h1 {

        font-size: 34px;

        line-height: 1.3;

    }

    .hero-content p {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .btn {

        width: 100%;

    }

    .stats-grid {

        grid-template-columns:
            1fr;

    }

    .products-grid {

        grid-template-columns:
            1fr;

    }

    .why-grid {

        grid-template-columns:
            1fr;

    }

    .industry-grid {

        grid-template-columns:
            1fr;

    }

    .cert-grid {

        grid-template-columns:
            1fr;

    }

    .footer-grid {

        grid-template-columns:
            1fr;

    }

    .cta-content h2 {

        font-size: 32px;

    }

    .parallax-content h2 {

        font-size: 34px;

    }

    .about-content h2 {

        font-size: 34px;

    }

    .section-heading h2 {

        font-size: 30px;

    }

    .timeline-item {

        min-width: 100%;

    }

    .testimonial-card {

        padding: 25px;

    }

    .faq-item {

        padding: 20px;

    }

    .whatsapp-btn {

        width: 58px;

        height: 58px;

        font-size: 24px;

    }

    #backToTop {

        width: 50px;

        height: 50px;

        font-size: 20px;

    }

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 400px) {

    .hero-content h1 {

        font-size: 28px;

    }

    .hero-tag {

        font-size: 13px;

    }

    .section-heading h2 {

        font-size: 26px;

    }

    .cta-content h2 {

        font-size: 28px;

    }

}

/* ==========================================
   LANDSCAPE PHONES
========================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .hero {

        min-height: 120vh;

    }

}

/* ==========================================
   HIGH RESOLUTION DISPLAYS
========================================== */

@media (min-width: 1800px) {

    .container {

        max-width: 1500px;

    }

    .hero-content h1 {

        font-size: 78px;

    }

}

/* ==========================================
   PRINT STYLES
========================================== */

@media print {

    .header,
    .whatsapp-btn,
    #backToTop,
    .mobile-menu-btn {

        display: none !important;

    }

    body {

        background: white;

        color: black;

    }

}