/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/
.anchor-offset {
  padding-top: 100px;     /* equal to menu height */
}

.anchor-offset2 {
  padding-top: 100px;     /* equal to menu height */
}

/* Logo carousel vertical centering + balanced spacing
   Strategy: reduce overall slot height, constrain both max-height and max-width, add consistent horizontal gap
   so wide but short logos get breathing room and tall logos visually match line weight. */
.client-logos.logo-center div { /* each carousel cell */
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 150px; /* slightly tighter row */
  padding: 12px 28px; /* more horizontal padding balances narrow/tall logos */
  box-sizing: border-box;
}
.client-logos.logo-center img {
  max-height: 72px; /* lower visual cap to normalize tall logos */
  max-width: 140px; /* keeps very wide logos from crowding neighbors */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.05));
}

/* Optional hover subtle lift (comment out if not desired) */
.client-logos.logo-center img:hover { transform: scale(1.04); transition: transform .25s ease; }

@media (max-width: 991px) {
  .client-logos.logo-center div { height: 90px; padding: 10px 22px; }
  .client-logos.logo-center img { max-height: 64px; max-width: 120px; }
}
@media (max-width: 575px) {
  .client-logos.logo-center div { height: 80px; padding: 8px 18px; }
  .client-logos.logo-center img { max-height: 56px; max-width: 110px; }
}

/* ==============================
   Strategic Partners Grid
   Replaces carousel with responsive CSS Grid
   - Max 6 columns on large screens
   - Auto-wrap additional logos to new rows
   - Maintains existing sizing rules via shared .client-logos.logo-center styles
   To add a new logo: append a <div><img alt="Name" src="images/YourLogo.avif"></div> inside .strategic-partners-grid
============================== */
.strategic-partners-grid {
  display: grid;
  gap: 8px 12px; /* row / column gap (cell padding inside handles main spacing) */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  /* Constrain to 6 effective columns max by limiting total width (6 * 140px + padding approximation) */
  max-width: calc(6 * 180px); /* 140px base + ~40px padding each */
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* Larger screens: ensure exactly up to 6 columns, center items if fewer */
@media (min-width: 1200px) {
  .strategic-partners-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* Medium: 4 columns */
@media (max-width: 1199px) and (min-width: 768px) {
  .strategic-partners-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Small tablets / large phones: 3 columns */
@media (max-width: 767px) and (min-width: 480px) {
  .strategic-partners-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Phones: 2 columns */
@media (max-width: 479px) {
  .strategic-partners-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ensure cells stretch uniformly though intrinsic img width can vary */
.strategic-partners-grid > div { width: 100%; }

/* ==============================
   Vision Feature Icons
   Adds circular gradient icon backgrounds for Vision section feature list
   ============================== */
.vision-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(44,122,213,0.88), rgba(102,51,204,0.88));
  /* Added subtle border + inner glow for contrast against varied backgrounds */
  position: relative;
  border: 1px solid rgba(255,255,255,0.35);
  /* Removed inset & outer ring glow per request; retained subtle drop shadow */
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55);
  margin-bottom: 14px;
}
.vision-feature-icon i {
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
}
.vision-feature-icon:hover {
  transform: translateY(-3px);
  transition: transform .25s ease;
}
@media (max-width: 767px) {
  .vision-feature-icon { width: 56px; height: 56px; }
  .vision-feature-icon i { font-size: 28px; }
}

/* ==============================
   Core Features isolated spacing
   Adds extra vertical rhythm only within Core features list
   ============================== */
.core-features > div { /* each column wrapper */
  margin-bottom: 38px; /* increase bottom spacing between feature blocks */
}
@media (max-width: 575px) {
  .core-features > div { margin-bottom: 30px; }
}
.core-features > div:last-child { margin-bottom: 12px; }


/* ==============================
   Vision Feature Icons
   Adds circular gradient icon backgrounds for Vision section feature list
   ============================== */
.vision-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(44,122,213,0.88), rgba(102,51,204,0.88));
  /* Added subtle border + inner glow for contrast against varied backgrounds */
  position: relative;
  border: 1px solid rgba(255,255,255,0.35);
  /* Removed inset & outer ring glow per request; retained subtle drop shadow */
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55);
  margin-bottom: 14px;
}
.vision-feature-icon i {
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
}
.vision-feature-icon:hover {
  transform: translateY(-3px);
  transition: transform .25s ease;
}
@media (max-width: 767px) {
  .vision-feature-icon { width: 56px; height: 56px; }
  .vision-feature-icon i { font-size: 28px; }
}

/* ==============================
   Core Features isolated spacing
   Adds extra vertical rhythm only within Core features list
   ============================== */
.core-features > div { /* each column wrapper */
  margin-bottom: 38px; /* increase bottom spacing between feature blocks */
}
@media (max-width: 575px) {
  .core-features > div { margin-bottom: 30px; }
}
.core-features > div:last-child { margin-bottom: 12px; }

/* Footer brand + contact layout */
.footer-brand-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  padding: 20px 0 10px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.footer-brand-contact .footer-brand img {
  max-width: 220px;
  height: auto;
  display: block;
}
.footer-brand-contact .footer-contact {
  display: flex;
  flex: 1;
  gap: 28px;
  flex-wrap: wrap;
  min-width: 260px;
}
.footer-brand-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 220px;
  max-width: 320px;
}
.footer-brand-contact .contact-icon {
  font-size: 26px;
  line-height: 1;
  color: #245DD0;
  margin-top: 4px;
}
.footer-brand-contact h3 {
  font-size: 16px;
  margin: 0 0 4px;
  line-height: 1.2;
}
.footer-brand-contact p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 991px) {
  .footer-brand-contact { gap: 32px; }
  .footer-brand-contact .footer-brand img { max-width: 200px; }
  .footer-brand-contact .contact-item { flex: 1 1 240px; }
}
@media (max-width: 767px) {
  .footer-brand-contact { flex-direction: column; align-items: flex-start; }
  .footer-brand-contact .footer-contact { flex-direction: column; gap: 22px; }
  .footer-brand-contact .contact-item { max-width: 100%; }
}

/* Dark footer theme */
#footer {
  background:#252746;
  color:#d7d9ef;
}
#footer .footer-content { padding:50px 0 35px; }
#footer .footer-brand-contact { border-top:none; padding-top:0; }
#footer .footer-brand-contact .contact-icon { color:#6fa9ff; }
#footer h3 { color:#ffffff; }
#footer p, #footer p strong, #footer a { color:#d7d9ef; }
#footer a:hover { color:#ffffff; }
#footer .contact-item { position:relative; }
#footer .contact-item:after { content:""; position:absolute; left:0; bottom:-14px; width:60px; height:2px; background:linear-gradient(90deg,#5062c9,#2c7ad5); opacity:.35; }
/*#footer .contact-item:last-child:after { display:none; } */
@media (max-width:991px){
  #footer .footer-content { padding:40px 0 28px; }
  #footer .contact-item:after { bottom:-10px; }
}
@media (max-width:767px){
  #footer .footer-brand-contact { gap:28px; }
  #footer .contact-item:after { width:90px; }
}

/* ==============================
   Page Title Video Text Contrast
   Adds a subtle dark mask + multi-layer text shadow to improve legibility on light video frames.
   ============================== */
#page-title.fullscreen {
  position: relative; /* ensure positioning context */
  z-index: 0; /* create stacking context */
  /* Reduce effective height by header (approx 80px) so content + indicator fit fully in initial viewport */
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  /* allow inner container to size but keep indicator at bottom via absolute positioning */
}
#page-title.fullscreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,16,28,0.42); /* base dimming */
  backdrop-filter: brightness(0.9) saturate(1.05); /* slight tone control (ignored if unsupported) */
  z-index: 0;
  pointer-events: none;
}
/* Optional subtle vertical gradient accent (darker at top) */
#page-title.fullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.25) 100%);
  mix-blend-mode: normal;
  z-index: 0;
  pointer-events: none;
}

/* Elevate text above overlays */
#page-title .container, #page-title .page-title { position: relative; z-index: 1; }
/* Slight vertical lift for heading block if needed */
/* #page-title .page-title { max-width: 820px; } */

/* Horizontally center hero heading/text block and its inline text */
/* Updated: wider responsive max width + explicit container override + line-height fix */
#page-title.fullscreen {
  --hero-title-max-width: clamp(820px, 78vw, 1400px);
}
/* Allow hero section's container to expand beyond default site container width */
#page-title.fullscreen > .container {
  max-width: 1500px; /* adjust if you want even wider */
  width: 90%; /* slight side breathing room */
}
#page-title.fullscreen .page-title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: var(--hero-title-max-width);
}
#page-title.fullscreen .page-title h1 {
  line-height: 1.15; /* prevent overlap when wrapping */
  /* Optional fluid sizing: uncomment to use */
  /* font-size: clamp(2.4rem, 5.2vw, 3.6rem); */
}

/* Tablet */
@media (max-width: 991px) {
  #page-title.fullscreen { --hero-title-max-width: clamp(560px, 90vw, 1200px); }
  #page-title.fullscreen .page-title h1 { line-height: 1.18; }
}
/* Small screens */
@media (max-width: 575px) {
  #page-title.fullscreen { --hero-title-max-width: 94vw; }
  #page-title.fullscreen .page-title h1 { line-height: 1.22; }
}

@media (max-width: 991px) {
  #page-title.fullscreen { min-height: calc(100vh - 70px); }
}
@media (max-width: 575px) {
  #page-title.fullscreen { min-height: calc(100vh - 60px); }
}

/* Text shadow stack for crisp edge without heavy glow */
#page-title h1, #page-title span, #page-title .page-title h1, #page-title .page-title span {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55), /* primary soft shadow */
    0 0 2px rgba(0,0,0,0.4),
    0 0 6px rgba(0,0,0,0.25);
}

/* Utility class to disable mask quickly if needed */
.no-video-mask #page-title.fullscreen::before,
.no-video-mask #page-title.fullscreen::after { display: none; }

@media (max-width: 767px) {
  /* Slightly stronger mask on small screens where text overlaps more of frame */
  #page-title.fullscreen::before { background: rgba(10,16,28,0.50); }
}

/* ==============================
   Scroll Indicator (Page Title)
   ============================== */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 42px); /* responsive vertical spacing */
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(3px) brightness(0.9);
  -webkit-backdrop-filter: blur(3px) brightness(0.9);
  z-index: 2; /* above overlay */
  overflow: hidden;
}
.scroll-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: indicatorPulse 2.4s ease-in-out infinite;
}
.scroll-indicator:hover { border-color: #ffffff; background: rgba(0,0,0,0.38); }
.scroll-indicator:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* Chevron shape using borders */
.scroll-indicator .chevron {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}
.scroll-indicator .chevron::before,
.scroll-indicator .chevron::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 15%;
  width: 10px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  animation: chevronBounce 1.8s ease-in-out infinite;
}
.scroll-indicator .chevron::after {
  top: 75%;
  opacity: 0.55;
  animation-delay: 0.25s;
}

@keyframes chevronBounce {
  0%, 60%, 100% { transform: translate(-50%, -50%) rotate(-45deg); }
  30% { transform: translate(-50%, -25%) rotate(-45deg); }
}
@keyframes indicatorPulse {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  45% { opacity: 1; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.2); }
}

@media (max-width: 767px) {
  .scroll-indicator { bottom: clamp(14px, 5vh, 32px); width: 42px; height: 42px; }
}
@supports(padding: max(0px)) {
  /* Account for iOS Safari notch safe-area */
  #page-title.fullscreen .scroll-indicator { bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator::after, .scroll-indicator .chevron::before, .scroll-indicator .chevron::after { animation: none; }
}

h2 {
  line-height: 1.1; /* or 1.3 if you want a bit more breathing room */
}
h4 {
  line-height: 1.25; /* or 1.3 if you want a bit more breathing room */
}