/* ============================================================
   Trinity Study Abroad — Bootstrap conversion
   Design tokens ported 1:1 from the original Tailwind project
   ============================================================ */

:root {
  --radius: 1rem;

  --background: #f9fcff;
  --foreground: #001226;
  --card: #ffffff;
  --card-foreground: #001226;

  --primary: #004083;
  --primary-foreground: #f9fcff;
  --primary-glow: #008cdd;

  --accent: #fab72a;
  --accent-foreground: #091b31;
  --accent-glow: #ffd16b;

  --secondary: #e0f1fe;
  --secondary-foreground: #012147;
  --muted: #ebf3f9;
  --muted-foreground: #52657a;

  --border: #dbe6f0;
  --input: #dbe6f0;
  --ring: #008cdd;

  --gradient-hero: linear-gradient(135deg, #e7f1fb 0%, #b7d4f2 60%, #84b4e6 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-glow) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 100%);
  --gradient-text: linear-gradient(120deg, var(--primary) 0%, var(--primary-glow) 50%, var(--accent) 100%);

  --shadow-elegant: 0 24px 60px -24px rgba(0, 64, 131, 0.35);
  --shadow-gold: 0 16px 40px -12px rgba(250, 183, 42, 0.55);
  --shadow-soft: 0 8px 30px -8px rgba(0, 64, 131, 0.15);

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }

a { text-decoration: none; }

/* ---------- Color utilities ---------- */
.text-primary-c { color: var(--primary) !important; }
.text-accent-c { color: var(--accent) !important; }
.text-foreground { color: var(--foreground) !important; }
.text-foreground-70 { color: rgba(0, 18, 38, 0.7) !important; }
.text-muted-c { color: var(--muted-foreground) !important; }
.text-primary-fg { color: var(--primary-foreground) !important; }
.text-pf-90 { color: rgba(249, 252, 255, 0.9) !important; }
.text-pf-80 { color: rgba(249, 252, 255, 0.8) !important; }
.text-pf-70 { color: rgba(249, 252, 255, 0.7) !important; }
.text-pf-60 { color: rgba(249, 252, 255, 0.6) !important; }

.bg-primary-c { background-color: var(--primary) !important; }
.bg-accent-c { background-color: var(--accent) !important; }
.bg-card-c { background-color: var(--card) !important; }
.bg-secondary-40 { background-color: rgba(224, 241, 254, 0.4) !important; }
.bg-background-c { background-color: var(--background) !important; }

.border-soft { border: 1px solid rgba(219, 230, 240, 0.6) !important; }

/* ---------- Gradients & text effects ---------- */
.text-gradient {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-gold {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-hero { background-image: var(--gradient-hero); }
.bg-grad-primary { background-image: var(--gradient-primary); }
.bg-grad-accent { background-image: var(--gradient-accent); }

/* ---------- Shadows ---------- */
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* ---------- Radius helpers ---------- */
.rounded-xl-c { border-radius: 0.75rem; }
.rounded-2xl-c { border-radius: 1rem; }
.rounded-3xl-c { border-radius: 1.5rem; }
.rounded-4xl-c { border-radius: 2.5rem; }
.rounded-pill { border-radius: 9999px; }

/* ---------- Layout container ---------- */
.container-7xl {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}

/* ---------- Top bar ---------- */
.topbar {
  background-color: var(--primary);
  color: rgba(249, 252, 255, 0.9);
  font-size: 0.75rem;
}
.topbar a { color: rgba(249, 252, 255, 0.8); transition: color 0.2s; }
.topbar a:hover { color: var(--accent); }
.topbar .icon { color: var(--accent); }

/* ---------- Navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(20px);
  background-color: rgba(249, 252, 255, 0.75);
  border-bottom: 1px solid rgba(219, 230, 240, 0.6);
  animation: header-drop 0.6s ease-out;
}
@keyframes header-drop {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.brand-badge {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background-image: var(--gradient-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.brand-badge .dot {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: var(--accent);
  box-shadow: var(--shadow-gold);
}
.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  color: var(--primary);
  line-height: 1.1;
}
.brand-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.nav-link-c {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 18, 38, 0.7);
  transition: color 0.2s;
  position: relative;
}
.nav-link-c:hover { color: var(--primary); }
.nav-link-c.active {
  color: var(--primary);
  background-color: rgba(0, 64, 131, 0.1);
}

/* ---------- Buttons ---------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-image: var(--gradient-accent);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-foreground);
  box-shadow: var(--shadow-gold);
  transition: all 0.25s;
  border: none;
}
.btn-gold:hover {
  box-shadow: var(--shadow-elegant);
  transform: translateY(-2px);
  color: var(--accent-foreground);
}
.btn-primary-c {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: var(--primary);
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
  transition: all 0.25s;
  border: none;
}
.btn-primary-c:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
  color: var(--primary-foreground);
}
.btn-ghost-c {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 64, 131, 0.15);
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  transition: all 0.25s;
}
.btn-ghost-c:hover { background-color: #fff; color: var(--primary); }

.btn-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
}
.group:hover .btn-icon { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-blobs { position: absolute; inset: 0; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
}
.blob-1 {
  top: -5rem; left: -5rem;
  width: 420px; height: 420px;
  background-color: rgba(250, 183, 42, 0.3);
  animation: blob 14s ease-in-out infinite;
}
.blob-2 {
  top: 8rem; right: 0;
  width: 460px; height: 460px;
  background-color: rgba(0, 64, 131, 0.3);
  animation: blob 14s ease-in-out infinite;
  animation-delay: 4s;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  mix-blend-mode: overlay;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid rgba(0, 64, 131, 0.15);
  box-shadow: var(--shadow-soft);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  color: var(--primary);
  font-size: 3rem;
}
@media (min-width: 576px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 992px) { .hero-title { font-size: 4.5rem; } }

.hero-img-wrap { position: relative; max-width: 23rem; margin: 0 auto; }
.hero-img-glow {
  position: absolute;
  inset: -1rem;
  border-radius: 3rem;
  background-image: linear-gradient(135deg, rgba(250, 183, 42, 0.4), rgba(0, 64, 131, 0.3));
  filter: blur(32px);
}
.hero-img { position: relative; width: 100%; filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }

.float-card {
  position: absolute;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-elegant);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0.75rem 1rem;
  animation: float-slow 6s ease-in-out infinite;
}
.float-card.tl { top: 2.5rem; left: -1rem; }
.float-card.br { bottom: 6rem; right: -0.5rem; animation-delay: 1.5s; }
@media (min-width: 992px) {
  .float-card.tl { left: -3rem; }
  .float-card.br { right: -2rem; }
}
.float-ic {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem;
  display: grid; place-items: center;
}

.hero-wave { display: block; width: 100%; height: 4rem; color: var(--background); position: relative; }

.avatar-stack { display: flex; }
.avatar-stack > * { margin-left: -0.75rem; }
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-sm {
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  color: var(--primary-foreground);
}

/* ---------- Marquee ---------- */
.marquee-wrap {
  border-top: 1px solid rgba(219, 230, 240, 0.6);
  border-bottom: 1px solid rgba(219, 230, 240, 0.6);
  background-color: rgba(249, 252, 255, 0.5);
  padding: 1.5rem 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(0, 64, 131, 0.4);
  letter-spacing: -0.02em;
}

/* ---------- Sections ---------- */
.section-pad { padding-top: 6rem; padding-bottom: 6rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.eyebrow.gold { background-color: rgba(250, 183, 42, 0.15); }
.eyebrow.blue { background-color: rgba(0, 64, 131, 0.1); }
.eyebrow.white { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); color: var(--accent); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary);
  font-size: 2.25rem;
  line-height: 1.15;
}
@media (min-width: 576px) { .section-title { font-size: 3rem; } }

/* ---------- Stat cards ---------- */
.stat-card {
  position: relative;
  border-radius: 1.5rem;
  background-color: var(--card);
  border: 1px solid rgba(219, 230, 240, 0.6);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s;
  height: 100%;
}
.stat-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.stat-val { font-family: var(--font-display); font-weight: 800; font-size: 3rem; }
.stat-dot {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background-color: var(--accent);
  opacity: 0; transition: opacity 0.3s;
}
.stat-card:hover .stat-dot { opacity: 1; }

/* ---------- Service cards ---------- */
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--card);
  border: 1px solid rgba(219, 230, 240, 0.6);
  padding: 1.75rem;
  transition: all 0.3s;
  height: 100%;
}
.service-card:hover {
  border-color: rgba(0, 64, 131, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elegant);
}
.service-card .glow {
  position: absolute; top: -4rem; right: -4rem;
  width: 10rem; height: 10rem; border-radius: 9999px;
  background-image: linear-gradient(135deg, rgba(250,183,42,0.3), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.service-card:hover .glow { opacity: 1; }
.service-ic {
  width: 3.5rem; height: 3.5rem;
  border-radius: 1rem;
  background-image: var(--gradient-primary);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s;
}
.service-card:hover .service-ic { transform: scale(1.1); }
.service-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--primary);
  transition: color 0.2s;
}
.service-card:hover .service-link { color: var(--accent); }

/* ---------- Destinations ---------- */
.dest-card {
  position: relative;
  height: 14rem;
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s, box-shadow 0.3s;
}
.dest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); color: #fff; }
.dest-card .overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 60%);
}
.dest-card .corner {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: background-color 0.3s, color 0.3s;
}
.dest-card:hover .corner { background-color: var(--accent); color: var(--primary); }
.dest-card .corner svg { transform: rotate(-45deg); transition: transform 0.3s; }
.dest-card:hover .corner svg { transform: rotate(0deg); }
.g-uk { background-image: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.g-us { background-image: linear-gradient(135deg, #0c4a6e, #0ea5e9); }
.g-ca { background-image: linear-gradient(135deg, #7c2d12, #ea580c); }
.g-au { background-image: linear-gradient(135deg, #365314, #84cc16); }
.g-de { background-image: linear-gradient(135deg, #581c87, #a855f7); }
.g-ie { background-image: linear-gradient(135deg, #064e3b, #10b981); }

/* ---------- Process ---------- */
.process-line {
  position: absolute; top: 2.5rem; left: 12%; right: 12%;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0,64,131,0.1), var(--accent), rgba(0,64,131,0.1));
}
.process-num-outer {
  position: relative;
  margin: 0 auto;
  width: 5rem; height: 5rem;
  border-radius: 9999px;
  background-color: var(--card);
  border: 1px solid rgba(219, 230, 240, 0.6);
  display: grid; place-items: center;
  box-shadow: var(--shadow-elegant);
}
.process-num-inner {
  position: absolute; inset: 0.25rem;
  border-radius: 9999px;
  background-image: var(--gradient-primary);
  display: grid; place-items: center;
}
.process-num-inner span {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
}

/* ---------- Testimonials ---------- */
.testimonials {
  background-color: var(--primary);
  color: var(--primary-foreground);
  position: relative;
  overflow: hidden;
}
.testimonials .t-blob1 {
  position: absolute; top: -5rem; right: -5rem;
  width: 500px; height: 500px; border-radius: 9999px;
  background-color: rgba(250, 183, 42, 0.2); filter: blur(64px);
}
.testimonials .t-blob2 {
  position: absolute; bottom: -5rem; left: -5rem;
  width: 500px; height: 500px; border-radius: 9999px;
  background-color: rgba(0, 140, 221, 0.3); filter: blur(64px);
}
.t-card {
  position: relative;
  border-radius: 1.5rem;
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.75rem;
  transition: background-color 0.3s;
  height: 100%;
}
.t-card:hover { background-color: rgba(255, 255, 255, 0.1); }
.t-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 9999px;
  background-image: var(--gradient-accent);
  display: grid; place-items: center;
  color: var(--primary); font-weight: 700; font-size: 0.875rem;
}

/* ---------- CTA ---------- */
.cta-box {
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-glow), var(--accent));
  padding: 2.5rem;
  box-shadow: var(--shadow-gold);
}
@media (min-width: 768px) { .cta-box { padding: 4rem; } }
.cta-box .c-blob1 {
  position: absolute; top: -5rem; right: -5rem;
  width: 20rem; height: 20rem; border-radius: 9999px;
  background-color: rgba(0, 64, 131, 0.2); filter: blur(64px);
}
.cta-box .c-blob2 {
  position: absolute; bottom: -5rem; left: -5rem;
  width: 20rem; height: 20rem; border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.3); filter: blur(64px);
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.15;
  font-size: 2.25rem;
}
@media (min-width: 768px) { .cta-title { font-size: 3rem; } }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--primary);
  color: rgba(249, 252, 255, 0.8);
}
.footer-social {
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  display: grid; place-items: center;
  transition: background-color 0.2s, color 0.2s;
  color: rgba(249, 252, 255, 0.8);
}
.footer-social:hover { background-color: var(--accent); color: var(--primary); }
.footer-col h4 {
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-col a { color: rgba(249, 252, 255, 0.8); transition: color 0.2s; font-size: 0.875rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-bottom a { color: rgba(249, 252, 255, 0.8); }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Icons sizing ---------- */
.ic-3 { width: 0.75rem; height: 0.75rem; }
.ic-35 { width: 0.875rem; height: 0.875rem; }
.ic-4 { width: 1rem; height: 1rem; }
.ic-5 { width: 1.25rem; height: 1.25rem; }
.ic-6 { width: 1.5rem; height: 1.5rem; }
.ic-7 { width: 1.75rem; height: 1.75rem; }
.fill-star { fill: currentColor; }

/* ---------- Animations ---------- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.1); }
  66% { transform: translate(-20px,20px) scale(0.95); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Mobile offcanvas nav ---------- */
@media (max-width: 991.98px) {
  .desktop-nav { display: none !important; }
}
@media (min-width: 992px) {
  .nav-toggle { display: none !important; }
}