/* TripXplore front-end styles */
#hero-slider, #home-view, #package-detail-view, .modal-overlay, header, footer, .sticky-enquire-bar {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-sizing: border-box;
}
#hero-slider *, #home-view *, #package-detail-view *, .modal-overlay *, header *, footer *, .sticky-enquire-bar * { box-sizing: border-box; }

body { padding-top: 80px; scroll-behavior: smooth; background: #f4f7f9; }

/* HEADER & SEARCH */
header{
  background:#0a3d62; height: 80px; padding:0 20px; display:flex;
  justify-content:space-between; align-items:center; color:#fff;
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}
.logo h1{font-size:22px; font-weight: 800; color: #fbc531; cursor: pointer; margin:0;}

.header-search {
    display: flex; align-items: center; background: rgba(255,255,255,0.1);
    padding: 5px 15px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.3);
    margin: 0 20px; flex: 1; max-width: 300px; transition: 0.3s;
}
.header-search form{ display:flex; align-items:center; width:100%; }
.header-search input { background: none; border: none; color: white; padding: 5px; outline: none; width: 100%; }
.header-search i { color: #fbc531; cursor: pointer; }

nav{ display: flex; align-items: center; }
.tx-header-menu { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; }
.tx-header-menu li { position: relative; list-style: none; margin: 0; padding: 0; }
.tx-header-menu a { color:#fff; text-decoration:none; font-size: 10px; font-weight:bold; text-transform: uppercase; padding: 8px 8px; white-space: nowrap; letter-spacing: normal !important; transform: none !important; display: block; }
.tx-header-menu a:hover,
.tx-header-menu li:hover > a,
.tx-header-menu li:focus-within > a { color:#fbc531; }
.tx-header-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 7px;
	position: relative;
	top: -2px;
}
.tx-header-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 1fr));
	gap: 8px 10px;
	min-width: 520px;
	max-width: min(760px, calc(100vw - 40px));
	padding: 14px;
	margin: 0;
	list-style: none;
	background: #073657;
	border-top: 3px solid #fbc531;
	box-shadow: 0 14px 30px rgba(0,0,0,0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1500;
}
.tx-header-menu li:hover > .sub-menu,
.tx-header-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.tx-header-menu .sub-menu a {
	background: rgba(255,255,255,0.08);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.25;
	padding: 12px 14px;
	text-transform: none;
	white-space: normal;
	min-height: 42px;
	display: flex;
	align-items: center;
}
.tx-menu-item-img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	object-fit: cover;
	margin-right: 12px;
	flex-shrink: 0;
	background: rgba(255,255,255,0.15);
}
.tx-header-menu .sub-menu a:hover,
.tx-header-menu .sub-menu li:focus-within > a {
	background: rgba(251,197,49,0.16);
	color: #fbc531;
}
.tx-header-menu > li:nth-child(n+3) > .sub-menu {
	left: auto;
	right: 0;
}
/* Some themes inject their own submenu/dropdown-arrow markup into every menu
   on the site. Strip anything extra so only the link text shows. */
#navbar a::before,
#navbar .sub-arrow,
#navbar .dropdown-menu-toggle,
#navbar span[class*="toggle"],
#navbar span[class*="arrow"] { display: none !important; content: none !important; width: 0 !important; }
#navbar li { list-style: none !important; }
#navbar li::marker { content: none !important; }

.menu-toggle { display: none; font-size: 24px; color: #fbc531; cursor: pointer; background: none; border: none; }

/* HERO SLIDER */
.hero { height: 65vh; position: relative; overflow: hidden; background: #000; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-ctrl { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; z-index: 10; transform: translateY(-50%); }
.hero-ctrl button { background: rgba(0,0,0,0.5); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.hero-ctrl button:hover { background: #fbc531; color: #0a3d62; }

.hero-cta-container { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; text-align: center; width: 100%; }
.hero-expert-btn { background: #fbc531; color: #0a3d62; border: none; padding: 12px 25px; border-radius: 30px; font-weight: 800; cursor: pointer; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: 0.3s; text-transform: uppercase; }

/* PACKAGE SLIDERS */
.slider-section{padding:40px 20px; background:#fff;}
.slider-section h2 { margin-bottom: 20px; color: #0a3d62; border-left: 5px solid #fbc531; padding-left: 10px; font-size: 22px; }
.slider-container { position: relative; display: flex; align-items: center; }
.slider-track{ display:flex; overflow-x:auto; scroll-behavior:smooth; gap:15px; padding:10px 0; scrollbar-width: none; width: 100%; }
.slider-track::-webkit-scrollbar { display: none; }

.row-btn { position: absolute; width: 40px; height: 40px; background: #0a3d62; color: #fff; border: none; border-radius: 50%; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
.btn-left { left: -15px; }
.btn-right { right: -15px; }

@media (max-width: 1024px), (pointer: coarse) {
    .row-btn { display: none !important; }
}

.pkg{ min-width:280px; background:#fff; border-radius:12px; overflow:hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08); border: 1px solid #eee; cursor: pointer; }
.pkg-img { height: 264px; background-size: cover; background-position: center; transition: 0.3s; position: relative; }
.pkg-discount-badge { position: absolute; top: 10px; left: 10px; background: #d35400; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; }

@media (max-width: 768px) {
    .slider-section { padding: 30px 0; }
    .slider-section h2 { margin-left: 20px; }
    .slider-track { gap: 10px; padding: 10px 20px; scroll-snap-type: x mandatory; }
    .pkg { min-width: 70vw; scroll-snap-align: start; }
    .pkg-img { height: 240px; }
    .pkg-info h3 { font-size: 17px; }
}

.pkg-info{ padding: 15px; text-align: center; }
.pkg-dur { font-size: 13px; color: #000; font-weight: bold; display: block; margin-bottom: 5px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin: 5px 0; width: 100%; }
.price { color: #d35400; font-size: 18px; font-weight: 800; display: block; margin: 5px 0; white-space: nowrap; }
.price-row .price { margin: 0; }
.price-original { color: #000; font-size: 13px; text-decoration: line-through; }
.enquire-btn { padding: 10px; background: #fbc531; color: #0a3d62; border: none; border-radius: 6px; cursor: pointer; width: 100%; font-weight: bold; }

.view-all-container { text-align: center; margin-top: 25px; }
.view-all-btn { display: inline-block; padding: 10px 25px; background: #0a3d62; color: #fff; text-decoration: none; border-radius: 30px; font-weight: bold; transition: 0.3s; border: 2px solid #0a3d62; cursor: pointer; }

/* WHY CHOOSE US */
.why-us { padding: 60px 20px; background: #0a3d62; color: #fff; text-align: center; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 1200px; margin: 30px auto; }
.feature-box { background: rgba(255,255,255,0.1); padding: 25px; border-radius: 12px; border: 1px solid #fbc531; }
.feature-box i { font-size: 35px; color: #fbc531; margin-bottom: 10px; display: block; }

/* NEWS & VLOGS */
.news-card { min-width: 300px; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; }
.news-img { height: 216px; background-size: cover; background-position: center; position: relative; }
.vlog-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 40px; opacity: 0.8; }
.news-info h3 { font-size: 18px; color: #0a3d62; margin-bottom: 8px; }
.news-desc { font-size: 13px; color: #666; line-height: 1.4; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { color: #d35400; font-weight: bold; text-decoration: none; font-size: 13px; text-transform: uppercase; cursor: pointer; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; padding-bottom: 20px; flex-wrap: wrap; }
.page-btn, .pagination a, .pagination span { width: 35px; height: 35px; border: 1px solid #ddd; background: #fff; border-radius: 5px; cursor: pointer; font-weight: 600; color: #0a3d62; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.page-btn.active, .page-btn:hover, .pagination .current, .pagination a:hover { background: #0a3d62; color: #fff; border-color: #0a3d62; }

/* PACKAGE DETAIL VIEW */
#package-detail-view { padding: 20px; max-width: 1200px; margin: 10px auto; background: #fff; border-radius: 15px; position: relative; padding-bottom: 120px; }
.detail-top-gallery { width: 100%; height: 350px; border-radius: 12px; overflow: hidden; margin-bottom: 20px; border: 3px solid #0a3d62; }
.detail-top-gallery img { width: 100%; height: 100%; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: 1fr 350px; gap: 30px; align-items: start; }

.accordion { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-top: 20px; }
.accordion-header { background: #f9f9f9; padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #0a3d62; border-bottom: 1px solid #eee; }
.accordion-content { padding: 0 20px; max-height: 0; overflow: hidden; transition: 0.3s ease-out; background: #fff; }
.accordion-item.active .accordion-content { max-height: 2000px; padding: 20px; }
.itinerary-day { margin-bottom: 15px; border-bottom: 1px dashed #ddd; padding-bottom: 10px; }
.day-title { color: #0a3d62; font-weight: 800; font-size: 15px; display: block; margin-bottom: 5px; }

/* Read More */
.overview-text { max-height: 120px; overflow: hidden; transition: max-height 0.4s ease; }
.overview-text.expanded { max-height: 5000px; }
.read-more-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #d35400; font-weight: 700; font-size: 13px; cursor: pointer; }

/* STICKY BOTTOM BAR */
.sticky-enquire-bar {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #fff; padding: 15px 20px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
    justify-content: space-between; align-items: center;
    z-index: 2000; border-top: 2px solid #fbc531;
}

/* ENQUIRY MODAL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 3000; padding: 15px; }
.modal-overlay.active { display: flex; }
.modal-content { background: #fff; width: 100%; max-width: 600px; padding: 30px; border-radius: 15px; position: relative; max-height: 90vh; overflow-y: auto; }
.enquiry-form label { display: block; font-size: 12px; font-weight: bold; color: #0a3d62; margin-top: 10px; margin-bottom: 4px; }
.enquiry-form input, .enquiry-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; outline: none; }
.enquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* FOOTER */
footer { background: #051d2f; color: #fff; padding: 60px 20px 100px; border-top: 4px solid #fbc531; }
.footer-container { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1.6fr 1fr; max-width: 1400px; margin: 0 auto; gap: 44px; align-items: start; }
.footer-col h3 { color: #fbc531; margin-bottom: 20px; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.footer-col > p { display: none; }
.footer-contact-details p { color: #fff; font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.footer-contact-details p i { color: #fbc531; width: 18px; margin-right: 8px; text-align: center; }
.footer-col ul { list-style: none; padding:0; margin:0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: #ccc; text-decoration: none; font-size: 13px; }
.footer-col ul li a:hover { color: #fbc531; }
.destinations-grid { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 10px 22px; width: 100%; }
.destinations-grid a { color: #ccc; text-decoration: none; font-size: 13px; display: block; margin-bottom: 5px; }
.destinations-grid a:hover { color: #fbc531; }
.social-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.social-link { width: 38px; height: 38px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 22px; transition: transform 0.2s ease, filter 0.2s ease; }
.social-link svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.social-link:hover { transform: translateY(-2px); filter: brightness(1.1); color: #fff; }
.social-facebook { background: #1877f2; }
.social-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 48%, #6228d7); }
.social-x { background: #000; }
.social-linkedin { background: #0a66c2; }

@media(max-width: 768px) {
    body { padding-top: 80px; }
    header { height: 80px; flex-wrap: nowrap; padding: 0 15px; }
    .logo h1 { font-size: 16px; }
    .header-search { flex: 1; max-width: none; margin: 0 10px; padding: 4px 10px; }
    .header-search input { font-size: 13px; }
    .menu-toggle { display: block; font-size: 20px; }
    .detail-grid { grid-template-columns: 1fr; }
    nav { display: none; flex-direction: column; position: absolute; top: 80px; left: 0; width: 100%; background: #0a3d62; padding: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.2); max-height: calc(100vh - 80px); overflow-y: auto; }
    nav.active { display: flex; }
    .tx-header-menu { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .tx-header-menu > li { position: relative; }
    .tx-header-menu a { padding: 12px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.1); display: block; }
    .tx-header-menu .menu-item-has-children > a { padding-right: 50px; }
    .mobile-sub-toggle { position: absolute; right: 0; top: 0; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border-left: 1px solid rgba(255,255,255,0.1); z-index: 5; font-size: 12px; transition: 0.3s; }
    .mobile-open > .mobile-sub-toggle { color: #fbc531; transform: rotate(180deg); }
    .tx-header-menu .sub-menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: 0 0 8px 14px;
        background: rgba(0,0,0,0.15);
        border-top: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
    .tx-header-menu .mobile-open > .sub-menu { display: grid; }
    .tx-header-menu .sub-menu a {
        min-height: 0;
        padding: 10px 12px;
        font-size: 13px;
        background: transparent;
        border-bottom: 0;
        margin-top: 2px;
    }
	.sticky-enquire-bar { padding: 10px 15px; }
    .sticky-enquire-bar .enquire-btn { padding: 10px 20px !important; font-size: 13px !important; }
    .sticky-enquire-bar .price { font-size: 20px !important; }
    .sticky-enquire-bar .price-original { font-size: 12px; }
    .sticky-enquire-bar .price-row { gap: 5px; justify-content: flex-start; }
    .footer-container { grid-template-columns: 1fr; gap: 28px; }
    .destinations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(min-width: 769px) and (max-width: 1180px) {
    .footer-container { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .footer-destinations { grid-column: span 2; }
}

/* =====================================================
   CATEGORY HUB PAGE
   ===================================================== */

/* Hero banner */
.hub-hero {
	position: relative;
	height: 280px;
	background: linear-gradient(135deg, #0a3d62 0%, #073657 50%, #051d2f 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hub-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hub-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.15); }
.hub-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	padding: 0 20px;
}
.hub-hero-content h1 {
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 900;
	margin: 0 0 12px;
	color: #fbc531;
	text-shadow: 0 2px 10px rgba(0,0,0,0.3);
	letter-spacing: -0.5px;
}
.hub-hero-content p {
	font-size: 16px;
	margin: 0;
	opacity: 0.85;
}

/* Breadcrumb */
.hub-breadcrumb {
	padding: 14px 30px;
	background: #fff;
	border-bottom: 1px solid #eee;
	font-size: 13px;
	color: #888;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hub-breadcrumb a { color: #0a3d62; text-decoration: none; font-weight: 600; }
.hub-breadcrumb a:hover { color: #fbc531; }
.hub-breadcrumb .fa-chevron-right { font-size: 10px; }

/* Section headers */
.hub-section-header {
	text-align: center;
	margin-bottom: 40px;
}
.hub-section-header h2 {
	font-size: 28px;
	font-weight: 800;
	color: #0a3d62;
	margin: 0 0 10px;
}
.hub-section-header p {
	color: #888;
	font-size: 15px;
	margin: 0;
}

/* Categories section */
.hub-categories-section {
	padding: 60px 30px;
	background: #f4f7f9;
	max-width: 100%;
}

/* Category card grid */
.hub-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	max-width: 1300px;
	margin: 0 auto;
}

.hub-cat-card {
	text-decoration: none;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0,0,0,0.10);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background: #fff;
}
.hub-cat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(10,61,98,0.18);
}
.hub-cat-card-inner { display: flex; flex-direction: column; height: 100%; }
.hub-cat-img {
	height: 200px;
	background-size: cover;
	background-position: center;
	position: relative;
	transition: transform 0.4s ease;
}
.hub-cat-card:hover .hub-cat-img {
	transform: scale(1.04);
}
.hub-cat-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(10,61,98,0.55) 100%);
}
.hub-cat-info {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
	flex: 1;
}
.hub-cat-info h3 {
	font-size: 20px;
	font-weight: 800;
	color: #0a3d62;
	margin: 0;
	line-height: 1.2;
}
.hub-cat-count {
	font-size: 13px;
	color: #888;
	display: flex;
	align-items: center;
	gap: 6px;
}
.hub-cat-count .fa-suitcase-rolling { color: #fbc531; }
.hub-cat-explore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #d35400;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
	transition: gap 0.2s;
}
.hub-cat-card:hover .hub-cat-explore { gap: 10px; }

/* Empty state */
.hub-empty {
	text-align: center;
	padding: 80px 20px;
	color: #aaa;
}
.hub-empty .fa-map-location-dot { font-size: 60px; color: #ddd; margin-bottom: 20px; display: block; }
.hub-empty p { font-size: 15px; }

/* All Packages grid section */
.hub-packages-section {
	padding: 60px 30px;
	background: #fff;
}
.hub-pkg-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	max-width: 1300px;
	margin: 0 auto;
}
.hub-pkg-grid .pkg {
	flex: 1 1 260px;
	max-width: 300px;
}

/* Hub responsive */
@media(max-width: 768px) {
	.hub-hero { height: 200px; }
	.hub-hero-content h1 { font-size: 28px; }
	.hub-categories-section { padding: 40px 16px; }
	.hub-category-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.hub-cat-img { height: 140px; }
	.hub-cat-info { padding: 14px; }
	.hub-cat-info h3 { font-size: 16px; }
	.hub-packages-section { padding: 40px 16px; }
	.hub-pkg-grid .pkg { min-width: 70vw; }
	.hub-breadcrumb { padding: 12px 16px; }
}