/* ===========================================================
   KOSIPO-PODS brand layer — keeps the base layout intact,
   only applies brand fonts + logo-safe tweaks.
   (Brand colours are swapped directly in the source HTML/CSS:
    legacy teal #5babba -> KOSIPO Green #1F4D3A.)
   Palette: KOSIPO Green #1F4D3A · Midnight Navy #16233B
            Warm Grey #F8F8F6 · White #FFFFFF
   Type: Manrope (Bold headings / Medium menu+CTA / Regular body)
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --k-green:#1F4D3A; --k-navy:#16233B; --k-grey:#F8F8F6; --k-white:#FFFFFF;
}

/* ---- Typography: Manrope everywhere ---- */
html, body, p, li, a, span, div, input, textarea, button, select,
.menu a, .navbar, .wpb_text_column, .subfooter{
  font-family:'Manrope',Arial,Helvetica,sans-serif !important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
  font-family:'Manrope',Arial,Helvetica,sans-serif !important;
  font-weight:800 !important; letter-spacing:-.01em;
}
.menu > li > a{ font-weight:600 !important; }

/* ---- Header: keep white so the dark KOSIPO logo reads ---- */
header, header.header-solid, header.header-solid.smaller{ background:#fff !important; }
/* one logo only (theme swaps to .logo-2 on sticky, which caused the white box) */
header h1#logo .logo-2{ display:none !important; }
header h1#logo .logo{ display:inline-block !important; }
header .logo{ height:auto !important; width:auto !important; max-height:56px !important; }

/* Desktop: flex header row so logo + nav are vertically centred and a bigger
   logo fits without overflowing — both in the normal and scrolled states. */
@media (min-width:992px){
  header.header-solid .container .col-md-12{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
  }
  header #logo{ margin:0 !important; padding:16px 0 !important; height:auto !important; float:none !important;
    display:flex !important; align-items:center !important; }
  header nav{ float:none !important; margin:0 !important; }
  header #mainmenu{ display:flex !important; align-items:center !important; margin:0 !important; }
  /* scrolled / sticky header: shrink logo so nothing overflows */
  header.header-solid.smaller #logo{ padding:8px 0 !important; }
  header.header-solid.smaller .logo{ max-height:52px !important; }
}
/* nav text dark on the white header (theme defaults to white) */
header .menu a, header nav a, header #mainmenu a{ color:#16233B !important; }
header .menu > li > a:hover,
header .menu > li.current-menu-item > a,
header .menu > li.active > a{ color:var(--k-green) !important; }
header .menu ul{ background:#fff !important; }
header .menu ul a{ color:#16233B !important; }

.k-legal{ font-size:12.5px; line-height:1.6; opacity:.8; }

/* Brand carousel (hotel logos) — consistent sizing + tasteful greyscale */
.wpb_images_carousel .vc_inner{ display:flex; align-items:center; justify-content:center; height:90px; }
.wpb_images_carousel .vc_inner img{
  max-height:62px !important; width:auto !important; height:auto !important;
  object-fit:contain; filter:grayscale(1); opacity:.72; transition:.2s;
}
.wpb_images_carousel .vc_inner img:hover{ filter:none; opacity:1; }

/* Footer mega-menu headings: the global h3 weight made these oversized and
   overlapping ("InsightsContact"). Restore compact, normal-weight headings. */
.wpb_wrapper h3[style*="font-weight: normal"]{
  font-weight:600 !important; font-size:16px !important;
  letter-spacing:.01em !important; line-height:1.3 !important;
  margin:0 0 14px !important; white-space:nowrap;
}

/* ---- Portfolio gallery: clean uniform grid (override masonry/isotope) ---- */
.gallery.de-gallery{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:6px !important; height:auto !important; float:none !important; position:static !important;
}
.gallery.de-gallery .item{
  position:static !important; width:auto !important; height:auto !important;
  float:none !important; margin:0 !important; transform:none !important;
  left:auto !important; top:auto !important; opacity:1 !important;
}
.gallery.de-gallery .item .picframe{ height:100% !important; overflow:hidden; }
.gallery.de-gallery .item img{
  width:100% !important; height:270px !important; object-fit:cover !important; display:block;
}
/* one gallery only — hide the Hotels/Student/All filter tabs */
.project-filter, ul#filters{ display:none !important; }
@media(max-width:980px){ .gallery.de-gallery{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:600px){ .gallery.de-gallery{ grid-template-columns:1fr !important; } }

/* ---- Dropdown submenus: white panel with dark, readable links ---- */
header #mainmenu ul,
header #mainmenu li ul{
  background:#fff !important; border:1px solid #e7eae8 !important;
  box-shadow:0 12px 28px rgba(20,40,30,.14) !important;
}
header #mainmenu ul li a{ color:#16233B !important; background:#fff !important; }
header #mainmenu ul li a:hover{ color:#1F4D3A !important; background:#f4f6f5 !important; }

/* ---- "Driving the Future" (Vision/Mission + video): align video to images ---- */
.vc_custom_1481776532520 .row{ align-items:flex-start !important; }
.vc_custom_1481776532520 .vc_col-md-6:last-of-type{ margin-top:99px !important; }
.vc_custom_1481776532520 .vc_row.vc_inner{
  display:flex !important; flex-wrap:wrap; align-items:flex-start !important;
}
.vc_custom_1481776532520 .vc_row.vc_inner > .wpb_column{ display:flex; flex-direction:column; }
.vc_custom_1481776532520 .vc_row.vc_inner figure.pic-hover{ margin:0 0 18px !important; line-height:0; }
.vc_custom_1481776532520 .vc_row.vc_inner figure.pic-hover img{
  width:100% !important; height:240px !important; object-fit:cover !important; display:block;
}

/* Footer mega-menu: drop the 115px spacer so the columns align near the top */
.menu-footer-spacer{ height:0 !important; }
.menu-footer-spacer .vc_empty_space_inner{ height:0 !important; }

/* "Why Choose" parallax: dark overlay so text stays readable over the photo */
.vc_custom_1556138349565{ position:relative; }
.vc_custom_1556138349565::before{ content:""; position:absolute; inset:0;
  background:rgba(13,20,16,.62); z-index:0; pointer-events:none; }
.vc_custom_1556138349565 > *{ position:relative; z-index:1; }

/* "Our Process" parallax shares the same photo as "Why Choose" — same overlay */
.vc_custom_1556138362205{ position:relative; }
.vc_custom_1556138362205::before{ content:""; position:absolute; inset:0;
  background:rgba(13,20,16,.62); z-index:0; pointer-events:none; }
.vc_custom_1556138362205 > *{ position:relative; z-index:1; }

/* Parallax sections: cover + centred so the high-res photo is sharp, not zoomed */
.vc_custom_1556138349565, .vc_custom_1556138362205{
  background-size:cover !important; background-position:center !important;
}

/* Green bands (.bg-color) + green CTA strips: white text for readability */
.bg-color h2, .bg-color h3, .bg-color h4, .bg-color p,
.bg-color .de_count h3, .bg-color .de_count .timer{ color:#fff !important; }
.bg-color .de_count span{ color:rgba(255,255,255,.85) !important; }
.call-to-action h3{ color:#fff !important; }
.call-to-action .btn{ color:#fff !important; border-color:rgba(255,255,255,.6) !important; }
.call-to-action .btn:hover{ background:#fff !important; color:var(--k-green) !important; }

/* Benefits row: equalise icon + heading heights so the 4 columns align */
.kbenefits .wpb_raw_html{ display:flex; align-items:center; justify-content:center; min-height:170px; }
.kbenefits .wpb_raw_html img{ height:96px !important; width:auto !important; }
.kbenefits .wpb_text_column h3{ min-height:2.6em; display:flex; align-items:center; justify-content:center; text-align:center; margin:0; }



/* Sectors ("Bathroom Pod Solutions for Every Sector") — site feature-box style */
.ksec-section{ padding:88px 0; background:#fff; }
.ksec-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.ksec-h2{ font-size:clamp(26px,3vw,38px); color:#16233B; margin:0 0 16px; font-weight:800; }
.ksec-lead{ max-width:920px; margin:0 0 48px; color:#5b6b73; font-size:18px; line-height:1.6; }
.ksec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 48px; }
.ksec-box{ display:block; }
.ksec-ic i{ font-size:34px; color:#1F4D3A; line-height:1; display:inline-block; margin-bottom:14px; }
.ksec-box h3{ font-size:20px; margin:0 0 10px; color:#16233B; font-weight:800; }
.ksec-box p{ color:#5b6b73; line-height:1.6; margin:0; font-size:15.5px; }
@media(max-width:900px){ .ksec-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ksec-grid{ grid-template-columns:1fr; } }

/* Our Process: 6 square step boxes in one row; keep original connector lines */
.de_tab.tab_steps .de_nav{ display:flex !important; flex-wrap:nowrap !important;
  max-width:1140px; margin:0 auto !important; gap:14px; }
.de_tab.tab_steps .de_nav li{ flex:1 1 0 !important; width:auto !important; min-width:0 !important;
  max-width:185px; margin:0 !important; text-align:center !important; }
.de_tab.tab_steps.style-2 .de_nav li span{
  display:flex !important; align-items:center !important; justify-content:center !important;
  aspect-ratio:1 !important; width:100% !important; padding:10px !important; box-sizing:border-box; }

/* Our Process on mobile: stack the steps vertically as full-width bars so the
   square (aspect-ratio:1) badges stop overlapping and clipping their labels. */
@media(max-width:767px){
  .de_tab.tab_steps .de_nav{ flex-direction:column !important; flex-wrap:nowrap !important;
    max-width:none; gap:10px; }
  .de_tab.tab_steps .de_nav li{ flex:0 0 auto !important; width:100% !important;
    max-width:none !important; }
  .de_tab.tab_steps.style-2 .de_nav li span{ aspect-ratio:auto !important; width:100% !important;
    height:auto !important; min-height:0 !important; padding:16px 18px !important; }
  .de_tab.tab_steps.style-2 .de_nav li.active span{ color:#fff !important; }
  .de_tab.tab_steps .de_nav li .v-border{ display:none !important; }
}