/* Theme layer — typography, colors, and formatting from appearance settings */

body {
	font-family: var(--body-font, 'Inter', sans-serif);
	font-size: var(--base-font-size, 16px);
	line-height: var(--line-height-body, 1.6);
	color: var(--text-color, #4a5568);
}

h1, h2, h3, h4, h5, h6,
.title h1, .title h2, .new-page h1 {
	font-family: var(--heading-font, 'Outfit', sans-serif);
	color: var(--heading-color, #173342);
	line-height: var(--line-height-heading, 1.35);
	font-weight: 700;
}

h1 { font-size: var(--h1-size, 2.5rem); }
h2 { font-size: var(--h2-size, 1.75rem); color: var(--heading-color, #173342); }
h3 { font-size: var(--h3-size, 1.35rem); color: var(--heading-color, #173342); }
h4 { font-size: var(--h4-size, 1.2rem); color: var(--heading-color, #173342); }
h5 { font-size: var(--h5-size, 1.1rem); color: var(--heading-color, #173342); }
h6 { font-size: var(--h6-size, 1rem); color: var(--heading-color, #173342); }

p, li, label, .form-control, .form-select {
	font-family: var(--body-font, 'Inter', sans-serif);
	font-size: var(--base-font-size, 16px);
	line-height: var(--line-height-body, 1.6);
	color: var(--text-color, #4a5568);
}

p a, a:not(.btn):not(.nav-link):not(.dropdown-item):not(.package-hover__btn) {
	color: var(--link-color, var(--primary-color));
	font-weight: 600;
}

p a:hover, a:not(.btn):not(.nav-link):not(.dropdown-item):not(.package-hover__btn):hover {
	color: var(--secondary-color, #ff8a00);
}

.btn-primary,
.welcome .lilnk a,
.my-slider-ban .my-ban .ban-overlay .ban-link a:last-child {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	border-radius: var(--btn-radius, 4px);
}

.btn-primary:hover,
.welcome .lilnk a:hover {
	background-color: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
}

/* Section titles — unified across trip, blog, and content pages */
.trip-section-title,
.trip-cost-section .trip-section-title,
.departure-heading .trip-section-title,
.icon-all-top h2,
.title h2,
.new-page h1,
.welcome .content > h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font, 'Outfit', sans-serif);
	font-size: var(--section-title-size, 1.75rem);
	font-weight: 700;
	color: var(--heading-color, #173342);
	line-height: var(--line-height-heading, 1.35);
	margin-bottom: 0.75rem;
}

.trip-section-title i,
.trip-cost-section .trip-section-title i,
.departure-heading .trip-section-title i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary-color) 12%, white);
	color: var(--primary-color);
	font-size: 17px;
	flex-shrink: 0;
}

/* Trip page title */
.trippage h1,
.pack-details .col-md-12 > h1 {
	font-family: var(--heading-font, 'Outfit', sans-serif);
	font-size: var(--h2-size, 1.75rem);
	font-weight: 800;
	color: var(--heading-color, #173342);
	line-height: var(--line-height-heading, 1.35);
}

.trippage h1::before,
.title h1::before,
.new-page h1::before {
	background-color: var(--primary-color);
}

.trippage h2,
.pack-details .content h2 {
	color: var(--heading-color, #173342);
}

/* Package / trip cards */
.package {
	border-radius: var(--card-radius, 8px);
	box-shadow: var(--card-shadow, 0 4px 10px rgba(0,0,0,0.1));
}

.package-badge {
	background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 65%, #000));
}

.package-hover__btn {
	background: var(--primary-color);
	border-radius: var(--btn-radius, 999px);
}

.package-hover__btn:hover {
	background: var(--secondary-color);
}

.package-title {
	font-family: var(--heading-font, 'Outfit', sans-serif);
}

.package-title a:hover {
	color: var(--primary-color);
}

.package-meta__item strong,
.icon-all-top .all-icon-detail .content .fact-value-row b {
	color: var(--primary-color);
}

/* Blog */
.blog.my-blog .content .blog-meta .blog-cat,
.blog.my-blog .content .blog-meta i,
.blog.my-blog .content .blg-title:hover,
.blog.my-blog .content .blog-read-more:hover,
.blog-sidebar .category-item a:hover,
.blog-sidebar .badge,
.blog-sidebar .recent-post-copy a:hover,
.blog-pagination .page-item.active .page-link,
.team-cont h4 a:hover,
.team-cont h5 {
	color: var(--primary-color);
}

.blog-pagination .page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

/* Footer uses dark heading color — not primary blue */
.site-footer,
footer.site-footer {
	background: var(--heading-color, #173342);
}

/* Welcome block */
.welcome .content > h3 {
	font-family: var(--heading-font, 'Outfit', sans-serif);
	font-size: var(--h3-size, 1.25rem);
	color: var(--heading-color, #173342);
	margin-bottom: 15px;
}

.welcome .welcome-text,
.welcome .content > div:not(.lilnk) {
	font-family: var(--body-font, 'Inter', sans-serif);
	font-size: var(--base-font-size, 16px);
	line-height: var(--line-height-body, 1.6);
}

.welcome .lilnk .welcome-link-btn,
.welcome .lilnk .welcome-link-btn:hover,
.welcome .lilnk .welcome-link-btn:focus,
.welcome .lilnk .welcome-link-btn:visited {
	color: var(--button-text-color, #ffffff) !important;
	font-size: var(--base-font-size, 16px);
	font-weight: 700;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.my-slider-ban .my-ban .ban-overlay .ban-link .slider-cta-btn,
.my-slider-ban .my-ban .ban-overlay .ban-link .slider-cta-btn:hover,
.my-slider-ban .my-ban .ban-overlay .ban-link .slider-cta-btn:focus,
.my-slider-ban .my-ban .ban-overlay .ban-link .slider-cta-btn:visited {
	color: var(--button-text-color, #ffffff) !important;
	font-weight: 700;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Slider controls */
.responsive .slick-prev,
.responsive .slick-next {
	background-color: var(--primary-color) !important;
}

.responsive .res-1 h2 {
	color: var(--primary-color);
}

/* Trip planner */
.trip-planner-steps__track span {
	background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 55%, #000));
}

.trip-planner-card:has(input:checked) {
	border-color: var(--primary-color);
}

/* Rich content inside trip/blog pages */
.pack-details .content,
.trip-overview-content,
.tripinfo,
.blog-article-body {
	font-family: var(--body-font, 'Inter', sans-serif);
	font-size: var(--base-font-size, 16px);
	line-height: var(--line-height-body, 1.6);
	color: var(--text-color, #4a5568);
}

.pack-details .content h3,
.pack-details .content h4,
.trip-overview-content h3,
.trip-overview-content h4 {
	font-family: var(--heading-font, 'Outfit', sans-serif);
	color: var(--heading-color, #173342);
}

@media (max-width: 767px) {
	.trip-section-title,
	.trip-cost-section .trip-section-title,
	.departure-heading .trip-section-title {
		font-size: calc(var(--base-font-size, 16px) * 1.45);
	}

	.trip-section-title i,
	.trip-cost-section .trip-section-title i,
	.departure-heading .trip-section-title i {
		width: 30px;
		height: 30px;
		font-size: 15px;
	}

	h1 { font-size: calc(var(--heading-base-size, 2.5rem) * 0.85); }
}

/* Uniform layout skin for core listing/content pages */
.new-page,
.com-back{
	background: #edf4fa;
}
.new-page .com-back-1,
.com-back .com-back-1{
	padding: 14px 0;
}
.new-page .com-back-1 ul,
.com-back .com-back-1 ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.new-page .com-back-1 li,
.com-back .com-back-1 li{
	color: #466071;
	font-size: 13px;
}
.new-page .com-back-1 a,
.com-back .com-back-1 a{
	color: #075989;
	font-weight: 600;
	text-decoration: none;
}
.new-page .com-back-1 a:hover,
.com-back .com-back-1 a:hover{
	color: #06a3df;
}
.inner-title{
	margin: 10px 0 18px;
	color: #173342;
	font-size: clamp(1.75rem, 2.4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.22;
}
article > .container > .row > [class*='col-'] > .row > [class*='col-'] > .card,
.destination-content-wrap .destination-activity-card,
.blog-list-card,
.package{
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e0e9ef;
	box-shadow: 0 8px 24px rgba(15, 45, 66, 0.08);
	background: #fff;
}
article .card .card-body{
	padding: 14px;
}
article .card .card-body h5{
	margin: 0;
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.35;
}
article .card .card-body h5 a{
	color: #173342;
	text-decoration: none;
}
article .card .card-body h5 a:hover{
	color: #06a3df;
}
article .card img{
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.about-us .content,
.dlist,
.destination-content{
	background: #fff;
	border: 1px solid #e2ebf1;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 8px 24px rgba(15, 45, 66, 0.06);
}
.about-us .content h1{
	margin-top: 0;
	margin-bottom: 14px;
	font-size: clamp(1.65rem, 2.2vw, 2.2rem);
	color: #173342;
}
.about-us .content p,
.dlist p,
.destination-description p{
	color: #4e6574;
	line-height: 1.72;
}
.blog.my-blog{
	background: #f7fbfd;
}
.blog.my-blog .content{
	background: #fff;
	border: 1px solid #e4edf3;
	border-radius: 12px;
	overflow: hidden;
}
@media (max-width: 767.98px){
	.inner-title{
		margin-top: 8px;
		margin-bottom: 14px;
	}
	.about-us .content,
	.dlist,
	.destination-content{
		padding: 16px;
		border-radius: 12px;
	}
	article .card img{
		height: 200px;
	}
}
