:root{
  --au-accent: #0a58ca;          /* primary */
  --au-accent-2: #f39a1e;        /* secondary highlight */
  --ink-900: #0b0d12;
  --ink-700: #2b343f;
  --ink-500: #526074;
  --ink-300: #96a1b1;
  --bg-50: #f7fafc;
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-1: 0 12px 30px rgba(2,10,28,.08);
  --shadow-2: 0 18px 50px rgba(2,10,28,.14);
}

body,html{margin:0;padding:0;overflow-x:hidden}html{scroll-behavior:smooth}

/* Base */
html,body{height:100%}
body{
  font-family:'Jost', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink-900)
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:100;
  background:#ffffffd9;backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(2,10,28,.06)
}
.brand img{height:60px}
.nav-ghost a{color:#6b7280;text-decoration:none}
.nav-ghost a:hover{color:#111}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(10,88,202,.08), transparent 60%),
    radial-gradient(1200px 800px at 80% 15%, rgba(243,154,30,.10), transparent 60%),
    var(--bg-50);
}

.hero h1{font-weight:800; letter-spacing:-.01em; line-height:1.04; font-size:clamp(36px, 6vw, 64px)}
.hero p.lead{color:var(--ink-700); font-size:clamp(18px, 2.4vw, 22px)}
.meta-pill{
  display:inline-flex; align-items:center; gap:.75rem; background:#fff;
  border:1px solid rgba(2,10,28,.08); border-radius:999px; padding:.6rem 1rem;
  box-shadow:var(--shadow-1); font-weight:600; color:var(--ink-700)
}

/* Hero student image */
.hero-student{
  max-height: 520px;             /* cap size on large screens */
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(2,10,28,.18));
  transform: translateZ(0);      /* smoother rendering */
}

@media (max-width: 991.98px){
  .hero-student{ max-height: 360px; }
}

.spec-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.spec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.icon-box {
  font-size: 2rem;
  color: #0a58ca; /* Alliance brand blue */
}

.spec-card h6 {
  font-weight: 600;
  font-size: 0.95rem;
}




.meta-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-300)}

.btn-au{
  --bs-btn-bg:var(--au-accent);
  --bs-btn-border-color:var(--au-accent);
  --bs-btn-hover-bg:#0846a3;
  --bs-btn-hover-border-color:#0846a3;
  --bs-btn-color:#fff;
  border-radius:999px; padding:.9rem 1.25rem; font-weight:700
}
.btn-ghost{border-radius:999px; padding:.9rem 1.25rem; font-weight:700}

/* Smooth transitions for the Alliance CTA button */
.btn-au{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
  will-change: transform, box-shadow, filter;
}

/* Hover: slight lift + brighter shadow */
.btn-au:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.03);
  color: aliceblue;
  /* optional: a tiny gradient sheen */
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0));
}

.btn-au:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(10, 88, 202, .25);
}

/* Active: press down */
.btn-au:active{
  transform: translateY(0);
  box-shadow: var(--shadow-1);
  filter: none;
}

/* Keyboard focus: clear, high-contrast ring */
.btn-au:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--au-accent), white 25%);
  outline-offset: 2px;
}

/* (nice-to-have) reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .btn-au{
    transition: none;
  }
}

.logo-caption{
  margin-top:.5rem;
  font-weight:600;
  font-size:.9rem;         /* tweak to .85rem if you want smaller */
  color:var(--ink-700);     /* matches your theme */
}

.logo-figure img{
  max-height: 60px;         /* keeps a neat row; adjust if needed */
}

@media (min-width: 768px){
  .logo-figure img{ max-height: 100px; }
}

/* subtle hover lift on logos (optional) */
@media (prefers-reduced-motion: no-preference){
  .logo-figure img{ transition: transform .18s ease; }
  .logo-figure:hover img{ transform: translateY(-2px); }
}

/* Uniform layout for rankings row */
.logos-row{
  --logo-img-h: 70px;   /* image box height */
  --logo-cap-h: 110px;  /* caption min height for alignment */
}

.logo-figure{ padding: .25rem .75rem; }

.logo-img-wrap{
  height: var(--logo-img-h);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
}
.logo-img-wrap img{
  max-height: 100%;
  width: auto;
}

/* Captions: top-aligned (still equal height for clean rows) */
.logo-caption{
display: block;
  min-height: 70px;
  text-align: center;
  font-weight: 400;
  font-size:12px;
  line-height: 1.35;
  color: var(--ink-900);
}

/* Slightly larger on md+ screens */
@media (min-width: 768px){
  .logos-row{
    --logo-img-h: 80px;
    --logo-cap-h: 120px;
  }
}



/* wide & clean modal */
.modal-content{ border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
.modal-body h3{ letter-spacing:.2px; }

/* underline inputs like the screenshot */
.au-underline{
  border: none;
  border-bottom: 1px solid rgba(2,10,28,.35);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.au-underline:focus{
  box-shadow: none;
  border-bottom-color: var(--au-accent);
}
.form-label{ color: var(--ink-700); font-weight:600; }
.invalid-feedback{ color:#dc3545; }

/* make the submit button fill on mobile nicely */
@media (min-width: 992px){
  #brochureForm .btn-au{ width: auto; }
}
/* Brochure modal sizing */
#brochureModal .modal-dialog{
  max-width: 640px;   /* tweak: 560, 640, 720… */
}
@media (max-width: 575.98px){
  #brochureModal .modal-dialog{
    margin: .75rem;   /* comfy edges on very small screens */
  }
}
#brochureModal .modal-body{ padding: 1.5rem; }
@media (min-width: 768px){
  #brochureModal .modal-body{ padding: 2rem; }
}


/* Left-side gradient icon badge for Edge cards */
.feature-card.icon-left{ gap: .25rem; transition: box-shadow .18s ease, transform .18s ease; }
.feature-card.icon-left strong{ flex: 1 1 auto; }

/* the round gradient badge */
.fc-icon{
 /* --size: 46px; */
/* width: var(--size); */
width: 60px;
/* height: var(--size); */
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
border-radius: 10%;
}
.fc-icon i{ font-size: 1.15rem; line-height: 1; }

/* hover effects */
.feature-card.icon-left:hover{ box-shadow: var(--shadow-2); transform: translateY(-2px); }
.feature-card.icon-left:hover .fc-icon{
  transform: translateY(-2px) scale(1.05) rotate(-3deg);
  
}

/* compact on small screens */
@media (max-width: 575.98px){
  .fc-icon{ --size: 42px; }
}

/* Compact, responsive video container */
.video-wrap {
  max-width: 720px;      /* controls overall width → height shrinks accordingly */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Make it even smaller on very small screens */
@media (max-width: 576px) {
  .video-wrap { max-width: 100%; } /* uses container padding; still compact */
}

/* If you want it extra-compact everywhere, use .video-wrap.compact on the div below: */
.video-wrap.compact { max-width: 560px; }




.mentor-card {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mentor-card img {
  height: 220px;
  object-fit: cover;
}

.mentor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}




/* --- Hero carousel (one big image) --- */
#xdisc-hero .hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;                   /* rounded-3 vibe */
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  background: #f8f9fa;
  /* keep a pleasing height; grows with width */
  aspect-ratio: 16 / 9;
}
@media (max-width: 991.98px){
  #xdisc-hero .hero-carousel { aspect-ratio: 3 / 2; }
}

#xdisc-hero .track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

#xdisc-hero .slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}
#xdisc-hero .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);                /* subtle zoom to avoid edges */
  transition: transform 1.2s ease;
}
#xdisc-hero .slide.is-active img {
  transform: scale(1);                   /* gentle focus on active */
}

/* arrows */
/* Base */
#xdisc-hero .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; cursor:pointer; z-index:3;
  width:44px; height:44px; border-radius:999px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
#xdisc-hero .nav svg{ width:22px; height:22px; }

/* Distinct styles */
#xdisc-hero .nav.prev{
  left:.25rem;
  background:rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  border:2px solid rgba(255,255,255,.95);
  color:#222;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) inset, 0 6px 16px rgba(0,0,0,.10);
}
#xdisc-hero .nav.prev:hover{ transform:translateY(-50%) scale(1.05); }

#xdisc-hero .nav.next{
right: .25rem;
background: rgba(255,255,255,.35);
backdrop-filter: blur(6px);
border: 2px solid rgba(255,255,255,.95);
color: #222;
box-shadow: 0 6px 18px rgba(0,0,0,.08) inset, 0 6px 16px rgba(0,0,0,.10);
}
}
#xdisc-hero .nav.next:hover{ transform:translateY(-50%) scale(1.05); }

/* Keyboard focus */
#xdisc-hero .nav:focus{ outline:none; box-shadow:0 0 0 3px rgba(13,110,253,.35); }

/* Optional: place arrows slightly outside edges (uncomment if you prefer)
#xdisc-hero .nav.prev{ left:-.75rem; }
#xdisc-hero .nav.next{ right:-.75rem; }
*/






/* Right-side visual styling */
#values .values-visual{
  position: relative;
  max-width: 640px;        /* keep it elegant on very wide screens */
  margin-left: auto;       /* push to the right within the column */
}
#values .values-visual img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  object-fit: cover;
}

/* Soft gradient glow behind the image (optional, for polish) */
#values .values-visual::after{
  content: "";
  position: absolute;
  inset: -12% -10% -18% -10%;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(102,16,242,.25), transparent 60%),
    radial-gradient(60% 60% at 30% 70%, rgba(13,110,253,.25), transparent 60%);
  filter: blur(30px);
  z-index: -1;
}

/* Tighten spacing on small screens */
@media (max-width: 991.98px){
  #values .values-visual{ margin: 0 auto; }
}













/* ── Looping logo marquee ───────────────────────────── */
.logo-scroller{
  --gap: 3rem;
  --duration: 20s;                 /* will be overridden by JS for consistent px/s */
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
  animation: logo-marquee var(--duration) linear infinite;
}

.logo-slide img{
  height: 44px;
  width: auto;
  filter: grayscale(100%);
  opacity: .85;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.logo-slide img:hover{ filter:none; opacity:1; transform: translateY(-2px); }

/* pause on hover */
.logo-scroller:hover .logo-track{ animation-play-state: paused; }

/* smaller on phones */
@media (max-width: 575.98px){
  .logo-scroller{ --gap: 1.5rem; }
  .logo-slide img{ height: 34px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; }
}

/* the animation distance is set via --loop-distance from JS */
@keyframes logo-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--loop-distance, 50%))); }
}

.bglight2{
	background: #f0f5fc;
}




.section-title{font-weight:600; font-size:clamp(24px, 3.8vw, 40px)}
.subtle{color:var(--ink-500)}

/* Feature lists */
.feature-card{
  border-radius:var(--radius-lg);
  padding:1.25rem 1.25rem;
  background:#fff; height:100%;
}
.feature-card i{font-size:1.2rem;}

/* Specializations */
.spec-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px dashed rgba(2,10,28,.18);
  border-radius:999px; padding:.55rem 1rem; background:#fff
}

/* Value chips */
.value-chip{
  display:inline-flex;align-items:center;border-radius:999px;background:#fff;
  padding:.55rem 1rem;border:1px solid rgba(2,10,28,.08)
}

/* CTA band */
.cta-band{
  background:linear-gradient(90deg,var(--au-accent) 0%, #0d6efd 55%, #5aa0ff 100%);
  color:#fff; border-radius:var(--radius-xl)
}

/* Testimonials */
.quote{font-size:1.1rem}
blockquote{font-weight:600; font-size:1.15rem}

/* FAQ */
details{border:1px solid rgba(2,10,28,.12); border-radius:var(--radius-md); padding:1rem 1.25rem; background:#fff}
summary{cursor:pointer; font-weight:700}

/* Footer */
.au-footer a{color:#cdd8ff}
.au-footer a:hover{color:#fff}

/* Container to hold buttons vertically centered */
.side-buttons {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px; /* space between buttons */
  z-index: 1000;
}

/* Common button styles */
.side-buttons a {
  background: #1e73be;
  color: #fff;
  padding: 12px 6px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
  text-align: center;
  transform: rotate(180deg); /* bottom-to-top text */
}

/* Individual button colors */
.brochure-btn {
  background: #1e73be;
}
.brochure-btn:hover {
  background: #155a94;
}

.enquire-btn {
  background: #e63946;
}
.enquire-btn:hover {
  background: #c71c2c;
}


#scrollTopBtn {
  display: none;
}

/* On mobile devices (screen width <= 768px) */
/*@media (max-width: 768px) {
  .side-buttons {
    right: 30px; 
  }
}*/