/* Custom Enhanced Styles & Animations for Sky Global Education */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Sky Global Education Brand Palette (Derived from Logo) */
  --brand-navy: #101730;
  --brand-sky: #0284c7;
  --brand-sky-hover: #0369a1;
  --brand-sky-light: #e0f2fe;
  --brand-sky-tint: #f0f7ff;
  --brand-cyan: #38bdf8;
  --brand-blue: #2563eb;

  /* Re-mapped brand primary accent to Logo Sky Blue */
  --coral-50: #f0f7ff;
  --coral-100: #e0f2fe;
  --coral-200: #bae6fd;
  --coral-300: #7dd3fc;
  --coral-400: #38bdf8;
  --coral-500: #0284c7;  /* Primary Sky Cerulean from Logo */
  --coral-600: #0369a1;  /* Darker Sky Cerulean for hover */
  --coral-700: #075985;  /* Deep Sky Cerulean */
  --coral-800: #0c4a6e;

  --mint-50: #f0fdf4;
  --mint-100: #dcfce7;
  --mint-500: #10b981;
  --mint-600: #059669;
  --mint-700: #047857;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  --navy-50: #f8fafc;
  --navy-100: #e2e8f0;
  --navy-200: #cbd5e1;
  --navy-300: #94a3b8;
  --navy-400: #64748b;
  --navy-500: #475569;
  --navy-600: #334155;
  --navy-700: #1e293b;
  --navy-800: #16203d;
  --navy-900: #101730; /* Logo dominant midnight navy */

  --cream: #f8fafc;
  --cream-50: #f1f5f9;
  --cream-100: #e2e8f0;
  --cream-200: #cbd5e1;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--cream);
  color: var(--navy-900);
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Top Announcement Banner */
#top-announcement-banner {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 50%, #e0f2fe 100%) !important;
  border-bottom: 1px solid #bae6fd !important;
  color: #101730 !important;
}

#top-announcement-banner,
#top-announcement-banner span,
#top-announcement-banner p {
  color: #101730 !important;
}

#top-announcement-banner #close-announcement-btn {
  color: #101730 !important;
  opacity: 0.75;
}

#top-announcement-banner #close-announcement-btn:hover {
  opacity: 1;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) rotate(var(--tilt, 0deg));
  }
  50% {
    transform: translateY(-12px) rotate(var(--tilt, 0deg));
  }
}

@keyframes spin-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin-slow-reverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.45);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(2, 132, 199, 0);
  }
}

@keyframes scan-beam {
  0% {
    left: -35%;
  }
  100% {
    left: 105%;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-flip {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  15%, 85% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}

@keyframes ripple-ping {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 60s linear infinite;
}

.animate-spin-slow-reverse {
  animation: spin-slow-reverse 45s linear infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 7s ease-in-out infinite;
}

.animate-orb-pulse {
  animation: orb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-scan-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: scan-beam 2.4s ease-in-out infinite;
}

.animate-fade-up {
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.text-flip-active {
  animation: text-flip 2.6s ease-in-out forwards;
}

.whatsapp-ping {
  animation: ripple-ping 2s infinite;
}

/* Custom Gradients & Utilities (Sky Global Logo Theme) */
.bg-coral-gradient {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
}

.bg-dark-gradient {
  background: linear-gradient(180deg, #101730 0%, #0c1224 100%) !important;
}

.bg-hero-map {
  mask-image: url('../assets/map-B_KWBYdR.png');
  -webkit-mask-image: url('../assets/map-B_KWBYdR.png');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-image: linear-gradient(120deg, #0284c7 0%, #38bdf8 50%, #10b981 100%) !important;
}

.bg-journey-dots {
  background-image: radial-gradient(rgba(16, 23, 48, 0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.bg-journey-dots-dark {
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.shadow-brand {
  box-shadow: 0 16px 36px -12px rgba(2, 132, 199, 0.42) !important;
}

.shadow-brand-sm {
  box-shadow: 0 8px 24px -8px rgba(2, 132, 199, 0.32) !important;
}

/* Sky Global Education - Brand Utility Overrides */
.bg-coral-50 { background-color: #f0f7ff !important; }
.bg-coral-100 { background-color: #e0f2fe !important; }
.bg-coral-200 { background-color: #bae6fd !important; }
.bg-coral-300 { background-color: #7dd3fc !important; }
.bg-coral-400 { background-color: #38bdf8 !important; }
.bg-coral-500 { background-color: #0284c7 !important; }
.bg-coral-600 { background-color: #0369a1 !important; }
.bg-coral-700 { background-color: #075985 !important; }
.bg-coral-800 { background-color: #0c4a6e !important; }

.hover\:bg-coral-500:hover { background-color: #0284c7 !important; }
.hover\:bg-coral-600:hover { background-color: #0369a1 !important; }
.hover\:bg-coral-700:hover { background-color: #075985 !important; }

.text-coral-300 { color: #7dd3fc !important; }
.text-coral-400 { color: #38bdf8 !important; }
.text-coral-500 { color: #0284c7 !important; }
.text-coral-600 { color: #0369a1 !important; }
.text-coral-700 { color: #075985 !important; }
.text-coral-800 { color: #0c4a6e !important; }

.border-coral-100 { border-color: #e0f2fe !important; }
.border-coral-200 { border-color: #bae6fd !important; }
.border-coral-300 { border-color: #7dd3fc !important; }
.border-coral-400 { border-color: #38bdf8 !important; }
.border-coral-500 { border-color: #0284c7 !important; }

.focus-within\:border-coral-300:focus-within { border-color: #7dd3fc !important; }
.focus-within\:ring-coral-400\/20:focus-within { --tw-ring-color: rgba(2, 132, 199, 0.25) !important; }
.focus\:border-coral-400:focus { border-color: #0284c7 !important; }
.focus\:ring-coral-400\/20:focus { --tw-ring-color: rgba(2, 132, 199, 0.25) !important; }

.ring-coral-100 { --tw-ring-color: #e0f2fe !important; }
.ring-coral-200 { --tw-ring-color: #bae6fd !important; }
.ring-coral-500 { --tw-ring-color: #0284c7 !important; }
.ring-coral-500\/30 { --tw-ring-color: rgba(2, 132, 199, 0.3) !important; }

/* Gradient Overrides for Logo Brand Colors */
.from-coral-50 { --tw-gradient-from: #f0f7ff var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(240, 247, 255, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-coral-100 { --tw-gradient-from: #e0f2fe var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(224, 242, 254, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-coral-400 { --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(56, 189, 248, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-coral-500 { --tw-gradient-from: #0284c7 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(2, 132, 199, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-coral-600 { --tw-gradient-from: #0369a1 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(3, 105, 161, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

.to-coral-50 { --tw-gradient-to: #f0f7ff var(--tw-gradient-to-position) !important; }
.to-coral-100 { --tw-gradient-to: #e0f2fe var(--tw-gradient-to-position) !important; }
.to-coral-400 { --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position) !important; }
.to-coral-500 { --tw-gradient-to: #0284c7 var(--tw-gradient-to-position) !important; }
.to-coral-600 { --tw-gradient-to: #0369a1 var(--tw-gradient-to-position) !important; }

.via-coral-400 { --tw-gradient-to: rgba(56, 189, 248, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #38bdf8 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-coral-500 { --tw-gradient-to: rgba(2, 132, 199, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #0284c7 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-coral-600 { --tw-gradient-to: rgba(3, 105, 161, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #0369a1 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }


#hero-rotating-text {
  background: linear-gradient(90deg, #0284c7 0%, #2563eb 50%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.shadow-soft {
  box-shadow: 0 12px 32px -12px rgba(27, 42, 74, 0.12);
}

.shadow-soft-lg {
  box-shadow: 0 24px 50px -18px rgba(27, 42, 74, 0.18);
}

/* Explicit Utility Dimensions */
.size-11 { width: 2.75rem !important; height: 2.75rem !important; }
.size-10 { width: 2.5rem !important; height: 2.5rem !important; }
.size-9 { width: 2.25rem !important; height: 2.25rem !important; }
.size-8 { width: 2rem !important; height: 2rem !important; }
.size-7 { width: 1.75rem !important; height: 1.75rem !important; }
.size-6 { width: 1.5rem !important; height: 1.5rem !important; }
.size-5 { width: 1.25rem !important; height: 1.25rem !important; }
.size-4 { width: 1rem !important; height: 1rem !important; }
.size-3\.5 { width: 0.875rem !important; height: 0.875rem !important; }
.size-3 { width: 0.75rem !important; height: 0.75rem !important; }
.size-2\.5 { width: 0.625rem !important; height: 0.625rem !important; }
.size-2 { width: 0.5rem !important; height: 0.5rem !important; }
.size-1\.5 { width: 0.375rem !important; height: 0.375rem !important; }

/* Translate Utilities for Drawers */
.translate-x-full {
  transform: translateX(100%) !important;
}
.translate-x-0 {
  transform: translateX(0) !important;
}

/* Global Responsive Grid Rules */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr !important; }
  .lg\:grid-cols-\[0\.85fr_1\.15fr\],
  .lg\:grid-cols-\[0\.88fr_1\.12fr\] { grid-template-columns: 0.88fr 1.12fr !important; }
  .lg\:grid-cols-\[1\.1fr_1fr\] { grid-template-columns: 1.1fr 1fr !important; }
}

/* Match Engine Section Specific Styles */
.match-engine-container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 960px) {
  .match-engine-container {
    grid-template-columns: 0.88fr 1.12fr !important;
    gap: 3.5rem;
  }
}

.engine-steps-column {
  position: relative;
  width: 100%;
}

.engine-steps-list {
  position: relative;
}

.engine-timeline-line {
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, #0284c7 0%, #38bdf8 50%, #10b981 100%) !important;
  pointer-events: none;
  z-index: 0;
}

.engine-cta-block {
  margin-top: 1.75rem;
  padding-left: 60px;
}

@media (max-width: 640px) {
  .engine-cta-block {
    padding-left: 0;
  }
}

/* Circular Meter in Match Engine Cards */
.circle-meter {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.circle-meter svg {
  width: 48px !important;
  height: 48px !important;
  transform: rotate(-90deg);
}

.meter-circle-bg {
  stroke: #d1fae5;
}

.meter-circle-fg {
  stroke: #10b981;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dedicated Hero Right Stage Coordinates & Structure */
.hero-right-stage {
  position: relative;
  height: 540px;
  width: 100%;
}

.hero-orbit-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px dashed rgba(14, 23, 41, 0.12);
  pointer-events: none;
}

.hero-orbit-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px solid rgba(14, 23, 41, 0.08);
  pointer-events: none;
}

.hero-center-globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid var(--navy-100);
  background: #ffffff;
  box-shadow: 0 12px 32px -12px rgba(27, 42, 74, 0.18);
  z-index: 5;
}

/* 4 Student Floating Avatars */
.hero-avatar-1 {
  position: absolute;
  left: 28%;
  top: 2%;
  z-index: 10;
}
.hero-avatar-1 .avatar-frame {
  width: 136px;
  height: 136px;
  border-radius: 9999px;
  border: 3.5px solid #ffffff;
  overflow: hidden;
  box-shadow: 0 20px 45px -15px rgba(27, 42, 74, 0.25);
}

.hero-avatar-2 {
  position: absolute;
  left: 2%;
  top: 10%;
  z-index: 10;
}
.hero-avatar-2 .avatar-frame {
  width: 108px;
  height: 108px;
  border-radius: 9999px;
  border: 3px solid #ffffff;
  overflow: hidden;
  box-shadow: 0 18px 40px -15px rgba(27, 42, 74, 0.22);
}

.hero-avatar-3 {
  position: absolute;
  left: 8%;
  bottom: 8%;
  z-index: 10;
}
.hero-avatar-3 .avatar-frame {
  width: 76px;
  height: 76px;
  border-radius: 9999px;
  border: 3px solid #ffffff;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(27, 42, 74, 0.2);
}

.hero-avatar-4 {
  position: absolute;
  left: 42%;
  bottom: 4%;
  z-index: 10;
}
.hero-avatar-4 .avatar-frame {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  border: 3px solid #ffffff;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(27, 42, 74, 0.2);
}

.avatar-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Floating UI Cards */
.hero-card-leeds {
  position: absolute;
  right: 2%;
  top: 4%;
  width: 216px;
  transform: rotate(4deg);
  z-index: 15;
}

.hero-card-visa {
  position: absolute;
  right: 0%;
  top: 27%;
  z-index: 14;
}

.hero-card-london {
  position: absolute;
  right: 5%;
  top: 41%;
  width: 144px;
  transform: rotate(6deg);
  z-index: 12;
}

.hero-card-delhi {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 155px;
  transform: rotate(-5deg);
  z-index: 12;
}

.hero-card-dubai {
  position: absolute;
  left: 0%;
  top: 45%;
  transform: rotate(-8deg);
  z-index: 12;
}

.hero-badge-placed {
  position: absolute;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  z-index: 15;
}

/* Interactive Dropdown Menus */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  padding-top: 0.5rem;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s ease;
}

.dropdown-menu.dropdown-align-right {
  left: auto;
  right: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: top right;
}

.dropdown-container:hover .dropdown-menu,
.dropdown-container:focus-within .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-container:hover .dropdown-menu.dropdown-align-right,
.dropdown-container:focus-within .dropdown-menu.dropdown-align-right,
.dropdown-menu.dropdown-align-right:hover {
  transform: translateY(0) scale(1);
}

/* Explicit widths and layouts for mega menu cards */
.dropdown-card-popular {
  width: 580px;
  max-width: min(580px, calc(100vw - 32px));
  box-sizing: border-box;
}

.dropdown-card-explore {
  width: 480px;
  max-width: min(480px, calc(100vw - 32px));
  box-sizing: border-box;
}

/* Modals */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  background-color: rgba(14, 23, 41, 0.65);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active .modal-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Timeline Interactive Milestones */
.timeline-track {
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}

.timeline-progress {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #10b981) !important;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-node {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.timeline-node:hover,
.timeline-node.active {
  transform: scale(1.18);
}

.timeline-node.active {
  box-shadow: 0 0 20px 4px rgba(2, 132, 199, 0.6) !important;
}

/* Course Card Hover Effects */
.course-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(2, 132, 199, 0.18), 0 12px 24px -10px rgba(16, 23, 48, 0.1) !important;
  border-color: #bae6fd !important;
}

/* Destination Cards Hover */
.dest-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.dest-card:hover img {
  transform: scale(1.08);
}

/* Testimonial Cards */
.testimonial-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card:hover {
  transform: translateY(-8px) rotate(0deg) !important;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.35);
}

/* Tabs */
.tab-btn.active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -2px rgba(2, 132, 199, 0.4) !important;
}

/* SVG Circular Progress Meter */
.meter-circle-bg {
  stroke: #d2f3e9;
}

.meter-circle-fg {
  stroke: #3dbfa0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 4px rgba(61, 191, 160, 0.6));
}

/* AI University Recommendation Platform Styles */
.uni-recommendation-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.uni-recommendation-card:hover {
  transform: translateY(-5px);
  border-color: #7dd3fc !important;
  box-shadow: 0 20px 45px -12px rgba(2, 132, 199, 0.16), 0 10px 20px -8px rgba(16, 23, 48, 0.08) !important;
}

/* Custom Range Sliders */
input[type=range] {
  accent-color: #0284c7;
}

/* Profile Modal Tabs */
.profile-tab-btn {
  transition: all 0.2s ease-in-out;
}

.profile-tab-btn:hover {
  color: #0284c7 !important;
}

/* Comparison Table Styling */
#compare-table-container th, 
#compare-table-container td {
  vertical-align: middle;
}

#compare-table-container tr:hover td {
  background-color: rgba(240, 249, 255, 0.6);
}

/* Wizard Country and Course Pills */
.wizard-country-pill,
.wizard-course-pill,
.wizard-pill {
  cursor: pointer;
  user-select: none;
}