/* ==========================================================================
   BAASOM ULTRA-PREMIUM DESIGN SYSTEM (GLOBAL CSS)
   Brand Colors:
   - Primary Navy: #061B4F / #06142E
   - Primary Blue: #0878F9
   - Brand Yellow/Gold: #FFC400
   - Light Background: #F6FAFF
   - Dark Text: #071B3A
   - Success Green: #19C37D
   ========================================================================== */

/* Universal Reset & Media Constraints (Prevents image/svg blow-up if CDN is offline) */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Strict SVG Sizing Protection (Prevents gigantic SVG icons) */
svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

svg.w-3, svg.h-3 { width: 0.75rem !important; height: 0.75rem !important; }
svg.w-3\.5, svg.h-3\.5 { width: 0.875rem !important; height: 0.875rem !important; }
svg.w-4, svg.h-4 { width: 1rem !important; height: 1rem !important; }
svg.w-5, svg.h-5 { width: 1.25rem !important; height: 1.25rem !important; }
svg.w-6, svg.h-6 { width: 1.5rem !important; height: 1.5rem !important; }
svg.w-7, svg.h-7 { width: 1.75rem !important; height: 1.75rem !important; }
svg.w-8, svg.h-8 { width: 2rem !important; height: 2rem !important; }
svg.w-9, svg.h-9 { width: 2.25rem !important; height: 2.25rem !important; }
svg.w-10, svg.h-10 { width: 2.5rem !important; height: 2.5rem !important; }
svg.w-11, svg.h-11 { width: 2.75rem !important; height: 2.75rem !important; }
svg.w-12, svg.h-12 { width: 3rem !important; height: 3rem !important; }

/* Strict Logo Size Locks */
#navLogo, .nav-logo {
  height: 40px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Baasom Custom Brand Utility Classes (Works 100% offline) */
.bg-navy-800, .bg-deepblue-800 { background-color: #061B4F !important; }
.bg-navy-900, .bg-deepblue-900 { background-color: #051745 !important; }
.bg-navy-950, .bg-deepblue-950 { background-color: #010F29 !important; }
.text-navy-900, .text-deepblue-900 { color: #051745 !important; }
.text-navy-950, .text-deepblue-950 { color: #010F29 !important; }
.border-navy-800, .border-deepblue-800 { border-color: #061B4F !important; }
.border-navy-900, .border-deepblue-900 { border-color: #051745 !important; }
.border-deepblue-700 { border-color: #0d3880 !important; }

.bg-brandblue-400 { background-color: #258CFE !important; }
.bg-brandblue-500 { background-color: #0878F9 !important; }
.bg-brandblue-600 { background-color: #0665D0 !important; }
.text-brandblue-400 { color: #258CFE !important; }
.text-brandblue-500 { color: #0878F9 !important; }
.text-brandblue-600 { color: #0665D0 !important; }
.border-brandblue-500 { border-color: #0878F9 !important; }

.bg-gold-400, .bg-darkyellow-400 { background-color: #FFD54F !important; }
.bg-gold-500, .bg-darkyellow-500 { background-color: #FFC400 !important; }
.bg-gold-600, .bg-darkyellow-600 { background-color: #E0A800 !important; }
.text-gold-400, .text-darkyellow-400 { color: #FFD54F !important; }
.text-gold-500, .text-darkyellow-500 { color: #FFC400 !important; }
.text-gold-600, .text-darkyellow-600 { color: #E0A800 !important; }
.border-gold-500, .border-darkyellow-500 { border-color: #FFC400 !important; }

.bg-lightbg { background-color: #F6FAFF !important; }
.text-textdark { color: #071B3A !important; }
.text-success { color: #19C37D !important; }
.bg-success { background-color: #19C37D !important; }

/* Header Container Protection */
#navbar {
  width: 100%;
}
#navContainer {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:root {
  --primary-navy: #061B4F;
  --dark-section: #06142E;
  --primary-blue: #0878F9;
  --brand-yellow: #FFC400;
  --light-bg: #F6FAFF;
  --text-dark: #071B3A;
  --success-green: #19C37D;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

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

/* Floating Animations */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(-0.5deg);
  }
}

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

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

/* Soft Glow */
.glow-gold {
  box-shadow: 0 10px 25px -5px rgba(255, 196, 0, 0.35);
}

.glow-blue {
  box-shadow: 0 10px 25px -5px rgba(8, 120, 249, 0.35);
}

/* Card Transitions */
.premium-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -10px rgba(6, 27, 79, 0.12);
}

/* Image Zoom */
.zoom-image-container img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-image-container:hover img {
  transform: scale(1.06);
}

/* Handwritten / Annotation Font Feel */
.travel-badge-arrow {
  font-family: 'Caveat', cursive, sans-serif;
}

/* Destination Carousel Utilities */
.carousel-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.carousel-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Feature Section (All-in-One Travel App) Master Styles */
.feature-card-glow {
  background: #ffffff;
  border: 1.5px solid rgba(8, 125, 255, 0.35);
  box-shadow: 0 16px 48px -8px rgba(2, 15, 43, 0.6), 0 0 24px -4px rgba(8, 125, 255, 0.22);
  border-radius: 26px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card-glow:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 125, 255, 0.7);
  box-shadow: 0 24px 60px -10px rgba(2, 15, 43, 0.8), 0 0 36px -4px rgba(8, 125, 255, 0.4);
}

.feature-pill-badge {
  background: rgba(3, 26, 69, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(8, 125, 255, 0.5);
  box-shadow: 0 0 16px -2px rgba(8, 125, 255, 0.4);
}

@keyframes airplaneGlide {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(6px, -6px) rotate(2deg);
  }
}
.animate-airplane {
  animation: airplaneGlide 4s ease-in-out infinite;
}