/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {
  .topBar ul.menu li { font-size: 12px; padding: 5px 6px; }
  .icon-box .info-side p strong { font-size: 14px; }
}

/* Medium Devices, Desktops / Tablets landscape */
@media only screen and (max-width : 991px) {
  /* topBar */
  .topBar .left-side { flex-wrap: wrap; gap: 2px; padding: 2px 10px; }
  .topBar ul.menu { flex-wrap: wrap; }
  .topBar ul.menu li { font-size: 11px; padding: 3px 5px; white-space: normal; }
  .topBar ul.menu li:first-child { line-height: 1.4; }

  /* header icon boxes */
  .header .medium-offset-5 { margin-left: 0 !important; }
  .icon-box { padding: 5px 0; }
  .icon-box .info-side p { font-size: 13px; }
  .icon-box .info-side p strong { font-size: 14px; }
  /* header sizing on tablet */
  .header .logo img { height: 46px; }
  .header .logo span { font-size: 16px !important; white-space: nowrap !important; }
  .header > .row > .medium-8.small-12.columns { gap: 14px; }
  .header .icon-box .icon-side { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .icon-side i { font-size: 1.3rem !important; line-height: 44px !important; }

  /* services: 2 per row on tablet */
  .service-wrap .service { width: 50%; float: left; }

  /* doctor / specialities images */
  .doctor-img img,
  .doctor-img.subimg img { height: 280px !important; object-fit: cover; width: 100%; }

  /* why choose us sidebar */
  .why-choose-us .single-testi { margin-top: 30px; }
}

/* Desktop / tablet landscape: always show horizontal nav, hide hamburger */
@media only screen and (min-width : 768px) {
  /* ---- TopBar: flexbox layout for tablet + desktop ---- */
  .topBar .row { margin: 0; }
  .topBar .left-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    flex-wrap: nowrap;
  }
  .topBar ul.menu {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding:0 0;
    float: none !important;
  }
  .topBar ul.menu li {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* ---- Header: flexbox row (logo left, icon boxes right) ---- */
  .header > .row {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 15px;
    margin: 0;
  }
  /* Logo: grows to fill remaining space, text never truncates */
  .header > .row > .medium-4.small-12.columns.logo {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
  }
  /* Right side: fixed width, never shrinks, always beside logo */
  .header > .row > .medium-8.small-12.columns {
    flex: 0 0 auto;
    float: none;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding-right: 10px;
  }
  /* Kill the broken Foundation offset + fixed widths */
  .header .medium-4.medium-offset-5,
  .header .small-box {
    width: auto !important;
    margin-left: 0 !important;
    float: none;
    flex: none;
  }
  /* Each icon box: flex row so icon + text sit side-by-side */
  .header .icon-box {
    display: flex !important;
    align-items: center;
    clear: none;
  }
  .header .icon-box .icon-side,
  .header .icon-box .info-side {
    float: none !important;
  }
  .header .icon-box .info-side {
    width: auto;
    margin-left: 10px;
  }

  /* ---- Nav: always show horizontal, hide hamburger ---- */
  .top-bar-title { display: none !important; }
  #responsive-menu { display: block !important; }
  #responsive-menu .menu { display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: 3px; padding: 0 4px; }
  #responsive-menu .menu li { display: inline-block !important; }
  #responsive-menu .menu li a { padding: 0 16px; color: #fff; line-height: 31px; display: block; border-radius: 4px; }
  #responsive-menu .menu li a:hover,
  #responsive-menu .menu li.is-active a { background: #00aca2; color: #fff; }
}

/* Small Devices, Tablets portrait */
@media only screen and (max-width : 767px) {
  /* ---- Top Bar: stack vertically, centre everything ---- */
  .topBar .left-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    gap: 4px;
  }
  .topBar ul.menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    float: none !important;
    margin: 0;
    padding: 0 0;
    width: 100%;
    text-align: center;
  }
  .topBar ul.menu li {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    font-size: 11px;
    padding: 2px 5px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  /* ---- Header (logo + contact) — mobile stack ---- */
  .header { padding-top: 0 !important; padding-bottom: 0 !important; }
  .header > .row {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0px 10px !important;
    gap: 1px;
    margin: 0 !important;
  }
  .header > .row > .medium-4.small-12.columns.logo {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: 0;
  }
  .header .logo a { justify-content: center; }
  .header .logo img { height: auto; max-width: 55px; flex-shrink: 0; }
  .header .logo span { font-size: 14px !important; white-space: nowrap !important; }
  .header > .row > .medium-8.small-12.columns {
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    padding-right: 0 !important;
  }
  .header .medium-4.medium-offset-5,
  .header .small-box { flex: 1; margin: 0 !important; padding: 0 !important; text-align: center; }
  .header .icon-box { display: flex !important; align-items: center; justify-content: center; gap: 6px; clear: none; margin: 0 !important; padding: 0 !important; }
  .header .icon-box .icon-side,
  .header .icon-box .info-side { float: none !important; }
  /* Smaller icons + text on mobile */
  .header .icon-box .icon-side { width: 36px !important; height: 36px !important; min-width: 36px; display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; }
  .header .icon-side i { font-size: 1rem !important; line-height: 1 !important; }
  .header .icon-box .info-side { margin-left: 6px; width: auto; }
  .header .icon-box .info-side p { font-size: 10px; line-height: 1.3; margin: 0; white-space: nowrap; }
  .header .icon-box .info-side p strong { font-size: 11px; white-space: nowrap; }
  .header .icon-box .info-side a.button { font-size: 10px; padding: 3px 8px; }

  /* ---- Navigation: mobile hamburger ---- */
  .navigation { width: 100%; }
  div.navigation.is-sticky { left: 0; width: 100%; }

  /* Hamburger toggle button */
  .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 0; flex-wrap: wrap; }
  .top-bar-title { display: block; }
  .top-bar-title span[data-responsive-toggle] > a {
    display: flex; align-items: center; gap: 10px;
    color: #fff; padding: 12px 16px; cursor: pointer;
    text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  }
  .top-bar-title span[data-responsive-toggle] > a:hover { opacity: 0.85; }

  /* Hamburger icon — 3 bars via box-shadow */
  .menu-icon { float: none !important; display: inline-block; width: 22px; height: 2px; background: #fff; position: relative; top: -4px; transition: background 0.2s; }
  .menu-icon::before,
  .menu-icon::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; transition: transform 0.25s ease, top 0.25s ease; }
  .menu-icon::before { top: -7px; }
  .menu-icon::after  { top:  7px; }

  /* × icon when open */
  .top-bar-title.menu-open .menu-icon { background: transparent; }
  .top-bar-title.menu-open .menu-icon::before { top: 0; transform: rotate(45deg); }
  .top-bar-title.menu-open .menu-icon::after  { top: 0; transform: rotate(-45deg); }

  /* Hide menu by default on mobile; JS adds is-open */
  #responsive-menu { display: none; width: 100%; }
  #responsive-menu.is-open { display: block; }

  /* Mobile menu list */
  #responsive-menu .menu { display: block !important; width: 100%; margin: 0; padding: 0; list-style: none; }
  #responsive-menu .menu li { display: block !important; width: 100%; }
  #responsive-menu .menu li a {
    display: block; padding: 13px 20px; color: #fff; font-size: 14px; font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-decoration: none; transition: background 0.2s ease;
  }
  #responsive-menu .menu li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.12); }
  #responsive-menu .menu li a:hover,
  #responsive-menu .menu li.is-active a { background: #00aca2; color: #fff; }

  /* ---- About Us ---- */
  .about-us .medium-6.small-12 { margin-bottom: 20px; }
  .general-dent { margin-bottom: 20px; }
  .emergency-box h3 { font-size: 22px; line-height: 28px; }

  /* ---- Information Boxes ---- */
  .information-boxes .medium-4 { margin-bottom: 20px; }
  .information-box img { width: 100px; height: 100px; }

  /* ---- Services: 1 per row on mobile ---- */
  .service-wrap .service { width: 100%; float: none; }

  /* ---- Why Choose Us ---- */
  .why-us-wrapper .why-us { width: 100%; }
  .why-choose-us .single-testi { margin-top: 30px; }
  .why-choose-us .medium-4 { margin-top: 20px; }

  /* ---- Specialities / Doctors ---- */
  .doctor-img img,
  .doctor-img.subimg img { height: auto !important; max-height: 260px; object-fit: cover; width: 100%; }
  .junior-doctors { margin-top: 20px; }
  .doc-head { font-size: 14px; margin-top: 8px; }

  /* ---- Testimonial parallax ---- */
  .divider.parallax { padding: 30px 0; }

  /* ---- Footer ---- */
  .horizontal-contact-widget [class*="col-"] { margin-bottom: 20px; text-align: center; }
  .footer .widget { margin-bottom: 20px; }

  /* Copyright bar: centre both lines */
  .footer .copyrightbg .pull-left,
  .footer .copyrightbg .pull-right {
    float: none !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Social icons: always one line, no wrap */
  .footerlogo .styled-icons { margin-top: 0 !important; }
  .footer .list-inline.styled-icons.icon-gray { margin-top: 0 !important; }
  .footer .styled-icons,
  .footer .list-inline.styled-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin-left: 0 !important;
  }
  .footer .styled-icons li,
  .footer .list-inline.styled-icons li {
    display: inline-flex !important;
    float: none !important;
    flex-shrink: 0 !important;
  }

  /* ---- Section titles ---- */
  .section-title h2 { font-size: 24px; }
  .inner-title h2 { font-size: 22px; }

  /* ---- General spacing ---- */
  .inner-padding { padding: 30px 15px; }
  .module { padding: 20px 15px; }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 479px) {
  /* topBar: show full timing text, allow wrapping */
  .topBar .fa-clock-o,
  .topBar .fa-clock-o + * { display: inline !important; }
  .topBar li:has(.fa-clock-o) { display: block !important; width: 100% !important; text-align: center !important; white-space: normal !important; font-size: 9px !important; line-height: 1.2 !important; padding: 2px 4px !important; }
  .topBar li:has(.fa-clock-o) .span-pad { white-space: nowrap !important; }
  .topBar .left-side { padding: 4px 8px; gap: 2px; }
  .topBar ul.menu { justify-content: center; }
  .topBar ul.menu li { font-size: 11px; padding: 2px 4px; }

  /* header */
  .header { padding-top: 0 !important; padding-bottom: 0 !important; }
  .header .logo img { max-width: 44px; flex-shrink: 0; }
  .header .logo span { font-size: 12px !important; white-space: nowrap !important; }
  .header .medium-8.small-12 { gap: 6px; }
  .header .small-box { display: block; }
  .header .icon-box .icon-side { width: 30px !important; height: 30px !important; min-width: 30px; line-height: 1 !important; display: flex !important; align-items: center; justify-content: center; }
  .header .icon-side i { font-size: 0.85rem !important; line-height: 1 !important; }
  .header .icon-box .info-side p { font-size: 9px; white-space: nowrap; }
  .header .icon-box .info-side p strong { font-size: 10px; white-space: nowrap; }
  .header .icon-box .info-side a.button { font-size: 9px; padding: 2px 6px; }

  /* navigation hamburger */
  .top-bar { padding: 5px 8px; }
  .menu-icon { margin-right: 6px; }

  /* emergency box */
  .emergency-box h3 { font-size: 18px; line-height: 24px; }
  .emergency-box h6 { font-size: 16px; }

  /* doctor images */
  .doctor-img img,
  .doctor-img.subimg img { max-height: 200px; }

  /* section titles */
  .section-title h2 { font-size: 20px; }
  .section-title p { font-size: 13px; }
  .inner-title h2 { font-size: 20px; }

  /* why choose us */
  .why-us h4 { font-size: 15px; }
  .why-us p { font-size: 13px; }

  /* services */
  .service-box .service-info h5 { font-size: 13px; }

  /* footer */
  .footer .widget-title { font-size: 15px; }
  .horizontal-contact-widget { padding: 10px 0; }

  /* sticky nav width safety */
  div.navigation.is-sticky { left: 0; right: 0; width: 100%; }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 360px) {
  .header .logo span { font-size: 11px !important; white-space: nowrap !important; }
  .emergency-box h3 { font-size: 16px; }
  .section-title h2 { font-size: 18px; }
}

/* ============================================================
   TOPBAR — social icons on same line, below timing on mobile
   ============================================================ */
@media only screen and (max-width: 767px) {
  /* Block layout: timing on its own line, icons flow inline below */
  .topBar ul.menu.text-right.pull-right {
    display: block !important;
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* Timing — full block row, text wraps to show full hours */
  .topBar ul.menu.text-right.pull-right li:first-child {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 10px;
    line-height: 1.2;
    padding: 2px 4px;
  }
  .topBar ul.menu.text-right.pull-right li:first-child .span-pad { white-space: nowrap !important; }
  /* Social icons — inline so they all sit on one line */
  .topBar ul.menu.text-right.pull-right li.social,
  .topBar ul.menu.text-right.pull-right li.first-social {
    display: inline-flex !important;
    width: auto !important;
    padding: 2px 6px !important;
    vertical-align: middle;
  }
}

@media only screen and (max-width: 479px) {
  .topBar ul.menu.text-right.pull-right li:first-child { font-size: 9px; }
}

/* ============================================================
   SLIDER — tablet landscape (≤ 1024px)
   ============================================================ */
@media only screen and (max-width: 1024px) {
  /* Remove the 60px section padding that creates a gap between nav and slider */
  #home > .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .rev_slider_wrapper,
  .rev_slider { overflow: hidden !important; }

  /* Subtitle */
  #rs-1-layer-1, #rs-2-layer-2, #rs-3-layer-1 {
    font-size: 18px !important;
    line-height: 28px !important;
    white-space: normal !important;
  }
  /* Main title */
  #rs-1-layer-2, #rs-2-layer-1, #rs-3-layer-2 {
    font-size: 32px !important;
    line-height: 40px !important;
    white-space: normal !important;
  }
  /* Description */
  [id$="-layer-3"] {
    white-space: normal !important;
    width: 85vw !important;
    max-width: 85vw !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  /* Buttons */
  [id$="-layer-4"] {
    white-space: normal !important;
    text-align: center !important;
  }
  [id$="-layer-4"] .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
    margin: 3px 4px !important;
    display: inline-block !important;
  }
}

/* ============================================================
   SLIDER — tablet/mobile (≤ 778px): hide subtitle+desc, show title+buttons only
   ============================================================ */
@media only screen and (max-width: 778px) {
  /* Hide subtitles only */
  #rs-1-layer-1, #rs-2-layer-2, #rs-3-layer-1 {
    display: none !important;
    visibility: hidden !important;
  }
  /* Slides 2 & 3 descriptions: visible, centred */
  #rs-2-layer-3, #rs-3-layer-3 {
    display: block !important;
    visibility: visible !important;
    white-space: normal !important;
    text-align: center !important;
    width: 90vw !important;
    max-width: 90vw !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  /* Slide 1 description: visible, centred, readable */
  #rs-1-layer-3 {
    display: block !important;
    visibility: visible !important;
    white-space: normal !important;
    text-align: center !important;
    width: 90vw !important;
    max-width: 90vw !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  /* Slide 1 title: single line, no wrap */
  #rs-1-layer-2 {
    font-size: 18px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Slide 2 title: single line, no wrap — smaller font so long text fits narrow screens */
  #rs-2-layer-1 {
    font-size: 13px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Slide 3 title: single line, no wrap */
  #rs-3-layer-2 {
    font-size: 18px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Buttons: same line, fit within slider */
  [id$="-layer-4"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    width: 88vw !important;
    max-width: 88vw !important;
    overflow: visible !important;
  }
  [id$="-layer-4"] .btn {
    font-size: 11px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    flex: 0 1 auto !important;
  }
  #booknowbtn, #chatwhatsapp {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
  #booknowbtn i, #chatwhatsapp i,
  [id$="-layer-4"] .btn i {
    font-size: 11px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
}

/* ============================================================
   SLIDER — mobile (≤ 480px)
   ============================================================ */
@media only screen and (max-width: 480px) {
  #rs-1-layer-2, #rs-3-layer-2 {
    font-size: 18px !important;
    line-height: 26px !important;
    width: auto !important;
    max-width: none !important;
  }
  #rs-2-layer-1 {
    font-size: 13px !important;
    line-height: 20px !important;
    width: auto !important;
    max-width: none !important;
  }
  #rs-1-layer-3, #rs-2-layer-3, #rs-3-layer-3 {
    font-size: 10px !important;
    line-height: 1.45 !important;
    width: 92vw !important;
    max-width: 92vw !important;
  }
  [id$="-layer-4"] {
    gap: 5px !important;
    width: 86vw !important;
    max-width: 86vw !important;
  }
  [id$="-layer-4"] .btn {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }
  #booknowbtn, #chatwhatsapp {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }
  #booknowbtn i, #chatwhatsapp i,
  [id$="-layer-4"] .btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 319px) {
  .topBar { display: none; }
  .header .logo img { max-width: 36px; flex-shrink: 0; }
  .header .logo span { font-size: 10px !important; white-space: nowrap !important; }
  .section-title h2 { font-size: 16px; }
}

/* ============================================================
   GLOBAL OVERFLOW GUARD
   ============================================================ */
body,
#wrapper {
  overflow-x: hidden;
  max-width: 100%;
}
.header-nav,
.header-nav-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
#home,
.rev_slider_wrapper {
  max-width: 100%;
  overflow: hidden;
}

/* ============================================================
   FOUNDATION COLUMN RESET — mobile-first base
   All columns are full-width by default (small-12 behaviour)
   ============================================================ */
.columns,
[class*="small-"].columns,
[class*="medium-"].columns,
[class*="large-"].columns {
  box-sizing: border-box;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.small-12,
.small-12.columns {
  width: 100%;
  float: none;
}

/* ============================================================
   TABLET (≥ 768px) — medium-* columns kick in
   ============================================================ */
@media only screen and (min-width: 768px) {
  .medium-3.columns  { width: 25%;     float: left; }
  .medium-4.columns  { width: 33.333%; float: left; }
  .medium-5.columns  { width: 41.667%; float: left; }
  .medium-6.columns  { width: 50%;     float: left; }
  .medium-7.columns  { width: 58.333%; float: left; }
  .medium-8.columns  { width: 66.667%; float: left; }
  .medium-9.columns  { width: 75%;     float: left; }
  .medium-12.columns { width: 100%;    float: none; }

  /* kill Foundation's medium-offset-5 on the header call box —
     it pushes the element 41 % to the right and breaks the layout */
  .header .medium-offset-5 { margin-left: 0 !important; }
}

/* ============================================================
   DESKTOP (≥ 992px) — large-* columns
   ============================================================ */
@media only screen and (min-width: 992px) {
  .large-12.columns { width: 100%; float: none; }

  /* Restore medium-offset-5 on very wide screens only if needed */
}

/* ============================================================
   TABLET HEADER FIXES (768px – 991px)
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* topBar: shrink text so everything fits one line */
  .topBar .left-side { padding: 4px 10px; gap: 4px; }
  .topBar ul.menu li { font-size: 10px; padding: 2px 4px; }
  .topBar ul .first-social { padding-left: 10px; }

  /* header row: flex so logo + icon boxes stay side by side */
  .header > .row {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 12px;
    gap: 8px;
  }
  .header > .row > .medium-4.small-12.columns.logo {
    flex: 1 1 auto;
    float: none;
    width: auto !important;
    min-width: 0;
  }
  .header > .row > .medium-8.small-12.columns {
    flex: 0 0 auto;
    float: none;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto !important;
    padding-right: 8px;
  }
  .header .medium-4.columns,
  .header .small-box {
    width: auto !important;
    float: none;
    flex: none;
    margin-left: 0 !important;
  }

  /* navigation: always horizontal on tablet */
  .top-bar-title { display: none !important; }
  #responsive-menu { display: block !important; width: 100%; }
  #responsive-menu .menu {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding: 0 4px;
  }
  #responsive-menu .menu li { display: inline-block !important; flex-shrink: 0; }
  #responsive-menu .menu li a { padding: 0 10px; font-size: 14px; line-height: 38px; }
}

/* ============================================================
   MOBILE HEADER FIXES (≤ 767px)
   ============================================================ */
@media only screen and (max-width: 767px) {
  /* All Foundation columns go full-width */
  .medium-3.columns,
  .medium-4.columns,
  .medium-5.columns,
  .medium-6.columns,
  .medium-7.columns,
  .medium-8.columns,
  .medium-9.columns,
  .medium-12.columns {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* header centre-stack on mobile */
  .header > .row {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0px 12px;
    gap: 6px;
  }
  .header > .row > .medium-4.small-12.columns.logo {
    width: 100% !important;
    text-align: center;
  }
  .header > .row > .medium-8.small-12.columns {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding-right: 0 !important;
  }

  /* home section: prevent slider blowing out the page width */
  #home .container-fluid,
  #home .rev_slider_wrapper { max-width: 100vw; overflow: hidden; }
}