/* =========================
   LARGE DEVICES
========================= */

@media (max-width: 1200px) {

    .hero-content h1 {

        font-size: 48px;

    }

    .section-title h2,
    .about-content h2,
    .bmd-content h2,
    .contact-info h2 {

        font-size: 38px;

    }

    .cta-section h2 {

        font-size: 42px;

    }

}

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

@media (max-width: 992px) {

    section {

        padding: 70px 0;

    }

    .header-flex {

        position: relative;

    }

    .navbar {

        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 20px;
        display: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);

    }

    .navbar.active {

        display: block;

    }

    .nav-links {

        flex-direction: column;
        gap: 20px;

    }

    .mobile-menu-btn {

        display: block;

    }

    .header-btn {

        display: none;

    }

    .hero {

        min-height: auto;
        padding: 120px 0 80px;

    }

    .hero-flex,
    .about-grid,
    .bmd-grid,
    .contact-grid {

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

    }

    .hero-content {

        text-align: center;

    }

    .hero-content p {

        margin: auto auto 35px;

    }

    .hero-btns {

        justify-content: center;

    }

    .hero-image {

        margin-top: 40px;

    }

    .hero-image img {

        max-width: 400px;
        margin: auto;

    }

    .trust-grid {

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

    }

    .services-grid,
    .why-grid {

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

    }

    .conditions-grid {

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

    }

    .footer-grid {

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

    }

}

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

@media (max-width: 768px) {

    .container {

        width: 92%;

    }

    .hero-content h1 {

        font-size: 38px;
        line-height: 1.3;

    }

    .hero-content p {

        font-size: 16px;

    }

    .section-title h2,
    .about-content h2,
    .bmd-content h2,
    .contact-info h2 {

        font-size: 30px;

    }

    .cta-section h2 {

        font-size: 34px;

    }

    .about-content,
    .bmd-content,
    .contact-info {

        text-align: center;

    }

    .services-grid,
    .why-grid,
    .conditions-grid,
    .footer-grid {

        grid-template-columns: 1fr;

    }

    .trust-grid {

        grid-template-columns: 1fr;
        gap: 30px;

    }

    .testimonial-card {

        padding: 35px 25px;

    }

    .testimonial-card p {

        font-size: 17px;

    }

    .faq-question {

        font-size: 18px;
        line-height: 1.5;

    }

    .hero-image img {

        max-width: 320px;

    }

    .primary-btn,
    .secondary-btn {

        width: 100%;
        text-align: center;

    }

    .cta-btns,
    .hero-btns {

        flex-direction: column;
        align-items: center;

    }

    .floating-whatsapp,
    .floating-call {

        width: 55px;
        height: 55px;
        font-size: 12px;

    }

}

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

@media (max-width: 480px) {

    section {

        padding: 60px 0;

    }

    .hero {

        padding-top: 110px;

    }

    .hero-content h1 {

        font-size: 32px;

    }

    .hero-tag {

        font-size: 14px;

    }

    .section-title {

        margin-bottom: 40px;

    }

    .section-title h2,
    .about-content h2,
    .bmd-content h2,
    .contact-info h2 {

        font-size: 26px;

    }

    .cta-section h2 {

        font-size: 28px;

    }

    .service-card,
    .why-box,
    .condition-box {

        padding: 22px;

    }

    .testimonial-card {

        padding: 30px 20px;

    }

    .testimonial-card p {

        font-size: 16px;

    }

    .contact-map iframe {

        height: 300px;

    }

    .footer {

        padding-top: 60px;

    }

    .footer-bottom {

        margin-top: 40px;

    }

}