/* Highlight Abroad — shared site styles */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1e293b; }
.font-display { font-family: 'Poppins', sans-serif; }
.script { font-family: 'Dancing Script', cursive; }

/* top scroll progress bar */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #D7272D, #e94f52);
  z-index: 100; transition: width .1s ease-out;
}

/* nav links */
.nav-link { position: relative; padding-bottom: 4px; opacity: .9; transition: opacity .2s; }
.nav-link:hover, .nav-link.active { opacity: 1; }
.nav-link.active::after, .nav-link:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: #D7272D; border-radius: 2px;
}
#navbar { background: #101a2c; box-shadow: 0 2px 12px rgba(0,0,0,.15); }

/* glass / blob decorative helpers */
.glass { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); }
.blob {
  position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; z-index: 0;
}

/* hero gradient background used on inner-page banners & CTA panels */
.hero-gradient { background: linear-gradient(135deg, #101a2c 0%, #26395c 55%, #3d5e95 100%); }
.hero-overlay { background: linear-gradient(0deg, rgba(16,26,44,.85) 0%, rgba(16,26,44,.55) 60%, rgba(16,26,44,.35) 100%); }

/* card shadows + lift effect */
.card-shadow { box-shadow: 0 10px 25px -8px rgba(16,26,44,.12); }
.card-shadow-lg { box-shadow: 0 25px 50px -12px rgba(16,26,44,.25); }
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 20px 35px -10px rgba(16,26,44,.22); }
.tilt-card { transition: transform .25s ease, box-shadow .25s ease; }
.tilt-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -10px rgba(16,26,44,.18); }
.zoom-img { transition: transform .4s ease; }
.group:hover .zoom-img { transform: scale(1.08); }

/* marquee (flag strip) */
.marquee { animation: marquee-scroll 28s linear infinite; width: max-content; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-chip { white-space: nowrap; }

/* gallery */
.gallery-img { transition: transform .3s ease, opacity .3s ease; }
.gallery-img:hover { transform: scale(1.03); }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* icon-3d badges (services / test-prep) */
.icon-3d {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font-size: 22px; color: #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.15);
}
.ic-blue   { background: linear-gradient(145deg,#4f8ef0,#2f5fc4); }
.ic-red    { background: linear-gradient(145deg,#f0605f,#c62828); }
.ic-violet { background: linear-gradient(145deg,#a684f0,#6d3fc9); }
.ic-amber  { background: linear-gradient(145deg,#ffc257,#e08a00); }
.ic-teal   { background: linear-gradient(145deg,#4fd6c0,#0e9488); }
.ic-pink   { background: linear-gradient(145deg,#f78fb3,#d6336c); }

/* services / test-prep detail modals */
.hl-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; }
.hl-modal.open { display: flex; }
.hl-backdrop { position: absolute; inset: 0; background: rgba(16,26,44,.7); backdrop-filter: blur(3px); }
.hl-dialog {
  position: relative; background: #fff; width: 100%; max-width: 34rem; border-radius: 26px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 60px -15px rgba(0,0,0,.4);
}

/* misc utility used across pages */
.card-shadow, .card-shadow-lg { border-radius: inherit; }

/* hero image carousel — self-contained, no external library required */
.hero-carousel { position: relative; }
.hero-track { display: flex; height: 100%; transition: transform .7s ease; }
.hero-slide { flex: 0 0 100%; max-width: 100%; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 9999px; background: #cbd5e1; border: none; padding: 0;
  cursor: pointer; transition: width .25s ease, background-color .25s ease;
}
.hero-dot.active { width: 26px; background: #D7272D; }
.hero-arrow { transition: background-color .2s ease, color .2s ease; }
.hero-arrow:hover { background: #D7272D; color: #fff; }