/* =========================================================
   RESPONSIVE STYLES
   ========================================================= */

/* ---------------- Laptop (≤1199px) ---------------- */
@media (max-width: 1199px) {
  .main-menu .nav-link {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ---------------- Tablet (≤991px) ---------------- */
@media (max-width: 991px) {
  body {
    padding-top: calc(var(--topbar-height) + 76px);
  }

  .topbar-right {
    display: none;
  }

  .main-nav {
    min-height: 76px;
    padding: 10px 0;
  }

  .navbar-collapse {
    background: var(--color-white);
    margin-top: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
  }

  .main-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .main-menu .nav-link {
    width: 100%;
    padding: 12px 4px;
  }

  .main-menu .nav-link::after {
    left: 4px;
    right: 4px;
  }

  .btn-cta {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    display: inline-flex !important;
  }
}

/* ---------------- Mobile (≤767px) ---------------- */
@media (max-width: 767px) {
  .topbar {
    font-size: 11px;
  }

  .topbar-left {
    gap: 14px;
  }

  .topbar-item span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .logo-text {
    font-size: 22px;
  }

  .logo-tagline {
    font-size: 10px;
  }
}

/* ---------------- Small Mobile (≤480px) ---------------- */
@media (max-width: 480px) {
  .topbar-item span:last-child {
    display: none;
  }

  .topbar-item i {
    font-size: 15px;
  }

  .topbar-left {
    gap: 18px;
  }
}

/* =========================================================
   NEW SECTIONS — RESPONSIVE
   ========================================================= */

/* ---------------- Tablet (≤991px) ---------------- */
@media (max-width: 991px) {
  .section-title {
    font-size: 30px;
  }

  .about-media {
    margin-bottom: 40px;
  }

  .about-stats-bar {
    margin-top: 60px;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-item:nth-child(2) {
    border-top: 1px solid var(--border);
  }

  .why-card {
    margin-top: 10px;
  }

  .service-card p {
    min-height: 0;
  }

  .benefits-media {
    margin-bottom: 50px;
  }

  .stories-nav {
    margin-bottom: 30px;
  }
}

/* ---------------- Mobile (≤767px) ---------------- */
@media (max-width: 767px) {
  .section-title {
    font-size: 26px;
  }

  .about-stat-card {
    left: 10px;
    bottom: -24px;
    padding: 16px 18px;
  }

  .about-stats-bar {
    padding: 40px 0 30px;
  }

  .stat-card {
    padding: 20px 14px;
  }

  .stat-num {
    font-size: 24px;
  }

  .services-section,
  .why-section,
  .benefits-section,
  .how-section,
  .stories-section {
    padding: 60px 0;
  }

  .benefits-stat-box {
    grid-template-columns: 1fr;
  }

  .benefits-media-badge {
    left: 10px;
    bottom: -20px;
    padding: 16px;
  }

  .step-item {
    padding: 16px 18px;
    gap: 12px;
  }

  .step-title {
    font-size: 15px;
  }

  .step-desc {
    margin-left: 0;
  }
}