/* Google Fonts are loaded via a in base.html , not @import here -- @import forces the browser to wait for this stylesheet to download and parse before it even discovers the font request, adding a serial round-trip. */ :root { --primary: #E8604C; --primary-hover: #D44D3A; --primary-light: rgba(232, 96, 76, 0.1); --secondary: #1E293B; --dark: #0F172A; --light-bg: #F8FAFC; --border-color: #E2E8F0; --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; --font-ui: 'Poppins', sans-serif; } body { font-family: var(--font-body); color: #334155; background-color: #FFFFFF; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); color: var(--dark); font-weight: 700; } /* Primary Color Utilities */ .bg-theme { background-color: var(--primary) !important; } .text-theme { color: var(--primary) !important; } .border-theme { border-color: var(--primary) !important; } .bg-light-bg { background-color: var(--light-bg); } /* Buttons */ .btn-theme { background-color: var(--primary); color: #FFFFFF !important; border: 1px solid var(--primary); font-weight: 600; padding: 0.65rem 1.5rem; transition: all 0.3s ease; } .btn-theme:hover, .btn-theme:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232, 96, 76, 0.25); } .btn-outline-theme { color: var(--primary); border: 2px solid var(--primary); background-color: transparent; font-weight: 600; padding: 0.6rem 1.4rem; transition: all 0.3s ease; } .btn-outline-theme:hover { background-color: var(--primary); color: #FFFFFF !important; transform: translateY(-2px); } /* Navbar & Header Styling */ .top-bar { background-color: #0F172A; color: #94A3B8; font-size: 0.85rem; padding: 0.5rem 0; } .top-bar a { color: #CBD5E1; text-decoration: none; transition: color 0.2s; } .top-bar a:hover { color: var(--primary); } .main-navbar { background-color: #FFFFFF; transition: all 0.3s ease; padding: 0.75rem 0; } .navbar-brand img { max-height: 52px; width: auto; object-fit: contain; } .main-navbar .nav-link { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: #334155 !important; padding: 0.6rem 1.1rem !important; position: relative; transition: all 0.25s ease; } .main-navbar .nav-link:hover, .main-navbar .nav-link.active { color: var(--primary) !important; } .main-navbar .nav-link::after { content: ''; position: absolute; bottom: 0; left: 1.1rem; right: 1.1rem; height: 3px; background-color: var(--primary); border-radius: 2px; opacity: 0; transform: translateY(4px); transition: all 0.25s ease; } .main-navbar .nav-link:hover::after, .main-navbar .nav-link.active::after { opacity: 1; transform: translateY(0); } /* Page Header Banner & Hero Text Contrast Overrides */ .page-header-banner { position: relative; background-color: #0B1120 !important; background-size: cover; background-position: center; color: #FFFFFF !important; padding: 4.5rem 0; } .page-header-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.92) 100%); z-index: 1; } .page-header-banner .container { position: relative; z-index: 2; } .page-header-banner h1, .page-header-banner h2, .page-header-banner h3, .page-header-banner h4, .page-header-banner h5, .page-header-banner p, .page-header-banner span, .page-header-banner div { color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .hero-section h1, .hero-section h2, .hero-section h5, .hero-section p, .hero-section span { color: #FFFFFF !important; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7); } /* Cards & Elevated Containers */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important; } /* Hero Carousel */ .hero-slider .carousel-item { height: 80vh; min-height: 520px; } .hero-slider .carousel-item img { object-fit: cover; height: 100%; width: 100%; } .hero-caption { background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.8) 100%); padding: 2.5rem; border-radius: 12px; backdrop-filter: blur(4px); } /* Footer Styling */ footer { background-color: #0F172A; color: #94A3B8; } footer h5 { color: #FFFFFF !important; font-size: 1.1rem; margin-bottom: 1.25rem; position: relative; padding-bottom: 0.5rem; } footer h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 3px; background-color: var(--primary); } footer a { color: #94A3B8; text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; } footer a:hover { color: #FFFFFF !important; padding-left: 4px; } .social-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF !important; transition: all 0.3s ease; } .social-icon-btn:hover { background-color: var(--primary); transform: translateY(-3px); } /* Dashboard Sidebar Styling */ .admin-sidebar { background-color: #0F172A !important; color: #94A3B8; min-height: 100vh; border-right: 1px solid #1E293B; } .admin-sidebar .brand-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #1E293B; background-color: #0B1120; } .admin-sidebar .sidebar-heading { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #64748B; padding: 1.2rem 1.5rem 0.4rem 1.5rem; } .admin-sidebar .nav-link { color: #94A3B8 !important; font-size: 0.9rem; font-weight: 500; padding: 0.75rem 1.5rem !important; display: flex; align-items: center; border-left: 3px solid transparent; transition: all 0.2s ease; } .admin-sidebar .nav-link i { width: 22px; font-size: 1rem; color: #64748B; transition: color 0.2s ease; } .admin-sidebar .nav-link:hover { color: #F8FAFC !important; background-color: rgba(255, 255, 255, 0.04); } .admin-sidebar .nav-link:hover i { color: var(--primary); } .admin-sidebar .nav-link.active { color: #FFFFFF !important; background: linear-gradient(90deg, rgba(232, 96, 76, 0.15) 0%, rgba(232, 96, 76, 0) 100%); border-left-color: var(--primary); font-weight: 600; } .admin-sidebar .nav-link.active i { color: var(--primary); } .dashboard-stat-card { border: none; border-radius: 12px; background-color: #FFFFFF; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); } .stat-icon-wrapper { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* Floating WhatsApp Button Styling -- icon only, no label */ .whatsapp-btn { position: fixed; bottom: 25px; right: 25px; z-index: 1030; width: 58px; height: 58px; background-color: #25D366; color: #FFFFFF !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none !important; box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: whatsapp-ripple 2s infinite; } /* Bootstrap adds .modal-open to for every open modal (Plan My Trip, search, etc). The button's z-index sits below modals so it can't overlap their content, but on mobile the floating circle still sits in the same corner as form fields/submit buttons, so hide it outright while any modal is open rather than just relying on stacking order. */ body.modal-open .whatsapp-btn { display: none; } .whatsapp-btn:hover { background-color: #1EBE57; color: #FFFFFF !important; transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6); } .whatsapp-icon-pulse { font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; } @keyframes whatsapp-ripple { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @media (max-width: 576px) { .whatsapp-btn { width: 50px; height: 50px; bottom: 80px; right: 15px; } .whatsapp-icon-pulse { font-size: 1.3rem; } } /* Reserves the carousel/banner's box before the image loads, so the page doesn't jump as hotel/tour/event photos come in (Core Web Vitals: CLS). */ .detail-hero-media { aspect-ratio: 16 / 9; object-fit: cover; } /* Shared horizontal auto-scroll used by the "Latest Updates" news/events ticker and the partner-logos strip on the homepage. Content is rendered twice by the template (see home.html) for a seamless loop via -50%. */ .marquee-wrapper { overflow: hidden; white-space: nowrap; width: 100%; } .marquee-track { display: inline-flex; animation: scroll-marquee 20s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Public Mobile App-like Bottom Navigation Bar */ .public-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08); } .public-mobile-nav .nav-item-link { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #64748B; text-decoration: none; padding: 7px 4px 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: -0.2px; transition: all 0.2s ease-in-out; } .public-mobile-nav .nav-item-link i { font-size: 1.15rem; margin-bottom: 2px; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .public-mobile-nav .nav-item-link:active i, .public-mobile-nav .nav-item-link.active i { transform: translateY(-2px) scale(1.1); } .public-mobile-nav .nav-item-link.active { color: #E8604C !important; font-weight: 700; } @media (max-width: 767.98px) { .public-body-wrapper { padding-bottom: 65px !important; } } /* --- Booking / Search Bar & Filters --- */ .font-ui { font-family: var(--font-ui) !important; } .booking-search-bar { background: #FFFFFF; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 10px 20px; position: relative; z-index: 20; margin-top: -45px; margin-bottom: 20px; } .booking-search-item { padding: 10px 15px; border-right: 1px solid var(--border-color); } .booking-search-item:last-child { border-right: none; } @media (max-width: 768px) { .booking-search-item { border-right: none; border-bottom: 1px solid var(--border-color); } .booking-search-item:last-child { border-bottom: none; } .booking-search-bar { margin-top: -30px; margin-left: 15px; margin-right: 15px; } } .booking-label { display: flex; align-items: center; font-size: 0.95rem; font-weight: 600; color: var(--dark); margin-bottom: 2px; } .booking-label i { color: var(--primary); margin-right: 8px; font-size: 1.1rem; } .booking-subtext { font-size: 0.85rem; color: #64748B; margin-left: 26px; } .booking-select, .booking-input { border: none; background: transparent; padding: 0; font-size: 0.9rem; color: var(--dark); font-family: var(--font-ui); width: 100%; } .booking-select:focus, .booking-input:focus { outline: none; box-shadow: none; } /* Quick Filter Pills */ .filter-pill { display: inline-block; padding: 8px 20px; background: var(--light-bg); color: var(--secondary); border-radius: 50px; font-size: 0.85rem; font-weight: 500; text-decoration: none; border: 1px solid var(--border-color); transition: all 0.2s ease; white-space: nowrap; margin-right: 10px; margin-bottom: 10px; } .filter-pill:hover, .filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Sub Navigation Strip */ .sub-nav-strip { background: var(--light-bg); border-bottom: 1px solid var(--border-color); } @media (max-width: 991px) { .sub-nav-strip { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .sub-nav-strip::-webkit-scrollbar { display: none; } } @media (min-width: 992px) { .sub-nav-strip .container { display: flex; flex-wrap: wrap; justify-content: center; } } .sub-nav-link { display: inline-block; padding: 10px 20px; color: var(--secondary); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease; font-family: var(--font-ui); } .sub-nav-link:hover, .sub-nav-link.active { color: var(--primary); } /* Dropdown Navigation Fixes */ @media (min-width: 992px) { .offcanvas-body { overflow: visible !important; } } @media (max-width: 991px) { .offcanvas .dropdown-menu { position: static !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding-left: 1rem; } } /* ===================== Auto-Scrolling Card Carousels ===================== */ .auto-carousel-track { display: flex; gap: 1.25rem; overflow-x: auto; /* NOT scroll-behavior: smooth -- that would animate every direct scrollLeft write (the auto-scroll tick and the seamless-loop wrap in carousel.js), turning the wrap into a visible rewind across the whole track instead of an instant, invisible jump to identical duplicated content. Prev/Next buttons still animate smoothly via their own explicit `behavior: 'smooth'` passed to scrollBy(), which browsers honor regardless of this property. */ scroll-behavior: auto; padding: 0.25rem 0.5rem 1rem; scrollbar-width: none; -ms-overflow-style: none; } .auto-carousel-track::-webkit-scrollbar { display: none; } .auto-carousel-card { flex: 0 0 auto; width: 260px; } @media (max-width: 576px) { .auto-carousel-card { width: 78vw; } } .carousel-nav-btn { position: absolute; top: 40%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; color: var(--primary, #0056b3); transition: background-color 0.2s ease, transform 0.2s ease; } .carousel-nav-btn:hover { background-color: var(--primary, #0056b3); color: #fff; } .carousel-nav-prev { left: -8px; } .carousel-nav-next { right: -8px; } @media (max-width: 767px) { .carousel-nav-btn { display: none; } } /* ===================== Mobile Responsiveness Fixes ===================== */ /* Prevent action buttons/badges from breaking table layouts on small/narrow screens by allowing per-row action groups to wrap instead of forcing overflow. Threshold is 991px (Bootstrap's lg breakpoint), not 767px -- the dashboard sidebar is position-fixed and only hides below 768px (d-none d-md-block), so from 768-991px it's visible and cramping the content column into less room than "mobile" gets, yet none of these wrap rules used to apply there. That's exactly the zone a laptop at 125-150% browser zoom (or a smaller/older screen) lands in -- effective viewport width, not device category, is what these rules need to react to. */ @media (max-width: 991px) { .table-responsive .btn-group, .table-responsive td.text-end { white-space: normal; } .table-responsive .btn, .table-responsive .btn-sm { margin-bottom: 4px; } .dashboard-content, main { overflow-x: hidden; } /* Page/section header bars across the dashboard use Bootstrap's `d-flex justify-content-between` with no wrap fallback, which pushes filter dropdowns, export buttons and badges off-screen on narrow viewports. Force these to wrap and stack with breathing room instead of forcing horizontal overflow of the whole page. */ main .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 0.75rem; } main .d-flex.justify-content-between > * { max-width: 100%; } /* Any button/action cluster (btn-group or plain flex group) should wrap onto multiple lines rather than overflow or get clipped. */ main .btn-group, main .d-flex.gap-2, main .d-flex.gap-3 { flex-wrap: wrap; } } img, .card, .table-responsive { max-width: 100%; } /* Prevent any accidental full-page horizontal scroll on small screens, whichever page/section it originates from. */ html, body { max-width: 100%; overflow-x: hidden; } /* iOS Safari auto-zooms into any input/select/textarea with a computed font-size under 16px, which feels broken on a "mobile app-like" site. Force 16px on all form controls below the tablet breakpoint. */ @media (max-width: 767px) { input, select, textarea, .form-control, .form-select { font-size: 16px !important; } /* Slightly larger tap targets everywhere on touch screens. */ .btn, .nav-link, .dropdown-item { min-height: 38px; } /* Modals should use the full viewport height comfortably and not get cut off behind mobile browser chrome. */ .modal-dialog { margin: 0.5rem; } .modal-body { max-height: 75vh; overflow-y: auto; } }