@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{--primary:#001b3a;--accent:#d4af37;--muted:#6c757d;--bg:#f7f8fb;--card-shadow:0 18px 60px rgba(2,30,60,0.12)}

/* --- Footer stick fix --- */
html,body{height:100%}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{
  flex:1;
}
/* --- End footer stick fix --- */

*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial;margin:0;color:#0b2540;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
.site-header{background:var(--primary);padding:12px 0;box-shadow:0 8px 30px rgba(0,0,0,0.16)}
.navbar-brand img{height:56px;display:block}
.navbar-nav .nav-link{font-weight:600;color:rgba(255,255,255,0.95)!important;padding:10px 12px;font-size:15px}

/* hero sizing & background handling (slides will be absolutely positioned later) */
.hero{height:78vh;min-height:520px;position:relative;display:block;overflow:hidden}
.carousel-item{height:78vh;min-height:520px;background-size:cover;background-position:center;}
.carousel-caption{position:absolute;left:6%;bottom:18%;right:auto;max-width:760px;z-index:5}
.caption-bg{background:linear-gradient(90deg, rgba(0,12,30,0.78) 0%, rgba(0,12,30,0.45) 50%, rgba(0,12,30,0.08)100%);padding:36px;border-radius:16px;box-shadow:0 22px 80px rgba(0,0,0,0.35);transform-origin:left center}
.caption-bg h1{font-size:2.6rem;margin:0 0 6px;font-weight:800;color:#fff;letter-spacing:0.2px;text-shadow:0 14px 44px rgba(0,0,0,0.5)}
.caption-bg p.lead{font-size:1.05rem;color:rgba(255,255,255,0.95);margin-bottom:1rem}
.motto{font-size:1rem;color:rgba(255,255,255,0.9);margin-bottom:8px}
.cta{background:var(--accent);color:#fff;padding:.7rem 1.2rem;border-radius:12px;font-weight:700;text-decoration:none;display:inline-block;box-shadow:0 18px 50px rgba(212,175,55,0.18)}
.cta.secondary{background:#0b66a3}
.section{padding:64px 0}
.container-narrow{max-width:1150px;margin:0 auto;padding:0 18px}
.section-title{color:var(--primary);font-weight:700;font-size:1.4rem;margin-bottom:18px;text-align:center}
.card-plain{background:#fff;border-radius:12px;padding:22px;box-shadow:var(--card-shadow);border:none}
.fade-up{opacity:0;transform:translateY(22px);transition:all 700ms cubic-bezier(.2,.9,.2,1);will-change:opacity,transform}
.fade-up.in-view{opacity:1;transform:translateY(0)}
.divisions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.division-tile{display:block;background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 16px 50px rgba(2,30,60,0.08);transition:transform .32s ease,box-shadow .32s ease}
.division-tile:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(2,30,60,0.16)}
.division-tile .media{height:220px;background-size:cover;background-position:center}
.division-tile .tile-body{padding:18px}
.investor-teaser{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;padding:26px;border-radius:12px;box-shadow:var(--card-shadow);flex-wrap:wrap}
.investor-teaser .left{flex:1 1 420px}
.investor-teaser .right{flex:0 0 240px}
.news-popup{animation:pop 900ms cubic-bezier(.2,.9,.2,1)}

/* --- Latest Updates Section Gradient Background --- */
.latest-updates {
  background: linear-gradient(135deg, #001b3a 0%, #003366 100%);
  color: #ffffff;
  padding: 64px 0;
  position: relative;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15) inset;
}

.latest-updates .section-title {
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.latest-updates ul {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.latest-updates li {
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.latest-updates li:last-child {
  border-bottom: none;
}

.latest-updates li::before {
  content: "•";
  color: var(--accent);
  margin-right: 8px;
}

/* --- Mobile Navbar Enhancements with Fade-in --- */
.navbar-toggler {
  border: none;
  background: none;
  outline: none;
}
.navbar-toggler-icon {
  width: 26px;
  height: 2px;
  background-color: #fff;
  position: relative;
  display: inline-block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: #fff;
  transition: all 0.3s ease;
}
.navbar-toggler-icon::before { top: -8px; }
.navbar-toggler-icon::after { top: 8px; }

/* When menu is open (active state) */
.navbar-toggler.active .navbar-toggler-icon {
  background-color: transparent;
}
.navbar-toggler.active .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 0;
}
.navbar-toggler.active .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Slide-down menu container */
.navbar-collapse {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 27, 58, 0.95);
  backdrop-filter: blur(10px);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-in-out;
}

/* Open state */
.navbar-collapse.open {
  max-height: 340px; /* Adjust based on link count */
}

/* Menu links */
.navbar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 20px;
}
.navbar-nav .nav-link {
  width: 100%;
  color: #fff !important;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

/* Sequential fade-in animation */
.navbar-collapse.open .nav-link {
  opacity: 1;
  transform: translateY(0);
}
.navbar-collapse.open .nav-link:nth-child(1) { transition-delay: 0.1s; }
.navbar-collapse.open .nav-link:nth-child(2) { transition-delay: 0.15s; }
.navbar-collapse.open .nav-link:nth-child(3) { transition-delay: 0.2s; }
.navbar-collapse.open .nav-link:nth-child(4) { transition-delay: 0.25s; }
.navbar-collapse.open .nav-link:nth-child(5) { transition-delay: 0.3s; }
.navbar-collapse.open .nav-link:nth-child(6) { transition-delay: 0.35s; }
.navbar-collapse.open .nav-link:nth-child(7) { transition-delay: 0.4s; }

.navbar-nav .nav-link:hover {
  color: var(--accent) !important;
}

/* Desktop override */
@media (min-width: 992px) {
  .navbar-collapse {
    position: static;
    background: transparent;
    max-height: none !important;
    backdrop-filter: none;
  }
  .navbar-nav {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }
  .navbar-nav .nav-link {
    border: none;
    opacity: 1 !important;
    transform: none !important;
  }
  .navbar-toggler {
    display: none;
  }
}

/* --- Navbar z-index fix so dropdown appears above carousel --- */
.site-header {
  position: relative;
  z-index: 2000;
}

/* Keep captions visible smoothly */
.caption-bg {
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.caption-bg.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive logo size & alignment fix --- */
.navbar-brand img {
  height: 56px; /* default desktop size */
  width: auto;
  object-fit: contain;
}

@media (max-width: 992px) {
  .navbar-brand img {
    height: 48px; /* tablet */
  }
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 40px; /* mobile */
  }
}

@media (max-width: 480px) {
  .navbar-brand img {
    height: 34px; /* small phones */
    margin-left: 6px;
  }

  .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ---------- Responsive logo fix (paste near bottom of style.css) ---------- */

/* Make navbar a reliable flex container so children (logo + toggler) are vertically centered */
.site-header .navbar,
.site-header .navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* ensure header doesn't crop children */
  overflow: visible;
}

/* Give the brand area a fixed, responsive container height (parent determines available height) */
.navbar-brand {
  display: flex;
  align-items: center;
  height: 64px;         /* default header brand slot height on desktop */
  padding: 0;
  overflow: visible;    /* don't clip the logo */
}

/* Constrain the logo image within that area */
.navbar-brand img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;     /* fit inside the navbar-brand height */
  object-fit: contain;
  vertical-align: middle;
}

/* Smaller nav height on medium screens/tablets */
@media (max-width: 992px) {
  .navbar-brand { height: 56px; }
  .navbar-brand img { max-height: 56px; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .navbar-brand { height: 48px; }
  .navbar-brand img { max-height: 48px; }
  .site-header .navbar { padding-top: 6px; padding-bottom: 6px; }
}

/* Small phones */
@media (max-width: 480px) {
  .navbar-brand { height: 40px; }
  .navbar-brand img { max-height: 40px; margin-left: 6px; }
  .site-header .navbar { padding-top: 4px; padding-bottom: 4px; }
}

/* Safety: if some other rule sets nav to fixed small height, this ensures the logo won't overflow-hidden */
.site-header, .site-header * { overflow: visible !important; }

/* --- Mobile Navbar Custom Styling --- */

/* Make the hamburger icon gold */
.navbar-toggler {
  border: none;
  outline: none;
  filter: brightness(1) invert(0);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(212,175,55)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile dropdown menu background and text color */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: var(--primary); /* deep blue background */
    padding: 16px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .navbar-nav .nav-link {
    color: var(--accent) !important; /* gold links */
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
  }

  .navbar-nav .nav-link:hover {
    color: #fff !important; /* white on hover */
  }

  .navbar-toggler {
    border: none;
    background: transparent;
  }
}

/* --- Mobile Navbar Custom Styling (White links, Gold hover) --- */

/* Make the hamburger icon gold */
.navbar-toggler {
  border: none;
  outline: none;
  filter: brightness(1) invert(0);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(212,175,55)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile dropdown menu */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: var(--primary); /* deep blue background */
    padding: 16px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  /* White links on mobile */
  .navbar-nav .nav-link {
    color: #ffffff !important; /* white */
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    transition: color 0.3s ease;
  }

  /* Gold on hover */
  .navbar-nav .nav-link:hover {
    color: var(--accent) !important; /* gold */
  }

  .navbar-toggler {
    border: none;
    background: transparent;
  }
}

/* --- Mobile Navbar Custom Styling (White icon default, Gold on hover) --- */

.navbar-toggler {
  border: none;
  outline: none;
  background: transparent;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* White hamburger icon by default */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  transition: all 0.3s ease;
}

/* When pressed or hovered → turns gold */
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler.active .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(212,175,55)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile dropdown styling */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: var(--primary); /* deep blue */
    padding: 16px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  /* White text links by default */
  .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    transition: color 0.3s ease;
  }

  /* Gold on hover/tap */
  .navbar-nav .nav-link:hover {
    color: var(--accent) !important;
  }
}
.core-values-list {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.core-values-list li {
  margin-bottom: 12px;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.core-values-list li::before {
  content: "•";
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2rem;
  line-height: 1.5;
}
/* Reduce vertical spacing for sections that follow closely after another */
.section-tight {
  padding-top: 32px;   /* default is 64px — halved */
  padding-bottom: 48px;
}
/* --- Vision & Mission Split Layout --- */
.vision-mission, .core-values {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-mission:hover, .core-values:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.core-values-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.core-values-list li {
  margin-bottom: 14px;
  padding-left: 1.8rem;
  position: relative;
  line-height: 1.6;
}

.core-values-list li::before {
  content: "•";
  font-size: 20px;
  color: var(--accent); /* gold bullet */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1rem;
}
.core-values-list li::before {
  content: "•";
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.6rem; /* larger bullet */
  line-height: 1;
  font-weight: 700;  /* makes it thicker */
}

@media (max-width: 768px) {
  .vision-mission, .core-values {
    padding: 1.4rem;
  }

  .core-values-list li::before {
    left: 0;
    font-size: 1rem;
  }
}
/* --- Vision & Core Values directional fade animations --- */
.fade-left, .fade-right {
  opacity: 0;
  transform: translateX(0);
  transition: all 0.9s cubic-bezier(.2,.9,.2,1);
}

.fade-left {
  transform: translateX(-60px);
}

.fade-right {
  transform: translateX(60px);
}

.fade-left.in-view, .fade-right.in-view {
  opacity: 1;
  transform: translateX(0);
}
/* --- Use custom deep blue for section headings --- */
.text-primary {
  color: var(--primary) !important;
}
.vision-mission h4::after,
.core-values h4::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
  border-radius: 3px;
}
/* --- Subtle Gold Underline Accent --- */
.underline-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 18px;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.3rem;
}

.underline-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px; /* length of the underline */
  height: 3px;
  background: var(--accent); /* gold color */
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4); /* subtle glow */
}
.underline-accent::after {
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.6s ease;
}

.underline-accent.in-view::after {
  transform: translateX(-50%) scaleX(1);
}
/* Gold underline accent for headings (centered by default) */
.underline-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 18px;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.2rem;
}

/* The gold underline */
.underline-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;      /* length of the underline */
  height: 3px;      /* thickness */
  background: var(--accent); /* gold */
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
  pointer-events: none;
}

/* Optional: animate the underline when the element gets the in-view class */
.underline-accent::after {
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1);
}
.underline-accent.in-view::after {
  transform: translateX(-50%) scaleX(1);
}

/* Left-aligned variant if you prefer the underline flush with the start of the heading */
.underline-accent.left::after {
  left: 0;
  transform: none;
  transform-origin: left;
}

/* ===== Smooth horizontal slide transitions (no white / deep-blue gap) ===== */
#heroCarousel .carousel-inner {
  position: relative;
  overflow: hidden;
  background-color: #001b3a; /* fallback background so you never see white */
}

/* Base slide: stacked, off-canvas handled by transforms */
#heroCarousel .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s cubic-bezier(.2,.9,.2,1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  opacity: 1; /* keep visible so backgrounds are painted */
}

/* The active slide sits in normal flow (so page height is ok) */
#heroCarousel .carousel-item.active {
  position: relative;
  transform: translate3d(0,0,0);
}

/* Position next/prev off-screen (so they can slide in) */
#heroCarousel .carousel-item-next {
  transform: translate3d(100%, 0, 0);
}
#heroCarousel .carousel-item-prev {
  transform: translate3d(-100%, 0, 0);
}

/* When Bootstrap adds the directional classes during a slide,
   these states move the items to the final position */
#heroCarousel .carousel-item-next.carousel-item-start,
#heroCarousel .carousel-item-prev.carousel-item-end,
#heroCarousel .carousel-item.active.carousel-item-start,
#heroCarousel .carousel-item.active.carousel-item-end {
  transform: translate3d(0, 0, 0);
}

/* Ensure the outgoing active slide moves out in the opposite direction */
#heroCarousel .carousel-item.active.carousel-item-start {
  transform: translate3d(-100%, 0, 0);
}
#heroCarousel .carousel-item.active.carousel-item-end {
  transform: translate3d(100%, 0, 0);
}

/* Slightly faster on small screens for snappy feel */
@media (max-width: 768px) {
  #heroCarousel .carousel-item { transition-duration: 0.85s; }
}
/* --- Preloader Overlay --- */
#preloader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #001b3a; /* same as hero background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* --- Spinner Animation --- */
.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* === Syiwa Logo Preloader === */
#preloader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #001b3a; /* deep blue brand background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-logo img {
  width: 180px;
  height: auto;
  animation: fadePulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}

@keyframes fadePulse {
  0% { opacity: 0.4; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.96); }
}

@keyframes pop{0%{transform:scale(.96);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}
footer.site-footer{background:#021428;color:#cfd8de;padding:24px 0;margin-top:40px}
@media(max-width:768px){
  .navbar-brand img{height:140px}
  .caption-bg h1{font-size:1.6rem}
  .caption-bg{padding:20px}
}