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

@media (max-width: 1199px) {

    .hero-modern h1 {
        font-size: 3.2rem;
    }

    .section {
        padding: 80px 0;
    }
}

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

@media (max-width: 991px) {

    body {
        padding-top: 80px;
    }

    /* Navbar */

    .custom-navbar {
        padding: 8px 0;
    }

    .site-logo {
        height: 55px;
    }

    .brand-name {
        font-size: 1.1rem;
    }

    .navbar-collapse {
        background: var(--secondary);
        margin-top: 10px;
        border-radius: 15px;
        padding: 15px;
        box-shadow: var(--shadow-md);
    }

    .custom-navbar .nav-link {
        margin-left: 0;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .custom-navbar .nav-link:last-child {
            border-bottom: none;
        }

    /* Hero */

    .hero-modern {
        text-align: center;
        min-height: auto;
        padding: 80px 0;
    }

        .hero-modern h1 {
            font-size: 2.8rem;
        }

    .hero-image {
        margin-top: 40px;
    }

    /* Sections */

    .section {
        padding: 70px 0;
    }

    /* Cards */

    .service-card,
    .feature-card,
    .highlight-card,
    .testimonial-card {
        margin-bottom: 25px;
    }

    /* Footer */

    .footer .col-lg-4,
    .footer .col-lg-3 {
        margin-bottom: 30px;
    }
}

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

@media (max-width: 768px) {

    .hero-modern {
        padding: 70px 0;
    }

        .hero-modern h1 {
            font-size: 2.2rem;
            line-height: 1.2;
        }

        .hero-modern p {
            font-size: 1rem;
        }

    .section-title h2 {
        font-size: 2rem;
    }

    .page-banner {
        padding: 70px 0;
    }

        .page-banner h1 {
            font-size: 2rem;
        }

    .service-card,
    .feature-card,
    .highlight-card,
    .testimonial-card {
        padding: 25px;
    }

    .counter-box {
        margin-bottom: 25px;
    }

    .cta-section {
        padding: 60px 20px;
    }
}

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

@media (max-width: 576px) {

    body {
        padding-top: 75px;
    }

    .custom-navbar {
        min-height: 70px;
    }

    .site-logo {
        height: 63px;
        padding: 4px 0;
        margin: -7px 0;
    }

    .brand-name {
        font-size: 0.9rem;
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .hero-modern {
        padding: 60px 0;
    }

        .hero-modern h1 {
            font-size: 1.9rem;
        }

        .hero-modern p {
            font-size: .95rem;
        }

    .btn-primary,
    .btn-outline-light {
        width: 100%;
        margin-bottom: 10px;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        margin-bottom: 40px;
    }

        .section-title h2 {
            font-size: 1.8rem;
        }

    .service-card,
    .feature-card,
    .highlight-card,
    .testimonial-card {
        padding: 20px;
    }

    .counter-box h3 {
        font-size: 2rem;
    }

    .footer {
        text-align: center;
    }
}

/* =========================================================
   FUTURE DROPDOWN SUPPORT
========================================================= */

@media (max-width: 991px) {

    .dropdown-menu {
        background: transparent;
        border: none;
        padding-left: 15px;
    }

    .dropdown-item {
        color: rgba(255,255,255,.8);
    }

        .dropdown-item:hover {
            background: transparent;
            color: var(--accent);
        }
}

@media (max-width:768px) {

    .hero-features {
        justify-content: center;
        gap: 12px;
    }

        .hero-features span {
            font-size: .9rem;
        }

    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 28px;
        bottom: 15px;
        right: 15px;
    } 

    .back-to-top {
        right: 15px;
        bottom: 85px;
    }
}