/* KVT Blue Metals – alignment fixes for the static site */

/* Testimonials: only 2 cards in a 3-column carousel -> center them */
.bauer-carousel-box .owl-stage-outer { text-align: center; }
.bauer-carousel-box .owl-stage { margin-left: auto; margin-right: auto; }

/* Submit buttons centred (no extra spinner space) */
.kvt-form .submit-wrap { text-align: center; }
.kvt-form.submitting .wpcf7-submit { opacity: .6; cursor: wait; }

/* Long e-mail addresses must wrap instead of being cut */
.bauer-icon-box .desc a, .bauer-icon-box .desc { overflow-wrap: anywhere; word-break: break-word; }

/* hCaptcha spacing */
.kvt-form .h-captcha { display: inline-block; margin: 5px 0 15px; max-width: 100%; }

@media (max-width: 767px) {
  /* hCaptcha is 303px wide: scale it so it fits inside the form card */
  .kvt-form .h-captcha { transform: scale(.82); transform-origin: left top; margin-bottom: 0; height: 70px; }

  /* "QUALITY IS OUR LANGUAGE" too big on phones */
  .bauer-content-box h2[style*="font-size: 54px"] { font-size: 32px !important; line-height: 1.25 !important; }

  /* space between stacked image and text columns */
  .vc_col-sm-6 .bauer-images-carousel,
  .vc_col-sm-6 .wpb_single_image { margin-bottom: 35px; }

  /* group-of-company captions: gap before next image */
  .wpb_single_image + .bauer-text, .vc_col-sm-4 .wpb_wrapper { margin-bottom: 20px; }
}

/* ================= PHONE VIEW (max 767px) ================= */
.kvt-mhero { display: none; }

@media (max-width: 767px) {
  /* --- Home: readable mobile hero instead of the tiny desktop slider --- */
  #rev_slider_1_1_wrapper { display: none !important; }
  .kvt-mhero { display: block; position: relative; height: 440px; overflow: hidden; background: #2b2b2b; }
  .kvt-mhero .s { position: absolute; inset: 0; background: url(../images/main-banner-1.jpg) center/cover no-repeat;
                  opacity: 0; transition: opacity .9s ease; display: flex; align-items: center; justify-content: center; }
  .kvt-mhero .s.on { opacity: 1; z-index: 1; }
  .kvt-mhero .s:before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
  .kvt-mhero .s.strip:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
                  background: url(../images/New-Project-1.png) center bottom/cover no-repeat; }
  .kvt-mhero .t { position: relative; z-index: 2; color: #fff; text-align: center; padding: 0 45px 40px; font-family: 'Poppins', sans-serif; }
  .kvt-mhero h2 { color: #fff; font-size: 30px; line-height: 38px; font-weight: 300; margin: 0 0 14px; }
  .kvt-mhero h2 b { font-weight: 700; }
  .kvt-mhero p { color: #fff; font-size: 14px; line-height: 22px; margin: 0; }
  .kvt-mhero .t { transform: translateY(15px); transition: transform .9s ease; }
  .kvt-mhero .s.on .t { transform: none; }
  .kvt-mhero button { position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; margin-top: -18px; border: 0;
                  border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 36px; padding: 0; cursor: pointer; }
  .kvt-mhero .prev { left: 6px; } .kvt-mhero .next { right: 6px; }
  .kvt-mhero .dots { position: absolute; z-index: 3; bottom: 14px; left: 0; right: 0; text-align: center; }
  .kvt-mhero .dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); margin: 0 4px; }
  .kvt-mhero .dots i.on { background: #f3d684; }

  /* --- Home "Our products" & clientele images: 2 per row instead of huge single images --- */
  .vc_col-sm-3:has(img[src*="projects-image"]) { width: 50% !important; float: left; }
  .vc_row:has(img[src*="projects-image"]) .vc_col-sm-3 .vc_column-inner { padding-left: 6px !important; padding-right: 6px !important; }

  /* --- Products page: 5 stone images 2 per row --- */
  .vc_col-sm-1\/5 { width: 50% !important; float: left; }
  .vc_col-sm-1\/5 .thumb img { width: 100%; height: auto; }

  /* --- Notable projects: centred, full-width photos --- */
  .wpb_single_image.vc_align_left { text-align: center; }
  .wpb_single_image.vc_align_left .vc_single_image-wrapper,
  .wpb_single_image.vc_align_left img { width: 100%; height: auto; }

  /* --- Clientele table fits the phone --- */
  .wpb_wrapper table { width: 100% !important; table-layout: fixed; }
  .wpb_wrapper table td, .wpb_wrapper table th { font-size: 12px !important; line-height: 18px !important;
       padding: 6px 7px !important; word-break: break-word; overflow-wrap: anywhere; }

  /* --- Top bar & header tidy --- */
  #top-bar .content { font-size: 13px; }

  /* --- WhatsApp button smaller so it does not cover text --- */
  a.float { width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 26px !important; bottom: 20px !important; left: 15px !important; }
  a.float i { margin-top: 0 !important; line-height: 48px !important; }

  /* --- Page title banners --- */
  #featured-title .main-title h1, #featured-title h1 { font-size: 26px !important; line-height: 34px !important; }

  /* --- Contact page Google map shorter --- */
  iframe[src*="google.com/maps"] { height: 300px !important; }
}

@media (max-width: 767px) {
  .vc_col-sm-1\/5:nth-child(5) { float: none; clear: both; margin: 0 auto; }
  .kvt-form .h-captcha { display: block; width: 303px; margin-left: auto; margin-right: auto; transform-origin: center top; }
  h2, h3 { line-height: 1.3 !important; }
}

/* ===== Compact phone header + hero (like kvtconcrete.com) ===== */
@media (max-width: 991px) {
  #top-bar { display: none !important; }
  #site-header { position: relative; }
  #site-header #site-header-inner, #site-header .wrap-inner { position: relative; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 64px; }
  #site-logo { float: none !important; display: block; text-align: left !important; padding: 8px 60px 8px 0 !important; margin: 0 !important; }
  #site-logo-inner { max-width: 230px !important; margin: 0 !important; }
  #site-logo-inner img { max-height: 48px !important; width: auto !important; }
  #header-aside { display: none !important; }
  #site-header .mobile-button { position: absolute !important; right: 0 !important; top: 50% !important;
      transform: translateY(-50%); margin: 0 !important; float: none !important; z-index: 5; }
  #site-header-wrap, #site-header { height: auto !important; }
}
@media (max-width: 767px) {
  .kvt-mhero { height: 260px; }
  .kvt-mhero .t { padding: 0 50px 18px; }
  .kvt-mhero h2 { font-size: 21px; line-height: 28px; margin-bottom: 8px; }
  .kvt-mhero p { display: none; }
  .kvt-mhero .s.strip:after { height: 40px; }
  .kvt-mhero button { width: 40px; height: 40px; margin-top: -20px; line-height: 40px; font-size: 24px;
      background: rgba(60,60,60,.75); }
  .kvt-mhero .dots { bottom: 8px; }
}
@media (max-width: 991px) {
  #site-header .site-navigation-wrap > .inner { top: 0 !important; bottom: 0 !important; height: 64px !important; pointer-events: none; }
  #site-header .mobile-button { left: auto !important; pointer-events: auto; }
}
@media (max-width: 991px) {
  #site-header .site-navigation-wrap > .inner { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
}
@media (max-width: 991px) {
  #site-header .mobile-button { top: 25px !important; transform: none !important; margin-top: 0 !important; }
}
@media (max-width: 991px) {
  #site-header .site-navigation-wrap > .inner { transform: none !important; margin-top: 0 !important; }
}
@media (max-width: 991px) {
  #site-header .site-navigation-wrap > .inner { left: 18px !important; right: 18px !important; width: auto !important; }
  #site-header .mobile-button { right: 0 !important; }
}