/* Inspire Overseas Consultant - Custom Stylesheet */

/* Fonts & Globals */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  background-color: #cbd5e1;
  background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6, .font-headline {
  font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(240, 249, 255, 0.85); /* Premium soft sky-blue glass background */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 15px 30px -10px rgba(15, 76, 129, 0.1), 
              0 5px 15px -5px rgba(2, 132, 199, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(240, 249, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateY(-6px);
  box-shadow: 0 25px 40px -15px rgba(15, 76, 129, 0.15), 
              0 10px 20px -10px rgba(2, 132, 199, 0.1);
}

/* Dark Mode Glassmorphism (Optional support) */
.dark .glass-card {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Scroll Animation classes */
.fade-up, .animate-enter {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible, .animate-enter.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pulsing widgets */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

.pulse-hover:hover {
  animation: heartbeat 1.5s infinite ease-in-out;
}

/* Hero Canvas background styling */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Custom Button Styling */
.btn-primary {
  background-color: #0284c7;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #0369a1;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(2, 132, 199, 0.4);
}

.btn-secondary {
  border: 2px solid #0f4c81;
  color: #0f4c81;
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background-color: rgba(15, 76, 129, 0.05);
  transform: translateY(-2px);
}

/* Timeline connections */
.timeline-dot {
  position: relative;
  background: #ffffff;
  border: 4px solid #bae6fd;
  color: #0f4c81;
  transition: all 0.3s ease;
  z-index: 2;
}

.timeline-dot:hover {
  border-color: #0284c7;
  color: #0284c7;
}

/* Toast Message */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(15, 76, 129, 0.9);
  backdrop-filter: blur(10px);
  color: white;
  padding: 12px 24px;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* Animated Flying Plane in Hero Background */
@keyframes planeGlide {
  0% {
    transform: translate(-15vw, 12vh) rotate(30deg) scale(0.45);
    opacity: 0;
  }
  8% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(100vw, -12vh) rotate(30deg) scale(1.1);
    opacity: 0;
  }
}

.flying-plane {
  animation: planeGlide 16s infinite linear;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}