/* ==========================================================================
   Rayu Logistic — Responsive Styles
   Breakpoints: 1200 · 992 · 768 · 576 · 390
   ========================================================================== */

/* Large laptops (1366 and down) */
@media (max-width: 1400px) {
    .hero h1 { font-size: 3.1rem; }
}

/* Tablets landscape / small laptops */
@media (max-width: 1199.98px) {
    .hero h1 { font-size: 2.8rem; }
    .section-title { font-size: 2.1rem; }
    .navbar-nav .nav-link { padding: 8px 11px; }
}

/* Tablets (992 and down) */
@media (max-width: 991.98px) {
    .section { padding: 64px 0; }

    /* Mobile nav panel */
    .navbar-collapse {
        background: #fff;
        margin-top: 12px;
        padding: 14px;
        border-radius: 12px;
        box-shadow: var(--shadow-md);
    }
    .navbar-nav .nav-link::after { display: none; }
    .navbar-nav .nav-item { border-bottom: 1px solid var(--gray-border); }
    .navbar-nav .nav-item:last-child { border-bottom: none; margin-top: 10px; }
    .btn-quote { display: inline-block; text-align: center; }

    .hero { padding: 50px 0 90px; text-align: center; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-visual { margin-top: 40px; }
    .hero h1 { font-size: 2.7rem; }

    .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.10); }

    .about-img-wrap { margin-top: 40px; }
    .exp-badge { left: 10px; }

    .cta-inner { flex-direction: column; text-align: center; }
    .cta-text { flex-direction: column; text-align: center; }
}

/* Top bar: hide secondary info on tablet/mobile */
@media (max-width: 991.98px) {
    .topbar-item span { display: none; }
    .topbar-right { gap: 16px; }
}

/* Mobile (768 and down) */
@media (max-width: 767.98px) {
    body { font-size: 15px; }
    .section { padding: 52px 0; }
    .section-title { font-size: 1.75rem; }
    .hero h1 { font-size: 2.25rem; }
    .page-hero h1 { font-size: 2rem; }

    .track-form { flex-direction: column; }
    .track-form .btn { width: 100%; justify-content: center; }
    .track-grid { grid-template-columns: 1fr; }

    .check-list { grid-template-columns: 1fr; }

    .stat-num { font-size: 2.3rem; }
    .cta-text h2 { font-size: 1.5rem; }

    .form-card, .contact-info-card { padding: 26px; }

    /* Topbar: keep only phone + socials */
    .topbar-left { display: none !important; }
    .topbar .container { justify-content: center; }

    .footer-title::after { left: 0; }

    /* Compact horizontal service cards on mobile (icon left, text right) */
    .service-card:not(.service-photo-card) {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon title"
            "icon desc"
            "icon link";
        column-gap: 16px;
        row-gap: 2px;
        align-items: start;
        text-align: left;
        padding: 20px 18px;
    }
    .service-card:not(.service-photo-card):hover { transform: none; }
    .service-card:not(.service-photo-card) .service-icon {
        grid-area: icon; align-self: start;
        width: 52px; height: 52px; font-size: 1.2rem; margin-bottom: 0;
    }
    .service-card:not(.service-photo-card) h4 { grid-area: title; margin-bottom: 4px; font-size: 1.08rem; align-self: center; }
    .service-card:not(.service-photo-card) p  { grid-area: desc; margin-bottom: 8px; font-size: .9rem; }
    .service-card:not(.service-photo-card) .read-more { grid-area: link; }
    /* keep the icon tint even without hover so cards feel alive */
    .service-card:not(.service-photo-card) .service-icon { background: var(--red); color: #fff; }
}

/* Small phones (576 and down) */
@media (max-width: 575.98px) {
    .topbar-social { padding-left: 0; border-left: none; }
    .hero h1 { font-size: 1.95rem; }
    .exp-badge { padding: 14px 18px; }
    .exp-badge .num { font-size: 1.9rem; }
    .service-card, .form-card { padding: 24px 20px; }
    .back-to-top { bottom: 18px; right: 18px; }
}

/* Very small (390 and down) */
@media (max-width: 400px) {
    .brand-primary { font-size: 1.15rem; }
    .brand-secondary { font-size: .68rem; letter-spacing: 2px; }
    .hero h1 { font-size: 1.75rem; }
    .btn { padding: 12px 20px; font-size: .9rem; }
}