/* =========================
PREMIUM LAYOUT SYSTEM
========================= */
:root {
--container: 1200px;
--radius: 14px;
--primary: #2563eb;
--text: #111;
--muted: #666;
--bg: #f8fafc;
}
/* global spacing system */
section {
padding: 20px 20px 50px;
}
section:first-of-type {
padding-top: 20px;
}
/* center container */
.container {
max-width: var(--container);
margin: auto;
}
/* headings system */
h1, h2, h3 {
color: var(--text);
letter-spacing: 0.3px;
}
h1 {
font-size: 38px;
font-weight: 800;
}
h2 {
font-size: 28px;
font-weight: 700;
}
p {
color: var(--muted);
line-height: 1.6;
}
/* =========================
BASE RESET
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #ffffff;
color: #000000;
padding-top: 80px;
overflow-x: hidden;
}
/* =========================
NAVBAR
========================= */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 35px;
z-index: 3000;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
}
/* links */
.nav-links a {
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 15px;
transition: 0.3s;
}
.nav-links a:hover {
color: #2563eb;
}
/* logo */
.logo {
height: 48px;
object-fit: contain;
}
@media (max-width: 900px) {
.navbar {
flex-wrap: wrap;
height: auto;
padding: 10px 15px;
gap: 10px;
}
.search-box {
order: 3;
width: 100%;
}
.nav-links {
display: none; /* hide desktop menu */
}
.hamburger {
display: flex;
order: 2;
margin-left: auto;
}
.logo {
order: 1;
}
}
/* =========================
SEARCH BAR
========================= */
.search-box {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 10px 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
transition: all 0.25s ease;
}
.search-box:focus-within {
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59,130,246,0.15);
}
.search-box input {
border: none;
outline: none;
background: transparent;
width: 100%;
font-size: 14px;
color: #111827;
}
.search-box input::placeholder {
color: #9ca3af;
}
.search-box i {
color: #3b82f6;
font-size: 14px;
cursor: pointer;
}
.search-results {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
background: #fff;
border-radius: 14px;
box-shadow: 0 25px 60px rgba(0,0,0,0.12);
display: none;
z-index: 9999;
max-height: 320px;
overflow-y: auto;
padding: 6px;
padding-right: 4px;
animation: drop 0.15s ease;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.search-results::-webkit-scrollbar {
width: 6px;
}
.search-results::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.search-results::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5);
border-radius: 10px;
transition: background 0.3s ease;
}
.search-results::-webkit-scrollbar-thumb:hover {
background: rgba(100, 116, 139, 0.7);
}
@keyframes drop {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-wrapper {
position: relative;
display: inline-block;
}
/* CARD */
.search-card {
position: relative;
width: 100%;
height: 80px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
margin-bottom: 8px;
transition: transform 0.2s ease;
}
.search-card:hover {
transform: scale(1.01);
}
/* IMAGE (thumbnail style) */
.search-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.search-card:hover img {
transform: scale(1.08);
}
/* TEXT AREA */
.search-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 10px;
background: linear-gradient(
to top,
rgba(0,0,0,0.65),
rgba(0,0,0,0.1),
transparent
);
color: white;
}
.search-title {
font-size: 14px;
font-weight: 600;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.search-card.active {
outline: 2px solid rgba(59,130,246,0.6);
transform: scale(1.01);
}
.search-location {
font-size: 12px;
color: #777;
margin-top: 2px;
}
/* NO RESULT */
.no-result {
padding: 14px;
text-align: center;
color: #888;
font-size: 13px;
}
/* =========================
DROPDOWN
========================= */
.dropdown {
position: relative;
display: flex;
align-items: center;
}
.dropdown > a {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 5px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 99999;
}
.dropdown-menu a {
display: flex;
align-items: center;
padding: 12px 16px;
font-size: 14px;
color: #111;
gap: 8px;
}
.dropdown-menu a:hover {
background: #f1f5f9;
color: #2563eb;
}
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
display: flex;
}
/* =========================
HERO SECTION
========================= */
.hero {
position: relative;
height: 75vh;
min-height: 500px;
width: 100%;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
background: #000;
}
.hero-video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
z-index: 1;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
.overlay h2 {
background: linear-gradient(90deg, #ffffff, #c7d2fe);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 26px;
font-weight: 700;
padding: 0 10px;
}
.overlay h2 i {
margin-left: 8px;
color: #60a5fa;
}
.title-text {
background: linear-gradient(90deg, #ffffff, #c7d2fe);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.emoji {
margin-left: 6px;
display: inline-block;
animation: floatEmoji 3s ease-in-out infinite;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}
.emoji-icon {
margin-left: 8px;
color: #60a5fa;
font-size: 0.9em;
animation: floatEmoji 3s ease-in-out infinite;
}
@keyframes floatEmoji {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
.overlay h3 {
color: #ffffff;
font-size: 22px;
margin-top: 10px;
}
.packages-section h2 {
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 20px;
color: #111;
font-weight: 700;
}
.typing-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* TEXT */
.typing-text {
font-size: 22px;
font-weight: 500;
color: #fff;
text-align: center;
display: inline-block;
animation: wave 2.5s ease-in-out infinite;
}
/* ๐ WAVE EFFECT */
@keyframes wave {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
/* โจ GLOWING CURSOR */
.cursor {
margin-left: 4px;
color: #fff;
font-weight: bold;
animation: blink 0.7s infinite, glow 1.5s ease-in-out infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
@keyframes glow {
0%, 100% {
text-shadow: 0 0 5px #fff, 0 0 10px #60a5fa;
}
50% {
text-shadow: 0 0 10px #fff, 0 0 20px #2563eb;
}
}
/* FADE TRANSITION */
.typing-text.fade {
animation: fadeText 0.6s ease-in-out;
}
@keyframes fadeText {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ๐ฑ MOBILE OPTIMIZATION */
@media (max-width: 768px) {
.typing-text {
font-size: 16px;
}
.cursor {
font-size: 16px;
}
}
/* =========================
SECTION TITLE UNDERLINE (GLOBAL)
========================= */
.section-title {
font-size: 22px;
position: relative;
display: inline-block;;
text-align: left;
margin-bottom: 20px; /* โ
centers text */
font-weight: 700;
}
.section-title::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #2563eb, #60a5fa, transparent);
border-radius: 10px;
}
/* =========================
PACKAGES GRID
========================= */
.packages-wrapper {
overflow: hidden;
max-width: 1200px;
width: 100%;
margin: auto;
padding: 20px 0;
scroll-behavior: smooth;
display: flex;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.packages-wrapper::-webkit-scrollbar {
display: none; /* Chrome */
}
.scroll-row {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease;
gap: 20px;
will-change: transform;
}
/* Hide scrollbar for all browsers */
.scroll-row,
.packages-wrapper,
.services-wrapper {
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.scroll-row::-webkit-scrollbar,
.packages-wrapper::-webkit-scrollbar,
.services-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
@media (max-width: 768px) {
.services-row .service-card {
width: 75vw;
height: 200px;
}
.carousel-btn {
display: none; /* optional: removes arrows on mobile */
}
}
#domesticPackages,
#internationalPackages {
display: flex;
overflow-x: auto;
transition: transform 0.5s ease;
will-change: transform;
scroll-behavior: smooth;
gap: 20px;
}
#domesticPackages::-webkit-scrollbar,
#internationalPackages::-webkit-scrollbar {
display: none;
}
/* container row */
#packages,
#upcomingPackages,
#popularDestinations,
#upcomingInternational,
#popularInternational {
display: flex;
gap: 14px;
width: max-content;
align-items: stretch;
}
#packages {
display: flex;
gap: 20px;
transition: transform 0.4s ease;
width: max-content;
}
.package-card {
width: 280px;
flex: 0 0 280px;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: 0.3s ease;
}
.package-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.package-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.package-content {
padding: 15px;
}
.package-content h3 {
background: linear-gradient(90deg, #2563eb, #1e40af);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.package-content p {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.price {
color: #2563eb;
font-weight: bold;
}
.package-card h3 {
font-size: 16px;
padding: 10px;
color: #111;
}
.package-card p {
padding: 0 10px 10px;
color: #444;
}
@media (max-width: 768px) {
.package-card {
width: 180px;
}
.package-card img {
height: 120px;
}
.package-content h3 {
font-size: 13px;
}
.package-content p {
font-size: 11px;
}
}
/* =========================
BUTTON (BLUE)
========================= */
button {
margin-top: 10px;
padding: 12px 25px;
border: none;
border-radius: 30px;
background: #2563eb;
color: white;
cursor: pointer;
transition: 0.3s;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(37,99,235,0.3);
}
/* =========================
POPUP
========================= */
.popup {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
justify-content: center;
align-items: center;
z-index: 99999;
}
.popup.active {
display: flex;
}
/* CARD */
.glass-card {
position: relative;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
padding: 25px;
border-radius: 18px;
width: 90%;
max-width: 400px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
animation: popupFade 0.3s ease;
}
@keyframes popupFade {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* CLOSE BUTTON (TOP RIGHT) */
.close-btn {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.05);
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
/* hover */
.close-btn:hover {
background: #2563eb;
color: white;
transform: rotate(90deg) scale(1.1);
}
/* subtle shadow */
.close-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* =========================
INPUT BOX
========================= */
.input-box {
position: relative;
margin: 12px 0;
display: flex;
align-items: center;
}
/* INPUT */
.input-box input {
width: 100%;
padding: 12px 40px 12px 14px;
background: #f5f5f5;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.08);
outline: none;
color: #111;
font-size: 14px;
transition: 0.2s;
}
/* hide default calendar */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
}
/* FIXED placeholder visibility */
.input-box input::placeholder {
color: #888;
}
/* FOCUS EFFECT */
.input-box input:focus {
border: 1px solid #2563eb;
background: #fff;
}
/* ICON */
.input-box i {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #2563eb;
font-size: 14px;
pointer-events: none;
}
/* =========================
PREMIUM POPUP TITLE
========================= */
.popup-card h2 {
font-size: 22px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
color: #111;
letter-spacing: 0.3px;
}
/* ICON STYLE */
.plane-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #2563eb, #1e40af);
color: #fff;
box-shadow: 0 8px 20px rgba(37,99,235,0.25);
animation: floatPlane 3s ease-in-out infinite;
}
/* ICON INSIDE */
.plane-icon i {
font-size: 14px;
}
/* FLOAT ANIMATION */
@keyframes floatPlane {
0% { transform: translateY(0px); }
50% { transform: translateY(-4px); }
100% { transform: translateY(0px); }
}
/* =========================
BUTTON
========================= */
.submit-btn {
width: 100%;
margin-top: 10px;
padding: 12px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
.submit-btn:hover {
transform: scale(1.04);
box-shadow: 0 6px 18px rgba(37,99,235,0.3);
}
/* =========================
OPTIONAL ICON GLOW (KEEP)
========================= */
.input-with-icon i {
color: #2563eb;
text-shadow: 0 0 6px rgba(37,99,235,0.5),
0 0 12px rgba(37,99,235,0.3);
animation: iconGlow 1.8s ease-in-out infinite;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #e9e9e9;
pointer-events: none;
}
@keyframes iconGlow {
0% {
transform: translateY(-50%) scale(1);
}
50% {
transform: translateY(-50%) scale(1.08);
}
100% {
transform: translateY(-50%) scale(1);
}
}
/* =========================
FULL IMAGE FOOTER
========================= */
.footer-pro {
color: #fff;
background: url('../images/footer-backgroung.jpg') center/cover no-repeat;
position: relative;
margin-top: 80px;
padding-top: 40px;
}
.footer-pro::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
}
.footer-pro * {
position: relative;
z-index: 2;
}
.footer-logo-img {
height: 60px;
width: auto;
object-fit: contain;
/* animation */
animation: floatLogo 3s ease-in-out infinite, glowLogo 2.5s ease-in-out infinite;
/* glow effect */
filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6))
drop-shadow(0 0 18px rgba(37, 99, 235, 0.4));
transition: transform 0.3s ease;
}
/* FLOATING EFFECT */
@keyframes floatLogo {
0% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-6px) scale(1.03);
}
100% {
transform: translateY(0px) scale(1);
}
}
/* GLOW PULSE EFFECT */
@keyframes glowLogo {
0%, 100% {
filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.5))
drop-shadow(0 0 15px rgba(37, 99, 235, 0.3));
}
50% {
filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.9))
drop-shadow(0 0 28px rgba(37, 99, 235, 0.6));
}
}
/* hover extra effect */
.footer-logo-img:hover {
transform: scale(1.1) rotate(-2deg);
}
/* GLASS CARDS */
.footer-col {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
border-radius: 16px;
padding: 20px;
height: 100%;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
transition: 0.3s;
}
.footer-col:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
/* =========================
TOP BAR
========================= */
.footer-top {
padding: 50px 20px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-top-content {
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
padding: 30px 40px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.15);
flex-wrap: wrap;
}
.footer-top-content .left {
flex: 1;
min-width: 250px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
/* tighten spacing */
.footer-top-content .left h2 {
margin-bottom: 6px;
line-height: 1.2;
text-align: left !important;
color: #fff;
}
.footer-top-content .left p {
margin: 0;
color: #ddd;
max-width: 420px;
text-align: left;
}
.footer-top .left {
flex: 1;
}
.footer-top h2 {
color: #fff;
font-size: 30px;
margin-bottom: 6px;
}
.footer-top p {
font-size: 14px;
color: #ccc;
}
.heading-underline {
position: relative;
display: inline-block;
}
.heading-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #2563eb, #60a5fa, transparent);
border-radius: 10px;
}
/* INPUT */
.footer-top input {
padding: 12px 15px;
border-radius: 8px;
border: none;
width: 220px;
background: rgba(255,255,255,0.15);
color: #fff;
}
.footer-top button {
background: #2563eb;
font-weight: 600;
transition: 0.3s;
}
.footer-top button:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(78, 77, 77, 0.4);
}
/* =========================
MAIN GRID
========================= */
.footer-main {
max-width: 1200px;
margin: auto;
padding: 40px 20px;
align-items: stretch;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 30px;
}
/* LOGO */
.footer-logo {
font-size: 22px;
font-weight: 800;
color: #fff;
}
/* LINKS */
.footer-col a {
display: block;
color: #ccc;
margin: 6px 0;
text-decoration: none;
transition: 0.3s;
}
.footer-col a:hover {
color: #2563eb;
transform: translateX(4px);
}
#footerForm {
display: flex;
gap: 10px;
align-items: center;
flex: 1;
justify-content: flex-end;
}
/* INPUT */
#footerForm input {
flex: 1;
max-width: 280px;
padding: 12px 14px;
border-radius: 10px;
border: none;
outline: none;
background: rgba(255,255,255,0.15);
color: #fff;
}
#footerForm input::placeholder {
color: rgba(255,255,255,0.6);
}
#footerForm button {
padding: 12px 20px;
border-radius: 30px;
white-space: nowrap;
border: none;
background: linear-gradient(135deg, #2563eb, #1e40af);
color: #fff;
}
/* CONTACT */
.contact-info p {
margin: 6px 0;
font-size: 14px;
}
/* =========================
DESTINATIONS
========================= */
.dest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
/* FIX */
justify-items: stretch;
align-items: start;
}
.dest-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: inherit;
/* FIX */
width: auto;
}
.dest-item img {
width: 65px;
height: 65px;
border-radius: 50%;
object-fit: cover;
transition: 0.3s ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
/* hover effect */
.dest-item:hover img {
transform: scale(1.1);
box-shadow: 0 0 18px rgba(37,99,235,0.6);
}
.dest-item span {
margin-top: 8px;
font-size: 14px;
font-weight: 600;
color: #e5e5e5;
/* FIX TEXT BEHAVIOR */
max-width: 100%;
width: 100%;
text-align: center;
line-height: 1.3;
/* clean wrapping */
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* prevents ugly long word break */
word-break: break-word;
}
/* =========================
BOTTOM
========================= */
.footer-bottom {
text-align: center;
padding: 20px;
border-top: 1px solid rgba(253, 253, 253, 0.2);
}
.social-icons a {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none; /* removes underline */
border: none; /* removes any border line */
outline: none;
border-radius: 50%;
background: rgba(255,255,255,0.1);
margin: 0 6px;
color: #fff;
transition: 0.3s;
}
.social-icons a:hover {
transform: translateY(-3px) scale(1.1);
background: #2563eb;
box-shadow: 0 0 15px #2563eb, 0 0 30px rgba(30, 64, 175,0.5);
}
.footer-bottom p {
color: #fff !important;
}
.footer-col p {
color: #fff !important;
}
.footer-pro .contact-info p {
color: #000 !important;
}
/* =========================
MOBILE
========================= */
@media(max-width:768px){
.footer-top-content{
flex-direction: column;
align-items: flex-start;
}
.footer-top input{
width: 100%;
}
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.btn-group {
display: flex;
gap: 10px;
margin-top: 10px;
}
/* WhatsApp Button */
.btn-whatsapp {
flex: 1;
text-align: center;
padding: 10px;
border-radius: 8px;
background: #25D366;
color: white;
text-decoration: none;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
/* View Button */
.btn-view {
flex: 1;
text-align: center;
padding: 10px;
border-radius: 8px;
background: #2563eb;
color: white;
text-decoration: none;
font-size: 14px;
}
.btn-whatsapp:hover,
.btn-view:hover {
opacity: 0.9;
transform: scale(1.03);
}
.package-header {
text-align: center;
padding: 20px;
}
.price {
color: #2563eb;
font-size: 22px;
font-weight: bold;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 20px;
}
.gallery img {
width: 100%;
border-radius: 10px;
}
.videos video {
width: 100%;
margin-top: 10px;
border-radius: 10px;
}
.itinerary .day {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #2563eb;
}
.enquiry-box {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.enquiry-box input {
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
}
.day-box {
background: rgba(255,255,255,0.08);
padding: 10px;
margin: 10px 0;
border-radius: 10px;
}
.day-box input, .day-box textarea {
margin: 5px 0;
}
.day-card {
background: rgba(255,255,255,0.1);
padding: 15px;
margin: 10px 0;
border-radius: 10px;
}
.gallery img {
width: 150px;
margin: 5px;
border-radius: 10px;
}
.popup-toast {
position: fixed;
top: 20px;
right: 20px;
background: #111;
color: white;
padding: 14px 20px;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(-20px);
transition: 0.3s;
z-index: 99999;
}
.popup-toast.show {
opacity: 1;
transform: translateY(0);
}
.popup-success { background: #22c55e; }
.popup-error { background: #ef4444; }
/* =========================
PREMIUM ACCORDION UI
========================= */
.accordion-item {
margin: 14px 0;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.accordion-item:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
/* HEADER */
.accordion-header {
padding: 16px 18px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 15px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
transition: 0.3s ease;
}
.header-left {
display: flex;
align-items: center;
gap: 12px; /* better spacing */
font-weight: 600;
}
/* ICON FIX */
.header-left i {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
font-size: 15px;
flex-shrink: 0;
}
.accordion-header:hover .header-left i {
background: #2563eb;
color: #fff;
transform: scale(1.1);
}
/* ONLY rotate toggle icon (right side) */
.accordion-header .toggle-icon {
transition: transform 0.3s ease;
}
.accordion-header.active .toggle-icon {
transform: rotate(180deg);
}
.accordion-header:hover {
background: linear-gradient(135deg, #e0e7ff, #f8fafc);
}
.contact-premium {
margin-top: 30px;
display: flex;
justify-content: center;
}
.contact-glass {
width: 100%;
max-width: 520px;
padding: 28px 24px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(18px);
border: 1px solid rgba(37, 99, 235, 0.15);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
text-align: center;
position: relative;
overflow: hidden;
transition: 0.3s ease;
}
/* soft glow effect */
.contact-glass::before {
content: "";
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(37,99,235,0.25), transparent);
filter: blur(40px);
}
/* hover lift */
.contact-glass:hover {
transform: translateY(-6px);
box-shadow: 0 30px 70px rgba(37, 99, 235, 0.18);
}
/* logo */
.contact-logo {
height: 60px;
margin-bottom: 10px;
}
/* title */
.contact-glass h3 {
font-size: 20px;
font-weight: 700;
color: #111;
margin-bottom: 4px;
}
/* subtitle */
.contact-sub {
font-size: 13px;
color: #666;
margin-bottom: 18px;
}
/* items */
.contact-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37, 99, 235, 0.12);
font-size: 14px;
color: #222;
transition: 0.25s ease;
}
/* hover effect */
.contact-item:hover {
background: rgba(37, 99, 235, 0.12);
transform: scale(1.02);
}
.contact-item i {
color: #2563eb;
font-size: 14px;
}
/* BODY */
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
background: linear-gradient(to bottom, #ffffff, #f9fafb);
padding: 0 18px;
background: #fff;
}
/* OPEN STATE LOOK (JS controls height) */
.accordion-body p,
.accordion-body li {
color: #444;
font-size: 14px;
line-height: 1.6;
padding: 10px 0;
}
.details-container {
display: flex;
gap: 30px;
max-width: 1200px;
margin: auto;
}
/* LEFT */
.left {
flex: 2;
}
/* RIGHT */
.right {
flex: 1;
}
/* STICKY BOX */
.price-box {
position: sticky;
top: 100px;
background: #fff;
color: #000;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.carousel {
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 15px;
}
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* TAB DESIGN */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.tab-btn {
padding: 10px 18px;
border-radius: 10px;
border: none;
cursor: pointer;
background: #eee;
font-weight: 600;
color: #000;
}
.tab-btn.active {
background: #fff;
border-left: 4px solid #ff0000;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* =========================
PREMIUM INCLUSION / EXCLUSION
========================= */
/* TAB CONTENT */
.tab-content {
padding: 10px 5px;
display: none;
}
.tab-content.active {
display: block;
}
/* each item card */
.list-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
margin: 8px 0;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px;
font-size: 14.5px;
line-height: 1.5;
color: #000000 !important; /* ๐ฅ FORCE BLACK TEXT */
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
transition: 0.25s ease;
}
.list-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
/* ICON STYLE */
.list-item.success i,
.list-item.danger i {
font-size: 14px;
margin-top: 3px;
}
/* green inclusion icon */
.list-item.success {
border-left: 4px solid #16a34a;
}
/* red exclusion icon */
.list-item.danger {
border-left: 4px solid #dc2626;
}
/* make text inside always black */
.list-item {
color: #000;
}
.tabs button:hover {
background: #2563eb;
color: #fff;
}
.tab-content {
display: none;
}
.tag {
font-size: 12px;
margin-top: 6px;
padding: 6px;
background: #f3f4f6;
border-radius: 6px;
color: #444;
}
.meta-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.date-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 5px;
}
.date-chip {
font-size: 11px;
padding: 4px 8px;
background: #eef2ff;
color: #2563eb;
border-radius: 20px;
}
.seats {
display: inline-block;
margin-top: 6px;
padding: 4px 8px;
font-size: 12px;
border-radius: 6px;
background: #dcfce7;
color: #166534;
font-weight: 600;
}
.section-header {
max-width: 1200px;
margin: 10px auto 10px;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-header h2 {
font-size: 28px;
font-weight: 700;
color: #111;
position: relative;
display: inline-block;
}
.section-header h2::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #2563eb, #60a5fa, transparent);
border-radius: 10px;
}
/* right side group */
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.show-all {
padding: 10px 18px;
border-radius: 30px;
background: linear-gradient(135deg, #2563eb, #1e40af);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 8px 20px rgba(37,99,235,0.25);
transition: 0.3s ease;
}
.show-all:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(37,99,235,0.35);
}
.carousel-wrapper {
position: relative;
max-width: 1200px;
margin: auto;
padding: 20px 60px;
overflow: hidden;
}
/* LEFT button */
.carousel-btn.left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* RIGHT button */
.carousel-btn.right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
/* shared style */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(37,99,235,0.95);
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 9; /* VERY IMPORTANT */
}
.carousel-btn:hover {
transform: translateY(-50%) scale(1.1);
background: #1e40af;
}
.carousel-btn.left {
left: 10px;
}
.carousel-btn.right {
right: 10px;
}
.btn-call {
flex: 1;
text-align: center;
padding: 10px;
border-radius: 8px;
background: #16a34a; /* green call style */
color: white;
text-decoration: none;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
transition: 0.3s;
}
.btn-call:hover {
opacity: 0.9;
transform: scale(1.03);
background: #15803d;
}
.packages-section {
padding: 10px 0 40px;
margin-top: -10px;
background: #fff;
position: relative;
z-index: 5;
}
/* DETAILS PAGE FIX */
.details-container {
display: flex;
gap: 30px;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
.hero h1 {
margin-top: 15px;
font-size: 28px;
}
/* MOBILE FIX */
@media (max-width: 768px) {
.details-container {
flex-direction: column;
}
.right {
width: 100%;
}
}
/* DETAILS HERO FIX */
.left .hero {
height: auto !important;
min-height: unset !important;
}
.left .hero::after {
display: none !important;
}
.section {
margin-top: 25px;
}
.section h2 {
margin-bottom: 10px;
}
#termsList {
list-style: none;
padding: 15px 5px;
}
#termsList li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #444;
font-size: 14px;
line-height: 1.6;
}
/* bullet icon */
#termsList li::before {
content: "โ";
position: absolute;
left: 0;
top: 0;
color: #2563eb;
font-weight: bold;
}
/* =========================
PREMIUM ENQUIRY CARD
========================= */
.premium-enquiry {
position: sticky;
top: 280px; /* below price box */
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 16px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
border: 1px solid rgba(0,0,0,0.06);
transition: 0.3s;
}
.premium-enquiry:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
/* TITLE */
.premium-enquiry h3 {
font-size: 20px;
font-weight: 700;
color: #111;
}
/* SUBTEXT */
.sub-text {
font-size: 13px;
color: #666;
margin-bottom: 15px;
}
/* INPUT STYLE */
.premium-enquiry .input-box input {
background: #fff;
border: 1px solid #e5e7eb;
transition: 0.3s;
}
.premium-enquiry .input-box input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
/* PRIMARY BUTTON */
.btn-primary {
width: 100%;
margin-top: 10px;
border-radius: 10px;
background: linear-gradient(135deg, #2563eb, #1e40af);
font-weight: 600;
}
.btn-primary:hover {
transform: scale(1.02);
}
/* WHATSAPP FULL BUTTON */
.btn-whatsapp-full {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
padding: 12px;
border-radius: 10px;
text-decoration: none;
background: #25D366;
color: #fff;
font-weight: 600;
gap: 8px;
transition: 0.3s;
}
.btn-whatsapp-full:hover {
background: #1ebe5d;
transform: scale(1.02);
}
/* =========================
FINAL FIX: INCLUSION / EXCLUSION
========================= */
#inclusion, #exclusion {
background: #fff !important;
color: #000 !important;
}
/* force every child to be visible */
#inclusion *,
#exclusion * {
color: #000 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* card style */
#inclusion .list-item,
#exclusion .list-item {
background: #ffffff !important;
color: #000 !important;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 12px;
padding: 14px 16px;
margin: 10px 0;
display: flex;
gap: 10px;
align-items: flex-start;
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}
/* icons */
#inclusion i {
color: #16a34a !important;
}
#exclusion i {
color: #dc2626 !important;
}
/* text span */
#inclusion span,
#exclusion span {
color: #000 !important;
}
/* =========================
DETAILS PAGE HEADING UNDERLINE
========================= */
.details-container .section h2 {
font-size: 24px;
font-weight: 700;
color: #111;
position: relative;
display: inline-block;
margin-bottom: 15px;
}
/* underline effect (same as Our Packages) */
.details-container .section h2::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #2563eb, #60a5fa, transparent);
border-radius: 10px;
}
/* WRAPPER */
.hero-title-wrap {
text-align: center;
margin-top: 18px;
padding: 18px 10px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding-bottom: 10px;
overflow: visible;
}
/* LOCATION BADGE */
.location-badge {
display: inline-block;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: #2563eb;
background: rgba(37,99,235,0.08);
border: 1px solid rgba(37,99,235,0.2);
border-radius: 20px;
margin-bottom: 10px;
}
/* SUBTITLE */
.subtitle {
font-size: 14px;
color: #666;
margin-top: 6px;
}
/* SHIMMER TITLE */
.shimmer-title {
font-size: 32px;
font-weight: 800;
margin: 12px 0 8px;
line-height: 1.3; /* ๐ฅ important fix */
padding: 6px 0; /* gives glow breathing room */
text-align: center;
background: linear-gradient(
110deg,
#1e3a8a 0%,
#60a5fa 40%,
#ffffff 50%,
#60a5fa 60%,
#1e3a8a 100%
);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite, glowPulse 2.5s ease-in-out infinite;
letter-spacing: 0.5px;
/* prevents bottom clipping illusion */
display: inline-block;
}
@media (max-width: 768px) {
.hero img {
height: 280px;
}
.shimmer-title {
font-size: 24px;
}
}
@keyframes shimmer {
0% {
background-position: -200% center;
filter: drop-shadow(0 0 0 rgba(37,99,235,0));
}
50% {
filter: drop-shadow(0 0 12px rgba(37,99,235,0.35));
}
100% {
background-position: 200% center;
filter: drop-shadow(0 0 0 rgba(37,99,235,0));
}
}
@keyframes glowPulse {
0%, 100% {
text-shadow: 0 0 10px rgba(37,99,235,0.15);
}
50% {
text-shadow: 0 0 25px rgba(96,165,250,0.35);
}
}
.hero img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 12px;
display: block;
opacity: 1;
transition: opacity 0.5s ease;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.overlay {
z-index: 2;
}
/* =========================
CONTACT PAGE STYLES
========================= */
/* page title */
h2 {
text-align: center;
margin: 40px 0 20px;
font-size: 30px;
font-weight: 700;
}
/* form container */
.contact-form {
max-width: 500px;
margin: auto;
padding: 25px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
/* inputs */
.contact-form input,
.contact-form textarea {
width: 100%;
margin-bottom: 15px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
outline: none;
font-size: 14px;
font-family: 'Poppins', sans-serif;
transition: 0.3s;
}
.contact-form textarea {
min-height: 120px;
resize: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* button override ONLY for contact page */
.contact-form button {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background: #2563eb;
color: #fff;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
.contact-form button:hover {
background: #1e40af;
transform: translateY(-2px);
}
/* remove ugly
spacing */
.contact-form br {
display: none;
}
.contact-info {
margin-top: 20px;
padding: 15px;
background: #f8fafc;
border-radius: 12px;
text-align: center;
font-size: 14px;
color: #111;
}
.contact-info p {
margin: 8px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.contact-info i {
color: #2563eb;
}
/* HAMBURGER */
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
cursor: pointer;
z-index: 99999;
padding: 8px;
border-radius: 10px;
transition: all 0.3s ease;
}
/* base lines */
.hamburger span {
width: 28px;
height: 3px;
background: linear-gradient(90deg, #111, #2563eb);
border-radius: 10px;
transition: all 0.35s ease;
transform-origin: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* hover effect (premium feel) */
.hamburger:hover span {
background: linear-gradient(90deg, #2563eb, #60a5fa);
box-shadow: 0 0 10px rgba(37,99,235,0.4);
}
/* ACTIVE STATE (X animation) */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
background: #2563eb;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
background: #2563eb;
}
/* mobile click feedback */
.hamburger:active {
transform: scale(0.92);
}
/* MOBILE MENU OVERLAY */
.mobile-menu {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(14px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: 0.35s ease;
z-index: 99998;
}
/* ACTIVE STATE */
.mobile-menu.active {
opacity: 1 !important;
pointer-events: all !important;
}
/* CONTENT BOX */
.mobile-content {
width: 90%;
max-width: 380px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border-radius: 22px;
padding: 22px;
box-shadow: 0 25px 60px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
gap: 18px;
animation: popUp 0.4s ease;
}
/* animation */
@keyframes popUp {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* LOGO */
.mobile-logo {
width: 130px;
margin: 0 auto;
}
/* LINKS */
.mobile-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-links a {
text-decoration: none;
font-size: 15px;
font-weight: 600;
color: #111;
padding: 12px 14px;
border-radius: 12px;
background: #f8fafc;
transition: 0.25s ease;
}
.mobile-links a:hover {
background: #2563eb;
color: #fff;
transform: translateX(5px);
}
/* DROPDOWN */
.mobile-dropdown {
display: flex;
flex-direction: column;
}
.dropdown-toggle {
padding: 12px 14px;
border-radius: 12px;
background: #f8fafc;
font-weight: 600;
display: flex;
justify-content: space-between;
cursor: pointer;
transition: 0.3s;
}
.dropdown-toggle:hover {
background: #e0e7ff;
}
.dropdown-menu-mobile {
display: flex;
flex-direction: column;
margin-top: 0px;
padding: 4px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(0,0,0,0.06);
gap: 8px;
/* smooth animation */
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-8px);
transition: all 0.35s ease;
}
/* LINKS INSIDE DROPDOWN */
.dropdown-menu-mobile a {
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: #111;
text-decoration: none;
background: #f8fafc;
transition: 0.25s ease;
}
/* hover effect */
.dropdown-menu-mobile a:hover {
background: #2563eb;
color: #fff;
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(37,99,235,0.25);
}
/* CONTACT SECTION */
.mobile-contact {
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-contact a {
text-decoration: none;
font-size: 13px;
color: #111;
background: #f1f5f9;
padding: 10px 12px;
border-radius: 10px;
transition: 0.3s;
}
.mobile-contact a:hover {
background: #2563eb;
color: #fff;
}
/* show dropdown */
.mobile-dropdown.active .dropdown-menu-mobile {
display: flex;
max-height: 200px;
opacity: 1;
transform: translateY(0);
}
.mobile-contact i.fa-phone,
.mobile-contact i.fa-envelope {
color: #2563eb !important;
margin-right: 6px; /* space between icon and text */
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* CLOSE BUTTON FOR MOBILE MENU */
.mobile-menu .close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.08);
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.mobile-menu .close-btn:hover {
background: #2563eb;
color: #fff;
transform: rotate(90deg);
}
/* =========================
PREMIUM DATE PRICING UI
========================= */
#pricingList {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
/* CARD */
.price-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
/* subtle shine effect */
.price-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transition: 0.6s;
}
.price-card:hover::before {
left: 100%;
}
/* hover effect */
.price-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
border-color: rgba(37,99,235,0.3);
}
/* DATE */
.price-date {
font-size: 14px;
font-weight: 500;
color: #444;
background: rgba(37,99,235,0.08);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(37,99,235,0.2);
}
/* PRICE */
.price-value {
font-size: 20px;
font-weight: 700;
background: linear-gradient(90deg, #2563eb, #1e40af);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.price-value span {
font-size: 12px;
font-weight: 500;
color: #666;
margin-left: 4px;
}
/* OPTIONAL: BEST DEAL BADGE */
.price-card.best::after {
content: "BEST DEAL";
position: absolute;
top: 10px;
right: -30px;
background: #16a34a;
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 4px 30px;
transform: rotate(45deg);
}
/* ===== PAGE BACKGROUND ===== */
body{
margin:0;
font-family:'Poppins',sans-serif;
background: radial-gradient(circle at top,#eef2ff,#f8fafc);
}
/* ===== HEADER ===== */
.page-title{
text-align:center;
font-size:40px;
font-weight:800;
margin:50px 0 5px;
color:#111;
}
.page-sub{
text-align:center;
color:#666;
margin-bottom:40px;
}
/* ===== GRID ===== */
.services-grid{
max-width:1200px;
margin:auto;
padding:20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:28px;
}
/* ===== FLOATING CARD ===== */
.service-card{
position:relative;
height:220px;
border-radius:20px;
overflow:hidden;
text-decoration:none;
box-shadow:0 15px 35px rgba(0,0,0,0.12);
transform: translateY(0);
transition: all 0.5s ease;
animation: float 6s ease-in-out infinite;
}
/* stagger floating effect */
.service-card:nth-child(even){
animation-delay: 1s;
}
.service-card:nth-child(3n){
animation-delay: 2s;
}
/* hover premium lift */
.service-card:hover{
transform: translateY(-12px) scale(1.03);
box-shadow:0 25px 60px rgba(0,0,0,0.2);
}
/* FLOAT ANIMATION */
@keyframes float{
0%{ transform: translateY(0px); }
50%{ transform: translateY(-6px); }
100%{ transform: translateY(0px); }
}
/* ===== BACKGROUND IMAGE ===== */
.service-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}
/* DARK GRADIENT OVERLAY */
.service-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,0.78),rgba(0,0,0,0.15));
z-index:1;
}
/* ===== ICON BADGE ===== */
.icon-badge{
position:absolute;
top:12px;
left:12px;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
border:1px solid rgba(255,255,255,0.25);
color:#fff;
font-size:18px;
z-index:3;
}
/* ===== TEXT CONTENT ===== */
.service-content{
position:absolute;
bottom:0;
z-index:2;
padding:16px;
color:#fff;
}
.service-content h3{
font-size:16px;
margin:0;
font-weight:600;
}
.service-content p{
font-size:12px;
margin-top:4px;
color: #fff !important;
opacity: 1 !important;
}
/* ===== BADGE TAG ===== */
.badge{
display:inline-block;
margin-top:8px;
padding:4px 10px;
font-size:11px;
border-radius:20px;
background:rgba(255,255,255,0.18);
border:1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(8px);
}
/* ===== OVERRIDE TEXT COLORS ===== */
/* H3 WHITE */
.service-content h3{
color: #ffffff !important;
}
/* ================= SKELETON ================= */
.skeleton-card {
animation: pulse 1.5s infinite ease-in-out;
}
.skeleton-img {
width: 100%;
height: 180px;
background: #e2e2e2;
border-radius: 10px;
}
.skeleton-line {
height: 12px;
background: #e2e2e2;
margin: 10px 0;
border-radius: 6px;
}
.skeleton-line.title {
width: 70%;
height: 16px;
}
.skeleton-line.small {
width: 90%;
}
.skeleton-line.price {
width: 40%;
height: 18px;
}
.skeleton-line.button {
width: 60%;
height: 30px;
border-radius: 8px;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* == Packages page immage css == */
.hero-banner {
position: relative;
height: 75vh;
min-height: 500px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 0px;
}
.hero-banner .hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.5),
rgba(0,0,0,0.2)
);
}
.hero-banner .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
}
/* == Details page immage css == */
.hero-details {
position: static;
height: auto;
background: none;
overflow: visible;
}
.hero-details img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 12px;
display: block;
}
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
text-decoration: none;
border: none;
width: 55px;
height: 55px;
background: #25D366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
z-index: 9999;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
animation: pulseWhatsApp 2s infinite;
}
@keyframes pulseWhatsApp {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); }
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: 768px) {
.footer-top-content {
flex-direction: column;
text-align: center;
align-items: stretch;
}
#footerForm {
flex-direction: column;
width: 100%;
}
#footerForm input,
#footerForm button {
width: 100%;
max-width: 100%;
}
}
/* =========================
GLOBAL RESPONSIVE FIX
========================= */
@media (max-width: 1024px) {
section {
padding: 18px 16px 40px;
}
.container {
padding: 0 16px;
}
}
@media (max-width: 768px) {
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
body {
padding-top: 70px;
}
}
/* SERVICES HORIZONTAL SCROLL */
.services-home {
background: #ffffff;
padding: 30px 0 60px;
margin-top: 0;
border-radius: 20px 20px 0 0;
}
.services-home::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 20px;
display: none;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.08),
rgba(0,0,0,0.02),
transparent
);
backdrop-filter: blur(6px);
}
.services-wrapper {
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
}
/* hide scrollbar (Chrome, Safari) */
.services-wrapper::-webkit-scrollbar {
display: none;
}
/* row */
.services-row {
display: flex;
gap: 16px;
padding: 10px 10px;
width: max-content;
scroll-snap-type: x mandatory;
transition: transform 0.4s ease;
background: #fff;
}
/* โ
show approx 6 cards */
.services-row .service-card {
flex: 0 0 auto;
width: 220px;
height: 220px;
scroll-snap-align: start;
}
.services-wrapper {
scroll-snap-type: x mandatory;
}
.service-card {
scroll-snap-align: center;
}
@media (max-width: 768px) {
/* container spacing fix */
.services-wrapper {
padding: 10px 0;
}
.services-row {
gap: 12px;
}
/* ๐ฅ MAIN FIX: smaller cards on mobile */
.services-row .service-card {
width: 160px;
height: 170px;
border-radius: 14px;
}
/* image scaling */
.service-card img {
object-fit: cover;
}
/* text shrink */
.service-content h3 {
font-size: 13px;
}
.service-content p {
font-size: 11px;
}
/* icon badge smaller */
.icon-badge {
width: 34px;
height: 34px;
font-size: 14px;
}
/* optional: hide arrows (better UX on mobile) */
.carousel-btn {
display: none;
}
}
/* === terms and conditon === */
/* =========================
PREMIUM TERMS HERO
========================= */
.premium-hero {
position: relative;
padding: 80px 20px 70px;
text-align: center;
background: radial-gradient(circle at top, #2563eb, #1e40af);
color: #fff;
border-radius: 0 0 40px 40px;
overflow: hidden;
}
/* glow effect */
.premium-hero::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -150px;
left: 50%;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(255,255,255,0.25), transparent);
filter: blur(80px);
}
/* inner glass card */
.hero-inner {
max-width: 700px;
margin: auto;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(16px);
padding: 30px 25px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: fadeUp 0.8s ease;
}
/* badge */
.hero-badge {
display: inline-block;
font-size: 12px;
padding: 6px 12px;
border-radius: 20px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
margin-bottom: 12px;
}
/* title */
.hero-title {
font-size: 40px;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: 0.5px;
background: linear-gradient(90deg,#fff,#c7d2fe);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-title span {
color: #60a5fa;
}
/* subtitle */
.hero-subtext {
font-size: 15px;
line-height: 1.6;
color: #e5e7eb;
max-width: 500px;
margin: auto;
}
/* animation */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* mobile */
@media (max-width: 768px) {
.hero-title {
font-size: 28px;
}
.hero-inner {
padding: 22px 16px;
}
}
/* ===== ACCORDION ===== */
.accordion-item{
margin-bottom:16px;
border-radius:16px;
overflow:hidden;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
.accordion-header{
padding:16px 18px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
background:linear-gradient(135deg,#f8fafc,#eef2ff);
}
.accordion-header i{
color:#2563eb;
transition:0.3s;
}
.accordion-header.active i:last-child{
transform:rotate(180deg);
}
.accordion-body{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
padding:0 18px;
}
.accordion-body p,
.accordion-body li{
font-size:14px;
color:#444;
line-height:1.7;
padding:10px 0;
}
/* ===== LIST STYLE ===== */
.termsList{
list-style:none;
padding-left:0;
}
.termsList li{
position:relative;
padding-left:22px;
}
.termsList li::before{
content:"โ";
position:absolute;
left:0;
color:#2563eb;
font-weight:bold;
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
}
/* === T&C for details page === */
/* MODAL BACKDROP */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(6px);
}
/* MODAL BOX */
.modal-content {
position: relative;
width: 90%;
height: 90%;
margin: 3% auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
animation: fadeIn 0.3s ease;
flex-direction: column;
}
/* CLOSE BUTTON */
.modal .close {
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
cursor: pointer;
z-index: 10;
}
/* IFRAME FULL SIZE */
.modal iframe {
width: 100%;
height: 100%;
border: none;
}
.modal-content {
width: 90%;
height: 90%;
}
#termsContainer {
flex: 1;
height: 100%;
overflow-y: auto;
padding: 20px;
}
/* packages page filter */
/* =========================
PAGE HEADER
========================= */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
padding: 20px;
}
/* TITLE */
.section-title {
font-size: 32px;
font-weight: 800;
letter-spacing: 0.5px;
color: #1c1c1c;
}
/* =========================
FILTER DROPDOWN WRAPPER
========================= */
.filter-dropdown {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(14px);
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
cursor: pointer;
min-width: 200px;
transition: all 0.3s ease;
z-index: 1000;
}
/* hover */
.filter-dropdown:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(37,99,235,0.25);
}
/* ICON */
.filter-dropdown i {
color: #2563eb;
font-size: 14px;
}
/* TEXT */
#selectedFilter {
flex: 1;
font-weight: 500;
color: #333;
}
/* ARROW */
.arrow {
transition: transform 0.3s ease;
}
/* rotate arrow when active */
.filter-dropdown.active .arrow {
transform: rotate(180deg);
}
/* =========================
DROPDOWN MENU (FIXED)
========================= */
.filter-dropdown-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
overflow: hidden;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: all 0.25s ease;
z-index: 99999;
}
/* OPEN STATE */
.filter-dropdown.active .filter-dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* OPTIONS */
.filter-dropdown-menu div {
padding: 12px 14px;
font-size: 14px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
/* hover option */
.filter-dropdown-menu div:hover {
background: #2563eb;
color: #fff;
}
/* =========================
MOBILE
========================= */
@media (max-width: 600px) {
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.filter-dropdown {
width: 100%;
}
}
#itinerary p {
white-space: pre-line;
}
/* =========================
PREMIUM FAQ SECTION
========================= */
.faq-section {
padding: 60px 20px;
background: #ffffff;
overflow: hidden;
}
.faq-left,
.faq-right {
min-width: 0;
}
/* layout */
.faq-container {
display: flex;
gap: 40px;
align-items: flex-start;
max-width: 1200px;
margin: auto;
padding: 0 20px;
overflow: visible;
}
/* LEFT */
.faq-left {
flex: 1;
}
.faq-left h2 {
margin-bottom: 10px;
}
.faq-left p {
color: var(--muted);
margin-bottom: 18px;
}
.faq-left button {
padding: 10px 20px;
border-radius: 30px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
font-weight: 600;
border: none;
transition: 0.3s;
}
.faq-left button:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(37,99,235,0.3);
}
.faq-contact {
font-size: 13px;
margin-top: 10px;
}
.faq-contact span {
color: #2563eb;
font-weight: 600;
}
/* RIGHT PANEL */
.faq-right {
flex: 1.2;
max-height: 320px;
overflow-y: auto;
padding-right: 10px;
/* NEW: subtle inner depth */
box-shadow: inset 0 0 12px rgba(0,0,0,0.04);
border-radius: 14px;
}
/* =========================
PREMIUM SCROLLBAR
========================= */
/* width */
.faq-right::-webkit-scrollbar {
width: 8px;
}
/* track */
.faq-right::-webkit-scrollbar-track {
background: rgba(0,0,0,0.04);
border-radius: 20px;
}
/* THUMB */
.faq-right::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2563eb, #3b82f6);
border-radius: 20px;
transition: all 0.3s ease;
}
/* HOVER */
.faq-right::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #3b82f6, #2563eb);
}
/* ACTIVE (CLICK FEEL) */
.faq-right::-webkit-scrollbar-thumb:active {
box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}
/* FIREFOX */
.faq-right {
scrollbar-width: thin;
scrollbar-color: #2563eb rgba(37, 99, 235, 0.08);
}
/* =========================
FAQ ITEM
========================= */
.faq-item {
margin-bottom: 12px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
transition: 0.3s;
}
.faq-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
/* QUESTION */
.faq-question {
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 15px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border-radius: 14px;
}
.faq-question span {
max-width: 85%;
}
.faq-question i {
transition: 0.3s;
}
/* ANSWER */
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 18px;
font-size: 14px;
color: #444;
transition: max-height 0.35s ease, padding 0.3s ease;
}
/* ACTIVE */
.faq-item.active .faq-answer {
max-height: 150px;
padding: 12px 18px 16px;
}
.faq-item.active .faq-question {
background: linear-gradient(135deg, #e0e7ff, #f8fafc);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
/* MOBILE */
@media (max-width: 768px) {
.faq-container {
flex-direction: column;
}
.faq-right {
max-height: unset;
}
}
/* Submit popup */
.toast-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.toast-box {
background: #fff;
padding: 25px 30px;
border-radius: 16px;
min-width: 280px;
max-width: 350px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: popCenter 0.25s ease;
font-family: Poppins;
}
.toast-box i {
font-size: 30px;
margin-bottom: 10px;
}
.toast-box p {
margin: 0;
font-size: 15px;
font-weight: 500;
}
/* Animations */
@keyframes popCenter {
from {
transform: scale(0.7);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* Types */
.toast-success i { color: #00c853; }
.toast-error i { color: #ff1744; }
.toast-info i { color: #2196f3; }
.hidden {
display: none;
}
/* ========================================================================
COMPREHENSIVE MOBILE & TABLET RESPONSIVE FIXES
Added without changing any existing CSS above
======================================================================== */
/* =========================
VIEWPORT META HELPER
(Ensure this is in HTML )
========================= */
/* =========================
EXTRA SMALL PHONES (< 400px)
========================= */
@media screen and (max-width: 400px) {
/* NAVBAR */
.navbar {
padding: 8px 10px;
gap: 6px;
}
.logo {
height: 36px;
}
.search-box {
padding: 8px 10px;
border-radius: 999px;
}
.search-box input {
font-size: 13px;
}
/* HERO */
.hero {
height: 50vh;
min-height: 280px;
border-radius: 10px;
margin-bottom: 20px;
}
.overlay h2 {
font-size: 18px;
padding: 0 8px;
}
.overlay h3 {
font-size: 16px;
}
.typing-text {
font-size: 14px;
}
.cursor {
font-size: 14px;
}
/* SECTION HEADERS */
.section-header {
padding: 0 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.section-header h2 {
font-size: 20px;
}
.show-all {
padding: 8px 14px;
font-size: 12px;
}
/* PACKAGE CARDS */
.package-card {
width: 155px;
flex: 0 0 155px;
}
.package-card img {
height: 100px;
}
.package-card h3 {
font-size: 12px;
padding: 8px;
}
.package-card p {
font-size: 10px;
padding: 0 8px 8px;
}
.package-content {
padding: 10px;
}
.package-content h3 {
font-size: 12px;
}
.package-content p {
font-size: 10px;
}
.btn-group {
flex-direction: column;
gap: 6px;
}
.btn-whatsapp,
.btn-view,
.btn-call {
font-size: 12px;
padding: 8px;
}
/* SERVICES */
.services-row .service-card {
width: 140px;
height: 150px;
border-radius: 12px;
}
.service-content h3 {
font-size: 11px;
}
.service-content p {
font-size: 10px;
}
.icon-badge {
width: 28px;
height: 28px;
font-size: 12px;
top: 8px;
left: 8px;
}
.service-content {
padding: 10px;
}
.badge {
font-size: 9px;
padding: 3px 7px;
}
/* SERVICES GRID PAGE */
.services-grid {
grid-template-columns: 1fr;
gap: 16px;
padding: 12px;
}
.service-card {
height: 180px;
}
.page-title {
font-size: 26px;
margin: 30px 0 5px;
}
.page-sub {
font-size: 13px;
margin-bottom: 25px;
}
/* DETAILS PAGE */
.hero-details img,
.hero img {
height: 200px;
border-radius: 8px;
}
.shimmer-title {
font-size: 20px;
}
.hero-title-wrap {
padding: 12px 8px;
margin-top: 10px;
}
.location-badge {
font-size: 11px;
padding: 4px 10px;
}
.subtitle {
font-size: 12px;
}
.details-container {
padding: 0 10px;
gap: 16px;
margin: 20px auto;
}
.details-container .section h2 {
font-size: 18px;
}
/* PRICE BOX */
.price-box {
padding: 14px;
}
.price {
font-size: 18px;
}
.price-card {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px;
}
.price-value {
font-size: 16px;
}
.price-date {
font-size: 12px;
}
/* PREMIUM ENQUIRY */
.premium-enquiry {
position: static;
padding: 14px;
}
.premium-enquiry h3 {
font-size: 16px;
}
/* ACCORDION */
.accordion-header {
padding: 12px 14px;
font-size: 13px;
}
.header-left i {
width: 28px;
height: 28px;
font-size: 12px;
}
.header-left {
gap: 8px;
}
.accordion-body p,
.accordion-body li {
font-size: 13px;
}
/* TABS */
.tabs {
gap: 6px;
flex-wrap: wrap;
}
.tab-btn {
padding: 8px 12px;
font-size: 12px;
}
.list-item {
font-size: 13px;
padding: 10px 12px;
gap: 8px;
}
/* CAROUSEL */
.carousel {
height: 220px;
}
/* CONTACT PAGE */
.contact-form {
padding: 16px;
margin: 10px;
}
.contact-form input,
.contact-form textarea {
padding: 10px 12px;
font-size: 13px;
}
/* CONTACT GLASS */
.contact-glass {
padding: 18px 14px;
}
.contact-glass h3 {
font-size: 16px;
}
.contact-item {
font-size: 12px;
padding: 8px 10px;
}
/* POPUP */
.glass-card {
padding: 18px;
border-radius: 14px;
width: 92%;
}
.popup-card h2 {
font-size: 18px;
}
.input-box {
margin: 8px 0;
}
.input-box input {
padding: 10px 36px 10px 12px;
font-size: 13px;
}
/* TOAST */
.toast-box {
min-width: 240px;
max-width: 280px;
padding: 18px 20px;
margin: 0 15px;
}
.toast-box p {
font-size: 13px;
}
/* FOOTER */
.footer-top {
padding: 30px 12px;
}
.footer-top-content {
padding: 20px 16px;
}
.footer-top-content .left h2 {
font-size: 20px;
}
.footer-top-content .left p {
font-size: 12px;
}
.footer-main {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 12px;
}
.footer-col {
padding: 14px;
}
.dest-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.dest-item img {
width: 45px;
height: 45px;
}
.dest-item span {
font-size: 11px;
}
.footer-bottom {
padding: 14px;
}
.social-icons a {
width: 34px;
height: 34px;
margin: 0 4px;
font-size: 13px;
}
.footer-bottom p {
font-size: 11px;
}
.footer-logo-img {
height: 45px;
}
/* WHATSAPP FLOAT */
.whatsapp-float {
width: 48px;
height: 48px;
font-size: 20px;
bottom: 14px;
right: 14px;
}
/* PREMIUM HERO (TERMS) */
.premium-hero {
padding: 50px 12px 45px;
border-radius: 0 0 24px 24px;
}
.hero-inner {
padding: 18px 12px;
}
.hero-title {
font-size: 22px;
}
.hero-subtext {
font-size: 12px;
}
/* FAQ */
.faq-section {
padding: 30px 12px;
}
.faq-question {
padding: 12px 14px;
font-size: 13px;
}
.faq-answer {
font-size: 12px;
}
.faq-left h2 {
font-size: 20px;
}
.faq-left p {
font-size: 13px;
}
/* MODAL */
.modal-content {
width: 96%;
height: 94%;
margin: 3% auto;
}
.modal .close {
top: 8px;
right: 12px;
font-size: 22px;
}
#termsContainer {
padding: 14px;
}
/* SKELETON */
.skeleton-img {
height: 100px;
}
.skeleton-line {
height: 10px;
}
.skeleton-line.title {
height: 13px;
}
/* SEARCH RESULTS */
.search-card {
height: 60px;
}
.search-title {
font-size: 12px;
}
/* FILTER DROPDOWN */
.filter-dropdown {
min-width: unset;
width: 100%;
padding: 10px 12px;
}
#selectedFilter {
font-size: 13px;
}
/* SECTION TITLE */
.section-title {
font-size: 18px;
}
/* PACKAGES SECTION */
.packages-section h2 {
font-size: 20px;
margin-top: 5px;
margin-bottom: 14px;
}
/* GALLERY */
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
padding: 10px;
}
.gallery img {
width: 100%;
margin: 0;
border-radius: 8px;
}
/* BUTTON GROUP DETAILS */
.btn-group {
flex-direction: column;
gap: 6px;
}
.btn-whatsapp-full {
padding: 10px;
font-size: 13px;
}
.btn-primary {
font-size: 13px;
padding: 10px;
}
}
/* =========================
SMALL PHONES (400px - 480px)
========================= */
@media screen and (min-width: 401px) and (max-width: 480px) {
/* NAVBAR */
.navbar {
padding: 8px 12px;
}
.logo {
height: 38px;
}
/* HERO */
.hero {
height: 55vh;
min-height: 300px;
border-radius: 12px;
}
.overlay h2 {
font-size: 20px;
}
.overlay h3 {
font-size: 17px;
}
.typing-text {
font-size: 15px;
}
/* SECTION HEADERS */
.section-header {
padding: 0 14px;
}
.section-header h2 {
font-size: 22px;
}
/* PACKAGE CARDS */
.package-card {
width: 170px;
flex: 0 0 170px;
}
.package-card img {
height: 115px;
}
/* SERVICES */
.services-row .service-card {
width: 155px;
height: 165px;
}
.service-content h3 {
font-size: 12px;
}
.service-content p {
font-size: 10px;
}
/* SERVICES GRID */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding: 14px;
}
.page-title {
font-size: 28px;
}
/* DETAILS */
.hero-details img,
.hero img {
height: 230px;
}
.shimmer-title {
font-size: 22px;
}
.details-container {
padding: 0 14px;
gap: 18px;
}
.details-container .section h2 {
font-size: 19px;
}
/* PRICE BOX */
.price-box {
padding: 16px;
}
/* ACCORDION */
.accordion-header {
padding: 14px 16px;
font-size: 14px;
}
/* CONTACT */
.contact-form {
padding: 18px;
margin: 12px;
}
/* FOOTER */
.footer-main {
grid-template-columns: 1fr;
gap: 18px;
padding: 28px 14px;
}
.dest-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.dest-item img {
width: 50px;
height: 50px;
}
.dest-item span {
font-size: 12px;
}
/* PREMIUM HERO */
.premium-hero {
padding: 55px 14px 50px;
border-radius: 0 0 30px 30px;
}
.hero-inner {
padding: 22px 16px;
}
.hero-title {
font-size: 26px;
}
/* FAQ */
.faq-section {
padding: 35px 14px;
}
.faq-question {
font-size: 14px;
}
/* MODAL */
.modal-content {
width: 94%;
height: 92%;
}
/* FILTER */
.filter-dropdown {
min-width: unset;
width: 100%;
}
/* PACKAGES SECTION */
.packages-section h2 {
font-size: 22px;
}
/* GALLERY */
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 14px;
}
.gallery img {
width: 100%;
margin: 0;
}
}
/* =========================
MEDIUM PHONES (480px - 600px)
========================= */
@media screen and (min-width: 481px) and (max-width: 600px) {
/* HERO */
.hero {
height: 55vh;
min-height: 340px;
border-radius: 12px;
}
.overlay h2 {
font-size: 22px;
}
.overlay h3 {
font-size: 18px;
}
.typing-text {
font-size: 16px;
}
/* SECTION HEADERS */
.section-header {
padding: 0 16px;
}
.section-header h2 {
font-size: 24px;
}
/* PACKAGE CARDS */
.package-card {
width: 200px;
flex: 0 0 200px;
}
.package-card img {
height: 140px;
}
.package-card h3 {
font-size: 14px;
}
.package-card p {
font-size: 12px;
}
.package-content h3 {
font-size: 14px;
}
.package-content p {
font-size: 12px;
}
/* SERVICES */
.services-row .service-card {
width: 180px;
height: 190px;
}
.service-content h3 {
font-size: 14px;
}
.service-content p {
font-size: 11px;
}
.icon-badge {
width: 36px;
height: 36px;
font-size: 15px;
}
/* SERVICES GRID */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
.page-title {
font-size: 30px;
}
/* DETAILS */
.hero-details img,
.hero img {
height: 260px;
}
.shimmer-title {
font-size: 24px;
}
.details-container {
padding: 0 16px;
gap: 20px;
}
.details-container .section h2 {
font-size: 20px;
}
/* CAROUSEL */
.carousel {
height: 260px;
}
/* ACCORDION */
.accordion-header {
padding: 14px 16px;
font-size: 14px;
}
.header-left i {
width: 30px;
height: 30px;
font-size: 13px;
}
/* TABS */
.tab-btn {
padding: 9px 14px;
font-size: 13px;
}
.list-item {
font-size: 13px;
}
/* CONTACT */
.contact-form {
padding: 20px;
margin: 14px;
}
/* FOOTER */
.footer-main {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 30px 16px;
}
.footer-col {
padding: 16px;
}
.dest-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.dest-item img {
width: 55px;
height: 55px;
}
/* PREMIUM HERO */
.premium-hero {
padding: 60px 16px 55px;
border-radius: 0 0 32px 32px;
}
.hero-inner {
padding: 24px 18px;
}
.hero-title {
font-size: 28px;
}
/* FAQ */
.faq-section {
padding: 40px 16px;
}
.faq-question {
font-size: 14px;
}
/* MODAL */
.modal-content {
width: 92%;
height: 90%;
}
/* FILTER */
.filter-dropdown {
min-width: 180px;
}
/* PACKAGES SECTION */
.packages-section h2 {
font-size: 24px;
}
/* GALLERY */
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.gallery img {
width: 100%;
margin: 0;
}
/* PRICE */
.price-card {
padding: 14px 16px;
}
.price-value {
font-size: 18px;
}
}
/* =========================
TABLETS PORTRAIT (600px - 768px)
========================= */
@media screen and (min-width: 601px) and (max-width: 768px) {
/* NAVBAR */
.navbar {
padding: 10px 18px;
}
.logo {
height: 42px;
}
/* HERO */
.hero {
height: 60vh;
min-height: 380px;
border-radius: 14px;
}
.overlay h2 {
font-size: 24px;
}
.overlay h3 {
font-size: 20px;
}
.typing-text {
font-size: 18px;
}
/* SECTION HEADERS */
.section-header {
padding: 0 18px;
}
.section-header h2 {
font-size: 24px;
}
/* PACKAGE CARDS */
.package-card {
width: 220px;
flex: 0 0 220px;
}
.package-card img {
height: 160px;
}
.package-card h3 {
font-size: 14px;
}
.package-card p {
font-size: 12px;
}
.package-content h3 {
font-size: 14px;
}
.package-content p {
font-size: 12px;
}
/* SERVICES */
.services-row .service-card {
width: 200px;
height: 200px;
}
.service-content h3 {
font-size: 14px;
}
.service-content p {
font-size: 11px;
}
.icon-badge {
width: 38px;
height: 38px;
font-size: 16px;
}
/* SERVICES GRID */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
padding: 18px;
}
.page-title {
font-size: 32px;
}
/* DETAILS */
.hero-details img,
.hero img {
height: 320px;
}
.shimmer-title {
font-size: 26px;
}
.details-container {
padding: 0 18px;
gap: 24px;
}
.details-container .section h2 {
font-size: 21px;
}
/* CAROUSEL */
.carousel {
height: 320px;
}
/* ACCORDION */
.accordion-header {
padding: 15px 18px;
font-size: 14px;
}
/* TABS */
.tab-btn {
padding: 10px 16px;
font-size: 13px;
}
/* CONTACT */
.contact-form {
padding: 22px;
margin: 16px;
}
/* FOOTER */
.footer-main {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 32px 18px;
}
.footer-col {
padding: 18px;
}
.dest-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.dest-item img {
width: 58px;
height: 58px;
}
.dest-item span {
font-size: 13px;
}
/* PREMIUM HERO */
.premium-hero {
padding: 65px 18px 60px;
border-radius: 0 0 36px 36px;
}
.hero-inner {
padding: 26px 20px;
}
.hero-title {
font-size: 30px;
}
/* FAQ */
.faq-section {
padding: 45px 18px;
}
.faq-container {
gap: 24px;
}
/* MODAL */
.modal-content {
width: 88%;
height: 88%;
}
/* FILTER */
.filter-dropdown {
min-width: 200px;
}
/* PACKAGES SECTION */
.packages-section h2 {
font-size: 26px;
}
/* GALLERY */
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gallery img {
width: 100%;
margin: 0;
}
/* PRICE */
.price-card {
padding: 15px 18px;
}
/* CONTACT GLASS */
.contact-glass {
padding: 24px 20px;
}
/* PREMIUM ENQUIRY */
.premium-enquiry {
padding: 18px;
}
/* FOOTER TOP */
.footer-top-content {
padding: 24px 20px;
}
.footer-top-content .left h2 {
font-size: 24px;
}
}
/* =========================
TABLETS LANDSCAPE / SMALL LAPTOPS (768px - 1024px)
========================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* NAVBAR */
.navbar {
padding: 0 20px;
}
.nav-links {
gap: 16px;
}
.nav-links a {
font-size: 14px;
}
/* HERO */
.hero {
height: 65vh;
min-height: 420px;
}
.overlay h2 {
font-size: 28px;
}
/* SECTION HEADERS */
.section-header {
padding: 0 20px;
}
.section-header h2 {
font-size: 26px;
}
/* PACKAGE CARDS */
.package-card {
width: 240px;
flex: 0 0 240px;
}
.package-card img {
height: 170px;
}
/* SERVICES */
.services-row .service-card {
width: 220px;
height: 220px;
}
/* SERVICES GRID */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;
}
.page-title {
font-size: 34px;
}
/* DETAILS */
.details-container {
padding: 0 20px;
gap: 24px;
}
.details-container .section h2 {
font-size: 22px;
}
.hero-details img,
.hero img {
height: 360px;
}
.shimmer-title {
font-size: 28px;
}
/* CAROUSEL */
.carousel {
height: 360px;
}
/* CAROUSEL WRAPPER */
.carousel-wrapper {
padding: 20px 50px;
}
/* CONTACT */
.contact-form {
padding: 24px;
}
/* FOOTER */
.footer-main {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 36px 20px;
}
.dest-grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.dest-item img {
width: 55px;
height: 55px;
}
/* PREMIUM HERO */
.premium-hero {
padding: 70px 20px 65px;
}
.hero-inner {
padding: 28px 22px;
}
.hero-title {
font-size: 34px;
}
/* FAQ */
.faq-section {
padding: 50px 20px;
}
.faq-container {
gap: 30px;
}
/* FILTER */
.filter-dropdown {
min-width: 220px;
}
/* PACKAGES SECTION */
.packages-section h2 {
font-size: 28px;
}
/* GALLERY */
.gallery {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gallery img {
width: 100%;
margin: 0;
}
/* FOOTER TOP */
.footer-top-content {
padding: 26px 24px;
}
/* CONTACT GLASS */
.contact-glass {
max-width: 460px;
padding: 24px 20px;
}
/* PREMIUM ENQUIRY */
.premium-enquiry {
padding: 18px;
}
/* PRICE BOX */
.price-box {
padding: 18px;
}
/* MODAL */
.modal-content {
width: 85%;
height: 85%;
}
}
/* =========================
LANDSCAPE PHONE FIX
========================= */
@media screen and (max-height: 500px) and (orientation: landscape) {
/* HERO */
.hero {
height: 70vh;
min-height: 200px;
}
.overlay h2 {
font-size: 18px;
}
.overlay h3 {
font-size: 14px;
}
.typing-text {
font-size: 14px;
}
/* NAVBAR */
body {
padding-top: 60px;
}
.navbar {
height: 60px;
padding: 0 12px;
}
.logo {
height: 32px;
}
/* MOBILE MENU */
.mobile-content {
max-height: 90vh;
overflow-y: auto;
padding: 16px;
gap: 12px;
}
.mobile-logo {
width: 100px;
}
.mobile-links a {
padding: 8px 12px;
font-size: 14px;
}
/* POPUP */
.glass-card {
max-height: 90vh;
overflow-y: auto;
padding: 18px;
}
/* PREMIUM HERO */
.premium-hero {
padding: 30px 14px 25px;
border-radius: 0 0 20px 20px;
}
.hero-inner {
padding: 16px 14px;
}
.hero-title {
font-size: 22px;
}
.hero-subtext {
font-size: 12px;
}
/* DETAILS HERO */
.hero-details img,
.hero img {
height: 180px;
}
/* CAROUSEL */
.carousel {
height: 180px;
}
/* CONTACT GLASS */
.contact-glass {
padding: 16px;
}
.contact-glass h3 {
font-size: 16px;
}
}
/* =========================
HIGH DPI / RETINA SAFETY
========================= */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi) {
/* Ensure sharp borders */
.package-card,
.footer-col,
.accordion-item,
.faq-item,
.price-card,
.list-item,
.glass-card,
.contact-glass {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* =========================
TOUCH DEVICE OPTIMIZATIONS
========================= */
@media (hover: none) and (pointer: coarse) {
/* Remove hover effects that don't work on touch */
.package-card:hover {
transform: none;
}
.service-card:hover {
transform: none;
}
.accordion-item:hover {
transform: none;
}
.faq-item:hover {
transform: none;
}
.price-card:hover {
transform: none;
}
.list-item:hover {
transform: none;
}
.footer-col:hover {
transform: none;
}
.contact-glass:hover {
transform: none;
}
.premium-enquiry:hover {
transform: none;
}
.filter-dropdown:hover {
transform: none;
}
.show-all:hover {
transform: none;
}
/* Increase tap targets */
.nav-links a,
.mobile-links a,
.dropdown-menu-mobile a,
.footer-col a,
.mobile-contact a,
.faq-question,
.accordion-header,
.tab-btn,
.filter-dropdown-menu div {
min-height: 44px;
display: flex;
align-items: center;
}
/* Better touch scrolling */
.packages-wrapper,
.services-wrapper,
.scroll-row,
#domesticPackages,
#internationalPackages {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* Disable animations that can cause jank on touch */
.service-card {
animation: none;
}
.shimmer-title {
animation: shimmer 3s linear infinite;
}
.footer-logo-img {
animation: none;
filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6));
}
.plane-icon {
animation: none;
}
.emoji,
.emoji-icon {
animation: none;
}
}
/* =========================
SAFE AREA INSETS (NOTCH DEVICES)
========================= */
@supports (padding: env(safe-area-inset-top)) {
body {
padding-top: calc(80px + env(safe-area-inset-top));
}
@media (max-width: 768px) {
body {
padding-top: calc(70px + env(safe-area-inset-top));
}
}
.navbar {
padding-top: env(safe-area-inset-top);
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
.whatsapp-float {
bottom: calc(20px + env(safe-area-inset-bottom));
right: calc(20px + env(safe-area-inset-right));
}
.footer-bottom {
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
}
/* =========================
REDUCE MOTION ACCESSIBILITY
========================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.typing-text,
.cursor,
.shimmer-title,
.footer-logo-img,
.plane-icon,
.emoji,
.emoji-icon,
.service-card {
animation: none !important;
}
}
/* =========================
DARK MODE SCHEME AWARENESS
(If user prefers dark mode, soften whites)
========================= */
@media (prefers-color-scheme: dark) {
/* Keep existing light design but ensure no harsh white flashes */
body {
background: #f8fafc;
}
}
/* =========================
PRINT STYLES
========================= */
@media print {
.navbar,
.whatsapp-float,
.mobile-menu,
.hamburger,
.carousel-btn,
.popup,
.modal,
.toast-overlay,
.footer-pro {
display: none !important;
}
body {
padding-top: 0 !important;
background: #fff !important;
color: #000 !important;
}
.hero {
height: auto !important;
min-height: unset !important;
}
.details-container {
display: block !important;
}
.right {
width: 100% !important;
}
.price-box,
.premium-enquiry {
position: static !important;
}
section {
padding: 15px 0 !important;
page-break-inside: avoid;
}
}
/* =========================
PACKAGE TILE FIX - MOBILE & TABLET ONLY
========================= */
@media screen and (max-width: 1024px) {
.package-card {
flex: 0 0 auto !important;
}
}
@media screen and (max-width: 768px) {
.package-card {
width: 200px !important;
flex: 0 0 200px !important;
border-radius: 12px;
}
.package-card img {
height: 130px !important;
border-radius: 12px 12px 0 0;
}
.package-card h3 {
font-size: 13px !important;
padding: 10px 10px 4px;
line-height: 1.3;
}
.package-card p {
font-size: 11px !important;
padding: 0 10px 8px;
line-height: 1.4;
}
.package-content {
padding: 10px !important;
}
.package-content h3 {
font-size: 13px !important;
line-height: 1.3;
}
.package-content p {
font-size: 11px !important;
line-height: 1.4;
margin-bottom: 6px;
}
.price {
font-size: 14px !important;
}
.btn-group {
flex-direction: column;
gap: 6px;
}
.btn-whatsapp,
.btn-view,
.btn-call {
font-size: 12px;
padding: 8px 10px;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.package-card {
width: 165px !important;
flex: 0 0 165px !important;
border-radius: 10px;
}
.package-card img {
height: 105px !important;
border-radius: 10px 10px 0 0;
}
.package-card h3 {
font-size: 12px !important;
padding: 8px 8px 2px;
}
.package-card p {
font-size: 10px !important;
padding: 0 8px 6px;
}
.package-content {
padding: 8px !important;
}
.package-content h3 {
font-size: 12px !important;
}
.package-content p {
font-size: 10px !important;
margin-bottom: 4px;
}
.price {
font-size: 13px !important;
}
}
@media screen and (min-width: 481px) and (max-width: 600px) {
.package-card {
width: 185px !important;
flex: 0 0 185px !important;
}
.package-card img {
height: 120px !important;
}
}
@media screen and (min-width: 601px) and (max-width: 768px) {
.package-card {
width: 210px !important;
flex: 0 0 210px !important;
}
.package-card img {
height: 145px !important;
}
}
/* =========================
ENQUIRY OVERLAP FIX - MOBILE & TABLET ONLY
========================= */
@media screen and (max-width: 768px) {
.price-box {
position: static !important;
top: auto !important;
}
.premium-enquiry {
position: static !important;
top: auto !important;
margin-top: 16px;
}
.details-container .right {
display: flex;
flex-direction: column;
gap: 16px;
}
.price-box {
order: 1;
}
.premium-enquiry {
order: 2;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.premium-enquiry {
top: 380px !important;
}
}
/* =========================
SEARCH BAR FIX - MOBILE & TABLET ONLY
Icon toggle โ expands on tap
========================= */
@media screen and (max-width: 900px) {
.search-wrapper {
position: relative;
z-index: 4000;
order: 1;
margin-left: auto;
}
.search-box {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
gap: 0 !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
order: 1;
}
.search-box input {
width: 0 !important;
min-width: 0 !important;
opacity: 0 !important;
padding: 0 !important;
border: none !important;
pointer-events: none !important;
transition: all 0.3s ease !important;
}
.search-box i {
font-size: 16px !important;
pointer-events: auto !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: all 0.3s ease !important;
}
/* EXPANDED */
.search-wrapper.search-open .search-box {
width: 100% !important;
height: auto !important;
min-width: unset !important;
padding: 10px 14px !important;
border-radius: 999px !important;
background: #ffffff !important;
gap: 10px !important;
justify-content: flex-start !important;
border-color: #3b82f6 !important;
box-shadow: 0 10px 25px rgba(59,130,246,0.15) !important;
}
.search-wrapper.search-open .search-box input {
width: 100% !important;
min-width: unset !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.search-wrapper.search-open .search-box i {
pointer-events: none !important;
font-size: 14px !important;
}
/* force-hide results when collapsed */
.search-wrapper:not(.search-open) .search-results {
display: none !important;
}
.search-wrapper.search-open .search-results {
left: 0;
right: 0;
width: 100%;
max-height: 280px;
}
.logo {
order: 0;
}
.hamburger {
order: 2;
margin-left: 8px;
}
}
@media screen and (max-width: 768px) {
.search-box {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
}
.search-box i {
font-size: 14px !important;
}
.search-wrapper.search-open .search-box {
padding: 8px 12px !important;
}
.search-wrapper.search-open .search-results {
max-height: 250px;
border-radius: 12px;
top: calc(100% + 6px);
}
.search-card {
height: 65px;
border-radius: 10px;
margin-bottom: 6px;
}
.search-title {
font-size: 12px;
padding: 0 2px;
}
.search-overlay {
padding: 8px;
}
.no-result {
font-size: 12px;
padding: 12px;
}
}
@media screen and (max-width: 480px) {
.search-box {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
.search-box i {
font-size: 13px !important;
}
.search-wrapper.search-open .search-box {
padding: 7px 10px !important;
}
.search-wrapper.search-open .search-results {
max-height: 220px;
border-radius: 10px;
}
.search-card {
height: 55px;
border-radius: 8px;
margin-bottom: 5px;
}
.search-title {
font-size: 11px;
}
.search-overlay {
padding: 6px;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.search-card {
height: 70px;
}
.search-title {
font-size: 13px;
}
}
/* =========================
PACKAGE LIST VIEW โ MOBILE & TABLET ONLY
domestic.html ยท international.html ยท packages.html
Does NOT affect index.html (no .container wrapper there)
========================= */
/* === TABLET (600px โ 1024px): Horizontal list cards === */
@media screen and (max-width: 1024px) {
.container #upcomingPackages,
.container #popularDestinations,
.container #upcomingInternational,
.container #popularInternational,
.container #packages {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
gap: 16px !important;
overflow: visible !important;
overflow-x: visible !important;
-webkit-overflow-scrolling: auto !important;
scroll-behavior: auto !important;
}
.container #upcomingPackages .package-card,
.container #popularDestinations .package-card,
.container #upcomingInternational .package-card,
.container #popularInternational .package-card,
.container #packages .package-card {
width: 100% !important;
flex: 0 0 auto !important;
max-width: 100% !important;
display: flex !important;
flex-direction: row !important;
overflow: hidden !important;
border-radius: 14px !important;
}
.container #upcomingPackages .package-card img,
.container #popularDestinations .package-card img,
.container #upcomingInternational .package-card img,
.container #popularInternational .package-card img,
.container #packages .package-card img {
width: 38% !important;
height: auto !important;
min-height: 130px !important;
object-fit: cover !important;
border-radius: 14px 0 0 14px !important;
}
.container #upcomingPackages .package-content,
.container #popularDestinations .package-content,
.container #upcomingInternational .package-content,
.container #popularInternational .package-content,
.container #packages .package-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 14px 16px !important;
}
.container #upcomingPackages .package-content h3,
.container #popularDestinations .package-content h3,
.container #upcomingInternational .package-content h3,
.container #popularInternational .package-content h3,
.container #packages .package-content h3 {
font-size: 15px !important;
margin-bottom: 6px !important;
}
.container #upcomingPackages .package-content p,
.container #popularDestinations .package-content p,
.container #upcomingInternational .package-content p,
.container #popularInternational .package-content p,
.container #packages .package-content p {
font-size: 13px !important;
margin-bottom: 8px !important;
}
/* Direct h3/p children (if no .package-content wrapper) */
.container #upcomingPackages .package-card > h3,
.container #popularDestinations .package-card > h3,
.container #upcomingInternational .package-card > h3,
.container #popularInternational .package-card > h3,
.container #packages .package-card > h3 {
padding: 14px 16px 4px !important;
font-size: 15px !important;
}
.container #upcomingPackages .package-card > p,
.container #popularDestinations .package-card > p,
.container #upcomingInternational .package-card > p,
.container #popularInternational .package-card > p,
.container #packages .package-card > p {
padding: 0 16px 10px !important;
font-size: 13px !important;
}
.container #upcomingPackages .price,
.container #popularDestinations .price,
.container #upcomingInternational .price,
.container #popularInternational .price,
.container #packages .price {
font-size: 16px !important;
}
.container #upcomingPackages .btn-group,
.container #popularDestinations .btn-group,
.container #upcomingInternational .btn-group,
.container #popularInternational .btn-group,
.container #packages .btn-group {
flex-direction: row !important;
gap: 8px !important;
margin-top: 8px !important;
}
.container #upcomingPackages .btn-whatsapp,
.container #popularDestinations .btn-whatsapp,
.container #upcomingInternational .btn-whatsapp,
.container #popularInternational .btn-whatsapp,
.container #packages .btn-whatsapp,
.container #upcomingPackages .btn-view,
.container #popularDestinations .btn-view,
.container #upcomingInternational .btn-view,
.container #popularInternational .btn-view,
.container #packages .btn-view,
.container #upcomingPackages .btn-call,
.container #popularDestinations .btn-call,
.container #upcomingInternational .btn-call,
.container #popularInternational .btn-call,
.container #packages .btn-call {
font-size: 12px !important;
padding: 8px 12px !important;
width: auto !important;
}
}
/* === SMALL PHONES (โค 520px): Vertical stack cards === */
@media screen and (max-width: 520px) {
.container #upcomingPackages .package-card,
.container #popularDestinations .package-card,
.container #upcomingInternational .package-card,
.container #popularInternational .package-card,
.container #packages .package-card {
flex-direction: column !important;
}
.container #upcomingPackages .package-card img,
.container #popularDestinations .package-card img,
.container #upcomingInternational .package-card img,
.container #popularInternational .package-card img,
.container #packages .package-card img {
width: 100% !important;
height: 180px !important;
min-height: unset !important;
border-radius: 14px 14px 0 0 !important;
}
.container #upcomingPackages .package-card > h3,
.container #popularDestinations .package-card > h3,
.container #upcomingInternational .package-card > h3,
.container #popularInternational .package-card > h3,
.container #packages .package-card > h3 {
padding: 10px 14px 4px !important;
font-size: 14px !important;
}
.container #upcomingPackages .package-card > p,
.container #popularDestinations .package-card > p,
.container #upcomingInternational .package-card > p,
.container #popularInternational .package-card > p,
.container #packages .package-card > p {
padding: 0 14px 10px !important;
font-size: 12px !important;
}
.container #upcomingPackages .package-content,
.container #popularDestinations .package-content,
.container #upcomingInternational .package-content,
.container #popularInternational .package-content,
.container #packages .package-content {
padding: 10px 14px !important;
}
.container #upcomingPackages .package-content h3,
.container #popularDestinations .package-content h3,
.container #upcomingInternational .package-content h3,
.container #popularInternational .package-content h3,
.container #packages .package-content h3 {
font-size: 14px !important;
}
.container #upcomingPackages .package-content p,
.container #popularDestinations .package-content p,
.container #upcomingInternational .package-content p,
.container #popularInternational .package-content p,
.container #packages .package-content p {
font-size: 12px !important;
}
.container #upcomingPackages .btn-group,
.container #popularDestinations .btn-group,
.container #upcomingInternational .btn-group,
.container #popularInternational .btn-group,
.container #packages .btn-group {
flex-direction: column !important;
}
}
/* === TINY PHONES (โค 400px): Smaller image === */
@media screen and (max-width: 400px) {
.container #upcomingPackages .package-card img,
.container #popularDestinations .package-card img,
.container #upcomingInternational .package-card img,
.container #popularInternational .package-card img,
.container #packages .package-card img {
height: 150px !important;
}
}