/* Fixes for the static export of kalahariworks.co.za */
body { overflow-x: clip; }

/* ---- hero (replaces Slider Revolution) ---- */
.kiw-hero {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(520px, 80vh, 800px);
  background: #10192a;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kiw-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.2); z-index: 1; }
.kiw-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
  animation: kiw-fade 18s infinite;
}
.kiw-slide--a { background-image: url(img/hero-2000.jpg); opacity: 1; animation-delay: 0s; }
.kiw-slide--b { background-image: url(img/hero-b-2000.jpg); animation-delay: 6s; }
.kiw-slide--c { background-image: url(img/hero-c-2000.jpg); animation-delay: 12s; }
@keyframes kiw-fade {
  0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kiw-slide { animation: none; } .kiw-slide--b, .kiw-slide--c { display: none; } }
.kiw-hero__title {
  position: relative; z-index: 2; margin: 0;
  font-family: "Arial Black", Gadget, sans-serif; font-weight: 300; color: #fff;
  background: rgba(12, 12, 12, .37); text-align: center;
  width: min(920px, 92%); padding: 0 .25em;
  font-size: clamp(32px, 5.6vw, 80px); line-height: 1.375;
  transform: translateY(clamp(20px, 8vh, 132px));
}

/* ---- "Providing Services" band (replaces the second slider) ---- */
.kiw-band {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(420px, 56vw, 700px);
  background: #222 url(img/band-2000.jpg) center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em;
}
.kiw-band__title {
  font-family: Arial, Helvetica, sans-serif; font-weight: 300; color: #fff;
  background: rgba(12, 12, 12, .2); text-align: center; width: min(700px, 92%);
  font-size: clamp(34px, 5vw, 72px); line-height: 1.1;
}
.kiw-band__sub {
  font-family: "Open Sans", Arial, sans-serif; font-weight: 400; color: #fff;
  background: rgba(0, 0, 0, .2); text-align: center; width: min(600px, 92%);
  font-size: clamp(17px, 2.2vw, 28px); line-height: 1.3; padding: .15em 0;
}
@media (max-width: 900px) {
  .kiw-slide--a { background-image: url(img/hero-900.jpg); }
  .kiw-slide--b { background-image: url(img/hero-b-900.jpg); }
  .kiw-slide--c { background-image: url(img/hero-c-900.jpg); }
  .kiw-band { background-image: url(img/band-900.jpg); }
}

/* ---- portfolio gallery: plain CSS grid instead of WPBakery's JS masonry ---- */
.vc_grid-container .vc_pageable-slide-wrapper {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 5px;
  height: auto !important; position: static !important;
}
.vc_grid-container .vc_grid-item {
  position: static !important; width: auto !important; float: none !important;
  left: auto !important; top: auto !important; padding: 0 !important; margin: 0 !important;
}
.vc_grid-container .vc_pageable-slide-wrapper::before, .vc_grid-container .vc_pageable-slide-wrapper::after { display: none !important; }
@media (max-width: 768px) { .vc_grid-container .vc_pageable-slide-wrapper { grid-template-columns: repeat(2, 1fr); } }

/* ---- show the rows WPBakery hid on small screens (Civil Works / Project Management) ---- */
.vc_row[class*="uvc_hidden-xs"] { display: flex !important; }
@media (max-width: 1024px) { .vc_row[class*="uvc_hidden-xs"] { flex-wrap: wrap; } .vc_row[class*="uvc_hidden-xs"] > .wpb_column { width: 100%; margin-left: 0; } }

a.kiw-contact-link { color: inherit; text-decoration: none; }
a.kiw-contact-link:hover { text-decoration: underline; }

/* mobile header: the page contains a normal bar and a sticky bar; show only the one for the current state */
.masthead:not(.sticky-mobile-on) .mobile-header-bar:has(+ .mobile-header-bar) { display: none !important; }
.masthead.sticky-mobile-on .mobile-header-bar + .mobile-header-bar { display: none !important; }

.masthead.sticky-mobile-on .mobile-header-bar a.dt-mobile-menu-icon:first-of-type:not(:only-of-type) { display: none !important; }

.dt-mobile-header .dt-close-mobile-menu-icon { left: auto !important; right: 38px !important; }

.header-space + .header-space { display: none !important; }
.vc_row.vc_custom_145708844675 { margin-top: 0 !important; }
.vc_row.vc_custom_145708844675 > .wpb_column > .vc_column-inner { padding-top: 0 !important; }

/* search needs WordPress; hide it */
.mini-search, .popup-search-wrap, .searchform { display: none !important; }

/* ---- lightbox controls (original PNGs were not saved) ---- */
.lb-nav a.lb-prev { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='60' viewBox='0 0 34 60'%3E%3Cpath d='M26 6 8 30l18 24' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 48% / 34px 60px no-repeat; }
.lb-nav a.lb-next { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='60' viewBox='0 0 34 60'%3E%3Cpath d='M8 6l18 24L8 54' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 48% / 34px 60px no-repeat; }
.lb-data .lb-close {
  position: fixed !important; top: 16px; right: 16px; z-index: 100000;
  width: 46px; height: 46px; float: none; border-radius: 50%; cursor: pointer; opacity: 1;
  background: rgba(0,0,0,.75) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M6 6l18 18M24 6 6 24' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat; border: 2px solid #fff;
}
.lb-data .lb-close:hover { background-color: #000; }
.lightbox .lb-image { max-width: 94vw !important; }
.lb-cancel { background: none; }