@import url('/assets/css/fonts.css');

:root {
/* Professional Travel Color Palette */
--primary: 205 90% 25%; /* Deep Ocean Blue */
--primary-foreground: 0 0% 100%;
--primary-light: 205 85% 35%;
--primary-dark: 205 95% 20%;
            
--secondary: 25 90% 55%; /* Warm Sunset Orange */
--secondary-foreground: 0 0% 100%;
--secondary-light: 25 85% 65%;
            
--accent: 200 75% 85%; /* Light Sky Blue */
--accent-foreground: 205 90% 25%;
--accent-dark: 200 65% 70%;
            
--background: 0 0% 100%;
--foreground: 210 30% 8%;
--muted: 210 15% 95%;
--muted-foreground: 210 15% 45%;
--border: 210 20% 90%;
--input: 210 20% 95%;
--ring: 205 90% 25%;
            
--gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
--gradient-accent: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-light)));
--gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
--shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
        
.font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Inter', sans-serif; }
        
.travel-card { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; transition: var(--transition-smooth); }
.travel-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-2px); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; transition: var(--transition-smooth); border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); transform: translateY(-1px); }
.timeline-line { position: absolute; left: 1rem; top: 0; bottom: 0; width: 2px; background: hsl(var(--primary) / 0.3); }
.timeline-dot { position: absolute; left: 0.5rem; width: 1rem; height: 1rem; background: hsl(var(--primary)); border-radius: 50%; border: 4px solid hsl(var(--background)); box-shadow: var(--shadow-elegant); }
.gradient-bg { background: var(--gradient-primary); }
.btn-secondary { background: var(--gradient-accent); color: hsl(var(--secondary-foreground)); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; transition: var(--transition-smooth); border: none; cursor: pointer; }
.btn-secondary:hover { background: hsl(var(--secondary)); transform: translateY(-1px); }
.hero-slider { height: 100vh; position: relative; overflow: hidden; margin-bottom: 200px;}
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: opacity 1s ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-slide:not(.active) { opacity: 0; }
.btn-outline { background: transparent; color: hsl(var(--primary)); border: 1px solid hsl(var(--border)); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; transition: var(--transition-smooth); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-outline:hover { background: hsl(var(--accent) / 0.1); border-color: hsl(var(--primary)); }
.carousel-container { position: relative; max-width: 4xl; margin: 0 auto; }
.carousel-item { display: none; }
.carousel-item.active { display: block; }
.input-field { width: 100%; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; font-size: 0.875rem; transition: var(--transition-smooth); }
.input-field:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1); }
.floating-whatsapp { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; background: #25d366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; transition: var(--transition-smooth); }
.floating-whatsapp:hover { transform: scale(1.1); }
.mobile-menu { display: none; }
@media (max-width: 768px) {
  .mobile-menu { display: block; } 
  .desktop-menu { display: none; }
  .travel-style-tile { min-width: calc(50% - 0.5rem); }
}