/* ------------------------------------------------------------------
   Tablet fixes (768px - 1199px)
   Portrait/landscape tablets fell between the phone and desktop rules:
   the burger button showed next to the full menu, the logo shrank, the
   top bar wrapped and the hero slider clipped its buttons.
   ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199px) {

  /* --- Top bar: keep contact details on one tidy row --- */
  .top-bar,
  .header-top {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .top-bar .container,
  .top-bar .container-fluid {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .top-bar p,
  .top-bar li,
  .top-bar a,
  .top-bar span {
    font-size: 12px !important;
    white-space: nowrap;
  }

  .top-bar ul {
    margin-bottom: 0;
  }

  /* --- Header: single aligned row, no burger next to the menu --- */
  .header.header_style_01 .navbar-toggle,
  .header.header_style_01 .mobile-pay-bill {
    display: none !important;
  }

  .header.header_style_01 .container-fluid {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header.header_style_01 .navbar-header {
    float: none !important;
    display: flex !important;
    align-items: center;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
  }

  .header.header_style_01 .navbar-brand {
    float: none !important;
    display: flex !important;
    align-items: center;
    height: auto !important;
    padding: 6px 0 !important;
  }

  .header.header_style_01 .navbar-brand img {
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    max-height: 40px !important;
  }

  .header.header_style_01 #navbar,
  .header.header_style_01 .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    float: none !important;
    width: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .header.header_style_01 .navbar-nav {
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 !important;
  }

  .header.header_style_01 .navbar-nav > li {
    float: none !important;
  }

  .header.header_style_01 .navbar-nav > li > a {
    padding: 10px 9px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .header.header_style_01 .nav-bill > a {
    margin-left: 6px;
    padding: 9px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* --- Hero slider: enough room for heading + CTA buttons --- */
  .slider-item,
  .home-one-slider-otem,
  .slider-content-area {
    min-height: 560px !important;
    height: auto !important;
  }

  .slider-content-area {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .slide-text h1,
  .slide-text .homepage-three-title,
  .slider-content-area h1 {
    font-size: 40px !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .slide-text h2,
  .slider-content-area h2 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  .slide-text p,
  .slider-content-area p {
    font-size: 16px !important;
  }

  .slider-content-btn {
    margin-top: 6px;
  }

  .slider-content-btn .btn {
    padding: 10px 22px !important;
    font-size: 14px !important;
  }

  /* Active nav underline should sit under the label, not through it. */
  .header.header_style_01 .navbar-nav > li > a::after,
  .header.header_style_01 .navbar-nav > li > a::before {
    bottom: -2px !important;
    top: auto !important;
  }


  .owl-carousel .owl-nav [class*="owl-"] {
    transform: scale(.85);
  }

  /* --- Generic containers: use the available width --- */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- Section headings and body copy --- */
  .section-title h2,
  .sec-title h2,
  h2.title {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }

  /* --- Card / column grids: two comfortable columns --- */
  #services .owl-services.owl-carousel,
  #services .owl-services.owl-carousel.owl-loaded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .price-table-wrap .col-md-4,
  .price-table-wrap .col-sm-4,
  .pricing-row .col-md-4,
  .pricing-row .col-sm-4 {
    width: 50% !important;
  }

  .price-table,
  .pricing-table,
  .plan-box {
    margin-bottom: 24px;
  }

  .plan-price,
  .price-table .price {
    font-size: 34px !important;
  }

  /* Client logo grid */
  .clients-list .col-md-2,
  .clients-list .col-sm-3,
  .client-logo-grid .col-md-2 {
    width: 33.3333% !important;
  }

  .clients-list img,
  .client-logo-grid img {
    max-width: 100%;
    height: auto;
  }

  /* Testimonials read better full width on tablets */
  .testimonial {
    padding: 24px !important;
  }

  .testimonial .desc p.lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* --- Contact page: form and info stack cleanly --- */
  .contact-form .col-md-6,
  .contact-form .col-sm-6 {
    width: 50% !important;
  }

  .contact-info .col-md-4,
  .contact-info .col-sm-4 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  #map,
  .map-area iframe,
  iframe[src*="google.com/maps"] {
    width: 100% !important;
    height: 340px !important;
  }

  /* --- Footer --- */
  footer .col-md-3,
  footer .col-sm-3 {
    width: 50% !important;
    margin-bottom: 28px;
  }

  /* --- Floating buttons stay clear of content --- */
  .whatsapp_float {
    right: 20px !important;
    bottom: 24px !important;
  }

  .dmtop {
    right: 20px !important;
    bottom: 92px !important;
    left: auto !important;
  }

  /* Never allow media to force horizontal scroll */
  img,
  table,
  iframe {
    max-width: 100%;
  }
}

/* Narrow tablets / large phones in portrait need a tighter menu still. */
@media (min-width: 768px) and (max-width: 900px) {
  .header.header_style_01 .navbar-nav > li > a {
    padding: 10px 6px !important;
    font-size: 11.5px !important;
  }

  .header.header_style_01 .navbar-brand img {
    height: 34px !important;
    max-height: 34px !important;
  }

  .slide-text h1,
  .slide-text .homepage-three-title,
  .slider-content-area h1 {
    font-size: 32px !important;
  }

  .slide-text h2,
  .slider-content-area h2 {
    font-size: 16px !important;
  }

}