/* ========================================================================== TRAVELTARA LUXURY PORTAL - MASTER CSS ========================================================================== */ /* ========================================= GLOBAL FLUID TYPOGRAPHY SYSTEM ========================================= */ /* ========================================================================== GLOBAL SMOOTH SCROLLING ========================================================================== */ html { scroll-behavior: smooth !important; scroll-padding-top: 80px; /* Adjust this number to match the height of your navbar */ } :root { /* THE MAGIC OF CLAMP: clamp(minimum_size, preferred_dynamic_size, maximum_size) This math automatically calculates the perfect font size based on the user's screen width! */ /* Body & Paragraph Text */ --fluid-body: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); /* Main Headings */ --fluid-h1: clamp(1.8rem, 5vw, 3.5rem); --fluid-h2: clamp(1.5rem, 4vw, 2.5rem); --fluid-h3: clamp(1.2rem, 3vw, 1.8rem); --fluid-h4: clamp(1.1rem, 2vw, 1.5rem); /* Line Heights for breathing room */ --lh-body: 1.6; --lh-heading: 1.15; /* Tighter line-height for headings so they don't look scattered if they do wrap */ } /* --- APPLY THE SYSTEM GLOBALLY --- */ body { font-size: var(--fluid-body); line-height: var(--lh-body); } h1, h2, h3, h4, h5, h6, .section-title { line-height: var(--lh-heading); margin-bottom: 0.5em; /* This tiny negative letter-spacing pulls thick heading letters slightly closer, saving precious horizontal space on mobile phones! */ letter-spacing: -0.02em; } h1 { font-size: var(--fluid-h1); } h2 { font-size: var(--fluid-h2); } h3 { font-size: var(--fluid-h3); } h4 { font-size: var(--fluid-h4); } /* --- THE "NEVER WRAP" UTILITY TOOL --- */ /* Add class="single-line" to any specific HTML element that you absolutely forbid from breaking into two lines */ .single-line { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* Adds a clean "..." if a screen is unimaginably tiny */ } /* --- CORE VARIABLES & RESET --- */ :root { --primary-gold: #C5A059; --dark-navy: #0A1128; --light-bg: #F9F9F9; --white: #FFFFFF; --text-grey: #555555; --font-heading: 'Playfair Display', serif; --font-body: 'Lato', sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box !important; } body, html { font-family: var(--font-body); color: var(--dark-navy); line-height: 1.6; background-color: var(--white); overflow-x: hidden !important; max-width: 100vw !important; } h1, h2, h3, h4, .logo { font-family: var(--font-heading); } /* --- FLUID TYPOGRAPHY --- */ h1 { font-size: clamp(2.2rem, 5vw, 4rem) !important; } h2 { font-size: clamp(1.8rem, 4vw, 2.5rem) !important; } /* --- HEADER NAVIGATION --- */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; background: var(--white); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.05); } /* Hide the hamburger menu on desktop screens */ .menu-toggle { display: none; } .logo { font-size: 2rem; font-weight: 700; color: var(--dark-navy); letter-spacing: -0.15px; } .nav-links { display: flex; align-items: center; } .nav-links a { text-decoration: none; color: var(--dark-navy); margin: 0 15px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; transition: color 0.3s ease; } .nav-links a:hover { color: var(--primary-gold); } /* ========================================= */ /* NAVIGATION ACTIVE STATE INDICATOR */ /* ========================================= */ /* 1. Desktop: Just the text color changes */ .nav-item.active { color: #D4AF37 !important; /* Gold text */ font-weight: 700; } /* 2. Mobile: The whole button gets a colored background */ @media (max-width: 768px) { .nav-item.active { background-color: #D4AF37 !important; /* Gold Background */ color: #fff !important; /* White Text */ border-radius: 6px; /* Smooth rounded edges */ padding: 12px 20px !important; /* Makes it a nice big button */ display: block; /* Ensures it fills the menu row */ margin-bottom: 5px; /* Gives space if you add buttons below later */ } } /* --- BUTTONS --- */ .btn-primary { background: var(--primary-gold); color: var(--white); border: none; padding: 12px 25px; font-size: 1rem; cursor: pointer; transition: 0.3s; font-weight: bold; letter-spacing: 1px; border-radius: 5px; } .btn-primary:hover { background: var(--dark-navy); color: var(--white); } .btn-outline { background: transparent; border: 2px solid var(--primary-gold); color: var(--primary-gold); padding: 10px 20px; text-decoration: none; display: inline-block; transition: 0.3s; border-radius: 5px; } .btn-outline:hover { background: var(--primary-gold); color: var(--white); } /* --- HERO SECTION (WITH TINT OVERLAY & OVERLAP FIX) --- */ .hero, .elevate-section, .hero-section { background: linear-gradient(rgba(10, 17, 40, 0.6), rgba(10, 17, 40, 0.6)), url('../images/hero-bg.jpg') center/cover !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; min-height: 80vh !important; height: auto !important; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: 80px !important; z-index: 1 !important; position: relative !important; } .hero-content { width: 100% !important; max-width: 6000px !important; margin: 0 auto !important; text-align: center; } .hero h1, .elevate-section h1, .hero-section h1 { color: var(--white) !important; margin-bottom: 10px; line-height: 1.2 !important; position: relative; z-index: 2; } .hero p, .elevate-section p, .hero-section p { color: var(--white) !important; font-size: clamp(1rem, 2vw, 1.5rem) !important; margin-bottom: 20px; position: relative; z-index: 2; } /* ========================================= HERO CAROUSEL SPECIFICS ========================================= */ /* Hides the scrollbar on Chrome/Safari/Edge */ .hero-track::-webkit-scrollbar { display: none; } /* Hide the arrow buttons on mobile so users can use native finger swipe */ @media (max-width: 1000px) { .hero-nav { display: none !important; } } /* ========================================= HERO CAROUSEL: MOBILE & TABLET FIT ========================================= */ /* --- TABLET Adjustments --- */ @media (max-width: 1000px) { .hero-carousel-section { min-height: 60vh !important; /* Reduces the massive vertical height */ } .hero-content { width: 95% !important; /* Gives the text a little more breathing room on the edges */ } } /* --- MOBILE Adjustments (Overlapping Search Bar Layout) --- */ @media (max-width: 768px) { /* 1. The Main Banner Box */ .hero-carousel-section { width: calc(100% - 30px) !important; margin: 15px auto 50px auto !important; /* Extra 50px bottom margin gives the search bar room to hang down */ min-height: 40vh !important; /* Shorter landscape rectangle like your screenshot */ height: 40vh !important; border-radius: 20px !important; /* CRITICAL: Allows the search bar to "break out" of the box without getting cut off */ overflow: visible !important; } /* 2. Keeps the sliding images trapped inside the rounded corners */ .hero-track { border-radius: 20px !important; overflow-y: hidden !important; } /* 3. Text positioning (Moves the main text up a bit to make room) */ .hero-content { top: 35% !important; width: 100% !important; padding: 0 20px !important; } .hero-content h1 { font-size: 1.8rem !important; line-height: 1.2 !important; margin-bottom: 5px !important; } .hero-content p { font-size: 0.9rem !important; margin-bottom: 0 !important; } /* 4. THE OVERLAPPING SEARCH BAR */ .search-bar-wrapper { position: absolute !important; bottom: -25px !important; /* Pulls the bar down so it overlaps the bottom edge exactly 50% */ left: 50% !important; transform: translateX(-50%) !important; width: 90% !important; margin: 0 !important; } /* Styles the search bar to look exactly like the fat pill in the screenshot */ .search-bar { height: 60px !important; border-radius: 50px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; padding: 5px !important; } } /* ========================================= TOP DESTINATIONS SLIDER ========================================= */ .slider-wrapper { position: relative; display: flex; align-items: center; max-width: 1400px; margin: auto; padding: 0 50px; /* Room for desktop arrows */ } .dest-slider-container { display: flex; overflow-x: auto; gap: 25px; padding: 20px 5px; /* Added padding to prevent box-shadow clipping */ scroll-behavior: smooth; scrollbar-width: none; /* Hides scrollbar on Firefox */ width: 100%; } .dest-slider-container::-webkit-scrollbar { display: none; } /* Hides scrollbar on Chrome/Safari */ .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--white); color: var(--dark-navy); border: 1px solid #eaeaea; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 9999 !important; /* Forces it above all invisible layers */ pointer-events: auto !important; /* Guarantees it is clickable */ font-size: 1.2rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.300); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .slider-btn:hover { background: var(--primary-gold); color: var(--white); border-color: var(--primary-gold); transform: translateY(-50%) scale(1.1); } .slider-btn.left-btn { left: 0; } .slider-btn.right-btn { right: 0; } /* ========================================================================== TOP DESTINATIONS CARDS - SMALLER DM SANS TYPOGRAPHY ========================================================================== */ .dest-info { padding: 20px !important; /* Tighter padding for a neater look */ transform: translateY(50px); } .dest-info h3 { font-family: 'DM Sans', sans-serif !important; font-size: 1.2rem !important; /* Reduced from 1.5rem */ font-weight: 700 !important; letter-spacing: 0.5px !important; margin-bottom: 5px !important; } .hover-price p { font-family: 'DM Sans', sans-serif !important; font-size: 0.75rem !important; /* Reduced from 0.85rem */ font-style: italic !important; } .hover-price h4 { font-family: 'DM Sans', sans-serif !important; font-size: 1.1rem !important; /* Reduced from 1.3rem */ font-weight: 700 !important; margin-bottom: 5px !important; } /* ========================================= THE SUPER ROUNDED CARDS (PEEK EFFECT) ========================================= */ .dest-card { min-width: 250px; width: 250px; height: 350px; border-radius: 40px; /* Increased from 30px for a "Super Round" pill-like look */ position: relative; overflow: hidden; text-decoration: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); cursor: pointer; display: block; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, opacity 0.4s ease; scroll-snap-align: center; } /* Desktop Hover Effect (Pops a little and adds gold shadow) */ /* ========================================= DESKTOP HOVER (EXCLUSIVE POP & SIBLING FADE) ========================================= */ @media (min-width: 769px) { /* 1. When the mouse enters the slider, gently shrink and dim ALL cards */ .dest-slider-container:hover .dest-card { transform: scale(0.95); opacity: 0.6; transition: transform 0.4s ease, opacity 0.4s ease; } /* 2. BUT force the EXACT card the mouse is touching to pop forward and glow! */ .dest-slider-container .dest-card:hover { transform: translateY(-15px) scale(1.03); /* Lifts up and zooms closer */ opacity: 1; /* Forces full brightness */ box-shadow: 0 25px 50px rgba(197, 160, 89, 0.5); /* Stronger gold glow */ z-index: 10; } } /* ========================================= MOBILE VIEW: WIDER CARDS & BALANCED PEEK ========================================= */ @media (max-width: 768px) { .slider-wrapper { padding: 0; } .slider-btn { display: none !important; } .dest-slider-container { scroll-snap-type: x mandatory; padding-bottom: 40px; gap: 15px; /* Centers the new 50vw card perfectly (100 - 50 = 50 / 2 = 25vw) */ padding-left: 25vw; padding-right: 25vw; } .dest-card { /* Made the cards wider (50% of the screen) */ width: 50vw !important; min-width: 50vw !important; height: auto; /* Changed to 3:4 ratio - Makes the block wider and less "skinny" */ aspect-ratio: 3 / 4; scroll-snap-stop: always; transform: scale(0.85); opacity: 0.5; } .dest-card.focused { transform: scale(1.08); opacity: 1; box-shadow: 0 15px 30px rgba(197, 160, 89, 0.3); z-index: 5; } /* Adjusted text slide distance for the new wider cards */ .dest-info { padding: 15px; transform: translateY(18vw); transition: transform 0.4s ease; } .hover-price { opacity: 0; transition: opacity 0.4s ease; } .dest-card.focused .dest-info { transform: translateY(0); } .dest-card.focused .hover-price { opacity: 1; } .dest-info h3 { font-size: 1.3rem; margin-bottom: 5px; } .hover-price h4 { font-size: 0.65rem; margin-bottom: 10px; } .btn-outline-small { padding: 4px 10px; font-size: 0.50rem; white-space: nowrap; /* Forces the button text to stay on one line */ display: inline-block; } /* The resting state for the card IN the center (triggered by your JS) */ .dest-card.focused { transform: scale(1.05); opacity: 1; box-shadow: 0 15px 30px rgba(197, 160, 89, 0.3); z-index: 5; } } .dest-img { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #ccc; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .dest-card:hover .dest-img { transform: scale(1.1); } /* Gradient overlay so white text is always readable */ .dest-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 17, 40, 0.95) 0%, rgba(10, 17, 40, 0.4) 45%, transparent 100%); } /* Gradient overlay so white text is always readable */ .dest-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 17, 40, 0.9) 0%, rgba(10, 17, 40, 0.4) 40%, transparent 100%); } .dest-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; color: var(--white); z-index: 2; transition: transform 0.4s ease; transform: translateY(70px); /* Pushes the price out of view initially */ } .dest-info h3 { font-size: 1.8rem; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } .hover-price { opacity: 0; transition: opacity 0.4s ease; } .hover-price p { font-size: 0.85rem; margin: 0; color: #ddd; } .hover-price h4 { color: var(--primary-gold); font-size: 1.5rem; margin-bottom: 15px; font-family: var(--font-heading); } .btn-outline-small { display: inline-block; padding: 8px 20px; border: 1px solid var(--primary-gold); color: var(--white); border-radius: 50px; font-size: 0.85rem; font-weight: bold; background: rgba(197, 160, 89, 0.3); backdrop-filter: blur(5px); } /* The Hover Reveal */ .dest-card:hover .dest-info { transform: translateY(0); } .dest-card:hover .hover-price { opacity: 1; } /* Mobile Adjustments */ @media (max-width: 768px) { .slider-wrapper { padding: 0 10px; } .slider-btn { display: none !important; /* Hide arrows on mobile, users swipe */ } .dest-card { min-width: 250px; height: 350px; } } /* --- STATS BANNER --- */ .stats-banner { display: flex; justify-content: space-around; background: var(--dark-navy); color: var(--white); padding: 40px 5%; text-align: center; width: 100%; margin: 0 auto !important; overflow: hidden; } .stat-item { min-width: 0; overflow: hidden; } .stat-item h3 { color: var(--primary-gold); font-size: clamp(2rem, 3.5vw, 2.5rem) !important; white-space: nowrap; } .stat-item p { font-size: clamp(0.9rem, 1.8vw, 1rem) !important; white-space: nowrap; } /* --- GENERAL SECTIONS & LAYOUT --- */ .section-padding { padding: 80px 5%; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { color: var(--dark-navy); } /* --- GRID LAYOUT FOR PICKS (DESTINATIONS) --- */ .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .destination-card { background: var(--light-bg); border-radius: 8px; overflow: hidden; transition: transform 0.3s; border: 1px solid #eaeaea; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .card-image { height: 200px; background-color: #ccc; } .card-content { padding: 25px; text-align: center; } /* --- DESIGN YOUR OWN ESCAPES (90% WASHED-OUT WORLD MAP) --- */ .world-map-bg { position: relative; background-color: #f0f6fc; background-image: linear-gradient(rgba(240, 246, 252, 0.90), rgba(240, 246, 252, 0.90)), url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; /* Flexbox Center Alignment Magic */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .world-map-bg h2 { color: var(--dark-navy) !important; margin-bottom: 15px; } .world-map-bg p { color: #4b5563 !important; position: relative; z-index: 2; max-width: 800px; } .custom-content { max-width: 800px; margin: auto; position: relative; z-index: 2; } /* --- TRENDING DESTINATIONS (HORIZONTAL ROW FIX) --- */ /* --- CITY CATEGORY TOGGLES --- */ .city-toggle-container { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; /* Ensures buttons never cut off on mobile */ } .city-pill { padding: 10px 28px; border-radius: 50px; border: 1px solid rgba(197, 160, 89, 0.4); background: transparent; color: var(--dark-navy); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .city-pill:hover { border-color: var(--primary-gold); color: var(--primary-gold); transform: translateY(-2px); } .city-pill.active { background: var(--primary-gold); color: var(--white); border-color: var(--primary-gold); box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35); transform: translateY(-2px); } /* Bulletproof hiding class that overrides your existing !important tags */ .hidden-city { display: none !important; } /* Smooth fade-in animation when switching categories */ @keyframes cityFadeIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @media (max-width: 768px) { .city-toggle-container { padding: 0 15px; gap: 10px; } .city-pill { padding: 8px 18px; font-size: 0.85rem; flex: 0 1 auto; } } .city-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; /* Allows items to wrap naturally */ gap: 30px 15px !important; width: 100% !important; justify-items: center !important; padding: 20px 5px !important; } .city-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; cursor: pointer; transition: transform 0.3s ease; text-decoration: none; width: 140px !important; } .city-wrapper:hover { transform: translateY(-8px); } /* Bulletproof hidden classes for JS logic */ .city-grid a.city-wrapper.hidden-city { display: none !important; } .city-grid a.city-wrapper.hidden-extra { display: none !important; /* Specifically hides item #5 and beyond */ } /* --- MOBILE TABS (SINGLE LINE FIX) --- */ @media (max-width: 768px) { .city-toggle-container { padding: 5px 15px 15px; gap: 10px; justify-content: flex-start !important; /* Forces the tabs to stay on one scrollable line */ flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; } .city-toggle-container::-webkit-scrollbar { display: none; } .city-pill { padding: 8px 18px; font-size: 0.85rem; /* Stops the button from shrinking or text wrapping */ flex: 0 0 auto !important; white-space: nowrap !important; } } .city-cube { width: 140px !important; /* Made slightly larger so the circles pop */ height: 140px !important; /* Must perfectly match width for a true circle */ background-color: #e0e0e0; /* YOUR UPDATE: Forces a perfect circular block */ border-radius: 150% !important; background-size: cover !important; background-position: center !important; box-shadow: 0 10px 20px rgba(0,0,0,0.08); margin-bottom: 15px !important; transition: transform 0.4s ease, box-shadow 0.4s ease; /* Ensures the image doesn't bleed out of the circle */ overflow: hidden !important; } /* Adds a sophisticated hover lift and gold glow to the circular block */ .city-wrapper:hover .city-cube { transform: translateY(-5px) scale(1.05); /* Slight zoom on hover */ box-shadow: 0 15px 30px rgba(197, 160, 89, 0.4); } .city-name { color: var(--dark-navy) !important; font-family: var(--font-heading) !important; font-size: 1.2rem !important; font-weight: 700 !important; margin: 0 !important; text-align: center; transition: color 0.3s ease; } .city-wrapper:hover .city-name { color: var(--primary-gold) !important; } /* --- LUXURY HOTEL STAYS (AUTO-SCROLL) --- */ .hotel-scroll-container { display: flex; overflow-x: auto; gap: 20px; padding-bottom: 20px; scroll-behavior: smooth; scrollbar-width: none; } .hotel-scroll-container::-webkit-scrollbar { display: none; } .hotel-card { min-width: 250px; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* Ensure the container hides any overflow from the zooming image */ .hotel-img { overflow: hidden; } /* Make the actual image fill the container perfectly */ .hotel-img img { width: 100%; height: 100%; object-fit: cover; /* Acts exactly like background-size: cover */ display: block; transition: transform 0.4s ease; /* Smooth transition for hover effect */ } /* Premium subtle zoom effect on hover */ .hotel-card:hover .hotel-img img { transform: scale(1.08); } /* ========================================= */ /* HOTEL CAROUSEL / SCROLL ALIGNMENT */ /* ========================================= */ .hotel-scroll-container { display: flex; gap: 25px; /* Exact spacing between every card */ overflow-x: auto; /* Enables horizontal scrolling */ padding: 20px 5px 40px 5px; /* Bottom padding gives room for the scrollbar */ scroll-snap-type: x mandatory; /* Makes the cards "snap" smoothly into place */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhones/mobile */ } /* Customizing the scrollbar to match your brand */ .hotel-scroll-container::-webkit-scrollbar { height: 6px; } .hotel-scroll-container::-webkit-scrollbar-thumb { background-color: #D4AF37; /* Brand Gold */ border-radius: 10px; } .hotel-scroll-container::-webkit-scrollbar-track { background-color: #f1f1f1; } /* ========================================= */ /* INDIVIDUAL HOTEL CARD ALIGNMENT */ /* ========================================= */ .hotel-card { flex: 0 0 280px; /* FORCES every card to be exactly 280px wide. No shrinking! */ display: flex; flex-direction: column; background: #fff; border-radius: 12px; /* Smooth rounded corners */ overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.06); /* Soft premium shadow */ scroll-snap-align: start; /* Snaps the card perfectly to the left edge */ border: 1px solid #f5f5f5; } .hotel-img { height: 200px; /* FORCES every image to be exactly 200px tall */ width: 100%; overflow: hidden; } .hotel-img img { width: 100%; height: 100%; object-fit: cover; /* Guarantees images never warp or stretch */ display: block; transition: transform 0.4s ease; } .hotel-card:hover .hotel-img img { transform: scale(1.08); /* Premium zoom on hover */ } /* Perfectly aligned text */ .hotel-card h4 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #0A1128; /* Deep Navy */ margin: 20px 15px 5px 15px; /* Exact spacing from the image */ text-align: center; /* Forces title to the perfect center */ } .hotel-card p { font-family: 'Lato', sans-serif; color: #777; font-size: 0.95rem; margin: 0 15px 25px 15px; /* Exact spacing from the bottom edge */ text-align: center; /* Forces location to the perfect center */ } .hotel-card h4 { padding: 15px 15px 5px; margin: 0; } .hotel-card p { padding: 0 15px 15px; color: #666; margin: 0; } /* ========================================= COMBINED WHY CHOOSE & STATS BANNER ========================================= */ .why-choose-section { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 40px 0; } .why-banner { background: linear-gradient(135deg, var(--dark-navy), #1a2533); color: var(--white); padding: 60px 40px; border-radius: 30px !important; width: 95% !important; max-width: 1200px !important; margin: 0 auto !important; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .why-text-content h2 { color: var(--primary-gold); margin-bottom: 15px; font-size: clamp(2rem, 4vw, 2.8rem); } .why-text-content p { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; max-width: 800px; margin: 0 auto; color: #e4e4e7; } .why-stats-grid { display: flex; justify-content: space-around; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); /* Clean dividing line */ padding-top: 40px; gap: 20px; flex-wrap: wrap; } .stat-item { flex: 1; min-width: 150px; } .stat-item h3 { color: var(--primary-gold); font-size: clamp(2.2rem, 4vw, 3rem) !important; margin-bottom: 5px; } .stat-item p { font-size: clamp(0.85rem, 1.5vw, 1rem) !important; color: #ccc; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* --- MOBILE RESPONSIVENESS FOR COMBINED BANNER --- */ @media (max-width: 768px) { .why-banner { padding: 40px 20px; gap: 30px; } .why-stats-grid { flex-direction: row; flex-wrap: wrap; gap: 25px 10px; padding-top: 30px; } .stat-item { min-width: 45%; /* Puts the stats into a neat 2x2 grid on mobile */ } .stat-item h3 { font-size: 2rem !important; } .stat-item p { font-size: 0.75rem !important; } } /* --- CUSTOMER REVIEWS (NATIVE SCROLL, NO ARROWS ON MOBILE) --- */ .leave-review { margin-bottom: 40px; } .stars i { color: #ccc; font-size: 1.5rem; cursor: pointer; transition: 0.3s; margin: 0 5px; } .stars i:hover, .stars i:active { color: var(--primary-gold); } /* ========================================= VIDEO TESTIMONIALS (9:16 REELS) ========================================= */ .video-card { min-width: 280px; width: 280px; aspect-ratio: 9 / 16; /* TikTok/Reels vertical ratio */ border-radius: 30px; overflow: hidden; position: relative; flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.3s ease; } @media (min-width: 769px) { .video-card:hover { transform: translateY(-10px) scale(1.02); } } .story-vid { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .vid-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 40%, rgba(0,0,0,0.2) 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: background 0.4s ease; } .play-pause-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); border: 2px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; transition: all 0.3s ease; z-index: 10; } .mute-btn { align-self: flex-end; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; color: white; cursor: pointer; z-index: 10; transition: all 0.2s ease; } .mute-btn:hover { background: var(--primary-gold); } .vid-info-bottom { margin-top: auto; z-index: 5; } .vid-info-bottom h4 { font-size: 1.2rem; color: white; margin-bottom: 3px; } .vid-info-bottom p { font-size: 0.85rem; color: var(--primary-gold); margin: 0; font-weight: bold; } /* The Playing Effects */ .video-card.is-playing .play-pause-btn { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } .video-card.is-playing .vid-overlay { background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%); } @media (max-width: 768px) { .vid-btn { display: none !important; } .video-slider-container { padding-left: calc(50vw - 140px); padding-right: calc(50vw - 140px); } } /* ========================================= MAGIC REVIEWS (STEP-AND-HOLD INFINITY) ========================================= */ .review-marquee-wrapper { width: 100%; overflow: hidden; } .review-track { display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 20px 0; /* Forces cards to snap perfectly to the center */ scroll-snap-type: x mandatory; } .review-track::-webkit-scrollbar { display: none; } .review-card { width: 380px; background: #ffffff; border-radius: 40px; /* Super round */ padding: 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); flex-shrink: 0; border: 1px solid #f0f0f0; transition: transform 0.3s ease; /* The snap target */ scroll-snap-align: center; scroll-snap-stop: always; } /* Hide the arrows specifically for the reviews on mobile */ @media (max-width: 1000px) { .reviews-slider-container { padding: 0 !important; } .rev-btn { display: none !important; } .review-track { /* Adds padding so the first card sits dead center on load */ padding-left: calc(50vw - 165px); /* 165 is half of 330 card width */ padding-right: calc(50vw - 165px); } .review-card { width: 330px; /* Slightly smaller for mobile */ padding: 25px; } .review-text { font-size: 0.95rem; } } /* ========================================= COLORED REVIEW STARS ========================================= */ .stars { font-size: 1.1rem; margin-bottom: 15px; } /* Targeting the specific 'i' icon tag directly and forcing the color */ .stars i { color: #FFB400 !important; /* The !important tag guarantees nothing else can change this color */ margin-right: 3px; } /* Adds a tiny gap between each star so they don't mash together */ .stars i { margin-right: 3px; } .review-text { font-size: 1.05rem; color: #444; line-height: 1.6; margin-bottom: 25px; font-style: italic; } .reviewer { display: flex; align-items: center; gap: 15px; border-top: 1px solid #eee; padding-top: 15px; } .rev-avatar { width: 45px; height: 45px; border-radius: 50%; color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; } .rev-info h4 { margin: 0 0 3px 0; font-size: 1rem; color: var(--dark-navy); } .rev-info span { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; } .customer-reviews-wrapper { display: flex; align-items: center; position: relative; } .scroll-btn { background: var(--primary-gold); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; flex-shrink: 0; } .reviews-scroll-container { display: flex !important; overflow-x: auto !important; gap: 30px !important; scroll-behavior: smooth !important; padding: 20px !important; width: 100% !important; scrollbar-width: none; } .reviews-scroll-container::-webkit-scrollbar { display: none; } .review-tile { min-width: 300px; background: #f9f9f9; padding: 30px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); text-align: center; } /* ========================================= FAQ ACCORDION STYLES ========================================= */ /* --- "SHOW MORE" FAQ WRAPPER ANIMATION --- */ .more-faqs-wrapper { display: grid; grid-template-rows: 0fr; /* Keeps it completely collapsed by default */ transition: grid-template-rows 0.5s ease; } .more-faqs-wrapper.expanded { grid-template-rows: 1fr; /* Smoothly opens to reveal the content */ } .more-faqs-inner { overflow: hidden; /* Prevents text from spilling out while animating */ display: flex; flex-direction: column; gap: 15px; /* Matches your existing FAQ gap */ } .faq-container { display: flex; flex-direction: column; gap: 15px; /* Space between each question */ } .faq-item { background: #ffffff; border: 1px solid #eaeaea; border-radius: 15px; /* Clean, modern curves */ overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: all 0.3s ease; } /* When a question is clicked/active, it gets a gold glow */ .faq-item.active { border-color: var(--primary-gold); box-shadow: 0 10px 25px rgba(197, 160, 89, 0.15); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 1.1rem; font-weight: 600; color: var(--dark-navy); } .arrow-icon { color: var(--primary-gold); transition: transform 0.4s ease; /* Smooth spin */ } /* Flips the arrow upside down when open */ .faq-item.active .arrow-icon { transform: rotate(180deg); } /* === THE SMOOTH SLIDE-DOWN MAGIC === */ .faq-answer { display: grid; grid-template-rows: 0fr; /* Starts hidden */ transition: grid-template-rows 0.4s ease; } .faq-item.active .faq-answer { grid-template-rows: 1fr; /* Expands smoothly */ } .answer-content { overflow: hidden; /* Prevents text from bleeding out while sliding */ } .answer-content p { padding: 0 25px 20px 25px; margin: 0; color: #555; line-height: 1.6; font-size: 0.95rem; } /* Mobile Adjustments */ @media (max-width: 768px) { .faq-question { padding: 15px 20px; font-size: 1rem; } .answer-content p { padding: 0 20px 15px 20px; font-size: 0.9rem; } } /* ========================================= AUTO-PLAYING VIDEO STORIES ========================================= */ .video-slider-container { display: flex; overflow-x: auto; gap: 20px; padding: 10px 5px; scroll-behavior: smooth; scrollbar-width: none; width: 100%; scroll-snap-type: x mandatory; } .video-slider-container::-webkit-scrollbar { display: none; } .video-card { min-width: 320px; width: 320px; aspect-ratio: 3 / 4; /* Beautiful portrait ratio */ border-radius: 40px; overflow: hidden; position: relative; flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: pointer; } /* The actual video element */ .story-vid { width: 100%; height: 100%; object-fit: cover; /* Forces video to fill the rounded card */ pointer-events: none; /* Prevents default browser controls from showing */ } /* The Overlay that holds buttons and text */ .vid-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 40%, rgba(0,0,0,0.2) 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: background 0.4s ease; } /* Center Play/Pause Button */ .play-pause-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); border: 2px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; transition: all 0.3s ease; z-index: 10; } /* Mute Toggle Button */ .mute-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; color: white; cursor: pointer; z-index: 10; transition: all 0.2s ease; } .mute-btn:hover { background: var(--primary-gold); } /* Bottom Info Text */ .vid-info-bottom { margin-top: auto; z-index: 5; } .vid-info-bottom h4 { font-size: 1.2rem; color: white; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vid-info-bottom p { font-size: 0.85rem; color: #ddd; margin: 0; } /* === THE PLAYING EFFECTS === */ /* When the JS adds 'is-playing', fade out the play button and lighten the dark gradient */ .video-card.is-playing .play-pause-btn { opacity: 0; transform: translate(-50%, -50%) scale(1.5); /* Pops out of existence */ } .video-card.is-playing .vid-overlay { background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%); } /* Mobile Setup */ @media (max-width: 768px) { .vid-nav { display: none !important; } /* Hide PC arrows */ .video-slider-container { /* Ensures the card snaps exactly to the center on mobile */ padding-left: calc(50vw - 160px); padding-right: calc(50vw - 160px); } } /* --- VIP NEWSLETTER (COMPACT GLASSMORPHISM) --- */ .newsletter-section { background-color: transparent; padding: 30px 5%; } .newsletter-wrapper { background: rgba(10, 17, 40, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(197, 160, 89, 0.2); border-radius: 12px; padding: 25px 5%; max-width: 1100px; margin: 0 auto; color: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: space-between; gap: 40px; } .newsletter-text { flex: 1; } .newsletter-text h2 { color: var(--primary-gold); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; } .newsletter-text p { color: #e4e4e7; font-size: 0.95rem; margin-bottom: 0; line-height: 1.4; } .newsletter-action { flex: 1; max-width: 450px; } .newsletter-form { display: flex; background: transparent; border-bottom: 1px solid rgba(197, 160, 89, 0.5); padding: 0 0 5px 0; margin-bottom: 8px; } .newsletter-form input { flex: 1; border: none; background: transparent; padding: 8px 0; font-size: 0.95rem; color: var(--white); outline: none; } .newsletter-form input::placeholder { color: #a1a1aa; font-style: italic; } .newsletter-form .btn-primary { background: transparent !important; color: var(--primary-gold) !important; border: none !important; padding: 8px 15px !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; font-weight: 600 !important; transition: color 0.3s ease !important; } .newsletter-form .btn-primary:hover { color: var(--white) !important; } .privacy-note { font-size: 0.75rem !important; color: #a1a1aa !important; margin: 0 !important; text-align: left; } /* --- TAILORED TRIP PAGE (BESPOKE FORM) --- */ .custom-trip-container { display: flex; flex-wrap: wrap; gap: 50px; max-width: 1200px; margin: auto; } .process-info { flex: 1; min-width: 300px; } .process-info h2 { margin-bottom: 20px; font-size: 2.2rem; } .process-steps { margin-top: 40px; } .step { display: flex; gap: 20px; margin-bottom: 30px; } .step-icon { width: 50px; height: 50px; background: var(--primary-gold); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .step h4 { margin-bottom: 5px; color: var(--dark-navy); } .consultation-form-wrapper { flex: 1.2; min-width: 300px; background: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-top: 5px solid var(--primary-gold); } .bespoke-form .form-row { display: flex; gap: 20px; } .bespoke-form .form-row .form-group { flex: 1; } .bespoke-form label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--dark-navy); font-size: 0.9rem; } .bespoke-form input, .bespoke-form select, .bespoke-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: clamp(10px, 2vw, 15px); font-size: clamp(0.85rem, 2.5vw, 1rem); border: 1px solid #ddd; border-radius: 5px; background: #fdfdfd; font-family: var(--font-body); color: var(--dark-navy); transition: all 0.3s ease; } .bespoke-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,'); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; padding-right: 40px; text-overflow: ellipsis; } .bespoke-form input[type="month"], .bespoke-form input[type="date"] { text-transform: uppercase; cursor: text; } .bespoke-form input[type="month"]::-webkit-calendar-picker-indicator, .bespoke-form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(72%) sepia(21%) saturate(913%) hue-rotate(352deg) brightness(87%) contrast(85%); } .bespoke-form input:focus, .bespoke-form select:focus, .bespoke-form textarea:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1); } .bespoke-form textarea { resize: vertical; } /* --- BLOG PAGE & SINGLE POST LAYOUT --- */ .blog-layout { display: flex; gap: 40px; max-width: 1200px; margin: auto; } .blog-main-content { flex: 2.5; } .blog-sidebar { flex: 1; position: sticky; top: 100px; height: fit-content; } .featured-post { display: flex; flex-wrap: wrap; background: var(--light-bg); border-radius: 10px; overflow: hidden; border: 1px solid #eaeaea; } .featured-image { flex: 1.5; min-height: 350px; } .featured-text { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; } .featured-text h2 a { color: var(--dark-navy); text-decoration: none; transition: color 0.3s; } .featured-text h2 a:hover { color: var(--primary-gold); } .blog-category { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; color: var(--primary-gold); letter-spacing: 1px; margin-bottom: 10px; display: block; } .blog-meta { font-size: 0.9rem; color: var(--text-grey); margin-bottom: 15px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .blog-card { background: var(--white); border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .blog-card-img { height: 220px; } .blog-card-content { padding: 25px; } .blog-card-content h3 { margin-bottom: 10px; font-size: 1.3rem; } .blog-card-content h3 a { color: var(--dark-navy); text-decoration: none; transition: color 0.3s; } .blog-card-content h3 a:hover { color: var(--primary-gold); } .pagination { margin-top: 50px; display: flex; gap: 10px; justify-content: center; } .pagination a { padding: 10px 15px; border: 1px solid #eaeaea; color: var(--dark-navy); text-decoration: none; font-weight: 700; transition: 0.3s; } .pagination a.active, .pagination a:hover { background: var(--primary-gold); color: var(--white); border-color: var(--primary-gold); } .sidebar-widget { background: var(--light-bg); padding: 30px; border-radius: 8px; border: 1px solid #eaeaea; margin-bottom: 30px; } .sidebar-widget h3 { margin-bottom: 20px; font-size: 1.4rem; border-bottom: 2px solid var(--primary-gold); display: inline-block; padding-bottom: 5px; } .sidebar-search { display: flex; } .sidebar-search input { flex: 1; padding: 12px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px; outline: none; } .sidebar-search button { background: var(--dark-navy); color: var(--white); border: none; padding: 0 15px; cursor: pointer; border-radius: 0 4px 4px 0; transition: 0.3s; } .sidebar-search button:hover { background: var(--primary-gold); } .category-list { list-style: none; } .category-list li { margin-bottom: 15px; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } .category-list a { text-decoration: none; color: var(--dark-navy); display: flex; justify-content: space-between; transition: color 0.3s; } .category-list a:hover { color: var(--primary-gold); } /* SINGLE BLOG POST DETAILS */ .single-post-container { max-width: 800px; margin: -100px auto 50px; background: var(--white); padding: 50px; border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); position: relative; z-index: 10; } .post-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #eaeaea; } .post-header h1 { font-size: 2.8rem; color: var(--dark-navy); margin: 15px 0; line-height: 1.2; } .post-meta-details { display: flex; justify-content: center; gap: 20px; color: var(--text-grey); font-size: 0.95rem; } .post-content { font-size: 1.15rem; line-height: 1.8; color: #444; } .post-content .lead-paragraph { font-size: 1.3rem; font-weight: 300; color: var(--dark-navy); margin-bottom: 30px; } .post-content h2 { font-size: 2rem; color: var(--dark-navy); margin: 40px 0 20px; } .post-content p { margin-bottom: 25px; } .post-quote { font-family: var(--font-heading); font-size: 1.8rem; font-style: italic; color: var(--primary-gold); text-align: center; margin: 40px 0; padding: 0 40px; position: relative; } .post-quote::before { content: '"'; font-size: 4rem; position: absolute; top: -20px; left: 0; color: rgba(197, 160, 89, 0.2); } .in-post-cta { background: var(--light-bg); border-left: 4px solid var(--primary-gold); padding: 30px; margin: 40px 0; text-align: center; border-radius: 0 8px 8px 0; } .in-post-cta h3 { margin-bottom: 10px; color: var(--dark-navy); } .in-post-cta p { margin-bottom: 20px; font-size: 1rem; } .author-box { display: flex; align-items: center; gap: 20px; background: var(--light-bg); padding: 30px; border-radius: 8px; margin-top: 50px; } .author-avatar { width: 70px; height: 70px; background: var(--dark-navy); color: var(--white); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; flex-shrink: 0; } /* --- FOOTER REFINEMENT & GOLD .COM --- */ .site-footer { background: var(--dark-navy); color: var(--white); padding: 60px 5% 20px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-col a { display: block; color: #aaa; text-decoration: none; margin-bottom: 10px; } .footer-col p, .footer-col a, .footer-col li, .footer-col span:not(.gold-com) { font-size: 0.85rem !important; line-height: 1.8 !important; } .footer-brand { font-size: 2.2rem !important; font-weight: 700 !important; margin-bottom: 15px !important; color: var(--white); } .gold-com { color: var(--primary-gold) !important; } .social-icons { display: flex; gap: 15px; align-items: center; margin-top: 15px; } .social-icons a { color: var(--primary-gold); font-size: 1.5rem !important; text-decoration: none; transition: all 0.3s ease; display: inline-block; } .social-icons a:hover { color: var(--white); transform: translateY(-3px); } .footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 0.9rem; color: #ccc; } /* --- POPUP FORM & FLOATING BUTTON --- */ /* 1. The Main Wrapper (Moved to Bottom RIGHT) */ .wa-widget-container { position: fixed; bottom: 30px; right: 30px; /* Changed from left to right */ left: auto; z-index: 999999 !important; font-family: var(--font-body); } /* 2. The Floating Green Button (Slightly Smaller) */ .whatsapp-sticky { background: #25D366; color: white; width: 55px; /* Reduced from 60px */ height: 55px; /* Reduced from 60px */ border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; /* Reduced icon size */ box-shadow: 0 5px 15px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.3s ease; position: relative; } .whatsapp-sticky:hover { transform: scale(1.08); } /* 3. The Hover Tooltip (Flipped to the Left Side) */ .wa-tooltip { position: absolute; right: 75px; /* Pushed to the left of the button */ left: auto; background: white; color: var(--dark-navy); padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.1); opacity: 0; transform: translateX(10px); transition: all 0.3s ease; pointer-events: none; } .wa-tooltip::before { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent white; } .whatsapp-sticky:hover .wa-tooltip, .wa-tooltip.auto-show { opacity: 1; transform: translateX(0); } /* 4. THE CHAT POPUP DIALOG (Aligned to Right) */ .wa-popup { position: absolute; bottom: 75px; right: 0; /* Aligned to right edge of button */ left: auto; width: 340px; background: #efeae2; border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: bottom right; /* Animations spring from the right */ } .wa-popup.active { opacity: 1; visibility: visible; transform: translateY(0); } /* Add this to the very bottom of your CSS file for the new Skip Button */ .wa-quick-reply-btn { background: transparent; border: 1px solid #008069; color: #008069; padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; cursor: pointer; margin-top: 8px; display: inline-block; transition: background 0.3s ease; } .wa-quick-reply-btn:hover { background: #e8f5f3; } .wa-popup.active { opacity: 1; visibility: visible; transform: translateY(0); } /* Stacks multiple quick reply buttons neatly */ .wa-quick-reply-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .wa-quick-reply-group .wa-quick-reply-btn { margin-top: 0; width: 100%; text-align: center; } .wa-header { background: #008069; color: white; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; } .wa-header-info { display: flex; align-items: center; gap: 12px; } .wa-avatar { width: 35px; height: 35px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .wa-header-info h4 { margin: 0; font-size: 1rem; font-family: var(--font-body); font-weight: bold; } .wa-header-info p { margin: 0; font-size: 0.75rem; color: #e5ddd5; } .wa-close { font-size: 1.8rem; cursor: pointer; line-height: 1; transition: opacity 0.3s; padding-bottom: 5px; } .wa-close:hover { opacity: 0.7; } /* The Chat Canvas */ .wa-body { height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 15px; background-size: cover; background-position: center; scrollbar-width: none; } .wa-body::-webkit-scrollbar { display: none; } /* Incoming Bubble (Bot) */ .wa-chat-bubble.incoming { background: #ffffff; padding: 8px 12px; border-radius: 0 10px 10px 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); position: relative; max-width: 90%; align-self: flex-start; } .wa-chat-bubble.incoming::before { content: ''; position: absolute; top: 0; left: -10px; border: 10px solid transparent; border-top-color: #ffffff; border-left: 0; } .wa-sender { font-size: 0.75rem; font-weight: bold; color: #027eb5; display: block; margin-bottom: 3px; } /* Outgoing Bubble (User) */ .wa-chat-bubble.outgoing { background: #dcf8c6; padding: 8px 12px; border-radius: 10px 0 10px 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); position: relative; max-width: 90%; align-self: flex-end; } .wa-chat-bubble.outgoing::before { content: ''; position: absolute; top: 0; right: -10px; border: 10px solid transparent; border-top-color: #dcf8c6; border-right: 0; } .wa-chat-bubble p { margin: 0 0 5px 0; font-size: 0.9rem; color: #111; line-height: 1.4; } .wa-time { font-size: 0.65rem; color: #888; text-align: right; display: block; margin-top: -5px; } /* The Native Input Bar */ .wa-input-area { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: #f0f0f0; } .wa-input-area input { flex: 1; border: none; padding: 12px 15px; border-radius: 25px; font-size: 0.95rem; font-family: var(--font-body); outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .wa-send-circle { background: #008069; color: white; width: 42px; height: 42px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: transform 0.2s ease, background 0.3s; flex-shrink: 0; } .wa-send-circle:hover { background: #015c4b; transform: scale(1.05); } /* Animations */ .typing-indicator { display: flex; gap: 4px; align-items: center; justify-content: center; } .typing-indicator span { width: 6px; height: 6px; background-color: #888; border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .fade-in-chat { animation: chatFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes chatFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 400px) { .wa-popup { width: calc(100vw - 40px); left: 20px; position: fixed; bottom: 100px; } } .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; justify-content: center; align-items: center; } .popup-box { background: var(--white); padding: 40px; border-radius: 8px; width: 90%; max-width: 500px; position: relative; text-align: center; } .close-btn { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; } .lead-form .form-group { margin-bottom: 20px; text-align: left; } .lead-form .form-group input { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 5px; border-radius: 5px; outline: none; } .full-width { width: 100%; } /* ========================================= ULTIMATE RESPONSIVE MEDIA QUERIES ========================================= */ /* Tablets (1000px and below) */ @media (max-width: 1000px) { .nav-links a { margin: 0 10px; font-size: 0.85rem; } .logo { font-size: 1.5rem; } .blog-layout, .itinerary-container, .custom-trip-container { flex-direction: column; } .blog-sidebar, .itinerary-sidebar { position: static; width: 100%; margin-top: 30px; } .section-padding { padding: 60px 5%; } .menu-toggle { display: block; cursor: pointer; font-size: 1.5rem;} .nav-contact { display: none; } .nav-links { position: absolute; top: 100%; left: 0; width: 100%; background: var(--white); flex-direction: column; padding: 0; box-shadow: 0 10px 15px rgba(0,0,0,0.1); z-index: 1000; display: none !important; } @keyframes dropDownMenu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .nav-links.active { display: flex !important; padding: 20px 0; animation: dropDownMenu 0.3s ease forwards; } .nav-links a { margin: 15px 0; font-size: 1.2rem; width: 100%; text-align: center; display: block; } .bespoke-form .form-row { flex-direction: column; gap: 0; } .popup-box { width: 95%; padding: 25px; } } /* Tablets & Mobiles (Hide certain buttons for native swiping) */ @media (max-width: 992px) { .vid-scroll-btn, .customer-reviews-wrapper .scroll-btn { display: none !important; } .video-carousel-wrapper { display: block !important; } .newsletter-wrapper { flex-direction: column; text-align: center; padding: 30px 20px; gap: 20px; } .privacy-note { text-align: center; } } /* Small Phones */ @media (max-width: 768px) { /* Mobile Search Bar (Icon Only Fix) */ .search-bar { flex-direction: row !important; background: var(--white) !important; padding: 5px !important; border-radius: 50px !important; height: 55px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; margin-top: 20px !important; gap: 0 !important; width: 100% !important; } .search-bar input { flex: 1 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 15px !important; height: 100% !important; font-size: 0.95rem !important; min-width: 0 !important; } .search-bar .btn-primary { width: 45px !important; height: 45px !important; padding: 0 !important; border-radius: 50% !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; /* Hides the word "Search" */ } .search-bar .btn-primary::before { content: "\f002" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 1.1rem !important; color: var(--white) !important; } /* Stats Banner Fix */ .stats-banner { flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; padding: 20px 5px !important; } .stat-item { flex: 1 !important; text-align: center !important; } .stat-item h3 { font-size: clamp(1.2rem, 5vw, 2rem) !important; white-space: normal !important; margin-bottom: 5px !important; } .stat-item p { font-size: clamp(0.75rem, 3vw, 1rem) !important; white-space: normal !important; line-height: 1.3 !important; } /* Blog Single Post Layout */ .single-post-container { padding: 30px 20px; margin-top: -50px; border-radius: 15px 15px 0 0; } .post-header h1 { font-size: 2.2rem; } .post-quote { padding: 0 10px; font-size: 1.5rem; } .post-meta-details { flex-direction: column; gap: 5px; } } /* Extra Small Phones (Forms) */ @media (max-width: 576px) { .newsletter-form { flex-direction: row; gap: 5px; } .newsletter-form input { text-align: left; padding: 8px 5px; } .newsletter-form .btn-primary { padding: 8px !important; width: auto; } } /* ========================================= PREMIUM "20% OFF" LEAD POPUP ========================================= */ .premium-popup { background: url('https://www.transparenttextures.com/patterns/stardust.png'), var(--white); border-top: 6px solid var(--primary-gold); padding: 40px 30px !important; max-width: 450px !important; border-radius: 12px !important; box-shadow: 0 25px 50px rgba(0,0,0,0.3) !important; } .popup-badge { display: inline-block; background: var(--primary-gold); color: var(--white); padding: 5px 15px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(197, 160, 89, 0.4); } .premium-popup h3 { font-size: 1.8rem; color: var(--dark-navy); line-height: 1.2; margin-bottom: 10px; } .premium-popup p.popup-subtitle { font-size: 0.95rem; color: var(--text-grey); margin-bottom: 25px; line-height: 1.5; } /* Cleaner, modern inputs for the popup */ .premium-popup .form-group { margin-bottom: 15px; } .premium-popup .form-group input { width: 100%; padding: 14px 20px; border: 1px solid #e4e4e7; background: #f8fafc; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-body); transition: all 0.3s ease; } .premium-popup .form-group input:focus { background: var(--white); border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15); outline: none; } .popup-btn { padding: 15px !important; font-size: 1.1rem !important; border-radius: 8px !important; margin-top: 10px; text-transform: uppercase; box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3) !important; } .popup-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(197, 160, 89, 0.4) !important; } .popup-spam-note { font-size: 0.75rem !important; color: #a1a1aa !important; margin-top: 15px !important; margin-bottom: 0 !important; } /* ========================================= MASTER SEARCH BAR (RESPONSIVE POSITIONS) ========================================= */ /* 1. DEFAULT DESKTOP (PC): Inside the lower edge of the banner */ .search-bar-wrapper { position: absolute; bottom: 30px; /* Inside the banner */ left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; z-index: 9999; } .search-bar { display: flex; align-items: center; background: #ffffff; border-radius: 50px; padding: 8px 8px 8px 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); height: 75px; transition: all 0.3s ease; } .search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 1.15rem; color: #333; font-family: var(--font-body); } .search-bar input::placeholder { color: #888; font-style: italic; } .search-bar .btn-primary { width: 55px !important; height: 55px !important; border-radius: 50% !important; background: #154b9b !important; color: #fff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin-left: 10px; cursor: pointer; transition: transform 0.3s ease; } .search-bar .btn-primary:hover { transform: scale(1.05); background: #0c2e63 !important; } /* --- SUGGESTION DROPDOWN FIX (Fixes the blue links) --- */ .suggestion-box { position: absolute !important; top: 100% !important; margin-top: 15px !important; left: 0 !important; right: 0 !important; background: #ffffff !important; border-radius: 20px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important; z-index: 999999 !important; max-height: 350px !important; overflow-y: auto !important; display: none !important; border: 1px solid #f0f0f0; flex-direction: column !important; } .suggestion-item { display: flex !important; align-items: center !important; padding: 15px 25px !important; border-bottom: 1px solid #f9f9f9 !important; text-decoration: none !important; color: var(--dark-navy) !important; transition: background 0.2s ease !important; text-align: left !important; } .suggestion-item:hover { background: #f4f7fb !important; } .suggestion-item i { color: #154b9b !important; font-size: 1.2rem !important; margin-right: 15px !important; } .suggestion-text { display: flex !important; flex-direction: column !important; } .suggestion-text strong { font-size: 1.05rem !important; font-weight: bold !important; color: #333 !important; } .suggestion-text span { font-size: 0.8rem !important; color: #888 !important; margin-top: 2px !important; } /* ========================================= TABLET & MOBILE DYNAMIC POSITIONS ========================================= */ /* 2. TABLET: Pushed entirely below the banner */ @media (max-width: 1000px) { .search-bar-wrapper { bottom: -90px !important; /* Pushed into the white space below */ max-width: 600px; } /* Pushes the Top Destinations section down so it doesn't get covered by the search bar */ .top-destinations { margin-top: 120px !important; } } /* 3. MOBILE: Exactly 50% In / 50% Out (Pill Effect) */ @media (max-width: 768px) { .search-bar-wrapper { bottom: -32px !important; /* The magic math for the 50/50 overlap */ width: 90%; } .search-bar { height: 64px; /* Slimmer for smaller screens */ padding: 5px 5px 5px 20px; } .search-bar .btn-primary { width: 48px !important; height: 48px !important; } /* Resets the spacing for the next section */ .top-destinations { margin-top: 60px !important; } /* CRITICAL: Ensures the search bar can "break out" of the bottom of the banner without being cut off */ .hero, .hero-carousel-section { overflow: visible !important; margin-bottom: 35px !important; } } /* ========================================= MOBILE RESPONSIVE & TYPOGRAPHY FIXES ========================================= */ @media (max-width: 320px) { /* ... your other mobile rules ... */ /* 1. The Bulletproof Centered Popup */ .wa-popup { position: fixed !important; /* Breaks free from the button's container */ /* THE MAGIC: Lock it exactly 20px from both sides of the phone screen */ left: 20px !important; right: 20px !important; width: auto !important; /* Automatically stretches between the left/right locks */ max-width: none !important; bottom: 95px !important; /* Keeps it hovering safely above the green button */ /* Animation setup */ transform: translateY(20px) !important; transform-origin: bottom right !important; } /* 2. The Active State */ .wa-popup.active { transform: translateY(0) !important; } } /* 2. Shrink Header Text so it doesn't wrap */ .wa-header-info h4 { font-size: 0.95rem; } .wa-header-info p { font-size: 0.7rem; } .wa-avatar { width: 30px; height: 30px; font-size: 0.9rem; } /* Slightly smaller avatar */ /* 3. Scale down Chat Bubbles for perfect readability without bulk */ .wa-chat-bubble p { font-size: 0.85rem; line-height: 1.35; /* Adds slight breathing room between lines */ margin-bottom: 3px; } .wa-sender { font-size: 0.7rem; } .wa-time { font-size: 0.6rem; } /* 4. Make Quick Reply Buttons neat and clean */ .wa-quick-reply-btn { font-size: 0.75rem; padding: 8px 10px; /* Ensures the text stays centered and clean even if it has to wrap */ line-height: 1.2; } /* 5. Optimize the Input Bar */ .wa-input-area { padding: 8px 12px; gap: 8px; } .wa-input-area input { font-size: 0.85rem; padding: 10px 12px; } .wa-send-circle { width: 38px; height: 38px; font-size: 1rem; } /* 6. Tooltip scaling so it doesn't bump the edge of the screen */ .wa-tooltip { font-size: 0.75rem; padding: 6px 12px; right: 70px; /* Adjust spacing next to the button */ } /* ========================================= MOBILE HEADING FIX (SINGLE LINE FORCED) ========================================= */ @media (max-width: 920px) { /* Targets the main headings for: Trending Destinations, Design Your Escape, Why Choose Us, What Our Traveller Says, and FAQs */ h1, h2, .section-header h2, .section-title { /* clamp() prevents it from ever getting too big or too small. 5.5vw makes the text shrink perfectly with the screen width! */ font-size: clamp(1.2rem, 5.5vw, 2rem) !important; line-height: 1.1 !important; /* Removes vertical gap */ letter-spacing: 0.75px !important; /* Squeezes letters slightly to save space */ margin-bottom: 10px !important; /* Optional: If you want to absolutely force it to never wrap under any circumstance */ white-space: nowrap !important; } /* Sub-text under the headings (e.g. "Everything you need to know...") */ .section-header p { font-size: 0.85rem !important; line-height: 1.3 !important; padding: 0 10px; /* Keeps the paragraph from touching the screen edges */ } } /* ========================================================================== LATEST FIXES: MASTER OVERRIDES (GUARANTEES NO DELETED CODE) ========================================================================== */ /* 1. PERMANENT HEADER FIX */ .navbar { position: sticky !important; top: 0 !important; z-index: 2147483645 !important; width: 100% !important; } /* 2. FORCE DESKTOP MENU TO ALWAYS SHOW (Fixes vanishing on PC) */ @media (min-width: 1001px) { .nav-links, #navLinks { display: flex !important; position: static !important; flex-direction: row !important; background: transparent !important; width: auto !important; height: auto !important; box-shadow: none !important; animation: none !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } .nav-links a, #navLinks a { margin: 0 15px !important; font-size: 0.9rem !important; text-align: left !important; display: inline-block !important; } .menu-toggle, #mobile-menu { display: none !important; } .nav-contact, #navContact { display: block !important; } } /* 3. BULLETPROOF MOBILE LEFT-SLIDE MENU */ @media (max-width: 1000px) { /* Force the search bar under the menu */ .search-bar-wrapper { z-index: 10 !important; } /* Convert the old dropdown into a left-sliding drawer */ .nav-links, #navLinks { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; position: fixed !important; top: 0 !important; left: -120% !important; /* Hidden far left */ width: 75vw !important; max-width: 320px !important; height: 100vh !important; background: #ffffff !important; z-index: 2147483647 !important; /* MAGIC HACK: This creates the dark screen overlay automatically! */ box-shadow: 0 0 0 100vw rgba(0,0,0,0.0) !important; transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease !important; padding: 80px 30px 30px 30px !important; gap: 25px !important; animation: none !important; /* Kills old dropDown animation */ } /* Active state slides in and darkens the background */ .nav-links.active, #navLinks.active { left: 0 !important; box-shadow: 0 0 0 100vw rgba(0,0,0,0.6) !important; } /* Align links beautifully inside drawer */ .nav-links a, #navLinks a { margin: 0 !important; font-size: 1.2rem !important; text-align: left !important; width: 100% !important; color: #111 !important; font-weight: 700 !important; display: block !important; } } /* 4. WHATSAPP CHATBOX MOBILE MARGIN FIX */ @media (max-width: 480px) { .wa-popup { position: fixed !important; left: 20px !important; right: 20px !important; width: auto !important; max-width: none !important; bottom: 95px !important; transform: translateY(20px) !important; transform-origin: bottom right !important; } .wa-popup.active { transform: translateY(0) !important; } .wa-widget-container { right: 20px !important; bottom: 20px !important; } } /* ========================================================================== AUTO-ADJUSTMENT & RESPONSIVE SIZING OVERRIDES ========================================================================== */ /* 1. PREVENT CTAS AND BUTTONS FROM WRAPPING TEXT */ .btn-primary, .btn-outline, .btn-outline-small, .city-pill, .popup-btn, .wa-quick-reply-btn, .nav-item { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100%; } /* 2. TOP DESTINATIONS: DYNAMIC ASPECT RATIO (NO STRETCHING) */ .dest-card { width: 25vw !important; min-width: 250px !important; max-width: 320px !important; height: auto !important; aspect-ratio: 3 / 4 !important; /* Locks the shape */ } /* 3. TRAVELER REELS: DYNAMIC ASPECT RATIO (NO STRETCHING) */ .video-card { width: 25vw !important; min-width: 280px !important; max-width: 350px !important; height: auto !important; aspect-ratio: 9 / 16 !important; /* Locks the vertical video shape */ } /* 4. MOBILE: AUTO-ADJUST SIZES FOR CARDS */ @media (max-width: 768px) { .dest-card { width: 60vw !important; min-width: 60vw !important; } .dest-slider-container { padding-left: 20vw !important; padding-right: 20vw !important; } .video-card { width: 60vw !important; min-width: 60vw !important; } .video-slider-container { padding-left: 20vw !important; padding-right: 20vw !important; } } /* ========================================================================== GLOBAL WEBSITE SIDE MARGIN / PADDING REDUCTION ========================================================================== */ /* Desktop & Tablet: Reduce side spacing from 5% to 2% and stretch maximum widths */ .navbar { padding-left: 2% !important; padding-right: 2% !important; } .section-padding { padding-left: 2% !important; padding-right: 2% !important; } .site-footer { padding-left: 2% !important; padding-right: 2% !important; } /* Allow sliders to stretch closer to the screen edges */ .slider-wrapper { padding: 0 20px !important; max-width: 1600px !important; } .reviews-slider-container { padding: 0 20px !important; max-width: 1600px !important; } /* Mobile: Set tight but safe 15px edges */ @media (max-width: 768px) { .navbar { padding-left: 15px !important; padding-right: 15px !important; } .section-padding { padding-left: 10px !important; padding-right: 10px !important; } .site-footer { padding-left: 15px !important; padding-right: 15px !important; } } /* ========================================================================== TOP DESTINATIONS CARDS - ADJUSTED DM SANS TYPOGRAPHY (SLIGHTLY LARGER) ========================================================================== */ .dest-info { padding: 22px !important; /* Slightly more breathing room */ transform: translateY(55px); } .dest-info h3 { font-family: 'DM Sans', sans-serif !important; font-size: 1.35rem !important; /* Increased from 1.2rem */ font-weight: 700 !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; } .hover-price p { font-family: 'DM Sans', sans-serif !important; font-size: 0.8rem !important; /* Increased from 0.75rem */ font-style: italic !important; } .hover-price h4 { font-family: 'DM Sans', sans-serif !important; font-size: 1.2rem !important; /* Increased from 1.1rem */ font-weight: 700 !important; margin-bottom: 5px !important; } /* 1. Force Headers to Single Line (LARGER SIZE + PERFECT FIT) */ .top-cities .section-header h2, .reviews-section .section-header h2, .faq-section .section-header h2, .section-header h2 { white-space: nowrap !important; /* Increased the minimum size to 1.15rem, and it scales nicely with 6vw */ font-size: clamp(1.15rem, 6vw, 1.8rem) !important; letter-spacing: -0.5px !important; /* Tighter spacing prevents wrapping */ width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 8px !important; } /* ========================================================================== ULTIMATE CURSOR & HIGHLIGHT FIX ========================================================================== */ /* 1. Nuke the ' | ' cursor and disable text highlighting on EVERY element */ * { cursor: default !important; -webkit-user-select: none !important; /* Safari */ -ms-user-select: none !important; /* IE 10+ */ user-select: none !important; /* Standard */ } /* 2. Restore the 'Clicking Hand' strictly for buttons and links */ a, button, [onclick], .btn-primary, .btn-outline, .btn-outline-small, .menu-toggle, .city-pill, .dest-card, .video-card, .faq-question, .wa-send-circle, .close-btn, .whatsapp-sticky, .slider-btn, .mute-btn, .play-pause-btn, a * { cursor: pointer !important; } /* 3. Restore the ' | ' cursor and typing ability ONLY for forms and search bars */ input, textarea, select { cursor: text !important; -webkit-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; } /* ========================================================================== LOVE FOR FORESTS SECTION & OVERLAYS ========================================================================== */ /* ========================================================================== LOVE FOR FORESTS - LONG BANNER LAYOUT ========================================================================== */ .forest-banner { position: relative; width: 100%; min-height: 350px; /* Creates the long, panoramic look */ border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.15); } .forest-banner .forest-img { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #2d6a4f; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .forest-banner:hover .forest-img { transform: scale(1.05); /* Smooth zoom effect on the banner */ } .forest-banner .forest-overlay { position: absolute; inset: 0; background: rgba(10, 17, 40, 0.45); backdrop-filter: blur(8px); /* Glass blur effect */ -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; z-index: 2; } /* Mobile height adjustment so it still looks good on small screens */ @media (max-width: 768px) { .forest-banner { min-height: 250px; } } .forest-img { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #2d6a4f; transition: transform 0.4s ease; } .forest-card:hover .forest-img { transform: scale(1.05); } /* The Blurred Glass Overlay */ .forest-overlay { position: absolute; inset: 0; background: rgba(10, 17, 40, 0.45); backdrop-filter: blur(8px); /* Blur effect over the image */ -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } .overlay-content h4 { color: var(--primary-gold); font-size: 1.6rem; margin-bottom: 5px; } .overlay-content p { color: var(--white); font-size: 0.95rem; margin-bottom: 20px; font-style: italic; } /* Custom Green CTA Button */ .forest-cta-btn { background: rgba(45, 106, 79, 0.7) !important; border-color: #fff !important; color: #fff !important; padding: 10px 25px !important; font-size: 0.9rem !important; } .forest-cta-btn:hover { background: #fff !important; color: #2d6a4f !important; } /* Custom Green Popup Theme */ .forest-popup-box { border-top: 6px solid #2d6a4f !important; } /* ========================================================================== TRAVELLER GALLERY - 2-ROW SQUARE INFINITY GRID ========================================================================== */ .gallery-track { display: grid; grid-template-rows: repeat(2, 1fr); /* Forces exactly 2 rows vertically */ grid-auto-flow: column; /* Flows images left-to-right to create columns */ gap: 10px; /* Small gap to match your reference image */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-item { width: 23vw; /* Perfect size for desktop */ max-width: 300px; min-width: 150px; aspect-ratio: 1 / 1 !important; /* Forces perfect squares like the image */ overflow: hidden; cursor: zoom-in !important; transition: opacity 0.3s ease; scroll-snap-align: start; } .gallery-item:hover { opacity: 0.8; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Arrow Buttons */ .gallery-arrow { background: var(--dark-navy); color: var(--white); border: none; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer !important; transition: background 0.3s ease; } .gallery-arrow:hover { background: var(--primary-gold); } /* Smart Device Adjustments */ @media (max-width: 768px) { .gallery-item { width: 42vw; } /* Scales up nicely for mobile */ .gallery-track { gap: 5px; } } /* ========================================================================== GALLERY LIGHTBOX (FULL SCREEN VIEW WITH ARROWS) ========================================================================== */ .lightbox-overlay { display: none; position: fixed; z-index: 2147483647; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(10, 17, 40, 0.95); backdrop-filter: blur(5px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .lightbox-overlay.active { display: flex; opacity: 1; } /* Image perfectly shapes to portrait or landscape */ .lightbox-img { max-width: 80%; /* Leaves room for the arrows */ max-height: 90vh; object-fit: contain !important; /* Forces natural shape detection */ border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.2s ease, opacity 0.2s ease; /* Smooth sliding transition */ cursor: default !important; } .lightbox-overlay.active .lightbox-img { transform: scale(1); } .lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: 300; cursor: pointer !important; transition: color 0.3s; z-index: 3; } .lightbox-close:hover { color: var(--primary-gold); } /* Navigation Arrows */ .lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); width: 50px; height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer !important; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 2; } .lightbox-arrow:hover { background: var(--primary-gold); border-color: var(--primary-gold); } .lightbox-arrow.left { left: 40px; } .lightbox-arrow.right { right: 40px; } /* Mobile Adjustments */ @media (max-width: 768px) { .lightbox-close { top: 10px; right: 20px; font-size: 35px; } .lightbox-arrow { width: 40px; height: 40px; font-size: 16px; } .lightbox-arrow.left { left: 10px; } .lightbox-arrow.right { right: 10px; } .lightbox-img { max-width: 90%; } } /* ========================================= */ /* DESTINATIONS UTILITY & FILTER BAR */ /* ========================================= */ .utility-bar { padding: 100px 20px 30px; background-color: #f9f9f9; border-bottom: 1px solid #eee; } .utility-container { max-width: 1200px; margin: auto; } .search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .dest-search-form { flex: 1; display: flex; align-items: center; background: #fff; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #ddd; position: relative; min-width: 200px; } .search-icon { color: #666; font-size: 1.2rem; padding-left: 20px; } #destSearchInput { flex: 1; padding: 16px 15px; border: none; outline: none; font-family: 'Lato', sans-serif; font-size: 1.05rem; } .search-btn { border: none; padding: 16px 25px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 1rem; white-space: nowrap; } /* Auto-Suggest Dropdown */ .search-suggestions { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 0 0 8px 8px; z-index: 1000; max-height: 350px; overflow-y: auto; flex-direction: column; border: 1px solid #eee; border-top: none; } .suggestion-item { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 12px; transition: background 0.2s; } .suggestion-item:hover { background: #f9f9f9; } /* Buttons and Labels */ .reset-btn { background: none; border: none; color: #d63031; font-family: 'Lato', sans-serif; font-weight: 700; cursor: pointer; font-size: 0.95rem; text-decoration: underline; margin-left: 5px; } .mobile-filter-btn { display: none; /* Hidden on Desktop */ padding: 15px 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-family: 'Lato', sans-serif; color: #333; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.05); white-space: nowrap; } .filter-label { font-family: 'Lato', sans-serif; font-size: 0.9rem; color: #666; margin-right: 8px; } .advanced-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; background: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); border: 1px solid #eee; } .filter-group-wrap { display: flex; gap: 20px; flex-wrap: wrap; width: 100%; align-items: center; } .filter-select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Lato', sans-serif; outline: none; cursor: pointer; background: #fff; } .view-toggles { display: flex; gap: 10px; margin-left: auto; align-items: center; } .view-btn { background: none; border: none; cursor: pointer; font-size: 1.3rem; color: #aaa; transition: 0.3s; } .view-btn.active { color: var(--primary-gold, #D4AF37); } /*DESTINATION PAGES START*/ /* ========================================= */ /* DESTINATIONS UTILITY & FILTER BAR */ /* ========================================= */ .utility-bar { padding: 110px 20px 30px; background-color: #f9f9f9; border-bottom: 1px solid #eee; box-sizing: border-box; } .utility-container { max-width: 1200px; margin: auto; width: 100%; } .search-row { width: 100%; margin-bottom: 20px; } .dest-search-form { display: flex; align-items: center; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #ddd; position: relative; width: 100%; padding: 5px; } .search-icon { color: #D4AF37; font-size: 1.1rem; padding-left: 10px; flex-shrink: 0; } #destSearchInput { flex: 1; padding: 12px 10px; border: none; outline: none; font-family: 'Lato', sans-serif; font-size: 1.05rem; min-width: 0; /* Critical for single-line mobile layout */ } /* --- DESKTOP BUTTONS --- */ .search-btn { border: none; padding: 12px 30px; border-radius: 5px; cursor: pointer; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #D4AF37; color: #fff; } .search-btn-icon { display: none; } .filter-funnel-btn, .mobile-view-btn { display: none; /* Both hidden on PC */ } /* Auto-Suggest Dropdown */ .search-suggestions { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 0 0 8px 8px; z-index: 1000; max-height: 350px; overflow-y: auto; flex-direction: column; border: 1px solid #eee; border-top: none; } .suggestion-item { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 12px; transition: background 0.2s; } .suggestion-item:hover { background: #f9f9f9; } /* Filters Menu */ .advanced-filters { display: flex; flex-wrap: wrap; align-items: center; background: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); border: 1px solid #eee; } .filter-header-mobile { display: none; } .filter-group-wrap { display: flex; gap: 20px; flex-wrap: wrap; width: 100%; align-items: center; } .filter-group { display: flex; align-items: center; } .filter-label { font-family: 'Lato', sans-serif; font-size: 0.9rem; color: #666; margin-right: 8px; } .filter-select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Lato', sans-serif; outline: none; cursor: pointer; background: #fff; } .reset-btn { background: none; border: none; color: #d63031; font-family: 'Lato', sans-serif; font-weight: 700; cursor: pointer; font-size: 0.95rem; text-decoration: underline; margin-left: 15px; } /* ========================================= */ /* MOBILE RESPONSIVE LOGIC FOR FILTERS */ /* ========================================= */ @media (max-width: 768px) { .utility-bar { padding: 65px 15px 15px; } .search-row { margin-bottom: 5px; } /* Show Funnel Icon */ .filter-funnel-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-left: 2px; background: transparent; border: none; color: #666; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; transition: color 0.3s; } .filter-funnel-btn.active { color: #D4AF37; } /* Single View Toggle */ .mobile-view-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-left: 2px; background: transparent; border: none; color: #888; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; } /* Force Mobile Search Button to sleek square */ .search-btn { width: 38px !important; height: 38px !important; padding: 0 !important; margin-left: 4px; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; flex-shrink: 0; } .search-btn-text { display: none !important; } .search-btn-icon { display: block !important; font-size: 1rem; margin: 0; } /* Hidden Dropdown Logic */ .advanced-filters { display: none; flex-direction: column; align-items: stretch; } .advanced-filters.show-mobile-filters { display: flex; animation: slideDownFade 0.3s ease; } /* Mobile Header inside the filter menu */ .filter-header-mobile { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #eee; } .reset-btn { margin-left: 0; } .filter-group-wrap { flex-direction: column; gap: 15px; } .filter-group { flex-direction: column; align-items: flex-start; width: 100%; } .filter-label { margin-bottom: 5px; } .filter-select { width: 100%; padding: 12px; } .view-toggles { display: none !important; } /* 🚨 2-COLUMN GRID OPTIMIZATIONS (MOBILE TILE VIEW) 🚨 */ .grid-container.mobile-grid-view { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; /* Tighter gap so cards fit better */ } .grid-container.mobile-grid-view .destination-card p { display: none !important; /* Hides the paragraph text */ } .grid-container.mobile-grid-view .card-content { padding: 12px 8px !important; /* Shrinks padding to maximize space */ text-align: center; /* Centers the heading and button */ } .grid-container.mobile-grid-view .card-content h3 { font-size: 1.05rem !important; /* Scales down heading slightly */ margin-bottom: 10px !important; } .grid-container.mobile-grid-view .btn-outline { padding: 8px 5px !important; /* Sleek button padding */ font-size: 0.85rem !important; /* Smaller text */ width: 100% !important; /* Button fills the width of the tiny card */ display: block !important; box-sizing: border-box !important; white-space: nowrap !important; /* 🚨 FORCES single line 🚨 */ overflow: hidden !important; /* Cuts off excess text */ text-overflow: ellipsis !important; /* Adds "..." if it's too long */ } } /* ========================================= */ /* 🚨 FIX: PERFECT BUTTON ALIGNMENT 🚨 ((INDIPENDINT DO NOT DELETE) */ /* ========================================= */ /* 1. Make the whole card a flex column that stretches full height */ .destination-card { display: flex; flex-direction: column; height: 100%; } /* 2. Tell the content area to grow and fill all empty space */ .card-content { display: flex; flex-direction: column; flex-grow: 1; } /* 3. The Magic: Push the button to the absolute bottom */ .destination-card .btn-outline { margin-top: auto !important; } /* ========================================= */ /* SUB-PAGE: DESTINATION PACKAGE GRID */ /* ========================================= */ .subpage-hero { height: 60vh; min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 80px; } .subpage-hero-content h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; margin-bottom: 10px; } .subpage-hero-content p { font-family: 'Lato', sans-serif; font-size: 1.2rem; opacity: 0.9; } /* Badge overlaying the image */ .duration-badge { position: absolute; top: 15px; right: 15px; background: #D4AF37; color: #fff; padding: 6px 12px; border-radius: 4px; font-family: 'Lato', sans-serif; font-weight: bold; font-size: 0.85rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } /* Specific styling for the package price */ .package-price { color: #D4AF37; font-family: 'Playfair Display', serif; font-size: 1.3rem; margin: 15px 0 20px 0; font-weight: 700; } @media (max-width: 768px) { .subpage-hero-content h1 { font-size: 2.5rem; } } /* ========================================= */ /* SINGLE ITINERARY PAGE LAYOUT */ /* ========================================= */ .itinerary-layout-container { max-width: 1200px; margin: auto; display: flex; gap: 50px; padding: 60px 20px; align-items: flex-start; /* Ensures sidebar stays sticky at top */ } .itinerary-main-content { flex: 2; min-width: 0; /* Prevents flex blowout */ } .itinerary-overview h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #222; margin-bottom: 15px; } .itinerary-overview p { font-family: 'Lato', sans-serif; font-size: 1.1rem; color: #555; line-height: 1.6; margin-bottom: 40px; } /* The Timeline Blocks */ .day-block { margin-bottom: 40px; border-left: 3px solid #D4AF37; padding-left: 25px; position: relative; } .day-block h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #222; margin-bottom: 15px; display: flex; align-items: center; } .day-block p { font-family: 'Lato', sans-serif; color: #666; line-height: 1.6; } .day-badge { background: #D4AF37; color: #fff; font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: bold; padding: 4px 10px; border-radius: 4px; margin-right: 15px; text-transform: uppercase; letter-spacing: 1px; } /* Sticky Sidebar */ .itinerary-sidebar { flex: 1; min-width: 320px; position: sticky; top: 100px; /* Sticks just below your fixed navbar */ background: #fff; padding: 30px; border-radius: 8px; border: 1px solid #eaeaea; box-shadow: 0 5px 25px rgba(0,0,0,0.05); } .sidebar-price-box { background: #fdfbf7; border: 1px solid #f2e6c9; padding: 20px; border-radius: 6px; text-align: center; margin-bottom: 25px; } .sidebar-price-box .price-label { font-family: 'Lato', sans-serif; font-size: 0.9rem; color: #888; text-transform: uppercase; } .sidebar-price-box .price-amount { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: #D4AF37; margin-top: 5px; } .price-person { font-size: 1rem; color: #888; font-family: 'Lato', sans-serif; font-weight: 400; } .itinerary-sidebar h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 20px; color: #222; } .amenities-list { list-style: none; margin-bottom: 20px; } .amenities-list li { margin-bottom: 12px; font-family: 'Lato', sans-serif; font-weight: 700; color: #444; } .amenities-list i { color: #D4AF37; margin-right: 12px; width: 20px; text-align: center; font-size: 1.1rem; } .sidebar-divider { border: 0; border-top: 1px solid #eee; margin: 25px 0; } /* Mobile Responsiveness */ @media (max-width: 900px) { .itinerary-layout-container { flex-direction: column; /* Stacks the sidebar below the content */ gap: 40px; } .itinerary-sidebar { width: 100%; min-width: 100%; position: static; /* Removes sticky behavior on phones */ } } /* ========================================= */ /* BREADCRUMBS NAVIGATION (DEEP PAGES) */ /* ========================================= */ .breadcrumbs-bar { width: 100%; background-color: #fff; padding: 90px 20px 15px 20px; /* 90px top padding clears your fixed navbar */ border-bottom: 1px solid #eee; } .breadcrumbs-container { max-width: 1200px; margin: 0 auto; } .breadcrumbs { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95rem; } .breadcrumbs li { display: flex; align-items: center; } /* The clickable links (Blue like your screenshot) */ .breadcrumbs a { text-decoration: none; color: #1a56a6; /* Deep Blue */ font-weight: 600; transition: color 0.3s; } .breadcrumbs a:hover { color: #D4AF37; /* Gold on hover */ } /* The little arrow separators */ .breadcrumbs i { color: #a0a0a0; font-size: 0.7rem; margin: 0 5px; } /* The page you are currently on (Grey text, unclickable) */ .breadcrumbs .current-page { color: #666; font-weight: 400; } /* 🚨 HERO ADJUSTMENT 🚨 Because the breadcrumbs now clear the navbar, we remove the top padding from the hero banner on these pages */ .breadcrumbs-bar + .subpage-hero { padding-top: 0 !important; height: 50vh !important; } /*404 NOT FOUND PAGE */ /*BELOW CONTINIUS THE MAIN CODE */ /* ========================================= */ /* 404 ERROR PAGE LAYOUT */ /* ========================================= */ .error-404-section { height: 100vh; /* Takes up the exact full screen height */ display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 80px 20px 20px 20px; /* Top padding clears your fixed navbar */ } .error-content { animation: fadeIn 0.8s ease-out; } .error-code { font-family: 'Playfair Display', serif; font-size: 10rem; /* Massive, beautiful numbers */ color: #D4AF37; /* Brand Gold */ margin-bottom: 0; line-height: 1; text-shadow: 0 10px 30px rgba(0,0,0,0.5); } .error-content h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; margin-bottom: 20px; margin-top: 10px; } .error-content p { font-family: 'Lato', sans-serif; font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; } .error-actions { display: flex; gap: 20px; justify-content: center; } /* Customizing the outline button specifically for the dark 404 background */ .error-outline-btn { border-color: #fff !important; color: #fff !important; } .error-outline-btn:hover { background-color: #fff !important; color: #0a1128 !important; /* Navy text on hover */ } /* Mobile Adjustments for 404 Page */ @media (max-width: 768px) { .error-code { font-size: 6rem; } .error-content h2 { font-size: 2rem; } .error-actions { flex-direction: column; padding: 0 20px; } } /* ========================================= */ /* PREMIUM DESTINATION TOGGLE SWITCH */ /* ========================================= */ .toggle-container { display: flex; justify-content: center; margin: 50px 20px; /* Fluid margins */ } .toggle-switch { position: relative; display: flex; background-color: #E8ECEF; /* Soft, premium grey */ border-radius: 50px; padding: 6px; /* Creates an inset 'track' for the pill to slide in */ box-shadow: inset 0 2px 6px rgba(0,0,0,0.1); /* Inset shadow for depth */ } /* Hide the default radio buttons */ .toggle-switch input[type="radio"] { display: none; } .toggle-switch label { padding: 12px 35px; font-family: 'Playfair Display', serif; font-size: 0.8rem; color: #555; /* Muted color for unselected text */ cursor: pointer; position: relative; z-index: 2; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); text-align: center; min-width: 150px; font-weight: 700; letter-spacing: 0.5px; } /* When checked, make the text that signature Gold */ .toggle-switch input[type="radio"]:checked + label { color: #C5A059; } /* The floating dark navy pill */ .toggle-slider { position: absolute; top: 6px; /* Matches the container padding */ bottom: 6px; left: 6px; width: calc(50% - 6px); /* Perfect half-width minus padding */ background-color: #0A1128; border-radius: 40px; z-index: 1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elegant 'spring' effect */ box-shadow: 0 4px 12px rgba(10, 17, 40, 0.3); /* Beautiful floating shadow */ } /* Move the slider to the right when International is selected */ #toggle-international:checked ~ .toggle-slider { transform: translateX(100%); } /* Smooth fade-in animation for the destination cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* ========================================= */ /* MOBILE OPTIMIZATIONS FOR TOGGLE SWITCH */ /* ========================================= */ @media (max-width: 768px) { .toggle-container { margin: 20px auto; /* Keeps it perfectly centered */ max-width: 90%; /* Prevents it from stretching to the edges */ } .toggle-switch { padding: 4px; height: 42px; /* Slims the entire pill shape down */ display: flex; align-items: center; } .toggle-switch label { padding: 0 16px; font-size: 0.85rem; /* Sleek, premium text size */ min-width: 130px; white-space: nowrap; /* CRITICAL: Prevents 'International' from breaking into two lines */ display: flex; align-items: center; justify-content: center; height: 100%; } .toggle-slider { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); } } /* For ultra-small screens (like iPhone SE) */ @media (max-width: 400px) { .toggle-switch label { padding: 0 10px; font-size: 0.75rem; /* Scales down just a bit more */ min-width: 110px; letter-spacing: 0; /* Saves space */ } } /* ========================================= */ /* STRICT BUTTON ALIGNMENT & TEXT CLIPPING */ /* ========================================= */ .destination-card { display: flex; flex-direction: column; height: 100%; } .card-content { display: flex; flex-direction: column; flex-grow: 1; } /* 1. THE TEXT LOCK: Forces every description to behave exactly the same */ .card-content p { display: -webkit-box; -webkit-line-clamp: 2; /* Cuts off text after 2 lines */ -webkit-box-orient: vertical; overflow: hidden; /* Hides anything that overflows */ min-height: 44px; /* Forces 1-line text to take up 2 lines of space */ margin-bottom: 20px; } /* 2. THE BUTTON LOCK: Forces the button to the absolute bottom */ .card-content .btn-outline { margin-top: auto !important; align-self: center; /* Keeps the button centered like your screenshot */ } /* ========================================= */ /* GRID CONSISTENCY: DOMESTIC & INTERNATIONAL */ /* ========================================= */ #destGrid { display: grid; /* This creates a 4-column grid on desktop by default */ grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: stretch; justify-content: start; /* Keeps cards to the left, no stretching */ } /* Ensure the card itself doesn't grow beyond its grid cell */ .destination-card { display: flex; flex-direction: column; height: 100%; max-width: 100%; /* Prevents stretching across the screen */ margin: 0; } /* --- Responsive Adjustments --- */ @media (max-width: 1200px) { #destGrid { grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller laptops */ } } @media (max-width: 992px) { #destGrid { grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */ } } @media (max-width: 600px) { #destGrid { /* On mobile, if you want a single list or tiny grid, keep it 1 or 2 */ grid-template-columns: 1fr; } /* If you want the 'mobile-grid-view' we built earlier to take over */ #destGrid.mobile-grid-view { grid-template-columns: repeat(2, 1fr); gap: 15px; } } /* ========================================= */ /* SMART PROMO AD STRIP STYLING */ /* ========================================= */ .infinity-ad-section { padding: 30px 0; background-color: #fcfcfc; max-width: 1200px; margin: 0 auto; overflow: hidden; } .marquee-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .marquee-track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 10px 20px 25px 20px; /* Hide native scrollbars */ -ms-overflow-style: none; scrollbar-width: none; } .marquee-track::-webkit-scrollbar { display: none; } /* Ad Card Styling */ .promo-card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border-radius: 12px; border: 1px solid #eaeaea; overflow: hidden; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .promo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .strip-img { height: 160px; background-position: center; background-size: cover; position: relative; } /* Promotional Badges */ .promo-badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 4px; font-family: 'Lato', sans-serif; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .offer-badge { background: #d63031; color: #fff; } .exclusive-badge { background: #0A1128; color: #C5A059; border: 1px solid #C5A059; } .signature-badge { background: rgba(255, 255, 255, 0.95); color: #0A1128; } .strip-info { padding: 15px 20px; } .promo-subtitle { display: block; font-family: 'Lato', sans-serif; font-size: 0.7rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; } .promo-card h3 { font-family: 'Playfair Display', serif; color: #0A1128; font-size: 1.3rem; margin-bottom: 15px; } /* Ad Footer */ .promo-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 15px; border-top: 1px solid #f0f0f0; } .promo-price { display: flex; flex-direction: column; } .price-label { font-size: 0.7rem; color: #777; text-transform: uppercase; font-weight: bold; } .price-amount { font-size: 1.15rem; font-weight: 800; color: #0A1128; } .promo-cta { font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 700; color: #C5A059; text-transform: uppercase; display: flex; align-items: center; gap: 5px; transition: transform 0.2s ease; } .promo-card:hover .promo-cta { transform: translateX(5px); } /* Navigation Buttons (PC Only) */ .strip-btn { position: absolute; top: 40%; transform: translateY(-50%); width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 1px solid #ddd; color: #0A1128; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; /* Ensures it stays on top of the images */ transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .strip-btn:hover { background: #0A1128; color: #C5A059; border-color: #0A1128; } /* THE FIX: Changed from negative to positive values */ .left-btn { left: 15px; } .right-btn { right: 15px; } /* Mobile Logic */ @media (max-width: 768px) { .strip-btn { display: none; } .promo-card { flex: 0 0 260px; } } /* ========================================= */ /* MODAL OVERLAY & BUTTON STYLES */ /* ========================================= */ .package-action-bar { text-align: center; padding: 30px 10px; margin-top: 20px; border-top: 1px solid #eaeaea; } .book-now-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background-color: #C5A059; color: #0A1128; padding: 15px 45px; font-family: 'Lato', sans-serif; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; border: none; border-radius: 3px; cursor: pointer; transition: 0.3s; } .book-now-btn:hover { background-color: #0A1128; color: #C5A059; } .btn-gold-solid { background-color: #C5A059; color: #0A1128; transition: 0.3s; border-radius: 3px; font-family: 'Lato', sans-serif;} .btn-gold-solid:hover { background-color: #0A1128; color: #C5A059; } .btn-outline:hover { background-color: #e0e0e0 !important; } /* The Black Blur Overlay */ .gateway-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 17, 40, 0.9); backdrop-filter: blur(5px); display: none; /* Hidden until Book Now is clicked */ align-items: center; justify-content: center; z-index: 9999; } .gateway-overlay.active { display: flex; animation: fadeIn 0.3s ease; } /* The White Form Box */ .gateway-box { background: #fff; width: 90%; max-width: 400px; padding: 30px; border-top: 5px solid #0A1128; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); font-family: 'Lato', sans-serif; } .hidden-step { display: none !important; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }