/* ============================================================================
   RentCTG — Unified Responsive Layer  (v2: desktop-style layout on mobile)
   ----------------------------------------------------------------------------
   Goal: keep the DESKTOP design and arrangement on phones (logo left + contact
   right, horizontal menu with the "আরো রেন্টাল" dropdown, the video/profile and
   product/sidebar blocks laid out like desktop) — only fitted and sized so it
   is comfortable on a small screen, and so the mobile browser's address bar
   collapses on scroll (full-screen, edge-to-edge content).
   Brand: header tan #8c7a5c · nav dark #222 · WhatsApp green · Call blue
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Universal hygiene (all viewports — safe, non-visual-breaking)
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
html { -webkit-text-size-adjust: 100%; }
/* overflow guard on body only (NOT html) so the URL bar can still auto-hide */
body { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, a, li, td, th, figcaption, .circle-title {
  overflow-wrap: break-word; word-wrap: break-word;
}
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #1268f3; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===========================================================================
   MOBILE (≤767px) — reproduce the desktop layout, fitted to the phone
   ======================================================================== */
@media (max-width: 767px) {

  /* ---- 1. Global type & spacing ----------------------------------------- */
  body { font-size: 14px; line-height: 1.5; }
  .container { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 22px; } h2 { font-size: 19px; } h3 { font-size: 17px; }

  /* ---- 2. Header: LOGO left · phone+contact+email RIGHT (like desktop) --- */
  #masthead .header-top > .row {
    display: flex; flex-wrap: nowrap; align-items: center;
    justify-content: space-between; margin-left: -8px; margin-right: -8px;
  }
  /* Bootstrap's .row::before/::after clearfix become phantom flex items and
     steal the space-between gap — remove them so logo/cluster reach the edges */
  #masthead .header-top > .row::before,
  #masthead .header-top > .row::after { display: none !important; }
  #masthead .header-top > .row > [class*="col-"] {
    float: none; width: auto; padding-left: 6px; padding-right: 6px;
  }
  #masthead .header-top > .row > [class*="col-"]:first-child { flex: 0 0 auto; padding-left: 0; }
  #masthead .header-top > .row > [class*="col-"]:last-child  {
    flex: 0 1 auto; min-width: 0; padding-right: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  #masthead .site-branding { margin: 0; }
  #masthead .site-branding a { display: inline-block; line-height: 0; }
  /* SVG logo has a viewBox but no intrinsic width, so it collapses to 0 with
     width:auto inside a flex column — give it explicit dimensions (ratio 2.24:1) */
  #masthead .site-branding img { width: 140px; height: 62px; max-height: none; max-width: 140px; }
  /* right cluster: phone pill hugs the number, centred directly over the pills */
  #masthead .header-top .phone {
    display: inline-block; text-align: center; font-size: 15px; line-height: 1.15;
    white-space: nowrap; margin: 0; padding: 5px 12px;
  }
  #masthead .header-top .nav-pills.sub-menu {
    display: flex; flex-wrap: nowrap; justify-content: center;
    gap: 5px; margin: 6px 0 0; padding: 0;
  }
  #masthead .header-top .nav-pills.sub-menu > li { float: none; margin: 0; }
  #masthead .header-top .nav-pills.sub-menu > li > a {
    padding: 4px 9px; font-size: 11px; line-height: 1.2; border-radius: 4px;
  }

  /* ---- 3. Navigation: keep HORIZONTAL, hide hamburger, real dropdown ----- */
  #site-navigation .navbar-toggle { display: none !important; }
  #site-navigation .navbar-header { float: none; margin: 0; }
  #site-navigation #navbar-collapse-main.collapse,
  #site-navigation .navbar-collapse {
    display: block !important; height: auto !important; max-height: none !important;
    padding: 0; border: 0; overflow: visible !important; box-shadow: none;
  }
  #site-navigation .navbar-nav {
    display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-around;
    float: none; margin: 0; width: 100%;
  }
  #site-navigation .navbar-nav > li { float: none; position: relative; }
  #site-navigation .navbar-nav > li > a {
    padding: 9px 6px; font-size: 13.5px; line-height: 1.2;
  }
  /* the "আরো রেন্টাল" dropdown → dark panel matching the menu bar (#222) */
  #site-navigation .navbar-nav > li.dropdown > .dropdown-menu {
    display: none; position: absolute; top: 100%; right: 0; left: auto;
    min-width: 200px; max-width: 82vw; max-height: 66vh; overflow-y: auto;
    background: #222; border: 1px solid #080808; border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 18px rgba(0,0,0,.4); padding: 4px 0; margin: 0;
    float: none; text-align: left; z-index: 1050;
  }
  #site-navigation .navbar-nav > li.dropdown.open > .dropdown-menu { display: block; }
  /* theme forces these links white-on-white; we keep them light on the dark panel
     so they read like an extension of the menu bar */
  #site-navigation .navbar-nav .dropdown-menu > li > a,
  #site-navigation .navbar-nav .dropdown-menu li a {
    display: block; padding: 9px 18px; font-size: 13px; line-height: 1.4;
    color: #e8e8e8 !important; white-space: normal; background: transparent;
  }
  #site-navigation .navbar-nav .dropdown-menu > li > a:hover,
  #site-navigation .navbar-nav .dropdown-menu > li > a:focus,
  #site-navigation .navbar-nav .dropdown-menu li a:hover,
  #site-navigation .navbar-nav .dropdown-menu li a:focus {
    background: #111; color: #fff !important;
  }
  #site-navigation .navbar-nav .dropdown-menu .sub-menu,
  #site-navigation .navbar-nav .dropdown-menu ul { list-style: none; padding-left: 12px; }

  /* ---- 4. Banner & hero equipment circles -------------------------------- */
  .banner.home .container { padding-top: 12px; padding-bottom: 18px; padding-left: 6px; padding-right: 6px; }
  /* heading: smaller so it fits on one line, with the circles pulled up close */
  .banner.home h1 {
    font-size: 14.5px !important; line-height: 1.35 !important;
    margin: 0 0 10px !important; white-space: nowrap;
  }
  /* hero 3 circles: pack them close together in one centred row + leave room
     below so the "আরো রেন্টাল দেখুন" button doesn't ride up onto them */
  .banner .home-circles:not(.more-rentals-pair-row) {
    display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start;
    gap: 6px; text-align: center; margin: 0 0 10px;
  }
  /* columns share the full width equally (capped) so the circles fill the row
     instead of leaving big gaps on the left and right */
  .banner > .container > .row .home-circles > .col-sm-4 {
    flex: 1 1 0; min-width: 0; max-width: 140px; float: none; padding: 0;
  }
  /* circle fills its column; the green label matches that width */
  .home-circles a.home-circle { width: 100%; max-width: 100%; margin: 0 auto; }
  /* thinner white ring (theme uses 10px) + lighter shadow */
  .home-circles a.home-circle img.img-circle,
  .banner .img-circle, .home-circle .img-circle {
    border: 4px solid #fff !important; box-shadow: 0 0 12px rgba(0,0,0,.5) !important;
    border-radius: 50%; width: 100%; height: auto; max-height: none; margin: 0 auto;
  }
  /* bigger label text — green card stays circle-width, tighter padding keeps height */
  .home-circles a.home-circle h2.circle-title,
  .banner .circle-title, .home-circle .circle-title {
    font-size: 13px !important; line-height: 1.1 !important;
    padding: 4px 2px 5px !important; width: 100%;
  }
  .more-btn .btn, a.more-rentals { font-size: 13px; padding: 8px 16px; }
  /* theme pins this button absolutely to the banner bottom (desktop) so on a
     phone it lands on top of the circles — let it flow normally underneath */
  .banner.home .more-btn {
    position: static !important; bottom: auto !important; left: auto !important;
    width: 100%; text-align: center; margin-top: 14px;
  }

  /* ---- 5. "More rentals" extra circles → 2-up, SAME size as the top 3 ----- */
  #more-rentals > .row { margin-left: 0; margin-right: 0; }
  #more-rentals > .row > [class*="col-"] { width: 100%; float: none; padding: 0; }
  #more-rentals .more-rentals-pair-row { margin-left: 0; margin-right: 0; }
  #more-rentals .more-rentals-pair-row > [class*="col-"] {
    width: 50%; float: left; padding: 6px; text-align: center; min-height: 1px;
  }
  #more-rentals a.home-circle { display: inline-block; width: 100%; max-width: 162px; margin: 0 auto; }
  #more-rentals a.home-circle img { display: block; width: 100% !important; height: auto !important; max-width: 100% !important; }

  /* ---- 5b. R1 "বুক করুন সহজেই" → heading + copy on top, fleet image BELOW - */
  .rentctg-fleet-card-row { display: block; }
  .rentctg-fleet-card-row > .wpb_column { float: none; width: 100% !important; display: block; }
  .rentctg-fleet-card-row > .vc_col-sm-5 { display: block !important; }   /* unhide image col */
  /* light side padding so the copy + image don't touch the screen edges */
  .rentctg-fleet-card-row > .wpb_column > .vc_column-inner { padding-left: 14px; padding-right: 14px; padding-bottom: 6px; }
  .rentctg-fleet-card-row .vc_col-md-7 h2 { font-size: 16px; margin-bottom: 6px; }
  .rentctg-fleet-card-row .vc_col-md-7 h4,
  .rentctg-fleet-card-row .vc_col-md-7 p,
  .rentctg-fleet-card-row .vc_col-md-7 li { font-size: 13.5px; line-height: 1.45; margin-bottom: 3px; }
  .rentctg-fleet-card-row .vc_col-md-7 .wpb_wrapper { margin-bottom: 0; }
  /* slightly larger fleet image, pulled up tight to the copy */
  .rentctg-fleet-card-row > .vc_col-sm-5 > .vc_column-inner { padding-top: 0; padding-bottom: 0; }
  .rentctg-fleet-card-row .vc_col-sm-5 { margin-top: -12px; text-align: center; }
  .rentctg-fleet-card-row .vc_col-sm-5 .wpb_single_image,
  .rentctg-fleet-card-row .vc_col-sm-5 figure,
  .rentctg-fleet-card-row .vc_col-sm-5 img {
    margin-left: auto; margin-right: auto; display: block; max-width: 86%;
  }

  /* ---- 6. Video + company-profile row: KEEP SIDE-BY-SIDE (like desktop),
            with the right-hand text a little larger ------------------------ */
  .rentctg-video-inner { display: flex; flex-wrap: nowrap; align-items: flex-start; margin: 0; }
  .rentctg-video-inner > .rentctg-video-column { width: 42%; float: none; padding: 0 6px 0 0; }
  .rentctg-video-inner > .rentctg-info-column  { width: 58%; float: none; padding: 0 0 0 6px; }
  .rentctg-video-column .wpb_video_widget,
  .rentctg-video-column .wpb_wrapper { margin-bottom: 8px; }
  .rentctg-info-column .wpb_text_column,
  .rentctg-info-column p,
  .rentctg-info-column li { font-size: 14.5px; line-height: 1.55; }
  .rentctg-info-column h1 { font-size: 19px; }
  .rentctg-info-column h2, .rentctg-info-column h3 { font-size: 17px; }
  .rentctg-profile-box .rentctg-company-profile-link { font-size: 13px; }
  /* company-profile PDF preview was still too tall — shorten further */
  .rentctg-company-profile-frame { max-height: 168px; overflow: hidden; border-radius: 4px; }
  .rentctg-company-profile-frame iframe,
  .rentctg-company-profile-frame embed,
  .rentctg-company-profile-frame object { height: 168px !important; max-height: 168px; }

  /* ---- 7. Service-points list ------------------------------------------- */
  .rentctg-service-points { font-size: 13px; }
  .rentctg-service-points li { margin-bottom: 4px; }

  /* ---- 8. "ইকুইপমেন্ট বহর" fleet copy: mobile-visualised ----------------- */
  .rentctg-fleet-copy-section { padding-top: 20px; padding-bottom: 20px; }
  .rentctg-fleet-copy-section .wpb_column { padding-left: 14px; padding-right: 14px; }
  .rentctg-fleet-copy-section h1,
  .rentctg-fleet-copy-section h2,
  .rentctg-fleet-copy-section h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
  .rentctg-fleet-copy-section p {
    font-size: 14px; line-height: 1.65; margin-bottom: 12px; text-align: left;
  }

  /* ---- 8b. Bottom CTA steps row → 4 icon-steps horizontal, image fills card */
  .rentctg-steps-section { padding-top: 22px !important; padding-bottom: 26px !important; }
  /* image fills the whole card (no empty taupe strip below it) */
  .rentctg-steps-section .upb_row_bg {
    background-size: cover !important; background-repeat: no-repeat !important;
    background-position: center center !important;
  }
  .rentctg-steps-section > .wpb_column .wpb_text_column p { font-size: 14px; line-height: 1.4; }
  .rentctg-steps-inner { display: flex; flex-wrap: nowrap; justify-content: center; }
  .rentctg-steps-inner > .wpb_column,
  .rentctg-steps-inner > [class*="vc_col"] { width: 25% !important; float: none; padding: 0 2px; }
  .rentctg-steps-inner .aio-icon { font-size: 24px !important; }   /* override inline 60px */
  .rentctg-steps-inner .aio-icon-title,
  .rentctg-steps-inner h3.aio-icon-title {
    font-size: 9px !important; line-height: 1.2 !important; margin: 4px 0 0 !important;
  }

  /* ---- 9. Other full-bleed colour rows: comfortable padding ------------- */
  .vc_row.vc_row-has-fill > .wpb_column > .vc_column-inner { padding-top: 16px; padding-bottom: 16px; }

  /* ---- 10. Tables: scroll instead of overflowing (price tables excluded) - */
  table:not(.table-price) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-price { display: table !important; }

  /* ---- 11. Forms (contact / Mailchimp / Woo) — no iOS zoom -------------- */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select, textarea { width: 100%; font-size: 16px; min-height: 44px; }
  input[type=submit], button, .btn { min-height: 44px; }

  /* ---- 12. WooCommerce category: content (left) + sidebar (right), 1 product/row */
  /* a little breathing room on the page edges */
  body.tax-product_cat .site-main > .container,
  body.tax-product_cat .container.woocommerce,
  body.archive.tax-product_cat .container { padding-left: 13px; padding-right: 13px; }
  body.tax-product_cat .container > .row { margin-left: -6px; margin-right: -6px; }
  .row > .col-sm-8.col-md-9.content-area { width: 62%; float: left; padding-left: 6px; padding-right: 8px; }
  .row > .col-sm-4.col-md-3.widget-area {
    width: 38%; float: right; clear: none; margin-top: 0; padding-left: 6px; padding-right: 6px;
  }
  /* show ALL the sidebar cards (theme hides 3 of them on phones) */
  .widget-area.sidebar .widget.hidden-xs,
  .col-sm-4.col-md-3.widget-area .hidden-xs { display: block !important; }
  /* one equipment per row */
  .product-list.row { display: block; margin-left: 0; margin-right: 0; }
  .product-list.row > .product,
  .product-list.row > li.product { width: 100%; float: none; padding: 0; margin: 0 0 16px; }
  .product-list .product .woocommerce-loop-product__title,
  .product-list .product h2, .product-list .product h3 { font-size: 14px; line-height: 1.3; }
  /* sidebar sits in a narrow column → shrink its widget text to fit */
  .widget-area.sidebar .widget-title, .widget-area.sidebar .widgettitle { font-size: 13.5px; line-height: 1.3; }
  .widget-area.sidebar .widget { margin-bottom: 20px; }
  .widget-area.sidebar .widget li,
  .widget-area.sidebar .widget a,
  .widget-area.sidebar .widget p { font-size: 12px; line-height: 1.45; }

  /* single-product page keeps its stacked image-over-details layout (below) */
  .single-product-details-cls .content-area { width: 100%; float: none; }
  .single-product-sidebar { width: 100%; float: none; margin-top: 22px; clear: both; }

  /* ---- 13a. Single product page: side padding + decorated, informative card */
  body.single-product .container { padding-left: 13px; padding-right: 13px; }
  body.single-product .container > .row { margin-left: -6px; margin-right: -6px; }
  /* the inner row is ALSO a .row (double-nested) — kill its -15px gutter so
     content stops bleeding past the left edge */
  body.single-product .single-product-details-cls.row { margin-left: 0; margin-right: 0; }
  body.single-product .single-product-details-cls > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  /* product title */
  .single-product-sidebar .product_title,
  .single-product-sidebar h1, .single-product-sidebar h2 {
    font-size: 22px; font-weight: 700; color: #8c7a5c; margin: 4px 0 12px; line-height: 1.25;
  }
  /* main image framed as a clean card */
  .single-product-details-cls .image-wrap,
  .single-product-details-cls .flexslider {
    border: 1px solid #e6e0d4; border-radius: 8px; overflow: hidden;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }
  /* price block → card */
  .single-product-sidebar .summary-wrap {
    background: #fff; border: 1px solid #e6e0d4; border-radius: 8px; padding: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 16px; overflow: hidden;
  }
  .table-price { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
  .table-price th, .table-price td {
    padding: 8px 4px; text-align: center; font-size: 11.5px; border: 1px solid #ece7dc; vertical-align: middle;
    overflow: hidden;
  }
  .table-price tbody tr > th:first-child { width: 25%; }
  .table-price tbody tr:first-child th { background: #2b2b2b !important; color: #fff !important; font-weight: 600; }
  .table-price tbody tr:not(:first-child) > th:first-child {
    background: #f4f1ea; color: #4a4a4a; font-weight: 700; text-align: left; font-size: 10.5px; white-space: nowrap;
  }
  .table-price td.price { color: #10957f; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
  .table-price td[colspan] { padding: 6px 4px 3px; border-top: none; }
  .table-price .delivery {
    background: #fff7e6; color: #8a6d3b; padding: 9px 10px; border-radius: 6px;
    font-size: 12px; text-align: center; font-weight: 600; border: 1px dashed #e8c98a;
  }
  /* price-summary inner row → stack table over rate-guarantee cleanly */
  .summary-wrap .price-summary.row { margin: 0; }
  .summary-wrap .price-summary > [class*="col-"] { width: 100%; float: none; padding: 0; }
  /* ---- 13b. Rate-guarantee block (badge + smooth honor line + phone) ----- */
  .summary-wrap .rate-guarantee {
    margin-top: 12px; padding: 12px 8px 4px; border-top: 1px solid #ece7dc; text-align: center;
  }
  .rate-guarantee .row { margin: 0; display: block; }
  .rate-guarantee [class*="col-"] { width: 100%; float: none; padding: 0; }
  .rate-guarantee img { max-width: 82px; height: auto; margin: 0 auto 8px; display: block; }
  .honor {
    font-size: 13px; color: #4a4a4a; line-height: 1.5; margin: 0 auto 8px; text-align: center;
    font-weight: 500; max-width: 280px;
  }
  .rate-guarantee .add-area, .rate-guarantee .text-center.add-area {
    font-size: 17px; font-weight: 700; color: #10957f; letter-spacing: .3px;
  }
  /* ---- 13c. Booking / reserve-a-machine card --------------------------- */
  .single-product-sidebar .reserve-form-cls {
    background: #fff; border: 1px solid #e6e0d4; border-radius: 8px; padding: 14px 13px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); overflow: hidden;
  }
  .single-product-sidebar .reserve-form-cls .row { margin-left: 0; margin-right: 0; }
  .single-product-sidebar .reserve-form-cls [class*="col-"] { padding-left: 0; padding-right: 0; }
  .single-product-sidebar .reserve-form-cls h2,
  .single-product-sidebar .reserve-form-cls h3,
  .single-product-sidebar .reserve-form-cls > p:first-of-type {
    font-size: 16px; font-weight: 700; color: #8c7a5c; margin: 0 0 10px; text-align: center;
  }
  .single-product-sidebar input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .single-product-sidebar select, .single-product-sidebar textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #d4cdbf; border-radius: 6px;
    margin-bottom: 8px; font-size: 14px; box-sizing: border-box;
  }
  .single-product-sidebar .btn,
  .single-product-sidebar input[type="submit"],
  .single-product-sidebar button:not(.close) {
    width: 100%; background: #10957f; color: #fff; border: 0; border-radius: 6px;
    padding: 12px; font-size: 15px; font-weight: 600;
  }
  .single-product-sidebar > .row:last-child { margin-top: 14px; }
  /* ---- 13d. Related products: 2-up grid with a touch more padding ------- */
  .related.products .product, .product.related-product {
    width: 50%; float: left; padding: 8px !important; box-sizing: border-box;
  }
  .related.products h2 { font-size: 18px; font-weight: 700; color: #8c7a5c; margin: 18px 0 8px; padding: 0 6px; }

  /* ---- 13. WooCommerce single product: image over details -------------- */
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .single-product div.product .images,
  .single-product div.product .summary {
    width: 100% !important; float: none !important; margin: 0 0 18px;
  }

  /* ---- 13b. Founder / CEO / Director cards: centre + tidy + scale down ---- */
  .profiles { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 18px; }
  .profiles .profile {
    float: none; width: 100%; max-width: 320px; margin: 0 auto; text-align: center;
  }
  /* theme blows these up (img 260px, name 35px, h5 20px, p 16px) — shrink for phone */
  .profiles .profile .profile-img,
  .profiles .profile img.profile-img,
  .profiles .profile img { margin: 0 auto; display: block; width: 160px !important; height: 160px !important; }
  .profiles .profile .user-name { font-size: 20px !important; margin-top: 14px !important; }
  .profiles .profile h5 { font-size: 13.5px !important; letter-spacing: 1.5px; margin: 6px 0 !important; }
  .profiles .profile p { font-size: 13.5px !important; line-height: 1.5 !important; }
  .profiles .profile .btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 13px; padding: 8px 16px; line-height: 1; min-height: 38px;
  }

  /* ---- 14a. Footer-top: phone (pushed left) + guaranteed-rate ----------- */
  .footer-top .row { display: flex; flex-wrap: nowrap; align-items: center; margin-left: 0; margin-right: 0; }
  .footer-top .row > [class*="col-"] { float: none; width: 50%; padding: 0 8px; }
  .footer-top .row > [class*="col-"]:first-child { text-align: left; padding-left: 2px; }
  .footer-top .row > .hidden-xs { display: block !important; }  /* unhide guarantee text */
  .footer-top .text-right,
  .footer-top .text-right .rates,
  .footer-top .row > .text-right { text-align: center !important; }   /* centre the wrapped guarantee text */
  .footer-top a.btn, .footer-top .btn.btn-primary {
    font-size: 15px; padding: 8px 12px; white-space: nowrap; margin: 0;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .footer-top .rates { font-size: 12.5px !important; line-height: 1.4; margin-top: 0 !important; }

  /* ---- 14b. Footer widgets: masonry packing so gaps stay even ------------ */
  .footer-widgets .row {
    display: block; column-count: 2; column-gap: 14px; margin-left: 0; margin-right: 0;
  }
  .footer-widgets .row > [class*="col-"] { display: contents; }
  .footer-widgets .hidden-xs { display: block !important; }   /* show Resource/Newsletter/Partner */
  .footer-widgets .widget {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    display: block; width: 100%; margin: 0 0 10px;
  }
  .footer-widgets .widget-title,
  .footer-widgets h3.widget-title { font-size: 13px !important; margin-bottom: 5px !important; letter-spacing: .2px; line-height: 1.25 !important; }
  .footer-widgets .widget li,
  .footer-widgets .widget a,
  .footer-widgets .widget p { font-size: 13px; line-height: 1.38; }
  .footer-widgets .widget li { margin-bottom: 1px; }
  .footer-bottom { padding-top: 9px !important; padding-bottom: 9px !important; }
  .footer-bottom, .footer-bottom .row > [class*="col-"] { font-size: 11.5px; line-height: 1.4; }
  .footer-bottom .row > [class*="col-"] { float: none; width: 100%; text-align: center; }
  .footer-bottom .row > [class*="col-"]:last-child { margin-top: 0; }
  .footer-bottom .row > [class*="col-"]:empty { display: none; }

  /* ---- 15. Contact / full-width pages: breathing room + tidy CF7 form ---- */
  body.page-template-page-fullwidth-notitle .entry-content {
    padding-left: 14px; padding-right: 14px; box-sizing: border-box;
  }
  body.page-template-page-fullwidth-notitle .vc_row { margin-left: 0 !important; margin-right: 0 !important; }
  body.page-template-page-fullwidth-notitle .wpb_column { padding-left: 0; padding-right: 0; }
  body.page-template-page-fullwidth-notitle .wpcf7 input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body.page-template-page-fullwidth-notitle .wpcf7 select,
  body.page-template-page-fullwidth-notitle .wpcf7 textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #d4cdbf; border-radius: 6px;
    margin-bottom: 8px; font-size: 14px; box-sizing: border-box;
  }
  body.page-template-page-fullwidth-notitle .wpcf7 input[type="submit"] {
    width: 100%; background: #10957f; color: #fff; border: 0; border-radius: 6px;
    padding: 12px; font-size: 15px; font-weight: 600;
  }
  /* contact map heading + the map itself: little side padding so it's not edge-to-edge */
  body.page-id-140 .container > .row { margin-left: 0 !important; margin-right: 0 !important; }
  body.page-id-140 .container > .row > p { padding-left: 14px; padding-right: 14px; }
  body.page-id-140 .wpb_gmaps_widget { padding-left: 14px; padding-right: 14px; box-sizing: border-box; }
  body.page-id-140 .wpb_map_wraper iframe,
  body.page-id-140 iframe[src*="maps"] {
    width: 100% !important; max-width: 100% !important; border-radius: 8px; display: block;
  }
}

/* ===========================================================================
   VERY SMALL PHONES (≤400px) — gentle tightening so the horizontal menu and
   header still fit without breaking the desktop-style arrangement.
   ======================================================================== */
@media (max-width: 400px) {
  #site-navigation .navbar-nav > li > a { padding: 8px 4px; font-size: 12px; }
  #masthead .header-top .phone { font-size: 14px; }
  #masthead .site-branding img { width: 128px; height: 57px; max-height: none; max-width: 128px; }
  #masthead .header-top .nav-pills.sub-menu > li > a { font-size: 10.5px; padding: 4px 7px; }
  .banner.home h1 { font-size: 13px !important; }   /* keep the headline on one line */
  .rentctg-info-column .wpb_text_column,
  .rentctg-info-column p, .rentctg-info-column li { font-size: 14px; }
}

/* ===========================================================================
   FLOATING CONTACT BUTTONS (WhatsApp + Call) — all viewports
   Pills with labels on desktop, compact circles on phones.
   ======================================================================== */
.rentctg-floating-contact {
  position: fixed; right: 22px; bottom: 22px; z-index: 99999;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  font-family: inherit; pointer-events: none;
}
.rentctg-floating-contact a {
  pointer-events: auto; width: 156px; height: 50px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.30);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rentctg-floating-contact a:hover,
.rentctg-floating-contact a:focus {
  transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.30);
  filter: brightness(1.04); outline: none;
}
.rentctg-floating-contact .rentctg-wa-btn   { background: linear-gradient(135deg,#13c45f 0%,#0b9f4b 100%); }
.rentctg-floating-contact .rentctg-call-btn { background: linear-gradient(135deg,#1268f3 0%,#0647b8 100%); }
.rentctg-floating-contact svg {
  width: 22px; height: 22px; display: block; fill: currentColor; flex: 0 0 auto;
}
.rentctg-floating-contact .rentctg-btn-text { white-space: nowrap; letter-spacing: .1px; }

@keyframes rentctg-soft-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(19,196,95,.34), 0 10px 26px rgba(0,0,0,.22); }
  70%  { box-shadow: 0 0 0 12px rgba(19,196,95,0), 0 10px 26px rgba(0,0,0,.22); }
  100% { box-shadow: 0 0 0 0 rgba(19,196,95,0), 0 10px 26px rgba(0,0,0,.22); }
}
.rentctg-floating-contact .rentctg-wa-btn { animation: rentctg-soft-pulse 2.8s infinite; }

@media (max-width: 767px) {
  .rentctg-floating-contact { right: 14px; bottom: 14px; gap: 10px; }
  .rentctg-floating-contact a { width: 50px; height: 50px; border-radius: 50%; padding: 0; }
  .rentctg-floating-contact .rentctg-btn-text { display: none; }
}