:root { --app-vh: 1vh; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-extralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-extralight-italic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-light-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-regular-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-semibold.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-semibold-italic.woff2') format('woff2'); font-weight: 500 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-bold.woff2') format('woff2'); font-weight: 700 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Li Ador Noirrit'; src: url('../fonts/li-ador-noirrit/li-ador-noirrit-bold-italic.woff2') format('woff2'); font-weight: 700 800; font-style: italic; font-display: swap; } html, body { max-width: 100%; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Scroll-reveal elements (data-aos="fade-left"/"fade-right") sit translated ~100px off their normal position until they scroll into view. body already clips this, but body's overflow-x doesn't stop the /viewport scroll box itself from measuring that width and letting the page be dragged sideways on mobile — so html needs the same clip. */ overflow-x: hidden; } body { background: #F5FAFF; color: #4A6B8A; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .lang-bn body, .lang-bn .font-sans { font-family: 'Li Ador Noirrit', 'Poppins', sans-serif; } .lang-bn h1, .lang-bn h2, .lang-bn h3, .lang-bn h4, .lang-bn h5, .lang-bn h6, .lang-bn .font-serif { font-family: 'Li Ador Noirrit', 'Playfair Display', serif; } a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; } section.bg-brand-bg { background-color: #F5FAFF !important; } section.bg-white { background-color: #ffffff !important; } section.bg-brand-primary { background-color: #0D3B66 !important; } .min-h-screen { min-height: 100vh; min-height: calc(var(--app-vh) * 100); } .navbar-scrolled { background: rgba(234, 246, 255, 0.96) !important; box-shadow: 0 8px 28px rgba(8, 42, 74, 0.08); backdrop-filter: blur(14px); } .navbar-scrolled .nav-link, .navbar-scrolled .brand-text, .navbar-scrolled .menu-icon { color: #0D3B66 !important; } .nav-link { transition: all .25s ease; } .navbar-scrolled .nav-link:hover, .navbar-scrolled .nav-link:focus { color: #0D3B66 !important; background: rgba(8, 42, 74, 0.05) !important; } .navbar-scrolled .nav-link.text-white { color: #ffffff !important; background: #0D3B66 !important; } .card-hover { transition: transform .25s ease, box-shadow .25s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(8, 42, 74, 0.12); } .gradient-text { color: #0D3B66; } .btn-primary { background: #1E9BE0; border: none; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn-primary::before { content: none; } .btn-primary:hover::before { left: auto; } .btn-primary:hover { background: #146FAE; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(8, 42, 74, .25); } .btn-secondary { border: 2px solid #0D3B66; color: #0D3B66; transition: all .3s ease; } .btn-secondary:hover { background: #0D3B66; border-color: #0D3B66; color: white; } .section-divider { width: 90px; height: 4px; border-radius: 4px; background: #F7A823; } .img-overlay { position: relative; overflow: hidden; } .img-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 42, 74, 0.82) 100%); } .img-overlay img { transition: transform .5s ease; } .img-overlay:hover img { transform: scale(1.07); } .form-input { transition: all .3s ease; } .form-input:focus { border-color: #F7A823 !important; box-shadow: 0 0 0 4px rgba(247, 168, 35, .18) !important; outline: none !important; } .mobile-scroll-row { display: flex; gap: .75rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; } .mobile-scroll-row::-webkit-scrollbar { display: none; } .whatsapp-float { position: fixed; bottom: 22px; right: 22px; z-index: 80; } @media (max-width: 768px) { button, [role="button"], .btn-primary, .btn-secondary, .mobile-link, #mobile-menu-btn, #close-menu-btn { min-height: 44px; min-width: 44px; } } .mobile-safe-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } /* Single-image lightbox groups don't need Next/Prev or a counter. */ .lightbox-single [data-lightbox-prev], .lightbox-single [data-lightbox-next], .lightbox-single #lightbox-counter { display: none !important; } .detail-soft-text { color: rgba(248, 250, 252, 0.9); } /* Legacy visual refinements requested */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #E3F2FD; } ::-webkit-scrollbar-thumb { background: #0D3B66; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #082A4A; } .dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(247, 168, 35, 0.15); } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { color: #0D3B66; transition: all 0.2s ease; } .dropdown-menu a:hover { background-color: rgba(247, 168, 35, 0.12) !important; color: #0D3B66; } .glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); } .whatsapp-float { animation: pulse-shadow 2.4s infinite; border: none; cursor: pointer; } @keyframes pulse-shadow { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .fade-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease-out; } .active-side { opacity: 1; transform: translateX(0); } @media (max-width: 768px) { button, a, .nav-link { min-height: 44px; min-width: 44px; transition: all 0.2s ease; } header { padding: 8px 0; } .mobile-link { font-size: 15px; padding: 12px 16px; } .btn-primary, .btn-secondary { min-height: 44px; font-size: 14px; } .sticky-mobile-safe { position: static !important; top: auto !important; } .mobile-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-scroll-x::-webkit-scrollbar { display: none; } .mobile-text-wrap { overflow-wrap: anywhere; word-break: break-word; } } @media (min-width: 641px) and (max-width: 1024px) { header .max-w-7xl { padding: 0 16px; } nav { gap: 8px; } .dropdown-menu { width: 240px; } } @media (min-resolution: 2dppx) { .whatsapp-float, .btn-primary, .btn-secondary { box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } } @media (prefers-color-scheme: dark) { .dropdown-menu { background-color: #1F2937; } .dropdown-menu a { color: #F3F4F6; } } .archive-hero { background: #082A4A; } .hero-overlay { background: linear-gradient(180deg, rgba(8, 42, 74, 0.55), rgba(8, 42, 74, 0.88)); } .archive-chip { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); } .clean-card { background: #ffffff; border: 1px solid #DCE7F5; box-shadow: 0 8px 20px rgba(8, 42, 74, 0.06); } .testimonial-slider { position: relative; } .testimonial-viewport { overflow: hidden; } .testimonial-track { display: flex; transition: transform 0.5s ease; } .testimonial-slide { flex: 0 0 100%; max-width: 100%; padding: 0 10px; box-sizing: border-box; } @media (min-width: 768px) { .testimonial-slide { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1024px) { .testimonial-slide { flex: 0 0 33.3333%; max-width: 33.3333%; } } .testimonial-arrow { width: 40px; height: 40px; border-radius: 9999px; background: #ffffff; border: 1px solid #DCE7F5; color: #0D3B66; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(8, 42, 74, 0.08); transition: background 0.2s, color 0.2s; } .testimonial-arrow:hover { background: #0D3B66; color: #ffffff; } .testimonial-dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 100%; gap: 6px; } .testimonial-dot { position: relative; width: 8px; height: 8px; min-width: 8px; min-height: 8px; border-radius: 9999px; background: #DCE7F5; border: none; padding: 0; cursor: pointer; transition: background 0.3s, width 0.3s; } /* The global mobile "min 44px touch target" rule (button, [role="button"], ...) would otherwise inflate every dot to 44px, blowing up the whole row's width and forcing the page into horizontal scroll once there are more than a handful of slides. Keep the visual dot tiny; give it an invisible tap area instead so it's still easy to hit on a phone. */ .testimonial-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); } .testimonial-dot.active { width: 22px; min-width: 22px; background: #0D3B66; } .package-card { background: #ffffff; border: 1px solid #DCE7F5; box-shadow: 0 10px 20px rgba(8, 42, 74, 0.07); } .package-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(8, 42, 74, 0.12); } .verse-card { border-left: 4px solid #F7A823; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-content { color: #334155; line-height: 1.75; } .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 { color: #0D3B66; font-family: 'Playfair Display', serif; margin-top: 1.2em; margin-bottom: 0.6em; } .lang-bn .blog-content h1, .lang-bn .blog-content h2, .lang-bn .blog-content h3, .lang-bn .blog-content h4 { font-family: 'Li Ador Noirrit', 'Playfair Display', serif; } .blog-content p, .blog-content ul, .blog-content ol, .blog-content blockquote { margin-bottom: 1rem; } .blog-content ul, .blog-content ol { padding-left: 1.25rem; } .blog-content a { color: #D98A0E; text-decoration: underline; text-underline-offset: 3px; } .blog-content img { border-radius: 0.75rem; margin: 1rem 0; max-width: 100%; height: auto; } .gallery-tile img { transition: transform 0.35s ease, box-shadow 0.35s ease; } .gallery-tile:hover img { transform: scale(1.03); box-shadow: 0 16px 28px rgba(8, 42, 74, 0.18); } .page-hero { position: relative; overflow: hidden; color: #ffffff; background: #082A4A; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 42, 74, 0.2), rgba(8, 42, 74, 0.62)); } .page-hero .hero-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .section-shell { border-radius: 1rem; border: 1px solid #DCE7F5; background: #ffffff; box-shadow: 0 8px 20px rgba(8, 42, 74, 0.06); } /* Air-ticket trip-type panels: fade/slide in when a trip type is selected so switching between One Way / Round Trip / Multi City doesn't snap. */ @keyframes tripPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .trip-panel-in { animation: tripPanelIn 0.28s ease-out both; } @media (prefers-reduced-motion: reduce) { .trip-panel-in { animation: none; } }