/* =========================================================
   HARARA AIRLINES — Responsive Stylesheet
   ========================================================= */

@media (min-width: 1600px) {
  .container { max-width: 1360px; }
  .route-divider { max-width: 1360px; }
  body { font-size: 17px; }
}

@media (max-width: 1280px) {
  .nav-menu > li > a { padding: 10px 10px; font-size: .86rem; }
  .nav-menu > li > a::after { left: 10px; right: 10px; }
  .brand img { width: 180px; }
  .split { gap: 60px; }
  .footer-grid { gap: 36px; }
}

@media (max-width: 1140px) {
  :root { --header-h: 76px; }
  .topbar-tag { display: none; }

  /* Mobile / tablet drawer navigation */
  .hamburger { display: block; z-index: 1001; }
  .nav-cta { display: none; }
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(380px, 88vw);
    background: #fff; z-index: 999; flex-direction: column; align-items: stretch;
    padding: calc(var(--header-h) + 20px) 26px 30px; overflow-y: auto;
    transform: translateX(100%); transition: transform .45s cubic-bezier(.22,.61,.36,1);
    box-shadow: -20px 0 50px -20px rgba(0,0,0,.25);
  }
  .main-nav.open { transform: translateX(0); }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-menu > li > a { flex: 1; padding: 16px 4px; font-size: 1rem; }
  .nav-menu > li > a::after { display: none; }
  .nav-menu .has-dropdown > a .chev { display: none; }
  .dd-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: var(--soft); border-radius: 10px; color: var(--charcoal); transition: transform .3s; }
  .has-dropdown.dd-open .dd-toggle { transform: rotate(180deg); background: rgba(244,123,32,.12); color: var(--orange-600); }
  .dropdown {
    position: static; width: 100%; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0;
    padding: 0; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; border-radius: 0;
  }
  .dropdown::before { display: none; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transform: none; }
  .has-dropdown.dd-open .dropdown { max-height: 400px; padding: 0 0 12px; }
  .dropdown a { padding: 10px 8px; }
  .nav-cta-mobile { display: inline-flex; margin-top: 28px; width: 100%; }
  .nav-drawer-foot { display: block; margin-top: 26px; font-size: .88rem; color: var(--muted); }
  .nav-drawer-foot a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--charcoal); }
  .nav-drawer-foot .ico { color: var(--orange); }
  body.nav-locked { overflow: hidden; }
  /* backdrop-filter would create a containing block for the fixed drawer */
  .site-header, .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }

  .feature-grid.four { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .section { padding: 90px 0; }
  .split, .split.wide-img { grid-template-columns: 1fr; gap: 56px; }
  .split.reverse .split-media { order: 0; }
  .img-frame.tall { aspect-ratio: 16 / 11; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid > .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card-grid > .service-card:last-child:nth-child(odd) .card-img { aspect-ratio: 21 / 9; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .steps::before { display: none; }
  .service-row { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .service-row-media { order: 0; }
  .service-row-media { min-height: 0; aspect-ratio: 16 / 9; }
  .service-row-body { padding: 44px 40px; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-wrap { aspect-ratio: 16 / 9; }
  .feature-banner-content { padding: 56px; }
  .hero-strip-inner { grid-template-columns: 1fr; }
  .strip-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .strip-item:last-child { border-bottom: 0; }
  .img-float-card { left: 20px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .container { padding: 0 22px; }
  .section { padding: 76px 0; }
  .section-sm { padding: 60px 0; }
  .section-head { margin-bottom: 44px; }
  .topbar { display: none; }
  .hero { min-height: calc(100svh - var(--header-h)); }
  .hero-overlay { background: linear-gradient(180deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.8) 100%); }
  .hero-content { padding: 70px 22px 110px; }
  .hero-sub { font-size: 1.05rem; }
  .hero-kicker { letter-spacing: .2em; font-size: .7rem; }
  .hero-strip { margin-top: -40px; }
  .page-hero { min-height: 380px; }
  .page-hero-content { padding-top: 80px; padding-bottom: 50px; }
  .page-hero p { font-size: 1rem; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .card-grid > .service-card:last-child:nth-child(odd) .card-img { aspect-ratio: 16 / 11; }
  .feature-grid, .feature-grid.two { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: 1fr; }
  .counter-row { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .counter-box:nth-child(3) { border-left: 0; }
  .check-list.two { grid-template-columns: 1fr; }
  .form-card { padding: 34px 26px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .feature-banner { min-height: 460px; border-radius: 22px; }
  .feature-banner::before { background: linear-gradient(180deg, rgba(10,10,14,.5) 0%, rgba(10,10,14,.88) 100%); }
  .feature-banner-content { padding: 44px 30px; }
  .cta-banner { padding: 64px 28px; border-radius: 22px; }
  .cta-plane { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .footer-brand, .footer-contact-col { grid-column: 1 / -1; }
  .img-accent { width: 100px; height: 100px; right: -12px; bottom: -12px; }
  .split.reverse .img-accent { left: -12px; }
  .img-float-card { position: relative; left: 0; bottom: 0; margin: -40px 18px 0; max-width: none; }
  .inline-cta { padding: 32px 28px; }
  .mv-card { padding: 36px 30px; }
  .service-row-body { padding: 36px 28px; }

  /* compact floating socials on mobile: horizontal at bottom-left */
  .social-bar { top: auto; bottom: 24px; left: 16px; transform: none; flex-direction: row; border-radius: 30px; border: 1px solid var(--line); }
  .social-bar a { width: 38px; height: 38px; font-size: .95rem; }
  .social-bar a:not(:last-child) { border-bottom: 0; border-right: 1px solid var(--line); }
  .social-bar a.wa { display: none; }
  .social-bar a .sb-label { display: none; }
  .wa-float { width: 54px; height: 54px; right: 16px; bottom: 18px; font-size: 1.6rem; }
  .wa-float .wa-tip { display: none; }
  .to-top { right: 22px; bottom: 84px; width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .section { padding: 64px 0; }
  h2 { font-size: 1.7rem; }
  .brand img { width: 158px; }
  .hero h1 { font-size: 2.2rem; }
  .btn { padding: 14px 24px; font-size: .88rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; white-space: normal; text-align: center; }
  .hero .btn-row { max-width: 360px; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .service-card .card-body { padding: 26px 22px 28px; }
  .service-card .card-actions { flex-direction: column; align-items: flex-start; }
  .icon-card { padding: 30px 24px; }
  .exp-item { padding: 30px 24px; }
  .strip-item { padding: 22px; }
  .form-card { padding: 28px 20px; }
  .contact-card { padding: 20px; }
  .faq-q { padding: 18px 20px; font-size: .96rem; }
  .faq-a-inner { padding: 0 20px 20px; }
  .inline-cta .btn-row { width: 100%; }
  .feature-banner-content { padding: 36px 22px; }
  .cta-banner { padding: 54px 20px; }
  .route-divider { display: none; }
}

@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .brand img { width: 140px; }
  .hamburger { width: 42px; height: 42px; }
  .hamburger span { left: 11px; right: 11px; }
  .hamburger span:nth-child(1) { top: 13px; }
  .hamburger span:nth-child(2) { top: 20px; }
  .hamburger span:nth-child(3) { top: 27px; }
  .hamburger.open span:nth-child(1), .hamburger.open span:nth-child(3) { top: 20px; }
  .hero h1 { font-size: 1.95rem; }
  .page-hero h1 { font-size: 1.85rem; }
  .counter-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .counter-num { font-size: 2.1rem; }
  .social-bar a { width: 34px; height: 34px; font-size: .88rem; }
}


/* Extra phone refinements */
@media (max-width: 1140px) {
  .nav-wrap { gap: 12px; }
  .brand img { width: 165px; max-height: 56px; }
  .main-nav { max-width: 100vw; }
}
@media (max-width: 768px) {
  :root { --header-h: 70px; }
  .nav-wrap { height: var(--header-h); }
  .brand img { width: 150px; max-height: 50px; }
  .hero-content { width: 100%; }
  .hero h1, .page-hero h1 { line-height: 1.08; }
  .service-row-body, .feature-banner-content, .cta-banner, .inline-cta { width: 100%; min-width: 0; }
  .footer-grid > *, .split > *, .card-grid > *, .feature-grid > * { min-width: 0; }
  input, select, textarea, button { max-width: 100%; }
}
@media (max-width: 480px) {
  .brand img { width: 138px; max-height: 46px; }
  .hero-content { padding-left: 18px; padding-right: 18px; }
  .page-hero-content { padding-left: 0; padding-right: 0; }
  .service-row-media { aspect-ratio: 4 / 3; }
  .service-row-body { padding: 30px 22px; }
  .footer-brand img { width: 185px; }
}
@media (max-width: 360px) {
  .brand img { width: 126px; }
  .container { padding-left: 14px; padding-right: 14px; }
}
/* Keep the Air Cargo Solutions image fully visible on smaller screens. */
.split .img-frame.tall.cargo-showcase { aspect-ratio: auto; min-height: 0; }