/* ==========================================================================
   CIBAKO — brand layer on top of the Borvel "Homepage Six" template.
   The template CSS itself has been re-coloured to the official palette
   (#000059 Ciba Blue / #FFBF00 Taino Gold); this file only adds what the
   template did not ship: the hero slider that replaces Revolution Slider,
   the language switcher, and a handful of brand fit-and-finish rules.
   ========================================================================== */

:root {
  --cibako-blue: #000059;
  --cibako-blue-dark: #00003d;
  --cibako-gold: #ffbf00;
  --cibako-light-blue: #2270ac;
  --cibako-charcoal: #1a1a1a;
  --cibako-grey: #6b7280;
  --cibako-bg-grey: #f4f5f7;
}

/* ---------- Logo sizing (brief: min 120px wide for the horizontal lockup) -- */
.main-header .logo img { max-height: 62px; width: auto; }
.main-header .sticky-header .logo img { max-height: 44px; width: auto; }
.main-footer .logo-widget .logo img { max-height: 58px; width: auto; }

/* ---------- Language switcher ------------------------------------------- */
.lang-switcher { position: relative; display: inline-block; line-height: 1; }

.header-upper .lang-switcher { margin-left: 22px; vertical-align: middle; }

/* Header-style-six paints both the upper bar and the nav strip dark
   (#1e1e1e), so the switcher defaults to the light treatment and only the
   white sticky bar overrides it. */
.lang-switcher .lang-btn {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 300ms ease;
}
.lang-switcher .lang-btn + .lang-btn { margin-left: 4px; }
.lang-switcher .lang-btn:hover { color: #ffbf00; border-color: #ffbf00; }
.lang-switcher .lang-btn.active {
  background: #ffbf00;
  border-color: #ffbf00;
  color: #000059;
}

.sticky-header .lang-switcher .lang-btn {
  color: #000059;
  border-color: rgba(0, 0, 89, 0.20);
}
.sticky-header .lang-switcher .lang-btn:hover { color: #ffbf00; border-color: #ffbf00; }
.sticky-header .lang-switcher .lang-btn.active { color: #000059; }

.sticky-header .lang-switcher { margin-left: 18px; padding: 20px 0; float: right; }

/* ---------- Hero slider (drop-in replacement for Revolution Slider) ------- */
.main-slider .cib-slider {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  background-color: #000059;
}

.main-slider .cib-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1200ms ease, visibility 1200ms ease;
}
.main-slider .cib-slide.active { opacity: 1; visibility: visible; z-index: 2; }

.main-slider .cib-slide .cib-slide-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.0);
  transition: transform 9000ms linear;
}
.main-slider .cib-slide.active .cib-slide-bg { transform: scale(1.12); }

/* #000059 overlay at ~55% opacity, per the brand brief */
.main-slider .cib-slide .cib-slide-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 89, 0.55);
}

.main-slider .cib-slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.main-slider .cib-slide-content .auto-container { width: 100%; }

.main-slider .cib-caption { max-width: 650px; }

.main-slider .cib-caption h2 { margin-bottom: 30px; }
.main-slider .cib-caption .text { margin-bottom: 38px; }

/* Entrance animation, mirroring the template's layer animation */
.main-slider .cib-slide.active .cib-caption h2 { animation: cibSlideDown 1200ms both 300ms; }
.main-slider .cib-slide.active .cib-caption .text { animation: cibSlideUp 1200ms both 600ms; }
.main-slider .cib-slide.active .cib-caption .btns-box { animation: cibSlideUp 1200ms both 900ms; }

@keyframes cibSlideDown {
  0%   { opacity: 0; transform: translateY(-60px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cibSlideUp {
  0%   { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slider arrows + dots */
.main-slider .cib-slider-nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  line-height: 52px;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.40);
  cursor: pointer;
  transition: all 300ms ease;
}
.main-slider .cib-slider-nav:hover { background-color: #ffbf00; border-color: #ffbf00; color: #000059; }
.main-slider .cib-slider-nav.prev { left: 30px; }
.main-slider .cib-slider-nav.next { right: 30px; }

.main-slider .cib-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 30px;
  z-index: 10;
  text-align: center;
}
.main-slider .cib-slider-dots button {
  display: inline-block;
  width: 34px;
  height: 4px;
  margin: 0 5px;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 300ms ease;
}
.main-slider .cib-slider-dots button.active { background-color: #ffbf00; }

@media only screen and (max-width: 1023px) {
  .main-slider .cib-slider { height: 560px; }
  .main-slider .cib-slider-nav { display: none; }
}
@media only screen and (max-width: 767px) {
  .main-slider .cib-slider { height: 500px; }
  .main-slider .cib-caption .text { font-size: 15px; }
}

/* ---------- Owl-compatible React carousel ------------------------------- */
/* The React carousel renders owl's DOM so owl.css applies untouched; it only
   needs the transition owl would have set inline. */
.owl-carousel .owl-stage { transition: transform 700ms ease; }
.owl-carousel.cib-no-anim .owl-stage { transition: none; }

/* ---------- Contact / misc fit-and-finish -------------------------------- */
.contact-section .map-column iframe {
  width: 100%;
  min-height: 250px;
  border: 0;
  display: block;
}
.contact-section .map-column .map-block + .map-block { margin-top: 30px; }
.contact-section .map-column h4 {
  color: #000059;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

/* The template styles text/email/password inputs only; the contact form also
   uses tel, so extend the same rule rather than editing the vendor file. */
.default-form input[type="tel"] {
  display: block;
  width: 100%;
  line-height: 28px;
  height: 50px;
  font-size: 15px;
  padding: 10px 22px;
  background: none;
  color: #000000;
  border-radius: 2px;
  border: 1px solid #d7d7d7;
  transition: all 500ms ease;
}
.default-form input[type="tel"]:focus { border-color: #ffbf00; }

.form-message {
  position: relative;
  display: block;
  padding: 14px 22px;
  margin-bottom: 20px;
  font-size: 15px;
}
.form-message.success { background-color: rgba(0, 0, 89, 0.06); color: #000059; border-left: 3px solid #ffbf00; }
.form-message.error { background-color: rgba(220, 53, 69, 0.08); color: #b02a37; border-left: 3px solid #b02a37; }

.field-error { display: block; margin-top: 6px; color: #b02a37; font-size: 13px; }

/* The Taino name panel on the About page */
.taino-panel {
  position: relative;
  padding: 45px 50px;
  background-color: #000059;
  border-left: 5px solid #ffbf00;
  color: #ffffff;
}
.taino-panel h3 { color: #ffffff; font-size: 26px; font-weight: 700; margin-bottom: 18px; font-family: 'Poppins', sans-serif; }
.taino-panel .text { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.8em; }
.taino-panel .acronym { margin-top: 28px; padding: 0; list-style: none; }
.taino-panel .acronym li { position: relative; padding-left: 34px; margin-bottom: 10px; color: rgba(255, 255, 255, 0.9); font-size: 15px; }
.taino-panel .acronym li b { position: absolute; left: 0; top: 0; color: #ffbf00; font-size: 18px; font-weight: 700; }
@media only screen and (max-width: 767px) { .taino-panel { padding: 30px 25px; } }

/* Markets page blocks */
.market-block { margin-bottom: 30px; }
.market-block .inner-box {
  position: relative;
  height: 100%;
  padding: 40px 35px;
  background-color: #ffffff;
  border-bottom: 3px solid #ffbf00;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
.market-block .inner-box h3 { color: #000059; font-size: 22px; font-weight: 700; margin-bottom: 8px; font-family: 'Poppins', sans-serif; }
.market-block .inner-box .role { color: #ffbf00; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.market-block .inner-box .text { color: #4b5563; font-size: 15px; line-height: 1.8em; }

/* Legal page */
.legal-section .legal-block { margin-bottom: 40px; }
.legal-section h3 { color: #000059; font-size: 22px; font-weight: 700; margin-bottom: 16px; font-family: 'Poppins', sans-serif; }
.legal-section .legal-table { width: 100%; margin-bottom: 20px; }
.legal-section .legal-table th,
.legal-section .legal-table td { padding: 12px 18px; border: 1px solid #e9e9e9; font-size: 15px; color: #4b5563; }
.legal-section .legal-table th { background-color: #f4f5f7; color: #000059; font-weight: 600; width: 40%; }

/* Project meta list on the detail page */
.project-meta { margin: 0 0 30px; padding: 0; list-style: none; }
.project-meta li {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid #ececec;
  color: #4b5563;
  font-size: 15px;
}
.project-meta li b { display: inline-block; min-width: 150px; color: #000059; font-weight: 600; }

/* Clients / partners strip */
.partners-section { position: relative; padding: 70px 0; background-color: #f4f5f7; }
.partners-section .sec-title-two { margin-bottom: 35px; }
.partner-name {
  display: inline-block;
  margin: 8px 10px;
  padding: 14px 26px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  color: #000059;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
}

/* Keep long section titles from colliding with the template's underline */
.sec-title h2 { line-height: 1.25em; }

/* Button elements standing in for owl's <div> nav / dots need the browser
   chrome stripped so the template's .owl-prev / .owl-next rules take over. */
.owl-carousel .owl-nav button {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  outline: none;
}

/* ---------- Equal-height card grids -------------------------------------- */
/* Bootstrap 3 floats its columns, so a row of cards with different text
   lengths snags on the tallest one. Rows marked `cib-grid` lay out as flex
   instead — the column widths still come from the .col-* classes, the floats
   are simply ignored — so cards sit on a clean baseline and stretch to match. */
.cib-grid {
  display: flex;
  flex-wrap: wrap;
}
.cib-grid > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.cib-grid > [class*='col-'] > .inner-box {
  flex: 1 1 auto;
}
.cib-grid .service-block-three .inner-box,
.cib-grid .market-block .inner-box {
  height: 100%;
}
.cib-grid .service-block-three,
.cib-grid .market-block {
  display: flex;
  flex-direction: column;
}
.cib-grid .service-block-three > .inner-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.cib-grid .service-block-three .lower-content {
  flex: 1 1 auto;
}

/* The template gives `.sec-title.light` a white heading but leaves the intro
   paragraph at #797979, which is unreadable on the dark projects ground. */
.sec-title.light .text { color: rgba(255, 255, 255, 0.75); }

/* ---------- Consistent card imagery -------------------------------------- */
/* Supplied photography will arrive in mixed aspect ratios; cropping to a fixed
   card height keeps every grid row on the same baseline. */
.service-block-three .inner-box .image img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
}
.gallery-section .gallery-item .image img,
.project-carousel-two .gallery-item .image img,
.project-completion-section .gallery-item .image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.news-block .inner-box .image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.testimonial-block .inner-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-single-section .image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* ---------- Header bar: length-proof layout ------------------------------ */
/* The template floats the logo left and the info/CTA group right, which only
   fits while the copy stays short — the French and Spanish CTA labels tipped
   the group over the container width and dropped the logo onto its own row.
   Laying the bar out as a flex row on desktop makes the two halves share the
   line regardless of how long the translated labels get. Below 1024px the
   template's own stacked mobile header takes over untouched. */
@media only screen and (min-width: 1024px) {
  .header-style-six .header-upper .auto-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .header-style-six .header-upper .logo-outer,
  .header-style-six .header-upper .upper-right {
    float: none;
  }
  .header-style-six .header-upper .upper-right {
    display: flex;
    align-items: center;
    padding-top: 0;
  }
  .header-style-six .header-upper .info-box {
    float: none;
    display: flex;
    align-items: center;
  }
  .header-style-six .header-upper .info-box .icon-box {
    position: static;
    margin-right: 12px;
  }
  .header-style-six .header-upper .info-box:last-child {
    padding-left: 0;
    gap: 14px;
  }

  /* Nothing in the bar may shrink below its own text — otherwise the phone
     number, address, CTA, and language buttons each wrap internally instead
     of the row simply being wide. The logo and the CTA/language group are
     fixed; only the address block gives, and it is hidden outright below
     1300px by the rule beneath this block. */
  .header-style-six .header-upper .logo-outer,
  .header-style-six .header-upper .upper-right > * {
    flex: 0 0 auto;
  }
  .header-style-six .header-upper .info-box:nth-of-type(2) {
    flex: 0 1 auto;
    min-width: 0;
  }
  .header-style-six .header-upper .info-box ul li,
  .header-style-six .header-upper .info-box ul li span,
  .header-style-six .header-upper .theme-btn {
    white-space: nowrap;
  }
  .header-style-six .header-upper .lang-switcher {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Between 1024 and 1300px the address is the first thing to give way, so the
   CTA and the language switcher always keep the logo's line. */
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .header-style-six .header-upper .info-box:nth-of-type(2) {
    display: none;
  }
}

/* ---------- Legibility ---------------------------------------------------- */
/* The template sets body copy in #797979, which lands at 4.35:1 on white and
   reads as a washed-out grey-blue. Body text and captions are re-mapped to
   #4b5563 / #565f6d in the vendor CSS; these are the CIBAKO-only surfaces
   that needed the same treatment. */
.market-block .inner-box .role {
  /* Taíno Gold at 13px on white is 1.65:1 — unreadable. This is the same hue
     darkened until it clears AA, so the accent survives. */
  color: #8a6500;
}
.market-block .inner-box .text,
.legal-section .legal-table td {
  color: #4b5563;
}

/* The header bar is navy, so its info text has to go lighter, not darker —
   the global grey remap above would have pushed it into the background. */
.main-header .header-upper .info-box,
.main-header .header-upper .info-box li {
  color: rgba(255, 255, 255, 0.9);
}
.main-header .header-upper .info-box li span {
  color: rgba(255, 255, 255, 0.66);
}

/* ---------- WhatsApp -------------------------------------------------------
   Brand green (#25D366) is WhatsApp's own and is used only on its controls.
   The floating button sits bottom-left so it never overlaps the template's
   scroll-to-top control on the right. */
.whatsapp-float {
  position: fixed;
  left: 25px;
  bottom: 25px;
  z-index: 99;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 17px;
  border-radius: 27px;
  background-color: #25d366;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
  background-color: #1da851;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

/* The label unfurls on hover on pointer devices; the icon alone carries it
   otherwise, with the accessible name on the link. */
.whatsapp-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  transition: max-width 350ms ease, opacity 250ms ease, margin-left 350ms ease;
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus .whatsapp-float-label {
  max-width: 220px;
  margin-left: 12px;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .whatsapp-float { left: 16px; bottom: 16px; height: 50px; padding: 0 14px; font-size: 25px; }
  /* No hover on touch, so the label would never appear. */
  .whatsapp-float-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .whatsapp-float-label { transition: none; }
}

/* ---------- Contact intro -------------------------------------------------- */
.contact-intro { margin-bottom: 55px; }

.contact-intro .image-column .image {
  position: relative;
  margin-bottom: 30px;
}
.contact-intro .image-column .image:before {
  /* The template's signature gold offset block behind a photo. */
  position: absolute;
  content: '';
  right: -16px;
  top: -16px;
  width: 38%;
  height: 42%;
  background-color: #ffbf00;
  z-index: -1;
}
.contact-intro .image-column .image img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.contact-intro .content-column .sec-title { padding-bottom: 28px; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.contact-actions .theme-btn {
  margin: 0;
  padding: 12px 26px;
  font-size: 15px;
}
.contact-actions .theme-btn .fa { margin-right: 8px; }

.contact-actions .whatsapp-btn,
.contact-actions .whatsapp-btn:hover {
  background-color: #25d366;
  border-color: #25d366;
  color: #ffffff;
}
.contact-actions .whatsapp-btn:hover { background-color: #1da851; border-color: #1da851; }

@media only screen and (max-width: 767px) {
  .contact-intro .image-column .image:before { display: none; }
  .contact-actions .theme-btn { width: 100%; text-align: center; }
}