/* ═══════════════════════════════════════════════════════════════════════
   KHAI STUDIO PHOTOGRAPHY — style.css
   ───────────────────────────────────────────────────────────────────────
   Based on Gleam Portfolio theme by MatchThemes v2.0.0
   Customized for Khai Studio — Surrey & Metro Vancouver Photographer
   ───────────────────────────────────────────────────────────────────────

   TABLE OF CONTENTS
   ─────────────────
   0.  VARIABLES & RESET
   1.  TYPOGRAPHY
   2.  GLOBAL ELEMENTS
   3.  HEADER & NAVIGATION
   4.  LOGO (size + swap)
   5.  MOBILE MENU
   6.  SOCIAL ICONS
   7.  HOME SLIDER
   8.  PARALLAX SECTIONS
   9.  ICON BOXES
   10. PAGE HEADERS
   11. GALLERY / PORTFOLIO
   12. PACKAGES PAGE (Khai Studio)
   13. CONTACT FORM
   14. THANK YOU PAGE
   15. SIDEBAR
   16. FOOTER
   17. FLOATING CONTACT BUTTONS (Khai Studio)
   18. UTILITIES & HELPERS
   19. OWL CAROUSEL
   20. SIMPLE LIGHTBOX
   21. RESPONSIVE / MEDIA QUERIES
═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   0. VARIABLES & RESET
═══════════════════════════════════════════════════════════════════════ */

:root {
	--body-font: 'Open Sans', sans-serif;
	--body-color: #858585;
	--body-background: #ffffff;
	--body-font-size: 16px;
	--body-line-height: 1.7;
	--headings-font: 'Cormorant', serif;
	--headings-color: #151515;
	--primary-color: #8bb8c1;
	--primary-dark: #1BA6A6;
	--extra-color1: #acdae2;
	--white-color: #ffffff;
	--menu-normal-color: #ffffff;
	--menu-hover-color: #ffffff;
	--submenu-background-color: #ffffff;
	--submenu-normal-color: #0e1219;
	--submenu-hover-color: #8bb8c1;
	--footer-background-color: #151515;
	--footer-color: #eaeaea;
	--footer-title-color: #ffffff;
	--headings-h1-size: 3.5rem;
	--headings-h2-size: 3rem;
	--headings-h3-size: 2.25rem;
	--headings-h4-size: 2rem;
	--headings-h5-size: 1.5rem;
	--headings-h6-size: 1rem;
	--ribbon-background-color: #FAF8F2;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, form, label,
fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
q:before, q:after { content: ''; }
strong, b { font-weight: bold; }
em, cite { font-style: italic; }
cite { display: block; }
strike, del { text-decoration: line-through; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════ */

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	text-rendering: optimizeLegibility;
	background: var(--body-background);
	color: var(--body-color);
	font-family: var(--body-font);
	font-size: var(--body-font-size);
	font-weight: 400;
	line-height: var(--body-line-height);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 700;
	font-family: var(--headings-font);
	line-height: 1.2;
	color: var(--headings-color);
}

h1, .h1 { font-size: var(--headings-h1-size); }
h2, .h2 { font-size: var(--headings-h2-size); }
h3, .h3 { font-size: var(--headings-h3-size); }
h4, .h4 { font-size: var(--headings-h4-size); }
h5, .h5 { font-size: var(--headings-h5-size); }
h6, .h6 { font-size: var(--headings-h6-size); }

.lead { font-size: 1.25rem; font-weight: 400; }
.display-1 { font-size: 6rem;   font-weight: 700; line-height: 1; }
.display-2 { font-size: 5.5rem; font-weight: 700; line-height: 1; }
.display-3,
.slider-text h1,
.single-post-title {
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
}
.display-4 { font-size: 3.5rem; font-weight: 700; line-height: 1; }

p, ul, ol { margin-bottom: 24px; }
div p:last-of-type { margin-bottom: 0; }

ul, ol { margin: 0 0 16px 24px; }
ul li, ol li { margin-bottom: 8px; }

dl dt { margin-bottom: 0; }
dl dd { margin-left: 16px; margin-bottom: 24px; }

blockquote {
	font-size: 24px;
	font-style: italic;
	line-height: 1.6em;
	color: #151515;
	position: relative;
	letter-spacing: 0.05em;
	margin: 32px 0 42px 0;
	padding-left: 54px;
}

blockquote:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 100%;
	background: var(--primary-color);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

blockquote cite {
	color: var(--primary-color);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
	margin-top: 16px;
}

pre, code {
	background: #eee;
	color: #151515;
	font-family: "Courier New", Courier, monospace;
	padding: 8px;
	font-size: 13px;
}

pre {
	margin-bottom: 24px;
	overflow: auto;
	padding: 24px;
	white-space: pre-wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. GLOBAL ELEMENTS
═══════════════════════════════════════════════════════════════════════ */

a, .pcolor { color: var(--primary-color); }
p a { text-decoration: none; }

a:hover, p a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

a:active, a:focus { outline: none; text-decoration: none; }

table {
	border: 1px solid #e9e9e9;
	font-size: 16px;
	width: 100%;
	text-align: center;
	margin-bottom: 24px;
}

table th, table td {
	border-bottom: 1px solid #e9e9e9;
	border-right: 1px solid #e9e9e9;
	text-align: center;
	padding: 16px;
}

table th { font-weight: bold; }

hr {
	margin-top: 24px;
	margin-bottom: 24px;
	border: 0;
	border-top: 1px solid #e9e9e9;
}

/* Smooth transition mixin used throughout */
a, .view-more, #submit, .wpcf7-submit, .white-btn,
.post-image a:before, .gallery-post a:after,
.grid-item-v2 .grid-item-img-v2:after,
.grid-item-v2 .port-caption-v2,
.grid-item-v3 .port-caption-v3,
.grid-item-v3 .grid-item-img-v3:after,
.port-item-htext-v2 .port-title-masonry-v2,
.port-item-htext-v2 .port-categ-masonry-v2,
.port-item-htext-v2 .port-img:after,
.port-item-htext-v2 .port-img-v2 img {
	-webkit-backface-visibility: hidden;
	transition: all 1s cubic-bezier(0.25, 1, 0.35, 1) 0s;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. HEADER & NAVIGATION
═══════════════════════════════════════════════════════════════════════ */

.main-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

.header-container {
	display: flex;
	align-items: center;
}

.menu-nav {
	margin: 0;
	font-size: 0;
}

.menu-nav li {
	display: inline-block;
	position: relative;
	margin-left: 32px;
	margin-bottom: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.menu-nav li:first-child { margin-left: 0; }

.menu-nav li a {
	color: var(--menu-normal-color);
	padding: 28px 0;
	display: block;
}

.menu-nav li a:before {
	position: absolute;
	display: block;
	bottom: 28px;
	left: 0;
	width: 0;
	border-top: 1px solid var(--menu-normal-color);
	content: '';
	transition: all 0.5s cubic-bezier(0.25, 1, 0.35, 1) 0s;
}

.menu-nav li a:hover,
.menu-nav > li:hover > a,
.menu-nav > li.current-menu-item > a {
	background: none;
	color: var(--menu-hover-color);
}

.menu-nav > li:hover > a:before,
.menu-nav li.current-menu-item > a:before {
	left: 0;
	width: 100%;
	border-color: var(--menu-hover-color);
}

.nav-holder-1 { text-align: center; }


/* ── Fixed top (when scrolling — theme adds this class) ── */

.nav-fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	background: #fff;
	margin-top: 0;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.35, 1) 0s;
}

.nav-fixed-top .menu-nav li a,
.no-top-image .menu-nav li a {
	color: #151515;
}

.nav-fixed-top .menu-nav li a:hover,
.nav-fixed-top .menu-nav > li:hover > a,
.nav-fixed-top .menu-nav > li.current-menu-item > a,
.no-top-image .menu-nav li a:hover,
.no-top-image .menu-nav > li:hover > a,
.no-top-image .menu-nav > li.current-menu-item > a {
	background: none;
	color: #151515;
}

.nav-fixed-top .menu-nav > li:hover > a:before,
.nav-fixed-top .menu-nav li.current-menu-item > a:before,
.no-top-image .menu-nav > li:hover > a:before,
.no-top-image .menu-nav li.current-menu-item > a:before {
	border-color: #151515;
}

.nav-fixed-top .icon-bar,
.no-top-image .icon-bar {
	background: #151515;
}

.nav-fixed-top .icon-bar:before,
.nav-fixed-top .icon-bar:after,
.no-top-image .icon-bar:before,
.no-top-image .icon-bar:after {
	background: #151515;
}

.nav-fixed-top .social-media li a,
.no-top-image .social-media li a {
	color: #151515;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. LOGO (size + automatic swap)
   ───────────────────────────────────────────────────────────────────────
   Two logos exist in markup: .logo-white (for dark backgrounds)
                              .logo-dark  (for light backgrounds)
   Theme JS adds class `.nav-fixed-top` to header when scrolled,
   and pages without a hero slider get `body.no-top-image`.
═══════════════════════════════════════════════════════════════════════ */

/* Logo container */
.logo,
.logo-1,
.logo-white,
.logo-dark {
	flex: 1 1 auto;
	max-width: 360px;
	display: flex;
	align-items: center;
}

.logo a {
	display: block;
	line-height: 0;
}

/* Logo image — full size, never stretched */
.logo img {
	height: 110px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ── Swap logic — show one logo at a time ──

   Default state (homepage, transparent header over slider):
     → show WHITE logo, hide DARK logo                         */
.logo-dark { display: none; }
.logo-white { display: block; }

/* When header becomes fixed/sticky (scrolled) — swap */
.nav-fixed-top .logo-white { display: none; }
.nav-fixed-top .logo-dark { display: block; }

/* On pages without a hero slider (about, packages, contact, etc.) */
.no-top-image .logo-white { display: none; }
.no-top-image .logo-dark { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   5. MOBILE MENU
═══════════════════════════════════════════════════════════════════════ */

.nav-button-holder { display: none; }

.nav-button {
	background: none;
	border: none;
	cursor: pointer;
	padding-bottom: 15px;
	vertical-align: middle;
}

.icon-bar, .icon-bar1, .icon-bar2 {
	display: block;
	height: 2px;
	width: 25px;
	background: #ffffff;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: all 0.3s ease 0s;
}

.icon-bar1, .icon-bar2 { width: 18px; background: #ffffff; }

.icon-bar:before, .icon-bar:after {
	background: #ffffff;
	content: "";
	height: 100%;
	left: 4px;
	position: absolute;
	bottom: -6px;
	right: 0;
	transition: all 0.3s ease 0s;
}

.icon-bar:after { bottom: -12px; left: 8px; top: auto; }

.nav-button:hover .icon-bar:before,
.nav-button:hover .icon-bar:after { left: 0; }

/* Mobile menu drawer */
body.has-active-menu { overflow: hidden; }

.menu-mask {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
}

.menu-mask.is-active {
	width: 100%;
	height: 100%;
	opacity: 0.9;
}

.mobile-menu-holder {
	position: fixed;
	z-index: 1050;
	top: 0;
	right: 0;
	overflow-x: hidden;
	width: 350px;
	height: 100%;
	background: #151515;
	opacity: 0;
	padding: 0 30px;
	transform: translateX(400px);
	transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;
}

.mobile-menu-holder.is-active {
	opacity: 1;
	transform: translateX(0px);
}

.modal-menu-container { position: relative; }

.exit-mobile {
	cursor: pointer;
	padding: 7px 1px;
	display: inline-block;
	margin-top: 32px;
}

.icon-bar1 { top: 2px; transform: rotate(45deg); }
.icon-bar2 { transform: rotate(-45deg); }

.menu-mobile {
	font-size: 0;
	margin: 0 auto;
	margin-left: 0;
	padding-left: 48px;
}

.menu-mobile li {
	font-size: 13px;
	font-weight: 600;
	padding-top: 24px;
	list-style: none;
	letter-spacing: 0.05em;
	margin-bottom: 0;
	text-transform: uppercase;
}

.menu-mobile li a {
	color: #fff;
	display: block;
	line-height: 1.5;
}

.menu-mobile li:hover > a,
.menu-mobile li.current-menu-item > a {
	color: var(--primary-color);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. SOCIAL ICONS
═══════════════════════════════════════════════════════════════════════ */

.social-media, .footer-social {
	list-style: none;
	margin: 0;
	font-size: 0;
}

.social-media li, .footer-social li {
	display: inline-block;
	font-size: 14px;
	margin-left: 16px;
	margin-bottom: 0;
}

.social-media li a { color: #ffffff; }

.social-media li:first-child,
.footer-social li:first-child { margin-left: 0; }

a.social-instagram:hover { color: #AA8062 !important; }
a.social-facebook:hover  { color: #6788CE !important; }
a.social-twitter:hover   { color: #29C5F6 !important; }
a.social-pinterest:hover { color: #FE4445 !important; }
a.social-youtube:hover   { color: #E34040 !important; }

.header-social-1 {
	text-align: right;
	flex: 0 0 auto;
	margin-left: 32px;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. HOME SLIDER
═══════════════════════════════════════════════════════════════════════ */

.slider-container {
	position: relative;
	margin-bottom: 108px;
}

.slider-item-box-bkg { height: 100vh; }

.slider-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.slider-img:before {
	content: '';
	background: rgba(14, 18, 25, 0.2);
	top: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}

.slider-caption {
	position: absolute;
	left: 0;
	top: 50%;
	right: 0;
	color: #fff;
	z-index: 2;
	transform: translateY(-50%);
}

.slider-text {
	width: 80%;
	font-size: 16px;
	text-align: center;
	margin: 0 auto;
}

.slider-text h1 {
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 16px;
}

.slider-text h2 {
	color: #fff;
	margin-bottom: 16px;
	line-height: 1.2;
}

.slider-text p {
	color: #fff;
}

.slider-text .view-more {
	margin-top: 32px;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. PARALLAX SECTIONS
═══════════════════════════════════════════════════════════════════════ */

.parallax, .no-parallax {
	background-repeat: repeat;
	background-position: center center !important;
	background-attachment: scroll;
	background-size: cover;
}

.parallax {
	position: relative;
	padding: 108px 0;
}

.parallax:before {
	content: '';
	width: 100%;
	height: 100%;
	background: #151515;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
}

.parallax-content {
	color: #ffffff;
	position: relative;
}

.testimonial-text {
	font-style: italic;
	color: #ffffff;
}

.testimonial-name {
	font-weight: 700;
	text-transform: uppercase;
}

.white { color: var(--white-color); }


/* ═══════════════════════════════════════════════════════════════════════
   9. ICON BOXES (for "What I Offer" sections)
═══════════════════════════════════════════════════════════════════════ */

.section-holder { margin-bottom: 108px; }

.box-title {
	font-size: 1.5rem;
	margin-bottom: 16px;
}

.box-title-3 { margin-bottom: 0; }

.icon-color { color: var(--primary-color); }

.icon-box-2-wrapper {
	display: flex;
	margin-bottom: 54px;
}

.icon-box-3-wrapper {
	display: flex;
	margin-bottom: 32px;
}

.icon-box-2-icon,
.icon-box-3-icon {
	flex: 0 0 auto;
	margin-right: 32px;
	font-size: 36px;
	line-height: 1;
}

.icon-box-3-icon {
	font-size: 16px;
	margin-right: 15px;
}

.icon-box-3-inner {
	background: var(--primary-color);
	color: #fff;
	padding: 28px;
	border-radius: 99em;
}

.icon-box-3-inner i {
	width: 1em;
	height: 1em;
	display: block;
	position: relative;
}

.section-title { line-height: 1.2em; }


/* ═══════════════════════════════════════════════════════════════════════
   10. PAGE HEADERS (hero strip at top of about/packages/etc.)
═══════════════════════════════════════════════════════════════════════ */

.top-single-bkg {
	display: block;
	overflow: hidden;
	position: relative;
	margin-bottom: 108px;
	width: 100%;
	height: 100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.top-single-bkg:before {
	content: '';
	background: rgba(14, 18, 25, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.top-single-bkg .inner-desc {
	position: absolute;
	z-index: 4;
	width: 100%;
	top: 50%;
	text-align: center;
	transform: translateY(-50%);
}

.single-post-title {
	color: #fff;
	font-weight: 700;
	word-wrap: break-word;
	line-height: 1.3em;
}

.post-subtitle,
.page-subtitle {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.05em;
	margin-top: 8px;
	display: block;
	line-height: 1.1;
	text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. GALLERY / PORTFOLIO
═══════════════════════════════════════════════════════════════════════ */

.gallery-container { padding: 0; }

.gallery-holder { margin-bottom: -30px; }

.gallery-post {
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
}

.gallery-post img {
	transition: transform 0.4s ease;
}

.gallery-post:hover img {
	transform: scale(1.05);
}

.gallery-post a:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-post:hover a:after { opacity: 0.3; }

.fs-gallery { padding: 0 30px; }


/* ═══════════════════════════════════════════════════════════════════════
   12. PACKAGES PAGE
═══════════════════════════════════════════════════════════════════════ */

.packages-section { margin-bottom: 80px; }

.packages-section-title {
	text-align: center;
	margin-bottom: 16px;
}

.packages-section-subtitle {
	text-align: center;
	color: #888;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 48px;
	font-family: var(--body-font);
}

.pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;
}

.pkg-grid-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 840px;
	margin: 0 auto;
}

.pkg-grid-1 {
	grid-template-columns: 1fr;
	max-width: 480px;
	margin: 0 auto;
}

.pkg-card {
	background: #fff;
	border: 1px solid #e8e4de;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pkg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.pkg-card.pkg-featured {
	border: 2px solid var(--primary-color);
}

.pkg-ribbon {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-color);
	color: #fff;
	font-family: var(--body-font);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 22px;
	white-space: nowrap;
}

.pkg-head {
	padding: 40px 32px 28px;
	border-bottom: 1px solid #ede9e3;
	text-align: center;
}

.pkg-card.pkg-featured .pkg-head { padding-top: 52px; }

.pkg-name {
	font-family: var(--headings-font);
	font-size: 2rem;
	font-weight: 600;
	color: #151515;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.pkg-tagline {
	font-family: var(--headings-font);
	font-style: italic;
	color: #888;
	font-size: 1.05rem;
	margin-bottom: 18px;
	line-height: 1.4;
}

.pkg-price {
	font-family: var(--headings-font);
	font-size: 2.2rem;
	font-weight: 700;
	color: #151515;
	line-height: 1.1;
}

.pkg-price-from {
	font-size: 11px;
	color: #aaa;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
	font-family: var(--body-font);
	font-weight: 600;
}

.pkg-divider {
	width: 40px;
	height: 1px;
	background: var(--primary-color);
	margin: 22px auto 0;
}

.pkg-body {
	padding: 28px 32px 32px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pkg-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex: 1;
}

.pkg-features li {
	font-size: 14px;
	color: #5a5a5a;
	padding: 10px 0;
	border-bottom: 1px solid #f0ece6;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}

.pkg-features li:last-child { border-bottom: none; }

.pkg-features li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary-color);
	flex-shrink: 0;
	margin-top: 8px;
}

.pkg-cta {
	display: block;
	text-align: center;
	padding: 14px 24px;
	border: 1px solid #151515;
	font-family: var(--body-font);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #151515;
	text-decoration: none;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.pkg-cta:hover {
	background: #151515;
	color: #fff;
	text-decoration: none;
}

.pkg-card.pkg-featured .pkg-cta {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.pkg-card.pkg-featured .pkg-cta:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
}

/* Travel info box */
.pkg-info-box {
	background: #f8f6f3;
	border-left: 3px solid var(--primary-color);
	padding: 24px 28px;
	margin-top: 32px;
	border-radius: 0 4px 4px 0;
}

.pkg-info-box h4 {
	font-family: var(--headings-font);
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 12px;
	color: #151515;
}

.pkg-info-box p,
.pkg-info-box li {
	font-size: 14px;
	color: #5a5a5a;
	line-height: 1.7;
}

.pkg-info-box ul {
	margin: 0;
	padding-left: 20px;
}

/* Add-ons grid */
.pkg-addons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.pkg-addon {
	background: #fff;
	padding: 18px 20px;
	border: 1px solid #e8e4de;
	border-radius: 4px;
}

.pkg-addon strong {
	display: block;
	font-family: var(--headings-font);
	font-size: 1.15rem;
	color: #151515;
	margin-bottom: 4px;
	font-weight: 600;
}

.pkg-addon span {
	font-size: 13px;
	color: #888;
	line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. CONTACT FORM
═══════════════════════════════════════════════════════════════════════ */

.comm-field, .contact-field,
#msg-contact,
.wpcf7-text, .wpcf7-textarea {
	width: 100%;
	padding: 18px 24px;
	border: 1px solid #151515;
	background: none;
	border-radius: 5px;
	color: #151515;
	font-family: var(--body-font);
}

#msg-contact { display: block; }

#contact-form select.comm-field {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

.form-success {
	background: #e6f7f2;
	border-left: 4px solid var(--primary-dark);
	padding: 16px 20px;
	color: #0a4a3a;
	border-radius: 0 4px 4px 0;
	margin-bottom: 24px;
	display: none;
}

.antispam {
	position: absolute;
	left: -9999px;
}

/* Form buttons */
.read-more, #submit, .wpcf7-submit, .white-btn,
.page-links a {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #151515;
	letter-spacing: 0.03em;
	padding: 12px 24px;
	border-radius: 99em;
	display: inline-block;
	border: none;
	cursor: pointer;
	font-family: var(--body-font);
}

.read-more:hover, #submit:hover, .wpcf7-submit:hover,
.page-links a:hover {
	background: var(--primary-color);
	color: #fff;
}

.white-btn {
	background: var(--primary-color);
	color: #fff;
}

.white-btn:hover {
	background: #fff;
	color: #151515;
}

/* Primary CTA — used for "Book Now", "Contact Me" buttons */
a.view-more {
	display: inline-block;
	font-size: 14px;
	padding: 14px 34px;
	color: #fff;
	background: #151515;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 99em;
	transition: all 0.3s ease;
	text-decoration: none;
	font-family: var(--body-font);
}

a.view-more:hover {
	background: var(--primary-color);
	color: #fff;
}

/* About page CTA buttons */
.about-cta-links { margin-top: 20px; }

.about-cta-links .cta-btn {
	display: inline-block;
	margin: 10px 10px;
	padding: 12px 26px;
	font-size: 14px;
	letter-spacing: 1px;
	border: 1px solid var(--primary-dark);
	color: var(--primary-dark);
	text-transform: uppercase;
	transition: all 0.3s ease;
	font-family: var(--body-font);
	text-decoration: none;
}

.about-cta-links .cta-btn:hover {
	background-color: var(--primary-dark);
	color: #fff;
}

.form-submit { margin-top: 32px; }

/* Placeholder color */
::-webkit-input-placeholder { color: #151515; }
:-moz-placeholder { color: #151515; }
::-moz-placeholder { color: #151515; }
:-ms-input-placeholder { color: #151515; }
::-ms-input-placeholder { color: #151515; }
:placeholder-shown, ::placeholder { color: #151515; }

/* Google Maps embed */
.gmaps {
	position: relative;
	padding: 0;
	height: 400px;
	overflow: hidden;
}

.gmaps iframe {
	position: absolute;
	top: auto;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   14. THANK YOU PAGE
═══════════════════════════════════════════════════════════════════════ */

.thankyou-wrap {
	padding: 140px 0 100px;
	text-align: center;
}

.thankyou-icon {
	font-size: 64px;
	color: var(--primary-color);
	margin-bottom: 24px;
}

.thankyou-actions {
	margin-top: 32px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   15. SIDEBAR & WIDGETS
═══════════════════════════════════════════════════════════════════════ */

aside ul, footer ul, .widget_recent_entries ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

aside > ul > li {
	margin-top: 72px;
	margin-bottom: 0;
}

aside > ul > li:first-child { margin-top: 0; }

.widgettitle,
.widgettitle2 h5 {
	color: #f9e0e0;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	margin-bottom: 24px;
	position: relative;
}

footer .widgettitle {
	color: var(--footer-title-color);
}


/* ═══════════════════════════════════════════════════════════════════════
   16. FOOTER
═══════════════════════════════════════════════════════════════════════ */

footer {
	margin-top: 108px;
	padding: 0 0 54px 0;
	background: var(--footer-background-color);
}
.bg-ribbon{
	background: var(--ribbon-background-color);
}

.footer-widgets { padding-top: 108px; }

footer, footer a, .footer-social li a {
	color: var(--footer-color);
}

footer a:hover {
	color: var(--primary-color);
}

.foo-block, .widget-footer { margin-bottom: 54px; }

.widget-footer { text-align: center; }

.copyright { padding-top: 54px; }

.footer-copy {
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.05em;
}

.footer-copy a { color: var(--primary-color); }
.footer-copy a:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════
   17. FLOATING CONTACT BUTTONS (Khai Studio)
═══════════════════════════════════════════════════════════════════════ */

.floating-contact {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fc-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	position: relative;
}

.fc-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
	color: #fff;
	text-decoration: none;
}

.fc-instagram {
	background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.fc-email {
	background: var(--primary-color);
}

.fc-email:hover {
	background: var(--primary-dark);
}

.fc-btn::after {
	content: attr(data-label);
	position: absolute;
	right: 66px;
	top: 50%;
	transform: translateY(-50%);
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	padding: 7px 14px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
	font-family: var(--body-font);
	letter-spacing: 0.5px;
}

.fc-btn:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(-4px);
}

/* Scroll-to-top button */
.scrollup { display: none; }

.scrollup i {
	width: 30px;
	height: 30px;
	position: fixed;
	background: var(--primary-color);
	color: #0e1219;
	border-radius: 50%;
	bottom: 90px;
	right: 32px;
	text-align: center;
	padding-top: 6px;
	cursor: pointer;
	z-index: 110;
}


/* ═══════════════════════════════════════════════════════════════════════
   18. UTILITIES & HELPERS
═══════════════════════════════════════════════════════════════════════ */

.alignc { text-align: center; }
.alignr { text-align: right; }
.alignl { text-align: left; }
.aligncm { text-align: center; }
.alignright { float: right; margin: 4px 0 0 24px; }
.alignleft { float: left; margin: 4px 24px 0 0; }
.aligncenter { margin: 24px auto; text-align: center; display: block; }

.no-margin { margin: 0 !important; }
.no-padding { padding: 0; }

.margin-tb54 { margin: 54px 0; }
.margin-tb36 { margin: 36px 0; }
.margin-tb24 { margin: 24px 0; }
.margin-t108 { margin-top: 108px; }
.margin-t72  { margin-top: 72px; }
.margin-t54  { margin-top: 54px; }
.margin-t36  { margin-top: 36px; }
.margin-t32  { margin-top: 32px; }
.margin-t24  { margin-top: 24px; }
.margin-t16  { margin-top: 16px; }
.margin-b108 { margin-bottom: 108px; }
.margin-b72  { margin-bottom: 72px; }
.margin-b72min { margin-bottom: -72px; }
.margin-b54  { margin-bottom: 54px; }
.margin-b54min { margin-bottom: -54px; }
.margin-b36  { margin-bottom: 36px; }
.margin-b32  { margin-bottom: 32px; }
.margin-b32min { margin-bottom: -32px; }
.margin-b24  { margin-bottom: 24px; }
.margin-b16  { margin-bottom: 16px; }
.margin-none { margin: 0; }
.margin-l54  { margin-left: 54px; }
.margin-r54  { margin-right: 54px; }

.img-center { margin: 0 auto; }
.none { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   19. OWL CAROUSEL
═══════════════════════════════════════════════════════════════════════ */

.owl-carousel { cursor: -webkit-grab; cursor: -moz-grab; }
.owl-carousel.owl-grab { cursor: -webkit-grabbing; cursor: -moz-grabbing; }

.owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots { margin-top: 32px; }

.owl-theme .owl-dots {
	position: relative;
	right: 0;
	left: 0;
	text-align: center;
	bottom: 0px;
	z-index: 20;
	width: auto;
	transform: translateY(-50%);
}

.owl-theme .owl-dots .owl-dot {
	margin: 0 8px;
	display: inline-block;
}

.owl-theme .owl-dots .owl-dot span {
	width: 7px;
	height: 7px;
	background: #fff;
	display: block;
	border-radius: 99em;
	opacity: 0.7;
	transition: all 1s cubic-bezier(0.25, 1, 0.35, 1) 0s;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: #fff;
	opacity: 1;
	transform: scale(1.8);
}

.owl-theme .owl-nav button {
	position: absolute;
	top: 50%;
	left: 35px;
	display: inline-block;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
}

.owl-theme .owl-nav button.owl-next { right: 35px; left: auto; }

.owl-theme .owl-nav button.owl-next:before {
	content: '';
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 10px;
	transform: rotate(-45deg);
}

.owl-theme .owl-nav button.owl-prev:before {
	content: '';
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 10px;
	transform: rotate(135deg);
}


/* ═══════════════════════════════════════════════════════════════════════
   20. SIMPLE LIGHTBOX
═══════════════════════════════════════════════════════════════════════ */

body.hidden-scroll { overflow: hidden; }

.sl-overlay {
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background: #000;
	opacity: 0.8;
	display: none;
	z-index: 1035;
}

.sl-wrapper {
	z-index: 1040;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
	position: fixed;
}

.sl-wrapper * { box-sizing: border-box; }

.sl-wrapper button {
	border: 0 none;
	background: transparent;
	font-size: 28px;
	padding: 0;
	cursor: pointer;
}

.sl-wrapper button:hover { opacity: 0.7; }

.sl-wrapper .sl-close {
	display: none;
	position: fixed;
	right: 30px;
	top: 30px;
	z-index: 10060;
	height: 44px;
	width: 44px;
	line-height: 44px;
	color: #fff;
	font-size: 3rem;
}

.sl-wrapper .sl-counter {
	display: none;
	position: fixed;
	top: 30px;
	left: 30px;
	z-index: 1060;
	color: #fff;
	font-size: 1rem;
}

.sl-wrapper .sl-navigation { width: 100%; display: none; }

.sl-wrapper .sl-navigation button {
	position: fixed;
	top: 50%;
	margin-top: -22px;
	height: 44px;
	width: 44px;
	line-height: 44px;
	text-align: center;
	display: block;
	z-index: 10060;
	color: #fff;
}

.sl-wrapper .sl-navigation button.sl-next { right: 20px; font-size: 3rem; }
.sl-wrapper .sl-navigation button.sl-prev { left: 20px; font-size: 3rem; }

.sl-wrapper .sl-image {
	position: fixed;
	touch-action: none;
	z-index: 10000;
}

.sl-wrapper .sl-image img {
	margin: 0;
	padding: 0;
	display: block;
	border: 0 none;
	width: 100%;
	height: auto;
}

.sl-wrapper .sl-image .sl-caption {
	display: none;
	padding: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	font-size: 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.sl-spinner {
	display: none;
	border: 5px solid #333;
	border-radius: 40px;
	height: 40px;
	left: 50%;
	margin: -20px 0 0 -20px;
	opacity: 0;
	position: fixed;
	top: 50%;
	width: 40px;
	z-index: 1007;
	animation: pulsate 1s ease-out infinite;
}

@keyframes pulsate {
	0%   { transform: scale(0.1); opacity: 0; }
	50%  { opacity: 1; }
	100% { transform: scale(1.2); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   21. RESPONSIVE / MEDIA QUERIES
═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
	.container { max-width: 100%; }
}

@media (min-width: 1024px) {
	.container { max-width: 960px; }
}

@media (min-width: 1200px) {
	.container { max-width: 1140px; }
	.parallax { background-attachment: fixed !important; }
}

@media (min-width: 1500px) {
	.container { max-width: 1350px; }
}

@media (max-width: 1200px) {
	h1, .h1, .slider-text h1, .single-post-title { font-size: calc(2.5rem + 1.5vw); }
	h2, .h2 { font-size: calc(1.8rem + .9vw); }
	h3, .h3 { font-size: calc(1.5rem + .6vw); }
	h4, .h4 { font-size: calc(1.3rem + .3vw); }
	.display-3 { font-size: calc(1.575rem + 3.9vw); }
	.menu-nav li { margin-left: 24px; }
}

/* ── Tablet ── */
@media (max-width: 1024px) {

	/* Mobile menu toggle */
	.nav-holder { display: none; }
	.nav-button-holder { display: block; }

	.logo { flex: 1 1 auto; }

	.header-social-1 {
		margin-left: 32px;
		flex: 0 0 auto;
	}

	.main-header { padding: 16px 0; }

	/* Logo size */
	.logo img {
		height: 80px;
	}

	.slider-text { width: 100%; }

	.margin-l54 { margin-left: 0; }
	.margin-r54 { margin-right: 0; }
	.margin-bm32 { margin-bottom: 32px; }
	.margin-bm54 { margin-bottom: 54px; }
}

/* ── Mobile ── */
@media (max-width: 991px) {

	/* Packages stack vertically */
	.pkg-grid, .pkg-grid-2 {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {

	.container { max-width: 100%; }

	blockquote { font-size: 18px; }

	.slider-item-box-bkg,
	.top-single-bkg { height: 400px; }

	.slider-text { font-size: 18px; }
	.slider-caption { padding: 0 50px; }

	.owl-theme .owl-nav button { left: 20px; }
	.owl-theme .owl-nav button.owl-next { right: 20px; }

	footer { margin-top: 72px; }
	.footer-widgets { padding-top: 72px; }

	.slider-container,
	.top-single-bkg,
	.section-holder,
	.margin-b108 { margin-bottom: 72px; }

	.parallax { padding: 72px 0; }

	/* Floating contact buttons */
	.floating-contact {
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}
	.fc-btn {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}
	.fc-btn::after { display: none; }

	.aligncm { text-align: center; }

	.margin-bm24 { margin-bottom: 24px; }
	.margin-bm32 { margin-bottom: 32px; }
	.margin-bm54 { margin-bottom: 54px; }
	.foo-last { margin: 0; }
	.foo-last .widget-footer { margin: 0; }
}

@media (max-width: 575px) {

	/* Logo gets smaller on phones */
	.logo img {
		height: 64px;
	}

	.slider-text p { display: none; }
	.slider-text h1 { margin-bottom: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
   KHAI STUDIO — ELEVATED SECTIONS
   ───────────────────────────────────────────────────────────────────────
   Append this to the END of your style.css.
   Adds:
     22. Eyebrow tag (small label above section headings)
     23. Process Steps section (frosted glass on photo bg) — homepage
     24. Packages page solid backgrounds (cream / dark / cream)
═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   22. EYEBROW TAG — small uppercase label above section titles
═══════════════════════════════════════════════════════════════════════ */

.eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--primary-color);
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
	font-family: var(--body-font);
}

.eyebrow-on-dark {
	color: var(--primary-color);
	opacity: 0.9;
}

.eyebrow-left {
	text-align: left;
}


/* ═══════════════════════════════════════════════════════════════════════
   23. PROCESS STEPS — frosted glass cards on photo background
   ───────────────────────────────────────────────────────────────────────
   Used on homepage for "How I Work" section
═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PROCESS STEPS — frosted glass cards on photo background
   ═══════════════════════════════════════════════════════════════════════ */

.process-section {
    position: relative;
    padding: 90px 0 100px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 108px;
    color: #fff;
}

.process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(15, 15, 20, 0.65), rgba(15, 15, 20, 0.78));
    z-index: 1;
}

.process-section .container {
    position: relative;
    z-index: 2;
}

.process-section .section-title {
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
}

.process-section .process-intro {
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
    font-size: 16px;
    line-height: 1.7;
}

/* ── 4-column grid for 8 cards (2 rows of 4) ── */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 16px;
}

.process-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 28px 22px 24px;
    border-radius: 12px;
    text-align: left;
    transition: transform 0.3s ease, background 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.16);
}

.process-step-num {
    font-family: 'Cormorant', serif;
    font-size: 42px;
    font-weight: 700;
    color: #8bb8c1;
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -1px;
}

.process-card h3 {
    font-family: 'Cormorant', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.process-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin: 0;
}

/* ── Tablet — 2 columns (4 rows of 2) ── */
@media (max-width: 991px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .process-section {
        padding: 60px 0 70px;
    }
}

/* ── Mobile — 1 column ── */
@media (max-width: 575px) {
    .process-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    .process-card {
        padding: 24px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. PACKAGES PAGE — alternating contrast backgrounds
   ───────────────────────────────────────────────────────────────────────
   Couple Packages   → cream background
   Wedding Packages  → dark background (inverse contrast)
   Elopement Package → cream background
═══════════════════════════════════════════════════════════════════════ */

/* CREAM SECTION (Couples + Elopement) */
.pkg-bg-cream {
	background: linear-gradient(180deg, #faf7f2 0%, #f3ede4 100%);
	padding: 80px 0;
	margin-bottom: 0;
	position: relative;
}

.pkg-bg-cream::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(139, 184, 193, 0.4), transparent);
}

/* DARK SECTION (Weddings) */
.pkg-bg-dark {
	background: #151515;
	padding: 80px 0;
	margin-bottom: 0;
	position: relative;
}

.pkg-bg-dark .packages-section-title,
.pkg-bg-dark .section-title {
	color: #fff;
}

.pkg-bg-dark .packages-section-subtitle {
	color: rgba(255, 255, 255, 0.6);
}

/* Dark version of the pricing card */
.pkg-bg-dark .pkg-card {
	background: #1f1f1f;
	border: 1px solid #2c2c2c;
	color: #e8e8e8;
}

.pkg-bg-dark .pkg-card.pkg-featured {
	border: 2px solid var(--primary-color);
	background: #1a1a1a;
}

.pkg-bg-dark .pkg-name {
	color: #fff;
}

.pkg-bg-dark .pkg-tagline {
	color: rgba(255, 255, 255, 0.65);
}

.pkg-bg-dark .pkg-price {
	color: #fff;
}

.pkg-bg-dark .pkg-price-from {
	color: rgba(255, 255, 255, 0.4);
}

.pkg-bg-dark .pkg-head {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pkg-bg-dark .pkg-features li {
	color: rgba(255, 255, 255, 0.75);
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

.pkg-bg-dark .pkg-cta {
	border-color: #fff;
	color: #fff;
}

.pkg-bg-dark .pkg-cta:hover {
	background: #fff;
	color: #151515;
}

.pkg-bg-dark .pkg-card.pkg-featured .pkg-cta {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.pkg-bg-dark .pkg-card.pkg-featured .pkg-cta:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
}

/* PACKAGES intro section — sits above the colored sections */
.pkg-intro {
	padding: 80px 0 60px;
	text-align: center;
}

/* Info box (Travel info) — pkg-bg-cream styled differently for visual rhythm */
.pkg-bg-cream .pkg-info-box {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}