.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== HERO HEADER (NO JS) - UPDATED VERSION ===== */
.ib-hero-nojs{
  --accent:#ff8c00;
  --nav:#ff8c00;
  position: relative;
  min-height: 88vh;
  color: #fff;
  overflow: hidden;
}

/* container */
.ib-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

/* topbar */
.ib-topbar{
  position: relative;
  z-index: 6;
  padding: 14px 0;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(3px);
}
.ib-topbar-right{
  display:flex;
  gap: 26px;
  justify-content:flex-end;
  align-items:center;
  color: rgba(255,255,255,0.92);
  font-size:16px;
}
.ib-topitem{ display:inline-flex; align-items:center; gap:10px; }
.ib-ico{ color: var(--accent); font-weight: 900; }

/* nav */
.ib-navwrap{ position: relative; z-index: 6; }
.ib-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 14px 0;
  position: relative; /* needed for mobile dropdown placement */
}
.ib-logo{
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding: 14px 18px;
}
.ib-logo img{
  display:block;
  max-width: 220px;
  max-height: 64px;
  width:auto;
  height:auto;
  object-fit: contain;
}
.ib-menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 34px;
  background: var(--nav);
  padding: 18px 34px;
}
.ib-link{
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.ib-plus{ font-weight:900; }

/* ✅ No-JS burger */
.ib-nav-toggle{
  display:none; /* hidden checkbox */
}

/* Burger label */
.ib-burger{
  display:none;
  margin-left:auto;
  width: 46px;
  height: 42px;
  background: var(--nav);
  cursor: pointer;
  padding: 10px;
  user-select: none;
}
.ib-burger span{
  display:block;
  height: 3px;
  background:#111;
  margin: 6px 0;
}

/* mobile menu */
.ib-mobile{
  display:none; /* opened by checkbox */
  background: var(--nav);
  padding: 18px 22px;
  width: 100%;
}
.ib-mobile a{
  display:block;
  padding: 12px 0;
  color:#111;
  text-decoration:none;
  font-weight:800;
}

/* IMPORTANT:
   The old .elementor-kit-6 .ib-nav-toggle:checked ~ .ib-mobile only works
   AFTER we update your HTML to place .ib-mobile inside .ib-nav (right after burger).
   We'll do that when you upload your HTML next.
*/

/* slideshow layers */
.ib-slides{
  position:absolute;
  inset:0;
  z-index: 1;
}
.ib-slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
}

/* ✅ Put your images here */
.ib-slide.s1{
  background-image: url("https://declasshotel.com.ng/ibabo/wp-content/uploads/2026/01/DJI_0794.jpg-scaled.jpeg");
  animation: ibFadeZoom 14s infinite;
}
.ib-slide.s2{
  background-image: url("https://declasshotel.com.ng/ibabo/wp-content/uploads/2026/01/HAP1561.jpg-scaled.jpeg");
  animation: ibFadeZoom 14s infinite;
  animation-delay: 7s;
}

/* Fade + zoom loop */
@keyframes ibFadeZoom{
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; transform: scale(1.02); }
  50%  { opacity: 1; transform: scale(1.10); }
  60%  { opacity: 0; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.10); }
}

/* dark overlay like screenshots */
.ib-hero-nojs::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(12,18,22,0.55);
  z-index: 2;
}

/* hero content */
.ib-hero-content{
  position: relative;
  z-index: 5;
  padding: 90px 22px 110px;
}
.ib-accent-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin: 0 0 22px;
}
.ib-title{
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(50px, 6vw, 88px);
}
.ib-sub{
  margin: 0 0 34px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}

/* buttons */
.ib-actions{ display:flex; gap: 18px; flex-wrap: wrap; }
.ib-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 58px;
  padding: 0 34px;
  font-weight: 800;
  text-decoration:none;
  border-radius: 0;
  border: 2px solid transparent;
  transition: transform .18s ease;
}
.ib-btn-primary{ background: var(--accent); color:#fff; }
.ib-btn-ghost{ background: rgba(255,255,255,0.92); color:#111; }
.ib-btn:hover{ transform: translateY(-2px); }

/* ================================
   RESPONSIVE (UPDATED)
================================ */
@media (max-width: 980px){
  .ib-hero-nojs{ min-height: 92vh; }

  .ib-topbar-right{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    text-align: center;
    font-size: 14px;
  }

  /* Hide desktop menu + show burger */
  .ib-menu{ display:none; }
  .ib-burger{ display:block; }

  /* Make logo + burger align properly */
  .ib-nav{ gap: 12px; }

  .ib-logo{ padding: 10px 12px; }
  .ib-logo img{ max-width: 160px; max-height: 52px; }

  .ib-burger{ width: 48px; height: 44px; padding: 10px 12px; }

  /* Mobile menu block sizing */
  .ib-mobile{ width: 100%; }

  .ib-hero-content{ padding: 70px 22px 90px; }
}

/* Small phones */
@media (max-width: 640px){
  /* Prevent sideways scrolling */
  .ib-hero-nojs,
  .ib-topbar,
  .ib-navwrap{
    overflow-x: hidden;
  }

  /* Hero content spacing */
  .ib-hero-content{ padding: 56px 16px 70px; }

  /* Title scale */
  .ib-title{
    font-size: clamp(36px, 11vw, 54px);
    line-height: 1.03;
  }

  .ib-sub{
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%;
  }

  /* ✅ Buttons side-by-side on mobile */
  .ib-actions{
    display:flex;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .ib-btn{
    width: 50%;
    max-width: none;
    height: 52px;
    padding: 0 12px;
    font-size: 15px;
  }

  /* Mobile nav spacing */
  .ib-mobile a{
    padding: 12px 0;
    font-size: 16px;
  }
}

/* Very small devices */
@media (max-width: 420px){
  .ib-logo img{
    max-width: 140px;
    max-height: 46px;
  }

  .ib-title{
    font-size: 34px;
  }

  /* keep buttons readable */
  .ib-btn{
    font-size: 14px;
    padding: 0 10px;
  }
}
/* ================================
   FIX BURGER TOGGLE (NO-JS)
   Paste at END of your CSS
================================ */

/* 1) Make checkbox hidden BUT still clickable via label */
.ib-nav-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* 2) Mobile menu default hidden */
@media (max-width: 980px){
  .ib-mobile{
    display: none;
    width: 100%;
    background: var(--nav);
    padding: 14px 18px;
    margin-top: 14px;
  }

  .ib-mobile a{
    display: block;
    padding: 12px 0;
    color: #111;
    text-decoration: none;
    font-weight: 800;
  }

  /* 3) ✅ THIS is the working toggle */
  .ib-nav-toggle:checked ~ .ib-mobile{
    display: block;
  }
}



































/* ===== YOU CAN TRUST US (Split + Slider) ===== */
.trust-split {
  --accent: #ff8c00; /* change this to your brand orange/gold */
  --text: #222;
  --muted: #6a6a6a;
  --max: 1200px;

  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 56px;
  align-items: start;
}

/* Left column */
.trust-left {
  padding-left: 10px;
}

.trust-title {
  margin: 0 0 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(44px, 5vw, 78px);
  color: var(--accent);
}

.trust-dotmark {
  color: var(--accent);
}

.trust-text {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
}

/* Right column */
.trust-right {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
}

.trust-track {
  display: flex;
  gap: 44px;
  will-change: transform;
  transition: transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Cards */
.trust-card {
  min-width: 320px;
  max-width: 340px;
}

.trust-num {
  width: 46px;
  height: 46px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.trust-card-title {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: #0b0b0b;
}

.trust-line {
  width: 46px;
  height: 4px;
  background: var(--accent);
  margin: 0 0 18px;
}

.trust-card-text {
  margin: 0;
  max-width: 330px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

/* Dots */
.trust-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #cfcfcf;
  opacity: 0.95;
}

.trust-dot.is-active {
  background: var(--accent);
  opacity: 1;
}

/* Responsive */
@media (max-width: 980px) {
  .trust-split {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 56px 0;
  }

  .trust-track {
    gap: 26px;
  }

  .trust-card {
    min-width: 280px;
    max-width: 320px;
  }
}
/* =========================================
   OUR CAPABILITIES (trust-*) MOBILE OPTIMIZE
   Paste at END of your CSS
========================================= */

/* Tablet: reduce spacing and make layout breathe */
@media (max-width: 1024px){
  .trust-split{
    gap: 26px;
    align-items: start;
  }

  .trust-title{
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.02;
  }

  .trust-text{
    font-size: 16px;
    line-height: 1.75;
    max-width: 100%;
  }

  .trust-card{
    min-width: 300px; /* keeps slider readable */
  }
}

/* Phones: stack + swipe */
@media (max-width: 768px){
  .trust-split{
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .trust-left{
    padding-right: 0;
  }

  .trust-title{
    font-size: clamp(32px, 9vw, 46px);
    margin-bottom: 10px;
  }

  .trust-text{
    font-size: 15px;
    line-height: 1.7;
  }

  /* Slider area: allow horizontal swipe */
  .trust-right{
    width: 100%;
  }

  /* IMPORTANT: the track needs a viewport wrapper behavior.
     Most builds already have it; if not, this still helps. */
  #trustTrack,
  .trust-track{
    display: flex;
    gap: 16px;
    will-change: transform;
  }

  /* Make cards mobile-friendly */
  .trust-card{
    min-width: 82%;
    max-width: 82%;
    padding: 18px 18px 20px;
  }

  .trust-num{
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .trust-card-title{
    font-size: 20px;
    margin: 10px 0 10px;
  }

  .trust-card-text{
    font-size: 15px;
    line-height: 1.65;
  }

  /* Dots: centered and smaller */
  .trust-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .trust-dot{
    width: 10px;
    height: 10px;
  }
}

/* Small phones: tighter card width */
@media (max-width: 480px){
  .trust-card{
    min-width: 88%;
    max-width: 88%;
  }

  .trust-title{
    font-size: 34px;
  }
}
















/* ===== SECTION 2: OVERVIEW FLOAT ONLY IMAGES + BIGGER DARK AREA ===== */
.cmx-wrap{
  --bg:#2f4650;          /* dark teal */
  --accent:#ff8c00;      /* orange */
  --max:1260px;
}

/* --- TOP (dark area) make it taller --- */
.cmx-top{
  background: var(--bg);
  padding: 48px 0 230px; /* ✅ increase bottom padding to make dark area taller */
  position: relative;
  z-index: 1;
}

.cmx-top-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 48px;
  align-items: start;
}

.cmx-title{
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1.05;
}

.cmx-subtitle{
  margin: 0;
  font-weight: 800;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.2;
}

.cmx-copy p{
  margin: 10px 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.65;
  max-width: 760px;
}

/* --- BOTTOM (white area) --- */
.cmx-bottom{
  background:#fff;
  position: relative;
  z-index: 2;
  margin-top: 0;         /* ✅ keep text area on white (no section overlap) */
  padding: 0 0 46px;     /* keep clean bottom spacing */
}

/* Card grid */
.cmx-bottom-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;

  /* ✅ pull ONLY the grid upward slightly (so images can overlap),
     but we'll push text back down inside cards */
  margin-top: -120px;
}

/* Card base */
.cmx-card{
  background:#fff;
  position: relative;
}

/* ✅ ONLY IMAGES FLOAT INTO DARK AREA */
.cmx-img{
  width:100%;
  height:240px;
  overflow:hidden;

  /* This makes ONLY the image float upward into the dark section */
  transform: translateY(-60px);

  /* optional depth for realism */
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.cmx-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ push the text area DOWN so it sits fully on white */
.cmx-card-title,
.cmx-underline,
.cmx-card-text{
  transform: translateY(60px); /* matches image lift, keeps text aligned with white */
}

/* Card text styles */
.cmx-card-title{
  margin: 18px 0 10px;
  font-size: 28px;
  font-weight: 800;
  color:#0b0b0b;
  line-height: 1.15;
}

.cmx-underline{
  width:42px;
  height:4px;
  background: var(--accent);
  margin: 10px 0 18px;
}

.cmx-card-text{
  margin:0;
  font-size:18px;
  line-height:1.7;
  color:#555;
  max-width:320px;
}

/* --- Responsive --- */
@media (max-width: 1024px){
  .cmx-top-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cmx-bottom-inner{
    grid-template-columns: repeat(2, 1fr);
    margin-top: -100px;
  }
  .cmx-img{
    transform: translateY(-50px);
  }
  .cmx-card-title,
  .cmx-underline,
  .cmx-card-text{
    transform: translateY(50px);
  }
  .cmx-top{
    padding: 44px 0 200px;
  }
}

@media (max-width: 640px){
  .cmx-bottom-inner{
    grid-template-columns: 1fr;
    margin-top: -90px;
  }
  .cmx-img{
    height: 220px;
    transform: translateY(-45px);
  }
  .cmx-card-title,
  .cmx-underline,
  .cmx-card-text{
    transform: translateY(45px);
  }
  .cmx-top{
    padding: 40px 0 180px;
  }
}
.cmx-card-title,
.cmx-underline,
.cmx-card-text{
  transform: translateY(25px);
}

.cmx-card-title{
  margin-top: 6px;
}

.cmx-img{
  transform: translateY(-40px);
}




.cmx-card-link{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  font-size:14px;
  color:#ED7D31; /* IBABO accent */
  text-decoration:none;
}

.cmx-card-link:hover{
  text-decoration:underline;
}



/* Make all cards equal-height + align "Learn more" consistently */
.cmx-bottom-inner{
  /* ensures all cards in the row stretch equally */
  align-items: stretch;
}

.cmx-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Keep titles tidy */
.cmx-card-title{
  margin-bottom: 10px;
  line-height: 1.15;
}

/* Clamp card text to exactly ~3 lines on desktop + mobile */
.cmx-card-text{
  margin-bottom: 0; /* so link spacing is controlled */
  line-height: 1.65;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* 👈 3 lines */
  overflow: hidden;
}

/* Push link to bottom so all links align */
.cmx-card-link{
  margin-top: auto;        /* 👈 key */
  padding-top: 10px;       /* space above link */
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  color: #ED7D31;
  text-decoration: none;
}

.cmx-card-link:hover{
  text-decoration: underline;
}






/* =========================================
   OVERVIEW (cmx) - MOBILE OPTIMIZATION
   Paste at END of your CSS
========================================= */

@media (max-width: 1024px){
  .cmx-top{
    padding: 50px 0 190px; /* tall dark area */
  }
  .cmx-top-inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .cmx-title{
    font-size: 44px;
    line-height: 1.05;
    margin-bottom: 10px;
  }

  .cmx-subtitle{
    font-size: 22px;
    line-height: 1.25;
  }

  .cmx-copy p{
    font-size: 16px;
    line-height: 1.75;
    max-width: 100%;
  }

  .cmx-bottom-inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: -95px; /* keeps overlap vibe */
  }

  .cmx-img{
    height: 210px;
    transform: translateY(-40px);
  }

  .cmx-card-title,
  .cmx-underline,
  .cmx-card-text{
    transform: translateY(30px);
  }
}

@media (max-width: 640px){
  .cmx-top{
    padding: 42px 0 170px;
  }

  .cmx-title{
    font-size: 38px;
  }

  .cmx-subtitle{
    font-size: 20px;
  }

  .cmx-bottom-inner{
    grid-template-columns: 1fr; /* single column on phones */
    gap: 18px;
    margin-top: -85px;
  }

  .cmx-card{
    border-radius: 0; /* optional: matches your industrial feel */
  }

  .cmx-img{
    height: 190px;
    transform: translateY(-34px); /* reduce float */
  }

  /* tighter image-to-text spacing */
  .cmx-card-title{
    margin-top: 6px;
    font-size: 22px;
  }

  .cmx-underline{
    margin: 10px 0 12px;
  }

  .cmx-card-text{
    font-size: 15px;
    line-height: 1.65;
  }

  .cmx-card-title,
  .cmx-underline,
  .cmx-card-text{
    transform: translateY(24px);
  }
}

@media (max-width: 420px){
  .cmx-title{ font-size: 34px; }
  .cmx-subtitle{ font-size: 18px; }
  .cmx-img{ height: 170px; }
}

/* Optional: make the counting numbers stand out */
.cmx-count{
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* =========================================
   OVERVIEW (cmx) – MOBILE OVERLAP FIX
   Prevent images from covering text
========================================= */

@media (max-width: 768px){

  /* Remove floating overlap effect on mobile */
  .cmx-img{
    transform: none !important;
    margin-bottom: 14px;
  }

  /* Reset text lift that was meant for desktop */
  .cmx-card-title,
  .cmx-underline,
  .cmx-card-text{
    transform: none !important;
  }

  /* Ensure each card has its own vertical space */
  .cmx-card{
    position: relative;
    padding-bottom: 22px;
  }

  /* Add clear separation between cards */
  .cmx-bottom-inner{
    row-gap: 32px;
  }
}


















/* ===============================
   RECENT WORK – CLEAN & STABLE
=============================== */

.rw-wrap{
  --accent:#ff8c00;
  --bg:#f1f1f1;
  --text:#111;
}

/* -------------------------------
   HEADER (light grey)
-------------------------------- */
.rw-head{
  background: var(--bg);
  padding: 90px 0 60px;
}

.rw-head-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 60px;
  align-items: center;
}

.rw-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin-bottom: 26px;
}

.rw-title{
  margin: 0;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.rw-text{
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  max-width: 640px;
}

/* -------------------------------
   PANELS – DESKTOP
-------------------------------- */
.rw-panels{
  display: flex;
  height: 360px;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.rw-panel{
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
}

/* Image fills card */
.rw-panel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay base */
.rw-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 24px;
  color: #fff;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72),
    rgba(0,0,0,0.35),
    rgba(0,0,0,0)
  );
}

.rw-overlay h3{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 46px);
  font-weight: 900;
}

.rw-overlay p{
  margin: 0 0 16px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

/* Button – ONLY clickable element */
.rw-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  background: rgba(46,78,90,0.9);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  position: relative;
  z-index: 5;
}

/* -------------------------------
   DESKTOP HOVER (ONLY real hover devices)
-------------------------------- */
@media (hover:hover) and (pointer:fine){

  .rw-panel{
    transition: flex 420ms ease;
  }

  .rw-panel img{
    transition: transform 420ms ease;
  }

  .rw-panels:hover .rw-panel{
    flex: 0.85;
  }

  .rw-panels:hover .rw-panel:hover{
    flex: 3.2;
  }

  .rw-panels:hover .rw-panel:hover img{
    transform: scale(1.08);
  }
}

/* -------------------------------
   BOTTOM CTA (light grey)
-------------------------------- */
.rw-bottom{
  background: var(--bg);
  padding: 70px 16px 90px;
}

.rw-cta{
  display: flex;
  justify-content: center;
}

.rw-all{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 58px;
  padding: 0 44px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  border: none;
}

/* -------------------------------
   TABLET
-------------------------------- */
@media (max-width: 900px){
  .rw-head-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .rw-head{
    padding: 70px 0 40px;
  }

  .rw-text{
    font-size: 15px;
    line-height: 1.7;
  }
}

/* -------------------------------
   MOBILE – STABLE SWIPE (NO EFFECTS)
-------------------------------- */
@media (max-width: 768px){

  .rw-panels{
    height: auto;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 20px;
    margin: 0 -16px;
  }

  .rw-panel{
    flex: 0 0 88%;
    scroll-snap-align: start;
    background: #000;
    transition: none;
    transform: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rw-panel img{
    height: 260px;
    pointer-events: none;     /* image cannot be tapped */
    transform: none;
    transition: none;
  }

  /* Overlay ALWAYS visible on mobile */
  .rw-overlay{
    opacity: 1;
    transform: none;
    pointer-events: none;
    padding: 18px 18px 20px;
  }

  /* Button still clickable */
  .rw-btn{
    pointer-events: auto;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  .rw-panels::-webkit-scrollbar{
    height: 0;
  }
}

/* -------------------------------
   SMALL PHONES
-------------------------------- */
@media (max-width: 420px){
  .rw-panel{
    flex-basis: 92%;
  }

  .rw-panel img{
    height: 240px;
  }
}











































































/* ===== CTA / TRUST SECTION (matches screenshot) ===== */
.trust-cta{
  --accent:#ff8c00;
  --overlay:#2f4650;

  /* Replace this background with your own image URL */
  background-image:
    linear-gradient(rgba(47,70,80,0.82), rgba(47,70,80,0.82)),
    url("https://declasshotel.com.ng/ibabo/wp-content/uploads/2026/01/HAP1550.jpg-1-scaled.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 120px 0;
  text-align: center;
  position: relative;
}

.trust-cta__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px;
}

.trust-cta__eyebrow{
  margin: 0 0 18px;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 4.2vw, 70px);
  line-height: 1.05;
}

.trust-cta__title{
  margin: 0 0 22px;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4.6vw, 74px);
  line-height: 1.08;
}

.trust-cta__text{
  margin: 0 auto 34px;
  max-width: 760px;
  color: rgba(255,255,255,0.92);
  font-size: 18px;
  line-height: 1.8;
}

.trust-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 800;

  height: 76px;
  padding: 0 70px;
  font-size: 22px;

  border: 0;
  border-radius: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.trust-cta__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.28);
  background: #e67600;
}

/* Mobile spacing */
@media (max-width: 640px){
  .trust-cta{ padding: 90px 0; }
  .trust-cta__btn{
    width: 100%;
    max-width: 320px;
    height: 66px;
    font-size: 20px;
    padding: 0 26px;
  }
}




/* ===== ORANGE CONTACT STRIP ===== */
.contact-strip{
  background: #ff8c00; /* orange */
  padding: 60px 0;
}

.contact-strip__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: center;
}

/* Each item */
.contact-item{
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Icon box */
.contact-icon{
  width: 78px;
  height: 78px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon svg{
  width: 34px;
  height: 34px;
}

/* Text */
.contact-text h4{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: #000;
}

.contact-text p{
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #111;
}

/* Responsive */
@media (max-width: 900px){
  .contact-strip__inner{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* ===== CONTACT STRIP HOVER ANIMATIONS ===== */

/* Smooth transitions */
.contact-item,
.contact-icon,
.contact-text h4,
.contact-text p {
  transition: all 0.35s ease;
}

/* Lift + subtle emphasis on hover */
.contact-item:hover {
  transform: translateY(-6px);
}

/* Icon animation */
.contact-item:hover .contact-icon {
  background: #111;
  transform: scale(1.08) rotate(-2deg);
}

/* Icon glow effect */
.contact-item:hover .contact-icon {
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* Text color emphasis */
.contact-item:hover .contact-text h4 {
  color: #000;
}

.contact-item:hover .contact-text p {
  color: #222;
}

/* Cursor hint */
.contact-item {
  cursor: pointer;
}







/* ===== FOOTER INFO (World map dotted background) ===== */
.map-footer{
  --accent:#ff8c00;
  --ink:#111;
  --muted:#555;

  position: relative;
  background: #fff;
  padding: 90px 0 80px;
  overflow: hidden;
}

/* dotted world-map feel (no image needed) */
.map-footer::before{
  content:"";
  position:absolute;
  inset:-80px -80px;
  background:
    radial-gradient(circle, rgba(0,0,0,0.09) 2px, transparent 2.5px) 0 0 / 12px 12px;
  opacity: .35;
  mask-image:
    radial-gradient(closest-side, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
  -webkit-mask-image:
    radial-gradient(closest-side, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}

/* top thin line (like screenshot) */
.map-footer::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background: var(--accent);
  opacity:.9;
}

.map-footer__inner{
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 70px;
  align-items: start;
}

/* Brand */
.map-footer__logo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 18px;
}

.map-footer__hex{
  width: 38px;
  height: 38px;
  background: var(--accent);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.map-footer__name{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.map-footer__desc{
  margin: 0 0 24px;
  max-width: 520px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

/* Social icons */
.map-footer__socials{
  display:flex;
  gap: 18px;
  align-items:center;
  margin-top: 10px;
}

.map-footer__social{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  color: var(--accent);
  text-decoration:none;
  transition: transform .25s ease, opacity .25s ease;
}

.map-footer__social svg{
  width: 20px;
  height: 20px;
}

.map-footer__social:hover{
  transform: translateY(-3px) scale(1.08);
  opacity: .9;
}

/* Headings */
.map-footer__heading{
  margin: 6px 0 18px;
  color: var(--accent);
  font-size: 26px;
  font-weight: 900;
}

/* Links */
.map-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.map-footer__links a{
  display:flex;
  align-items:center;
  gap: 14px;
  color: #222;
  text-decoration:none;
  font-size: 18px;
  transition: transform .25s ease, color .25s ease;
}

.map-footer__chev{
  display:inline-block;
  font-size: 30px;
  line-height: 1;
  color:#000;
  transform: translateY(-1px);
}

.map-footer__links a:hover{
  transform: translateX(6px);
  color: #000;
}

/* Contact rows */
.map-footer__contact{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.map-footer__row{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  color:#222;
  font-size:18px;
  line-height:1.7;
}

.map-footer__i{
  width: 34px;
  height: 34px;
  color:#000;
  display:grid;
  place-items:center;
  flex: 0 0 34px;
}

.map-footer__i svg{
  width: 22px;
  height: 22px;
}

/* Responsive */
@media (max-width: 980px){
  .map-footer__inner{
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .map-footer{
    padding: 70px 0 60px;
  }
}



/* ===== FOOTER LOGO (IMAGE-BASED) ===== */
.map-footer__logo{
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.map-footer__logo-img{
  max-width: 180px;   /* controls logo size */
  max-height: 64px;   /* prevents oversized logos */
  width: auto;
  height: auto;
  object-fit: contain;
}






/* ABOUT US PAGE BEGINS */



/* ================================
   ABOUT HERO HEADER (HOME-LIKE)
================================ */
.ab-hero{
  --accent:#ff8c00;
  --nav:#ff8c00;
  position: relative;
  min-height: 62vh;
  color:#fff;
  overflow:hidden;
}

/* Container */
.ab-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Topbar */
.ab-topbar{
  position: relative;
  z-index: 6;
  padding: 14px 0;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(3px);
}
.ab-topbar-right{
  display:flex;
  gap: 26px;
  justify-content:flex-end;
  align-items:center;
  color: rgba(255,255,255,0.92);
  font-size:16px;
}
.ab-topitem{ display:inline-flex; align-items:center; gap:10px; }
.ab-ico{ color: var(--accent); font-weight: 900; }

/* Nav */
.ab-navwrap{ position: relative; z-index: 6; }
.ab-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 14px 0;
}
.ab-logo{
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding: 14px 18px;
}
.ab-logo img{
  display:block;
  max-width: 220px;
  max-height: 64px;
  width:auto;
  height:auto;
  object-fit: contain;
}

.ab-menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 34px;
  background: var(--nav);
  padding: 18px 34px;
}
.ab-link{
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size:18px;
  white-space:nowrap;
}
.ab-link.is-active{
  color:#111;
  position: relative;
}
.ab-link.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  bottom:-10px;
  background:#111;
}

/* ✅ No-JS burger */
.ab-nav-toggle{ display:none; }
.ab-burger{
  display:none;
  margin-left:auto;
  width: 46px;
  height: 42px;
  background: var(--nav);
  cursor: pointer;
  padding: 10px;
}
.ab-burger span{
  display:block;
  height: 3px;
  background:#111;
  margin: 6px 0;
}

/* Mobile menu */
.ab-mobile{
  display:none;
  background: var(--nav);
  padding: 12px 22px 18px;
}
.ab-mobile a{
  display:block;
  padding: 12px 0;
  color:#111;
  text-decoration:none;
  font-weight:800;
}
.ab-mobile a.is-active{ text-decoration: underline; }

/* ✅ Toggle open (works ONLY if mobile nav is right after navwrap) */
.ab-nav-toggle:checked ~ .ab-mobile{ display:block; }

/* Background image */
.ab-bg{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("https://declasshotel.com.ng/ibabo/wp-content/uploads/2026/01/20260121_172700.jpg-1-scaled.jpeg");
  background-size:cover;
  background-position:center;
  transform: scale(1.05);
}

/* Dark overlay */
.ab-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(12,18,22,0.55);
  z-index:2;
}

/* Hero content */
.ab-hero-content{
  position: relative;
  z-index: 5;
  padding: 90px 22px 90px;
}
.ab-accent-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin: 0 0 18px;
}
.ab-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(42px, 6vw, 86px);
}

/* Responsive */
@media (max-width: 980px){
  .ab-menu{ display:none; }
  .ab-burger{ display:block; }
  .ab-hero-content{ padding: 70px 22px 70px; }
  .ab-topbar-right{ justify-content:center; flex-wrap:wrap; gap:10px 16px; font-size:14px; }
  .ab-logo img{ max-width: 160px; max-height: 52px; }
}

/* Phones */
@media (max-width: 640px){
  .ab-hero{ min-height: 56vh; }
  .ab-hero-content{ padding: 58px 16px 58px; }
  .ab-title{ font-size: clamp(36px, 11vw, 54px); }
}
/* =====================================
   ABOUT HERO – REMOVE WHITE GAP
===================================== */

/* Ensure hero fills viewport */
.ab-hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #000; /* fallback */
}

/* Background must fill hero */
.ab-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Dark overlay (optional but recommended) */
.ab-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(10,16,22,0.55);
}

/* Keep content above bg */
.ab-hero-content,
.ab-topbar,
.ab-navwrap{
  position: relative;
  z-index: 2;
}

/* Kill unwanted margins added by theme / Elementor */
.ab-hero,
.ab-hero *{
  margin-bottom: 0;
}

/* Mobile safety */
@media (max-width: 768px){
  .ab-hero{
    min-height: 100svh; /* fixes iOS white gap */
  }
}
/* =====================================
   ABOUT HERO – FORCE FULL WIDTH + REMOVE WHITE STRIP
   Paste at END of CSS
===================================== */

/* Full-bleed header even inside Elementor containers */
.ab-hero{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  background: #000;
}

/* Make background truly cover the whole hero */
.ab-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important; /* important: prevents odd edges/strips */
}

/* Prevent horizontal page scroll caused by 100vw */
html, body{
  overflow-x: hidden !important;
}

/* iOS viewport gap fix */
@media (max-width: 768px){
  .ab-hero{ min-height: 100svh !important; }
}
/* If hero is inside an Elementor section/column adding padding */
.ab-hero{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* =========================================
   FIX: WHITE SIDE GAP (Elementor / Boxed)
   Paste at END of CSS
========================================= */

/* Make the page background match (so no white shows even if overflow happens) */
html, body{
  background:#ffffff !important;   /* ✅ changed from black to deep teal/blue */
  overflow-x:hidden !important;
}

/* Force the hero to break out of Elementor boxed container */
.ab-hero{
  width:100vw !important;
  max-width:100vw !important;

  /* breakout trick */
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  /* prevent any inner overflow */
  overflow:hidden !important;
  display:block !important;

  /* ✅ keep a nice dark tone behind the image */
  background:#0f1f2a !important;
}

/* Ensure background truly covers the full hero width */
.ab-bg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Optional: dark overlay to improve text readability */
.ab-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(10,16,22,0.45); /* ✅ slightly lighter than before */
}

/* Safety: if any child causes horizontal overflow, kill it */
.ab-hero *{
  max-width:100% !important;
}
/* =====================================
   ABOUT PAGE – REDUCE HERO HEIGHT
===================================== */

/* Reduce overall hero height */
.ab-hero{
  min-height: 45vh !important; /* was ~100vh */
}

/* Reduce vertical padding inside hero */
.ab-hero-content{
  padding: 50px 22px 50px !important; /* was ~90px+ */
}

/* Reduce title size */
.ab-title{
  font-size: clamp(28px, 4vw, 48px) !important; /* half-ish size */
  line-height: 1.05;
}

/* Slightly reduce accent line spacing */
.ab-accent-line{
  margin-bottom: 12px;
}

/* Mobile refinement */
@media (max-width: 768px){
  .ab-hero{
    min-height: 38vh !important;
  }

  .ab-hero-content{
    padding: 40px 16px 40px !important;
  }

  .ab-title{
    font-size: 32px !important;
  }
}




















/* ================================
   ABOUT — OVERVIEW SECTION
================================ */
.ab-overview{
  --accent:#ff8c00;
  --dark:#2f434b;  /* deep teal-grey */
  --max:1240px;
  background: var(--dark);
  color:#fff;
  padding: 90px 0;
}

.abov-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.05fr 1.55fr;
  gap: 70px;
  align-items: start;
}

.abov-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin-bottom: 22px;
}

.abov-title{
  margin: 0 0 26px;
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.abov-meta{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.abov-chip{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.12);
}

.abov-label{
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.abov-value{
  font-weight: 900;
  font-size: 20px;
  color: #fff;
}

.abov-right{ max-width: 720px; }

.abov-text{
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.92);
}

.abov-bullets{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.abov-bullet{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.6;
}

.abov-bullet::before{
  content:"";
  position:absolute;
  left:0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.abov-cta{
  margin-top: 32px;
}

.abov-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 56px;
  padding: 0 34px;
  background: var(--accent);
  color:#fff;
  font-weight: 900;
  text-decoration: none;
  border: none;
  transition: transform .18s ease, filter .18s ease;
}

.abov-btn:hover{
  transform: translateY(-2px);
  filter: brightness(0.95);
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 980px){
  .abov-inner{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .abov-bullets{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ab-overview{ padding: 70px 0; }
  .abov-title{ font-size: 44px; }
  .abov-text{ font-size: 15px; line-height: 1.8; }
  .abov-btn{ width: 100%; max-width: 320px; }
}









/* ================================
   CAPABILITIES – LITERATURE SECTION
================================ */
.cap-lite{
  --accent:#ff8c00;
  --dark:#ffffff;
  --text:#1a1a1a;
  background:#fff;
  padding: 90px 0;
}

.cap-lite-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px 60px;
}

/* Individual item */
.cap-item{
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

/* Icon block (can be replaced with image) */
.cap-icon{
  flex: 0 0 54px;
  height: 54px;
  background: rgba(255,140,0,0.12);
  color: var(--accent);
  font-size: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

/* Text */
.cap-content h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.cap-content p{
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  max-width: 520px;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 980px){
  .cap-lite-inner{
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 640px){
  .cap-lite{
    padding: 70px 0;
  }

  .cap-item{
    gap: 18px;
  }

  .cap-icon{
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  .cap-content h3{
    font-size: 20px;
  }

  .cap-content p{
    font-size: 15px;
    line-height: 1.7;
  }
}













/* ================================
   Mission / Operations / Sustainability / Future
================================ */
.mo-wrap{
  --accent:#ff8c00;
  --bg:#f3f3f3;
  --text:#111;
  --muted:#3a3a3a;
  background: var(--bg);
  padding: 90px 0;
}

.mo-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

.mo-head{
  max-width: 720px;
  margin-bottom: 36px;
}

.mo-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin: 0 0 18px;
}

.mo-title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  font-size: clamp(34px, 4vw, 56px);
}

.mo-sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 16px;
}

/* Grid */
.mo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Card */
.mo-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.mo-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width: 6px;
  height: 100%;
  background: var(--accent);
  opacity: .9;
}

.mo-icon{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(255,140,0,0.12);
  color: #111;
  font-size: 22px;
  margin-bottom: 14px;
}

.mo-card-title{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}

.mo-text{
  margin: 0;
  color: #333;
  line-height: 1.75;
  font-size: 15px;
}

/* Hover */
.mo-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.10);
}

/* Responsive */
@media (max-width: 1024px){
  .mo-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .mo-wrap{ padding: 70px 0; }
  .mo-grid{ grid-template-columns: 1fr; }
  .mo-card{ padding: 20px 18px; }
}




.ibabo-sec3__kicker{
  color: #ff8c00; /* orange accent */
}














/* =========================================================
   CONTACT HEADER (ct-*) — CLEAN, NO-JS BURGER, NO WHITE DOT
   Use with:
   .ct-hero, .ct-topbar, .ct-navwrap, .ct-nav, .ct-menu,
   .ct-nav-toggle, .ct-burger, .ct-mobile, .ct-map, .ct-overlay
========================================================= */

.ct-hero{
  --accent:#ff8c00;
  position: relative;
  min-height: 55vh;
  color:#fff;
  overflow:hidden;
  background:#0f1f2a; /* fallback behind map */
}

/* container */
.ct-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

/* =======================
   TOPBAR
======================= */
.ct-topbar{
  position: relative;
  z-index: 6;
  padding: 12px 0;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(3px);
}

.ct-topbar-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 22px;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
}

.ct-topitem{ display:inline-flex; align-items:center; gap:10px; }
.ct-ico{ color: var(--accent); font-weight: 900; }

/* =======================
   NAV BAR
======================= */
.ct-navwrap{
  position: relative;
  z-index: 6;
}

.ct-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 14px 0;
}

/* logo */
.ct-logo{
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding: 14px 18px;
}
.ct-logo img{
  display:block;
  max-width: 190px;
  max-height: 62px;
  width:auto;
  height:auto;
  object-fit: contain;
}

/* desktop menu */
.ct-menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 30px;
  background: var(--accent);
  padding: 18px 34px;
}

.ct-menu a{
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size: 17px;
  white-space: nowrap;
}

.ct-menu a.is-active{
  position: relative;
}

.ct-menu a.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  background:#111;
}

/* =======================
   NO-JS BURGER TOGGLE
======================= */
/* Hide checkbox completely (fixes the "white dot") */
.ct-nav-toggle{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
}

/* burger button (hidden on desktop) */
.ct-burger{
  display:none;
  margin-left:auto;
  width: 46px;
  height: 42px;
  background: var(--accent);
  cursor:pointer;
  padding: 10px;
  -webkit-tap-highlight-color: transparent;
}
.ct-burger span{
  display:block;
  height: 3px;
  background:#111;
  margin: 6px 0;
}

/* mobile menu hidden by default */
.ct-mobile{
  display:none;
  background: var(--accent);
  padding: 12px 22px 18px;
}

.ct-mobile a{
  display:block;
  padding: 12px 0;
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size: 16px;
}

.ct-mobile a.is-active{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* toggle open */
.ct-nav-toggle:checked ~ .ct-mobile{
  display:block;
}

/* =======================
   MAP BACKGROUND
======================= */
.ct-map{
  position:absolute;
  inset:0;
  z-index: 1;
}
.ct-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* dark overlay */
.ct-overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  background: rgba(12,18,22,0.55);
}

/* =======================
   HERO CONTENT
======================= */
.ct-hero-content{
  position: relative;
  z-index: 5;
  padding: 80px 22px 60px;
}

.ct-accent-line{
  width: 72px;
  height: 5px;
  background: var(--accent);
  margin: 0 0 16px;
}

.ct-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(36px, 5vw, 64px);
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 980px){
  .ct-menu{ display:none; }
  .ct-burger{ display:block; }

  .ct-topbar-right{
    justify-content:center;
    flex-wrap:wrap;
    gap: 10px 16px;
    font-size: 14px;
    text-align:center;
  }

  .ct-logo img{
    max-width: 160px;
    max-height: 52px;
  }

  .ct-hero-content{
    padding: 60px 16px 40px;
  }

  .ct-hero{
    min-height: 48vh;
  }
}

@media (max-width: 640px){
  .ct-hero{ min-height: 44vh; }
  .ct-title{ font-size: 40px; }
}

/* optional: reduce iOS tap highlight everywhere in header */
.ct-hero, .ct-hero *{
  -webkit-tap-highlight-color: transparent;
}










/* ================================
   CONTACT INFO 3-CARDS (ct-info3)
================================ */
.ct-info3{
  --accent:#ff8c00;
  --text:#111;
  --muted:#4b4b4b;
  padding: 60px 0;
  background: transparent;
}

.ct-info3__wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 0;
  overflow: hidden;

  box-shadow: 0 22px 45px rgba(0,0,0,0.12);
  background: #fff;
}

/* Card base */
.ct-info3__card{
  padding: 52px 46px;
  background:#fff;
  color: var(--text);
  position: relative;
  min-height: 320px;
}

/* vertical separators like screenshot */
.ct-info3__card + .ct-info3__card{
  border-left: 1px solid rgba(0,0,0,0.08);
}

/* Orange card */
.ct-info3__card--accent{
  background: var(--accent);
  border-left: none !important;
}

/* Icon blocks */
.ct-info3__icon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  color:#111;
}

.ct-info3__icon--accent{
  color: var(--accent);
}

.ct-info3__svg{
  width: 48px;
  height: 48px;
}

/* Titles */
.ct-info3__title{
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Text */
.ct-info3__text{
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
  color: rgba(0,0,0,0.78);
}

/* Make text readable on orange card */
.ct-info3__card--accent .ct-info3__text{
  color: rgba(0,0,0,0.85);
}

/* Rows (phone/email) */
.ct-info3__rows{
  display: grid;
  gap: 16px;
}

.ct-info3__row{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 18px;
  color: var(--muted);
}

.ct-info3__mini{
  width: 22px;
  display:inline-flex;
  justify-content:center;
  font-weight: 900;
  color:#111;
}

.ct-info3__link{
  color: var(--muted);
  text-decoration:none;
}
.ct-info3__link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ================================
   HOVER ANIMATE (subtle)
================================ */
.ct-info3__card{
  transition: transform .22s ease, box-shadow .22s ease;
}
@media (hover:hover){
  .ct-info3__card:hover{
    transform: translateY(-6px);
  }
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 980px){
  .ct-info3__wrap{
    grid-template-columns: 1fr;
  }
  .ct-info3__card{
    min-height: unset;
    padding: 36px 22px;
  }
  .ct-info3__card + .ct-info3__card{
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .ct-info3__title{
    font-size: 26px;
  }
  .ct-info3__text,
  .ct-info3__row{
    font-size: 16px;
  }
}
















/* SECTION: EQUIPMENT LEASING SECTION (CSS) */
.bs-split{
  --accent:#ff8c00;
  --bg:#f1f1f1;
  --text:#111;

  background: var(--bg);
  padding: 92px 0;
}

.bs-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

.bs-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

/* left */
.bs-left{ max-width: 720px; }

.bs-accent{
  width: 68px;
  height: 5px;
  background: var(--accent);
  margin: 0 0 22px;
}

.bs-title{
  margin: 0 0 18px;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--text);
}

.bs-lead{
  margin: 0 0 26px;
  color: #222;
  font-size: 18px;
  line-height: 1.75;
  max-width: 680px;
}

/* checklist */
.bs-list{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 18px;
}

.bs-item{
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  color: #2a2a2a;
  font-size: 18px;
  line-height: 1.6;
}

.bs-check{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,140,0,0.12);
  color: var(--accent);
  font-weight: 900;
  transform: translateY(2px);
}

.bs-foot{
  margin: 0;
  color: #2a2a2a;
  font-size: 18px;
  line-height: 1.75;
  max-width: 680px;
}

/* right image */
.bs-right{
  position: relative;
  width: 100%;
}

.bs-img{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .bs-grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .bs-img{
    height: 420px;
  }
}

@media (max-width: 640px){
  .bs-split{ padding: 70px 0; }

  .bs-lead,
  .bs-item,
  .bs-foot{
    font-size: 15px;
    line-height: 1.7;
  }

  .bs-img{
    height: 320px;
  }
}













/* ================================
   IBABO – Equipment Leasing (Images)
================================ */

.ibabo-equip{
  background: #F4F6F8;
  padding: 70px 20px;
}

.ibabo-equip-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.ibabo-equip-head{
  max-width: 760px;
  margin-bottom: 40px;
}

.ibabo-equip-head h2{
  font-size: 32px;
  margin-bottom: 12px;
  color: #082036;
}

.ibabo-equip-head p{
  font-size: 16px;
  line-height: 1.7;
  color: #2a3a4d;
}

/* Grid */
.ibabo-equip-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

/* Card */
.ibabo-equip-item{
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(8,32,54,0.1);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  overflow: hidden; /* important for image rounding */
  display: flex;
  flex-direction: column;
}

/* Image area */
.ibabo-equip-img{
  width: 100%;
  height: 180px;
  background: #082036; /* fallback background */
}

.ibabo-equip-img img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps it clean */
  display: block;
}

/* Text area */
.ibabo-equip-item h3{
  font-size: 18px;
  margin: 16px 18px 8px;
  color: #0F3A60;
}

.ibabo-equip-item p{
  font-size: 14px;
  line-height: 1.6;
  color: #3b4a5c;
  margin: 0 18px 18px;
}

/* CTA */
.ibabo-equip-cta{
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(8,32,54,0.1);
}

.ibabo-equip-cta p{
  font-size: 16px;
  margin-bottom: 12px;
  color: #2a3a4d;
}

.ibabo-equip-btn{
  display: inline-block;
  padding: 12px 26px;
  background: #ED7D31;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ibabo-equip-btn:hover{
  background: #d86d28;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 900px){
  .ibabo-equip-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .ibabo-equip-grid{
    grid-template-columns: 1fr;
  }
  .ibabo-equip-img{
    height: 200px;
  }
}



/* Add this CSS to your Additional CSS (hover zoom + badge + lightbox) */

/* Hover zoom + lift */
.ibabo-equip-img{
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.ibabo-equip-img img{
  transition: transform .35s ease;
  transform: scale(1);
}
.ibabo-equip-item{
  transition: transform .2s ease, box-shadow .2s ease;
}
.ibabo-equip-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.ibabo-equip-item:hover .ibabo-equip-img img{
  transform: scale(1.08);
}

/* Badge */
.ibabo-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(8,32,54,.92);
  color:#fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

/* Optional overlay for readability */
.ibabo-equip-img:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 40%, rgba(0,0,0,.06) 100%);
  pointer-events:none;
}

/* Lightbox */
.ibabo-lightbox{ position: fixed; inset: 0; display: none; z-index: 99999; }
.ibabo-lightbox.is-open{ display:block; }
.ibabo-lightbox__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.ibabo-lightbox__panel{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 24px auto;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(8,32,54,.18);
}
.ibabo-lightbox__close{
  position:absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(8,32,54,.14);
  background: #fff;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
}
.ibabo-lightbox__header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid rgba(8,32,54,.10);
}
.ibabo-lightbox__title{ font-weight: 800; color: #082036; }
.ibabo-lightbox__count{ font-size: 13px; font-weight: 700; color: #4D4D4D; }
.ibabo-lightbox__stage{
  position: relative;
  background: #0b1320;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 420px;
}
.ibabo-lightbox__img{
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  display:block;
}
.ibabo-lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ibabo-lightbox__nav--prev{ left: 14px; }
.ibabo-lightbox__nav--next{ right: 14px; }

.ibabo-lightbox__thumbs{
  display:flex;
  gap: 10px;
  padding: 12px 16px 16px;
  overflow-x: auto;
  background: #fff;
}
.ibabo-thumb{
  width: 78px;
  height: 54px;
  border-radius: 10px;
  overflow:hidden;
  border: 2px solid transparent;
  flex: 0 0 auto;
  cursor:pointer;
}
.ibabo-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.ibabo-thumb.is-active{ border-color: #ED7D31; }

@media (max-width: 640px){
  .ibabo-lightbox__stage{ min-height: 320px; }
  .ibabo-thumb{ width: 70px; height: 48px; }
}










/* IBABO Projects Gallery (CSS) */
.ibabo-projects{
  background:#F4F6F8;
  padding: 70px 20px;
}
.ibabo-projects-inner{
  max-width: 1120px;
  margin: 0 auto;
}

.ibabo-projects-head h2{
  margin:0 0 10px;
  font-size: 34px;
  color:#082036;
}
.ibabo-projects-head p{
  margin:0 0 18px;
  color:#2a3a4d;
  line-height:1.7;
  max-width: 760px;
}

/* Tabs */
.ibabo-projects-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
}
.ibabo-tab{
  border: 1px solid rgba(8,32,54,.16);
  background: #fff;
  color:#082036;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
}
.ibabo-tab.is-active{
  background:#082036;
  border-color:#082036;
  color:#fff;
}

/* Gallery grid */
.ibabo-gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ibabo-gitem{ margin:0; }
.ibabo-gbtn{
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  text-align:left;
  cursor: zoom-in;
}
.ibabo-gbtn{
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
  border: 1px solid rgba(8,32,54,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:block;
}
.ibabo-gbtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  border-color: rgba(15,58,96,.22);
}

/* Image + hover zoom */
.ibabo-gbtn img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
  transition: transform .35s ease;
}
.ibabo-gbtn:hover img{
  transform: scale(1.08);
}

/* Badge */
.ibabo-gbadge{
  position:absolute;
  margin: 12px;
  z-index: 2;
  background: rgba(8,32,54,.92);
  color:#fff;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.ibabo-gitem{ position: relative; }

/* Caption */
.ibabo-gcap{
  padding: 14px 14px 16px;
  background:#fff;
}
.ibabo-gcap-title{
  font-weight: 900;
  color:#082036;
  margin-bottom: 6px;
}
.ibabo-gcap-sub{
  font-size: 13px;
  color:#4D4D4D;
}

/* CTA */
.ibabo-projects-cta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(8,32,54,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.ibabo-projects-ctaText{
  font-weight: 800;
  color:#082036;
}
.ibabo-projects-btn{
  display:inline-block;
  padding: 12px 20px;
  background:#ED7D31;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border-radius: 10px;
}
.ibabo-projects-btn:hover{
  opacity: .92;
}

/* Responsive */
@media (max-width: 980px){
  .ibabo-gallery{ grid-template-columns: repeat(2, 1fr); }
  .ibabo-gbtn img{ height: 210px; }
}
@media (max-width: 620px){
  .ibabo-gallery{ grid-template-columns: 1fr; }
  .ibabo-gbtn img{ height: 220px; }
}

/* ===== Lightbox (projects) ===== */
.ibabo-plightbox{ position: fixed; inset:0; display:none; z-index: 99999; }
.ibabo-plightbox.is-open{ display:block; }
.ibabo-plightbox__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.ibabo-plightbox__panel{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 24px auto;
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(8,32,54,.18);
}
.ibabo-plightbox__close{
  position:absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(8,32,54,.14);
  background:#fff;
  font-size: 26px;
  cursor:pointer;
}
.ibabo-plightbox__header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid rgba(8,32,54,.10);
}
.ibabo-plightbox__title{ font-weight: 900; color:#082036; }
.ibabo-plightbox__count{ font-size: 13px; font-weight: 800; color:#4D4D4D; }
.ibabo-plightbox__stage{
  position: relative;
  background:#0b1320;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 420px;
}
.ibabo-plightbox__img{
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  display:block;
}
.ibabo-plightbox__nav{
  position:absolute; top:50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size: 30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ibabo-plightbox__nav--prev{ left: 14px; }
.ibabo-plightbox__nav--next{ right: 14px; }

.ibabo-plightbox__thumbs{
  display:flex;
  gap: 10px;
  padding: 12px 16px 16px;
  overflow-x:auto;
}
.ibabo-pthumb{
  width: 78px; height: 54px;
  border-radius: 10px;
  overflow:hidden;
  border: 2px solid transparent;
  flex: 0 0 auto;
  cursor:pointer;
}
.ibabo-pthumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.ibabo-pthumb.is-active{ border-color:#ED7D31; }

@media (max-width: 640px){
  .ibabo-plightbox__stage{ min-height: 320px; }
  .ibabo-pthumb{ width: 70px; height: 48px; }
}/* End custom CSS */