/* ----------------------------------------------------------------------------------------
* Project       : Ceylon Loop
* Stylesheet    : Site styles
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Collection css
08. Why Choose Us css
09. Our Exhibitions css
10. Our Events css
11. Our Team css
12. Who We Are css
13. Our Testimonials css
14. Our Blog css
15. Footer css
16. About Us Page css
17. Collection Page css
18. Collection Single css
19. Blog Archive css
20. Blog Single css
21. Events Page css
22. Event Single css
23. Team Page css
24. Team Single css
25. Testimonials Page css
26. Image Gallery css
27. Video Gallery css
28. FAQ's Page css
29. Contact Us Page css
30. 404 Error Page css
31.	Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #103B1D;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F5F7F5;
	--text-color				: #1C2B20;
	--accent-color				: #DB910C;
	--white-color				: #FFFFFF;
	--divider-color				: #103B1D1A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "DM Sans", "Noto Sans", "Noto Sans Arabic", "Noto Nastaliq Urdu", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Sinhala", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Odia", "Noto Sans Thai", "Noto Sans Myanmar", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Thaana", "Noto Sans Ethiopic", "Noto Sans Armenian", "Noto Sans Georgian", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
	--accent-font				: "Boldonse", "Noto Sans", "Noto Sans Arabic", "Noto Nastaliq Urdu", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Sinhala", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Odia", "Noto Sans Thai", "Noto Sans Myanmar", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Thaana", "Noto Sans Ethiopic", "Noto Sans Armenian", "Noto Sans Georgian", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--white-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: var(--accent-font);
	font-weight: 400;
	line-height: 1.5em;
	text-transform: uppercase;
	color: var(--primary-color);
	margin: 0;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 30px;
	border: none;
	padding: 17px 46px 17px 24px;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
	z-index: 1;
}

.btn-default::before{
	content: '';
	position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 12px;
    background-image: url('../images/arrow-white.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.btn-default::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
	right: 0;
    width: 0;
    height: 106%;
    background: var(--primary-color);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default:hover::after{
	width: 100%;
    transform: skew(0deg);
    left: 0;
}

.btn-default.btn-highlighted:hover,
.btn-default.btn-border:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover::before,
.btn-default.btn-border:hover:before{
	background-image: url('../images/arrow-primary.svg');
}

.btn-default.btn-highlighted::after{
	background: var(--white-color);
}

.readmore-btn{
	position: relative;
    display: inline-block;
	font-size: 16px;
    font-weight: 700;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--white-color);
    padding: 0 32px 0 0;
	transition: all 0.3s ease-in-out;
}

.readmore-btn:hover{
	color: var(--accent-color);
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	width: 24px;
	height: 24px;
	background-color: var(--accent-color);
	border-radius: 50%;
	transform: translateY(-50%);
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px auto;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	position: relative;
	height: 100px;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

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

.section-row .section-title{
	margin-bottom: 0;
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

.section-title-content p:last-child{
	margin-bottom: 0;
}

.section-title{
	margin-bottom: 40px;
}

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 9px 20px 9px 48px;
    margin-bottom: 15px;
}

.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 16px;
    height: 16px;
}

.section-title h1{
	font-size: 50px;
	line-height: 1.6em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 30px;
	line-height: 1.8em;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 15px;
	margin-bottom: 0;
}

.dark-section .section-title .section-sub-title{
	border-color: var(--dark-divider-color);
}

.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	    03. Header css		 ****/
/************************************/

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

header.main-header .header-sticky{
    position: relative;
	top: 0;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--primary-color);
	border-radius: 0;
    transform: translateY(0);
}

.navbar{
	padding: 30px 0px;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 10px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2em;
	padding: 12px 10px !important;
	color: var(--white-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

/* Current-page highlight: accent colour plus an underline that draws itself
   in on load, so the active link always lands with a smooth motion. The
   .nav-link class in the selector outranks Bootstrap's
   .navbar-nav .nav-link.active, which would otherwise force its own colour. */
.main-menu ul li a.nav-link.active{
	color: var(--accent-color);
	background-image: linear-gradient(var(--accent-color), var(--accent-color));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	animation: navActiveIn 0.5s ease 0.3s forwards;
}

@keyframes navActiveIn{
	to{
		background-size: 100% 2px;
	}
}

.main-menu ul ul li a.nav-link.active{
	color: var(--white-color);
	background-color: rgb(255 255 255 / 20%);
	background-image: linear-gradient(var(--white-color), var(--white-color));
}


.main-menu ul ul{
	position: absolute;
	left: 0;
	top: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	background: var(--accent-color);
	border-radius: 14px;
	text-align: left;
	transition: all 0.3s ease-in-out;
	transform: scale(1,0.8);
	transform-origin: top;
	visibility: hidden;
	opacity: 0;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.header-btn{
	line-height: 0;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 6px;
	margin: 0;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	background: var(--accent-color);
	padding: 0;
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 5px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_nav li a.active{
	color: var(--primary-color);
	font-weight: 700;
}

.slicknav_menu ul ul li a{
    padding: 5px 20px 5px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--primary-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero{
	position: relative;
    padding: 160px 0 50px;
	overflow: hidden;
}

.hero.hero-image-layout,
.hero.hero-video,
.hero.hero-slider-layout{
	min-height: 100vh;
	text-align: center;
	align-content: center;
}

.hero.hero-image-layout{
	background: url('../images/hero-bg-image.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero.hero-image-layout::before,
.hero.hero-slider-layout .hero-image-slider .hero-slider-image figure::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  	background: var(--primary-color);
	opacity: 55%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-content,
.hero.hero-image-layout .hero-content{
	max-width: 840px;
	margin: 0 auto;
}

.hero.hero-slider-layout .hero-content .section-title p,
.hero.hero-image-layout .hero-content .section-title p{
	font-size: 18px;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

/* Only the first hero slide carries the page <h1>; the rest are <h2> so the
   page has exactly one h1 (SEO). Visually they must be identical to the h1. */
.hero.hero-slider-layout .hero-content h2,
.hero.hero-image-layout .hero-content h2{
	font-size: 50px;
	line-height: 1.6em;
	margin: 0;
	cursor: none;
}

@media only screen and (max-width: 767px){
	.hero.hero-slider-layout .hero-content h2,
	.hero.hero-image-layout .hero-content h2{
		font-size: 38px;
		line-height: 1.5em;
	}
}

.hero.hero-video-layout .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video-layout .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout::before{
	display: none;
}

.hero.hero-slider-layout{
	background: none;
}

.hero.hero-slider-layout .hero-image-slider{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-slider-layout .hero-image-slider .swiper,
.hero.hero-slider-layout .hero-image-slider .hero-slider-image,
.hero.hero-slider-layout .hero-image-slider .hero-slider-image figure{
	position: relative;
	height: 100%;
}

.hero.hero-slider-layout .hero-image-slider .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.hero-content{
	height: 100%;
	align-content: center;
}

.hero-image{
	height: 100%;
}

.hero-image figure{
	height: 100%;
	margin-bottom: -50px;
	align-content: end;
}

.hero-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.125;
	object-fit: cover;
}

/************************************/
/***   05. Scrolling Ticker css	  ***/
/************************************/

.our-scrolling-ticker{
	background: var(--accent-color);
	padding: 21px 0;
}

.scrolling-ticker-box{
	--gap: 40px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 50s linear infinite;
}

.scrolling-content span{
	font-family: var(--accent-font);
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	font-size: 20px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--white-color);
	vertical-align: middle;
}

.scrolling-content span img{
	width: 100%;
	max-width: 20px;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

/************************************/
/*** 	   06. About Us css	      ***/
/************************************/

.about-us{
	position: relative;
	padding: 100px 0;
	overflow: hidden;
}

.about-us::before{
	content: '';
    position: absolute;
    bottom: 0;
    right: -50px;
    width: 284px;
    height: 313px;
    background-image: url('../images/section-bg-image-shape-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.about-us .container{
	position: relative;
	z-index: 2;
}

.about-us-image-box{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    margin-right: 15px;
    height: 100%;
}

.about-us-image.box-1{
	position: relative;
	width: 20%;
	z-index: 2;
}

.about-us-image.box-2{
	width: 80%;
}

.about-us-image.box-2 figure img,
.about-us-image.box-2 figure,
.about-us-image.box-2{
	height: 100%;
}

.about-us-image figure{
	display: block;
	border-radius: 20px;
}

.about-us-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.175;
	object-fit: cover;
	border-radius: 20px;
}

.about-us-image.box-1 figure{
	border: 10px solid var(--bg-color);
	border-radius: 150px 150px 0 0;
	margin-right: -156px;
}

.about-us-image.box-1 figure img{
	aspect-ratio: 1 / 1.39;
	border-radius: 120px 120px 0 0;
}

.about-us-content{
	height: 100%;
	align-content: center;
}

.about-us-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-us-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.about-us-item .icon-box img{
    width: 100%;
    max-width: 50px;
}

.about-us-item-content{
	width: calc(100% - 65px);
}

.about-us-item-content h3{
	font-size: 16px;
}

.about-us-item-content p{
	margin: 10px 0 0 0;
}

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    gap: 20px 40px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.about-author-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-author-box-image figure{
	display: block;
	border-radius: 50%;
}

.about-author-box-image img{
	width: 100%;
	max-width: 50px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.about-author-box-content{
	width: calc(100% - 65px);
}

.about-author-box-content h3{
	font-size: 16px;
}

.about-author-box-content p{
	line-height: normal;
	margin: 5px 0 0;
}

.about-contact-item-content h3 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.about-contact-item-content h3 a:hover{
	color: var(--accent-color);
}

.dark-section .about-contact-item .icon-box::before{
	background: var(--white-color);
}

.dark-section .about-contact-item:hover .icon-box img{
	filter: brightness(1) invert(1);
}

.dark-section .about-contact-item-content p,
.dark-section .about-contact-item-content h3{
	color: var(--white-color);
}

/************************************/
/***    07. Our Collection css    ***/
/************************************/

.our-collection{
	padding: 100px 0;
}

.collection-item{
	position: relative;
	background-color: var(--primary-color);
	border-radius: 20px;
	text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.collection-item-image a{
	display: block;
	cursor: none;
}

.collection-item-image a::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.56) 70.24%, rgba(0, 0, 0, 0.80) 100%);
	z-index: 1;
}

.collection-item-image figure{
	position: relative;
	display: block;
}

.collection-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.02;
	object-fit: cover;
	transition: all 0.8s ease-in-out;
}

.collection-item:hover .collection-item-image figure img{
	transform: scale(1.05) rotate(2deg);
}

.collection-items-list .col-xl-4:nth-child(3n + 2) .collection-item:hover .collection-item-image figure img{
	transform: scale(1.05) rotate(-2deg);
}

.collection-item-content{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 2;
}

.collection-item-content h2{
	font-size: 16px;
	line-height: 1.8em;
	color: var(--white-color);
}

.collection-item-content h2 a{
	color: inherit;
}

.collection-item-content p{
	color: var(--white-color);
	margin: 10px 0 0 0;
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 4px 10px;
	margin-right: 10px;
}

.section-footer-text p a{
	display: inline-block;
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--primary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 10px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	line-height: normal;
	font-weight: 600;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text .section-footer-border-list li{
	border-right: 1px solid var(--divider-color);
	padding-right: 10px;
}

.section-footer-text .section-footer-border-list li:last-child{
	padding-right: 0;
	border-right: none;
	margin-right: 0;
}

.section-footer-text ul li b{
	font-weight: 600;
}

.section-footer-text ul li i{
	width: auto;
	font-size: 16px;
	color: var(--accent-color);
}

.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
	display: inline-block;
	border: 1px solid var(--white-color);
	border-radius: 50%;
	margin-left: -14px;
	overflow: hidden;
	z-index: 1;
}

.satisfy-client-image:first-child{
	margin-left: 0;
}

.satisfy-client-image figure{
	display: block;
}

.satisfy-client-image img{
	width: 100%;
	max-width: 50px;
}

.satisfy-client-image.add-more{
	background-color: var(--accent-color);
	width: 52px;
	height: 52px;
	display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
}

.satisfy-client-image.add-more img{
	max-width: 18px;
}

.satisfy-client-image.add-more i{
	font-size: 18px;
	color: var(--white-color);
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	max-width: 16px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more i{
	font-size: 14px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

.dark-section .section-footer-text ul li{
	border-color: var(--dark-divider-color);
}

.dark-section .satisfy-client-image{
	border-color: var(--primary-color);
}

/************************************/
/***     08. Why Choose Us css    ***/
/************************************/

.why-choose-us{
	padding: 100px 0;
}

.why-choose-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}

.why-choose-item{
	width: 100%;
}

.why-choose-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.why-choose-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

.why-choose-item-counter-title{
	width: calc(100% - 65px);
}

.why-choose-item-counter-title h2{
	font-size: 30px;
}

.why-choose-item-title h3{
	font-size: 16px;
}

.why-choose-item-content{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin-top: 20px;
}

.why-choose-item-content p:last-child{
	margin: 0;
}

.why-choose-author-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.why-choose-author-image figure{
	display: block;
	border-radius: 50%;
}

.why-choose-author-image figure img{
	width: 100%;
	max-width: 100px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.why-choose-author-content{
	width: calc(100% - 120px);
}

.why-choose-author-content h3{
	font-size: 22px;
}

.why-choose-author-content p{
	margin: 15px 0 0 0;
}

.why-choose-image{
	text-align: center;
	max-width: 525px;
	margin: 0 auto;
}

.why-choose-image figure{
	display: block;
	border-radius: 20px;
}

.why-choose-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.048;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***    09. Our Exhibitions css   ***/
/************************************/

.our-exhibitions{
	padding: 100px 0 70px;
}

.exhibition-item{
	display: flex;
	flex-direction: column;
	border-radius: 200px;
	gap: 10px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.exhibition-items-list .col-xl-4:nth-child(3n + 2) .exhibition-item{
	flex-direction: column-reverse;
}

.exhibition-item-header{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 34.24%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	text-align: center;
	padding: 45px;
	padding-top: 60px;
}

.exhibition-items-list .col-xl-4:nth-child(3n + 2) .exhibition-item .exhibition-item-header{
	background: linear-gradient(0deg, rgba(195, 36, 45, 0.10) 34.24%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.05);
	padding-top: 45px;
	padding-bottom: 60px;
}

.exhibition-item-header .icon-box{
	margin-bottom: 50px;
}

.exhibition-item-header .icon-box img{
	width: 100%;
	max-width: 50px;
}

.exhibition-item-content h3{
	font-size: 16px;
	color: var(--white-color);
}

.exhibition-item-content p{
	color: var(--white-color);
	margin: 10px 0 0 0;
}

.exhibition-item-image{
	height: 100%;
}

.exhibition-item-image figure{
	display: block;
	height: 100%;
	overflow: hidden;
}

.exhibition-item-image figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.72;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.exhibition-item:hover .exhibition-item-image figure img{
	transform: scale(1.05) rotate(2deg);
}

/************************************/
/***       10. Our Events css     ***/
/************************************/

.our-events{
	padding: 100px 0 70px;
}

.event-item{
	background: var(--secondary-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.event-item-header{
	position: relative;
	margin-bottom: 10px;
}

.event-item-image a,
.event-item-image figure{
	display: block;
	border-radius: 10px;
	overflow: hidden;
	cursor: none;
}

.event-item-image figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
	aspect-ratio: 1 / 0.745;
	transition: all 0.6s ease-in-out;
}

.event-item:hover .event-item-image figure img{
	transform: scale(1.06) rotate(2deg);
}

.event-item-btn{
	position: absolute;
	top: 20px;
	right: 20px;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.event-item:hover .event-item-btn{
	transform: scale(1);
}

.event-item-btn a{
	display: inline-block;
	background: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.event-item-btn a:hover{
	background: var(--primary-color);
}

.event-item-btn a img{
	width: 100%;
	max-width: 16px;
	transition: all 0.4s ease-in-out;
}

.event-item-btn a:hover img{
	transform: rotate(45deg);
}

.event-item-body{
	padding: 20px;
}

.event-item-content h2{
	font-size: 16px;
	line-height: 1.8em;
}

.event-item-content h2 a{
	color: inherit;
}

.event-item-content p{
	margin: 8px 0 0;
}

.event-item-meta{
	margin-top: 20px;
}

.event-item-meta ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-item-meta ul li{
	display: flex;
	align-items: center;
	gap: 10px;
	align-items: center;
    line-height: 1.5em;
	margin-bottom: 15px;
}

.event-item-meta ul li:last-child{
	margin-bottom: 0;
}

.event-item-meta ul li img{
	max-width: 22px;
}

/************************************/
/***       11. Our Team css       ***/
/************************************/

.our-team{
	padding: 100px 0 70px;
}

.team-item{
	text-align: center;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.team-item-header{
	position: relative;
	margin-bottom: 25px;
	overflow: hidden;
}

.team-item-image a,
.team-item-image figure{
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.team-item-image figure::before{
    content: "";
    position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.56) 70.24%, rgba(0, 0, 0, 0.80) 100%);
    width: 100%;
    height: 100%;
    transition: all 0.6s ease-in-out;
    z-index: 1;
}

.team-item-image a{
	cursor: none;
}

.team-item-image img{
    width: 100%;
	aspect-ratio: 1 / 1.155;
    object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.team-item:hover .team-item-image img{
	transform: scale(1.04);
}

.team-item-social-list{
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	transform: translateY(100%) scaleY(0);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-item-social-list{
	transform: translateY(0%) scaleY(1);
}

.team-item-social-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.team-item-social-list ul li a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	background: var(--divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.team-item-social-list ul li a:hover{
	background: var(--accent-color);
}

.team-item-social-list ul li a i{
	font-size: 18px;
	color: inherit;
}

.team-item-content{
	text-align: center;
}

.team-item-content h2{
	font-size: 16px;
	color: var(--white-color);
}

.team-item-content h2 a{
	color: inherit;
}

.team-item-content p{
	color: var(--white-color);
	margin: 8px 0 0;
}

/************************************/
/***      12. Who We Are css      ***/
/************************************/

.who-we-are{
	position: relative;
	padding: 100px 0;
	overflow: hidden;
}

.who-we-are::before{
	content: '';
    position: absolute;
    bottom: -30px;
    left: 0px;
    width: 334px;
    height: 539px;
    background-image: url('../images/section-bg-image-shape-2.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	z-index: 2;
}

.who-we-are-box{
	position: relative;
}

.who-we-are-title{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.who-we-are-title h2{
	position: relative;
	font-size: 19.792vw;
	line-height: 1.3em;
	color: var(--divider-color);
	transition: all 0.5s ease-in-out;
}

.who-we-are-title h2::before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-color);
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.5s ease-in-out;
}

.who-we-are-box:hover .who-we-are-title h2::before{
    width: 100%;
}

.who-we-are-image-boxes{
	position: relative;
	max-width: 740px;
	margin: 0 auto;
	padding: 20px 0;
	z-index: 3;
}

.who-we-are-image-box-1,
.who-we-are-image-box-2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.who-we-are-image-box-2{
	margin-top: -200px;
}

.who-we-are-image{
	width: 250px;
	transition: all 0.8s ease-in-out;
}

.who-we-are-image.img-1{
	transform: rotate(-10deg);
	margin-right: -10px;
}

.who-we-are-image-boxes:hover .who-we-are-image.img-1{
	transform: translateY(-15px) rotate(-12deg);
}

/* img-2 and img-5 were at rotate(-170deg), which turns the photo almost
   fully over - both looked upside down. They now tilt the opposite way to
   img-1/img-3 instead, so the collage keeps its fanned, scattered feel with
   every photograph the right way up. */
.who-we-are-image.img-2{
	transform: rotate(10deg);
	margin-left: -10px;
}

.who-we-are-image-boxes:hover .who-we-are-image.img-2{
	transform: translateY(-15px) rotate(12deg);
}

.who-we-are-image.img-3{
	transform: rotate(-10deg);
	margin-right: -30px;
}

.who-we-are-image-boxes:hover .who-we-are-image.img-3{
	transform: rotate(-13deg);
}

.who-we-are-image.img-4{
	position: relative;
	z-index: 3;
}

.who-we-are-image-boxes:hover .who-we-are-image.img-4{
	transform: translateY(-15px);
}

.who-we-are-image.img-5{
	transform: rotate(10deg);
	margin-left: -30px;
}

.who-we-are-image-boxes:hover .who-we-are-image.img-5{
	transform: rotate(13deg);
}

.who-we-are-image figure{
	display: block;
	border: 10px solid var(--white-color);
	transition: all 1s ease-in-out;
}

.who-we-are-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.41;
	object-fit: cover;
}

.who-we-are .section-footer-text{
	position: relative;
	margin-top: 40px;
	z-index: 3;
}

/************************************/
/***   13. Our Testimonials css   ***/
/************************************/

.our-testimonials{
	padding: 100px 0;
}

.testimonial-slider .swiper .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	height: 100%;
	min-height: 385px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--dark-divider-color);
	background-image: url('../images/icon-testimonial-item-quote.svg');
	background-repeat: no-repeat;
	background-position: top 30% center;
	background-size: 240px auto;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 40px;
}

.testimonial-item-rating{
	margin-bottom: 15px;
}

.testimonial-item-rating i{
	width: auto;
	font-size: 16px;
    color: var(--accent-color);
}

.testimonial-item-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
}

.testimonial-item-content p:last-child{
	margin: 0px;
}

.testimonial-item-author{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
}

.testimonial-author-image figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image img{
	width: 100%;
	max-width: 50px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.testimonial-author-content{
	width: calc(100% - 65px);
}

.testimonial-author-content h2{
	font-size: 16px;
	color: var(--white-color);
}

.testimonial-author-content p{
	line-height: normal;
	color: var(--white-color);
	margin: 5px 0 0;
}

.our-testimonials .section-footer-text{
	margin-top: 60px;
}

/************************************/
/***       14. Our Blog css       ***/
/************************************/

.our-blog{
	padding: 100px 0 70px;
}

.post-item{
	position: relative;
	background-color: var(--divider-color);
	border-radius: 20px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
	overflow: hidden;
}

.post-featured-image a{
	cursor: none;
    display: block;
    overflow: hidden;
}

.post-featured-image figure{
	position: relative;
	display: block;
}

.post-featured-image figure::before{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(180deg, rgba(13, 13, 13, 0.00) 53.65%, rgba(13, 13, 13, 0.67) 69.05%, rgba(13, 13, 13, 0.90) 100%);
    width: 100%;
    height: 100%;
    transition: all 0.6s ease-in-out;
    z-index: 1;
}

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    transition: all 0.8s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.05) rotate(2deg);
}

.post-item-body{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 2;
}

.post-item-content h2{
    font-size: 16px;
	line-height: 1.8em;
	color: var(--white-color);
}

.post-item-content h2 a{
    color: inherit;
}

.post-item-btn{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

/************************************/
/***         15. Footer css       ***/
/************************************/

.main-footer{
	padding: 100px 0 0;
}

.footer-header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 70px;
	margin-bottom: 70px;
}

.footer-header .section-title{
	max-width: 525px;
	margin-bottom: 0;
}

.footer-newsletter-box{
	width: 100%;
	max-width: 415px;
}

.footer-newsletter-box h3{
	font-size: 16px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-newsletter-box .form-group{
	display: flex;
}

.footer-newsletter-box .form-group .form-control{
	width: calc(100% - 50px);
	font-size: 16px;
	line-height: 1.5em;
	color: var(--white-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-radius: 40px;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 6px 15px 6px 20px;
}

.footer-newsletter-box .form-group .form-control::placeholder{
	color: var(--white-color);
	opacity: 50%;
}

.footer-newsletter-box .form-group .newsletter-btn{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border: none;
	padding: 0;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-box .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-box .form-group .newsletter-btn i{
	font-size: 24px;
	color: var(--white-color);
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-box .newsletter-btn:hover i{
	color: var(--accent-color);
}

.footer-logo img{
    width: 100%;
    max-width: 175px;
}

.about-footer-content{
	margin-top: 20px;
}

.about-footer-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-social-links{
	margin-top: 50px;
}

.footer-social-links ul{
	list-style: none;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0;
	margin: 0;
}

.footer-social-links ul li a{
	width: 40px;
	height: 40px;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.footer-social-links ul li a:hover{
	color: var(--primary-color);
	background-color: var(--white-color);
}

.footer-social-links ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-links-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	margin-left: 60px;
}

.footer-opening-hour-box,
.footer-links{
	max-width: 30%;
}

.footer-links h2{
	font-size: 16px;
	color: var(--white-color);
	margin-bottom: 25px;
}

.footer-links ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.footer-links ul li{
	line-height: 1.4em;
	color: var(--white-color);
	margin-bottom: 15px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li::marker{
	color: var(--accent-color);
}

.footer-links ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover{
	color: var(--accent-color);
}

.footer-opening-hour-box .footer-links{
	max-width: 100%;
	margin-bottom: 40px;
}

.footer-opening-hour-box .footer-links:last-child{
	margin-bottom: 0;
}

.footer-opening-hour-box .footer-links ul{
	list-style: none;
	padding: 0;
}

.footer-opening-hour-box .footer-links ul li{
	line-height: 1.6em;
}

.footer-opening-hour-box .footer-links ul li span{
	display: block;
	width: 100%;
}

.footer-copyright{
	border-top: 1px solid var(--dark-divider-color);
	padding: 40px 0;
	margin-top: 70px;
}

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

.footer-copyright-text p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-copyright-text p a{
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.footer-copyright-text p a:hover{
	color: var(--white-color);
}

.footer-newsletter-thanks{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--white-color);
	margin: 10px 0 0;
	min-height: 50px;
}

.footer-newsletter-thanks i{
	color: var(--accent-color);
}

/************************************/
/*** 	16. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 250px 0 140px;
	overflow: hidden;
}

.page-header-box h1{
	display: inline-block;
	font-size: 50px;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
    text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.our-approach{
    padding: 100px 0;
}

.approach-item{
	min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--dark-divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
    overflow: hidden;
    padding: 40px;
	transition: all 0.6s ease-in-out;
}

.approach-item:hover{
	transform: scale(1.01);
}

.approach-item .icon-box img{
	max-width: 100px;
	max-height: 50px;
}

.approach-item-content h3{
    font-size: 16px;
	color: var(--white-color);
}

.approach-item-content p{
	color: var(--white-color);
	margin: 10px 0 0 0;
}

.approach-item-content ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
	border-top: 1px solid var(--dark-divider-color);
    margin: 40px 0 0 0;
    padding: 40px 0 0 0;
}

.approach-item-content ul li{
    position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 100px;
	padding: 9px 20px 9px 45px;
}

.approach-item-content ul li::before{
	content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 16px;
    height: 16px;
}

.our-history{
	padding: 100px 0;
}

.our-history-content{
	height: 100%;
	align-content: center;
	margin-right: 15px;
}

.history-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.history-item{
	width: calc(50% - 15px);
	background: var(--secondary-color);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 20px;
}

.history-item-content{
	width: calc(100% - 65px);
}

.history-item-content h2{
	font-size: 16px;
}

.history-item-content p{
	line-height: normal;
	margin: 10px 0 0 0;
}

.history-btn{
	margin-top: 60px;
}

.history-images-boxes{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
}

.history-image.box-1{
	width: 58%;
	height: 100%;
}

.history-image.box-2{
	position: relative;
	width: 42%;
	margin-bottom: 25px;
	z-index: 2;
}

.history-image figure{
	display: block;
	border-radius: 20px;
}

.history-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.115;
	object-fit: cover;
	border-radius: 20px;
}

.history-image.box-1 figure{
	height: 100%;
	margin-right: -180px;
}

.history-image.box-2 figure{
	border: 6px solid var(--bg-color);
	border-radius: 26px;
}

.history-image.box-2 figure img{
	aspect-ratio: 1 / 1.01;
}

.history-image.box-2 .video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-play-button a{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	cursor: none;
	z-index: 1;
}

.video-play-button a span{
	position: relative;
	height: 40px;
	width: 40px;
	background: var(--accent-color);
	border-radius: 50%;
	color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-play-button a span.bg-effect{
	position: relative;
}

.video-play-button a span.bg-effect:before,
.video-play-button a span.bg-effect:after{
	content: '';
	position: absolute;
    width: 150%;
    height: 150%;
    border: 25px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a span.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a span i{
	font-size: 14px;
	color: inherit;
	margin-left: 2px;
}

.video-play-button p{
	font-family: var(--accent-font);
	font-weight: 600;
	color: var(--white-color);
	margin: 0;
}

.our-faqs{
	padding: 100px 0;
}

.faq-content-box{
    height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.faq-cta-box{
    max-width: 330px;
    background-color: var(--primary-color);
    border-radius: 20px;
    padding: 30px;
    z-index: 1;
}

.faq-cta-box-title h2{
	font-size: 16px;
	color: var(--white-color);
}

.faq-cta-btn{
	margin-top: 25px;
}

.our-faqs .faq-accordion{
	margin-left: 40px;
}

.faq-accordion .accordion-item{
    position: relative;
    background: var(--secondary-color);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button{
	font-size: 16px;
    font-weight: 400;
    line-height: 1.75em;
    background: transparent;
    color: var(--primary-color);
    padding: 20px 55px 20px 30px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 30px;
    top: 50%;
    font-size: 20px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	content: '\f068';
}

.faq-accordion .accordion-item .accordion-body{ 
	border-top: 1px solid var(--divider-color);
    background-color: transparent;  
    padding: 20px 0px;
	margin: 0 30px;
}

.faq-accordion .accordion-item .accordion-body p:last-child{
    margin: 0;
}

.cta-box{
	padding: 100px 0 70px;
}

.cta-box-item{
	min-height: 360px;
	background: var(--secondary-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.cta-box-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--bg-color);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-box-item .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 10px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.cta-box-item:hover .icon-box:before{
	transform: scale(1) rotate(180deg);
}

.cta-box-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.cta-box-item:hover .icon-box img{
	filter: brightness(1) invert(1);
}

.cta-box-item .icon-box i{
	position: relative;
	z-index: 1;
	font-size: 26px;
	color: var(--primary-color);
	transition: all 0.4s ease-in-out;
}

.cta-box-item:hover .icon-box i{
	color: var(--white-color);
}

.cta-box-item-content h3{
	font-size: 16px;
}

.cta-box-item-content p{
	margin: 10px 0 0 0;
}

.cta-box-item-content ul{
	list-style: none;
	padding: 0;
	margin: 40px 0 0 0;
}

.cta-box-item-content ul li{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.cta-box-item-content ul li:last-child{
	margin-bottom: 0;
}

.cta-box-item-content ul li:hover{
	color: var(--accent-color);
}

.cta-box-item-content ul li a{
	color: inherit;
}

/************************************/
/***    17. Collection Page css   ***/
/************************************/

.page-collection{
    padding: 100px 0 70px;
}

/************************************/
/***   18. Collection Single css  ***/
/************************************/

.page-collection-single{
	padding: 100px 0;
}

.page-single-sidebar{
	position: sticky;
    top: 30px;
    margin-right: 25px;
}

.page-category-list{
	background: var(--secondary-color);
    border-radius: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.page-category-list .page-category-list-title{
	font-size: 16px;
    line-height: normal;
	color: var(--white-color);
	background: var(--accent-color);
	padding: 17px 30px;
}

.page-category-list ul{
	list-style: none;
    margin: 0;
	padding: 30px;
}

.page-category-list ul li{
	line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-category-list ul li:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover{
    color: var(--accent-color);
}

.page-category-list ul li a::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
    background-size: cover;
	background-position: center center;
    width: 12px;
    height: 12px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
    transform: translateY(-50%) rotate(45deg);
}

.sidebar-cta-box{
	position: relative;
    background: var(--primary-color) url('../images/sidebar-cta-bg-image.jpg') no-repeat;
	background-position: center center;
	background-size: 100% 100%;
    border-radius: 20px;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
    padding: 40px;
    overflow: hidden;
}

.sidebar-cta-box-header .icon-box img{
    position: relative;
    width: 100%;
    max-width: 50px;
    z-index: 1;
}

.sidebar-cta-box-content{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
}

.sidebar-cta-box-content h2{
    font-size: 16px;
	line-height: 1.7em;
	color: var(--white-color);
}

.sidebar-cta-box-content ul{
	list-style: none;
	padding: 0;
	margin: 30px 0 0 0;
}

.sidebar-cta-box-content ul li{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 600;
    line-height: 1.3em;
	color: var(--white-color);
	margin-bottom: 15px;
}

.sidebar-cta-box-content ul li:last-child{
	margin-bottom: 0;
}

.sidebar-cta-box-content ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-box-content ul li a:hover{
	color: var(--accent-color);
}

.sidebar-cta-box-content ul li img{
	max-width: 20px;
}

.page-single-image{
	margin-bottom: 40px;
}

.page-single-image figure{
	display: block;
	border-radius: 20px;
}

.page-single-image img{
	width: 100%;
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
	border-radius: 20px;
}

.collection-entry{
    margin-bottom: 80px;
}

.collection-entry p{
    margin-bottom: 20px;
}

.collection-entry h2{
    font-size: 30px;
    margin-bottom: 20px;
}

.collection-entry h3{
    font-size: 16px;
	margin-bottom: 8px;
}

.collection-entry p:last-child,
.collection-entry h2:last-child,
.collection-entry h3:last-child{
    margin-bottom: 0;
}

.collection-entry ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.collection-entry ul li{
    position: relative;
    width: calc(50% - 10px);
	font-family: var(--accent-font);
	line-height: 1.6em;
	text-transform: uppercase;
	color: var(--primary-color);
	padding-left: 35px;
}

.collection-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 22px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.collection-highlights-box,
.collection-feature-box{
    margin-top: 80px;
}

.collection-highlights-counter-box{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 10px;
	margin-top: 40px;
}

.collection-highlights-image{
	margin-bottom: 10px;
}

.collection-highlights-image figure{
    display: block;
    border-radius: 14px;
}

.collection-highlights-image img{
    width: 100%;
    aspect-ratio: 1 / 0.43;
    object-fit: cover;
    border-radius: 14px;
}

.collection-highlights-item-list{
    display: flex;
	flex-wrap: wrap;
	gap: 40px 60px;
	padding: 20px;
}

.collection-highlights-item{
    position: relative;
	width: calc(33.33% - 40px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.collection-highlights-item::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -30px;
	background: var(--divider-color);
	width: 1px;
	height: 100%;
}

.collection-highlights-item:nth-child(3n + 3):before,
.collection-highlights-item:last-child:before{
    display: none;
}

.collection-highlights-item .icon-box img{
    width: 100%;
    max-width: 50px;
}

.collection-highlights-item-content{
    width: calc(100% - 70px);
}

.collection-highlights-item-content h2{
	font-size: 30px;
    line-height: 1.5em;
	margin: 0;
}

.collection-highlights-item-content p{
	line-height: normal;
	margin: 5px 0 0 0;
}

.collection-feature-item-list{
	margin-top: 40px;
}

.collection-feature-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
    border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.collection-feature-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.collection-feature-item .icon-box img{
    width: 100%;
    max-width: 60px;
}

.collection-feature-item-content{
	width: calc(100% - 75px);
}
/************************************/
/*** 	 19. Blog Archive css     ***/
/************************************/

.page-blog{
    padding: 100px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    font-weight: 600;
	line-height: 1em;
    margin: 0 5px;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/*** 	 20. Blog Single css      ***/
/************************************/

.page-single-post{
	padding: 100px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
	width: auto;
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.5;
	object-fit: cover;
	border-radius: 20px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-family: var(--accent-font);
	font-weight: 400;
	line-height: 1.5em;
	margin: 0 0 0.5em;
}

.post-entry h1{
	font-size: 50px;
}

.post-entry h2{
	font-size: 30px;
}

.post-entry h3{
	font-size: 242px;
}

.post-entry h4{
	font-size: 20px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 16px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol:last-child,
.post-entry ul:last-child{
    margin-bottom: 0;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 10px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--accent-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 14px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 20px;
}

.post-entry blockquote p{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 2em;
	color: var(--white-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-family: var(--accent-font);
    font-size: 16px;
	font-weight: 400;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
	font-family: var(--default-font);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 100px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	border: 1px solid var(--divider-color);
    color: var(--primary-color);
	border-radius: 100px;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--accent-color);
	color: var(--white-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/***      21. Events Page css     ***/
/************************************/

.page-events{
	padding: 100px 0 70px;
}

/************************************/
/***    22. Event Single css      ***/
/************************************/

.page-event-single{
	padding: 100px 0;
}

.event-category-item-list{
    padding: 30px;
}

.event-category-item{
    display: flex;
    flex-wrap: wrap;
	align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* The icon in these rows is a <span>, never an <img>: keep the image rule
   harmless and size the real icon at each breakpoint instead. */
.event-category-item img{
	width: auto;
	max-width: 24px;
}

/* Sidebar info rows. The label sits inline with its value - the previous
   flex + space-between wrapper pushed a long value onto its own line where it
   inherited the label's bold/primary treatment, so every point read as two
   entries, and the bare descendant `p span` also overrode the <span class="money">
   widget on the price rows (stacking prefix / amount / suffix vertically). */
.event-category-item p{
	width: calc(100% - 34px);
	display: block;
	font-size: 15px;
	line-height: 1.6em;
	margin: 0;
}

.event-category-item p > span:first-child{
	display: inline;
	font-weight: 600;
	color: var(--primary-color);
}

.event-category-item p .money{
	display: inline-flex;
	font-weight: 400;
	color: inherit;
}

.event-category-social-links{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.event-category-social-links p{
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

.event-category-social-links ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
}

.event-category-social-links ul li{
	border: none;
	margin: 0;
	padding: 0;
}

.event-category-social-links ul li a{
	width: 30px;
	height: 30px;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.event-category-social-links ul li a:hover{
	color: var(--white-color);
	background: var(--accent-color);
}

.event-category-social-links ul li a::before{
	display: none;
}

.page-category-list .event-category-social-links ul li a i{
	font-size: 14px;
	color: inherit;
}

.event-entry{
    margin-bottom: 80px;
}

.event-entry p{
    margin-bottom: 20px;
}

.event-entry h2{
    font-size: 30px;
    margin-bottom: 20px;
}

.event-entry h3{
    font-size: 16px;
	margin-bottom: 8px;
}

.event-entry p:last-child,
.event-entry h2:last-child,
.event-entry h3:last-child{
    margin-bottom: 0;
}

.event-information-box,
.event-exhibition-box,
.event-featured-box{
	margin-top: 80px;
}

.event-info-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 30px 0 25px;
}

.event-info-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}

.event-info-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.event-info-item .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.event-info-item:hover .icon-box:before{
	transform: scale(1) rotate(180deg);
}

.event-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.event-exhibition-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.event-exhibition-items-list .team-item{
	width: calc(33.33% - 20px);
	height: auto;
	margin: 0;
}

.event-exhibition-items-list .team-item .team-item-content h2{
	font-size: 16px;
	color: var(--primary-color);
	margin: 0px;
}

.event-exhibition-items-list .team-item .team-item-social-list ul{
	gap: 8px;
}

.event-exhibition-items-list .team-item .team-item-social-list ul li a{
	width: 36px;
	height: 36px;
}

.event-exhibition-items-list .team-item .team-item-content p{
	color: var(--text-color);
}

.event-feature-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.event-feature-item{
	position: relative;
	width: calc(50% - 15px);
	min-height: 330px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	overflow: hidden;
}

.event-feature-item::before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--accent-color);
	border-radius: 999px 999px 0 0;
	transition: all 0.4s ease-in-out;
}

.event-feature-item:hover:before{
	height: 100%;
	border-radius: 0;
}

.event-feature-item .icon-box{
	position: relative;
	z-index: 2;
}

.event-feature-item .icon-box img{
	width: 100%;
	max-width: 50px;
	transition: all 0.5s ease-in-out;
}

.event-feature-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.event-feature-item-content{
	position: relative;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 2;
}

.event-feature-item:hover  .event-feature-item-content{
	border-color: var(--dark-divider-color);
}

.event-feature-item-content h3,
.event-feature-item-content p{
	transition: all 0.3s ease-in-out;
}

.event-feature-item:hover .event-feature-item-content h3,
.event-feature-item:hover .event-feature-item-content p{
	color: var(--white-color);
}

/************************************/
/***    	23. Team Page css     ***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

.page-team .team-item-content h2{
	color: var(--primary-color);
}

.page-team .team-item-content p{
	color: var(--text-color);
}

/************************************/
/***  	24. Team Single css       ***/
/************************************/

.page-team-single{
	padding: 100px 0;
}

.team-single-image{
	margin-bottom: 30px;
}

.team-single-image figure{
	display: block;
	border-radius: 20px;
}

.team-single-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.155;
	object-fit: cover;
	border-radius: 20px;
}

.team-member-about{
	margin-bottom: 80px;
}

.team-contact-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.team-contact-item{
	width: calc(50% - 15px);
	background: var(--secondary-color);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 30px;
}

.team-contact-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.team-contact-item .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.team-contact-item:hover .icon-box:before{
	transform: scale(1) rotate(180deg);
}

.team-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-contact-item-content{
	width: calc(100% - 65px);
}

.team-contact-item-content h3{
	font-size: 16px;
}

.team-contact-item-content p{
	margin: 5px 0 0 0;
}

.team-member-expertise-box{
	margin-bottom: 80px;
}

.member-expertise-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.member-expertise-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.member-expertise-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

.member-expertise-item-content{
	width: calc(100% - 65px);
}

.member-expertise-item-content h3{
	font-size: 16px;
}

.member-expertise-item-content p{
	margin: 8px 0 0 0;
}

.team-skillbar-image-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.team-expert-skills-list,
.team-skillbar-image{
	width: calc(50% - 25px);
	align-content: center;
}

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.skills-progress-bar .skill-data{
    display: flex;
	align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-size: 16px;
	font-weight: 400;	
    line-height: normal;
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--white-color);
    border-radius: 10px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-color);
    border-radius: 10px;
}

.team-skillbar-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.team-skillbar-image figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.61;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***  25. Testimonials Page css   ***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

.page-testimonials .testimonial-item{
	background-color: var(--secondary-color);
	background-image: url('../images/icon-testimonial-item-quote-2.svg');
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-testimonials .testimonial-item .testimonial-item-author{
	border-color: var(--divider-color);
}

.page-testimonials .testimonial-item .testimonial-author-content p,
.page-testimonials .testimonial-item .testimonial-item-content p{
	color: var(--text-color);
}

.page-testimonials .testimonial-item .testimonial-author-content h2{
	color: var(--primary-color);
}

/************************************/
/*** 	26. Image Gallery css     ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
	overflow-x: clip;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.82;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***  26b. Photo Gallery css     ***/
/************************************/

/* Category filter bar */

.gallery-filter{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 45px;
}

.gallery-filter-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-decoration: none;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 12px 22px;
	transition: all 0.3s ease-in-out;
}

.gallery-filter-btn:hover{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.gallery-filter-btn.active,
.gallery-filter-btn.active:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.gallery-filter-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 100px;
	background: rgb(16 59 29 / 8%);
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.gallery-filter-btn:hover .gallery-filter-count,
.gallery-filter-btn.active .gallery-filter-count{
	background: rgb(255 255 255 / 22%);
}

/* Grid items: clickable card + hover reveal */

.page-gallery-box .gallery-open{
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
	text-align: left;
	cursor: none;
	border-radius: 20px;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.page-gallery-box .gallery-open:focus-visible{
	outline: 3px solid var(--accent-color);
	outline-offset: 4px;
}

.page-gallery-box .gallery-open figure{
	margin: 0;
}

.gallery-item-badge{
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 3;
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
	padding: 8px 14px;
	opacity: 0;
	transform: translateY(-8px);
	transition: all 0.4s ease-in-out;
	pointer-events: none;
}

.gallery-item-overlay{
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	background: linear-gradient(to top, rgb(16 59 29 / 88%) 0%, rgb(16 59 29 / 40%) 60%, rgb(16 59 29 / 15%) 100%);
	opacity: 0;
	transition: all 0.4s ease-in-out;
	pointer-events: none;
}

.gallery-open:hover .gallery-item-overlay,
.gallery-open:focus-visible .gallery-item-overlay{
	opacity: 1;
}

.gallery-open:hover .gallery-item-badge,
.gallery-open:focus-visible .gallery-item-badge{
	opacity: 1;
	transform: translateY(0);
}

.gallery-item-view{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 20px;
	opacity: 0;
	transform: scale(0.4);
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-open:hover .gallery-item-view,
.gallery-open:focus-visible .gallery-item-view{
	opacity: 1;
	transform: scale(1);
}

.gallery-item-overlay h3{
	font-size: 20px;
	line-height: 1.35;
	font-weight: 600;
	text-align: center;
	color: var(--white-color);
	margin: 0;
	opacity: 0;
	transform: translateY(12px);
	transition: all 0.4s ease-in-out 0.05s;
}

.gallery-open:hover .gallery-item-overlay h3,
.gallery-open:focus-visible .gallery-item-overlay h3{
	opacity: 1;
	transform: translateY(0);
}

/* Staggered entrance when a category or page changes */

.gallery-item-enter{
	animation: galleryItemIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes galleryItemIn{
	from{
		opacity: 0;
		transform: translateY(28px) scale(0.97);
	}
	to{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Images are guarded against casual save/drag - the wrapper handlers
   catch right-click, and pointer-events keep the native menu away. */

.page-gallery-box img,
.gallery-lightbox img{
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Pagination disabled state (prev on page 1 / next on last page) */

.page-pagination ul li.disabled a{
	opacity: 0.4;
	pointer-events: none;
}

/* Lightbox popup - dark immersive viewer under the brand theme */

.gallery-lightbox{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 100dvh, not inset's default: a fixed overlay with inset:0 resolves to
	   the *large* viewport on mobile, so the browser toolbar hid the bottom
	   of the dialog and looked like a cut-off image. */
	height: 100dvh;
	padding: clamp(12px, 3vh, 28px);
}

.gallery-lightbox-backdrop{
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1100px 560px at 75% -10%, rgb(219 145 12 / 14%), transparent 62%),
		radial-gradient(900px 500px at 10% 110%, rgb(16 59 29 / 55%), transparent 60%),
		rgb(6 16 9 / 96%);
	animation: galleryFadeIn 0.4s ease both;
}

.gallery-lightbox-dialog{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(1100px, 100%);
	/* A DEFINITE height (the padded 100dvh lightbox is its containing
	   block), not just a max-height: with only max-height the dialog's own
	   height stayed content-based, so no descendant of it had a definite
	   height to resolve against - the stage could not absorb the leftover
	   space and the photo's `height: 100%` silently fell back to `auto`
	   (intrinsic size), which the shorter box then cropped. With height
	   fixed the dialog can never grow past the screen either. */
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: none;
	animation: galleryDialogIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery-lightbox-dialog::-webkit-scrollbar{
	display: none;
}

.gallery-lightbox-topbar{
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 12px 10px 18px;
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 100px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.gallery-lightbox-badges{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.gallery-lightbox-badge{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 9px 16px;
}

.gallery-lightbox-count{
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgb(255 255 255 / 75%);
}

.gallery-lightbox-count .count-sep{
	color: var(--accent-color);
	margin: 0 2px;
}

.gallery-lightbox-close{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
	background: rgb(255 255 255 / 8%);
	color: var(--white-color);
	font-size: 17px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.gallery-lightbox-close:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: rotate(90deg);
}

.gallery-lightbox-stage{
	position: relative;
	display: flex;
	flex-direction: column;
	/* The stage is the ONE flexible row of the dialog: it absorbs whatever
	   height is left over after the topbar, caption, share row and thumbnails
	   have taken theirs. The photograph therefore grows into the whole
	   remaining screen instead of sitting in a short letterboxed band. */
	flex: 1 1 auto;
	/* Flex-shrinkable: when the caption, share row and thumbnail strip add up
	   to more than the screen, this box gives up the space instead of pushing
	   the bottom of the dialog past the viewport. */
	min-height: 0;
	padding: clamp(10px, 2vw, 18px);
	background: linear-gradient(160deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: 24px;
}

.gallery-lightbox-image{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Definite height so `object-fit: contain` on the img can resolve - the
	   whole photograph is always shown, letterboxed rather than cropped or
	   zoomed. It grows with the stage (see above) so it is as tall as the
	   viewport allows. The floor is deliberately SMALL: it only stops the
	   box from collapsing, because a hard floor taller than the space left
	   after the caption, share row and filmstrip is exactly what pushed
	   that filmstrip (the prev/next photos) off the bottom of the popup. */
	flex: 1 1 auto;
	min-height: clamp(100px, 16dvh, 240px);
	width: 100%;
	min-width: 0;
	border-radius: 16px;
	overflow: hidden;
	background: rgb(0 0 0 / 40%);
}

.gallery-lightbox-image img{
	/* Absolutely pinned to the box (which has a definite height), so the
	   photo's `contain` fit resolves against the REAL box at every
	   breakpoint - a percentage/in-flow height here used to fall back to
	   the image's intrinsic size and get cropped by the box above it. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	animation: galleryImgIn 0.4s ease both;
}

.gallery-lightbox-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	color: var(--white-color);
	font-size: 18px;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
	transition: all 0.3s ease-in-out;
}

.gallery-lightbox-arrow.prev{
	left: clamp(16px, 2.5vw, 32px);
}

.gallery-lightbox-arrow.next{
	right: clamp(16px, 2.5vw, 32px);
}

.gallery-lightbox-arrow:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: translateY(-50%) scale(1.08);
}

.gallery-lightbox-info{
	padding: 2px 8px;
}

.gallery-lightbox-title{
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 10px;
}

.gallery-lightbox-title::before{
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 1em;
	border-radius: 4px;
	background: var(--accent-color);
}

.gallery-lightbox-desc{
	font-size: 16px;
	line-height: 1.75;
	color: rgb(255 255 255 / 72%);
	max-width: 85ch;
	margin-bottom: 4px;
}

.gallery-lightbox-foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 2px 8px;
}

.gallery-lightbox .tag-links{
	color: rgb(255 255 255 / 85%);
	gap: 10px;
}

.gallery-lightbox .post-tags .tag-links a{
	font-size: 14px;
	font-weight: 500;
	padding: 9px 16px;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 16%);
	color: var(--white-color);
}

.gallery-lightbox .post-tags .tag-links a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.gallery-lightbox .post-social-sharing{
	text-align: right;
}

.gallery-lightbox .post-social-sharing ul li a{
	width: 44px;
	height: 44px;
	border-color: rgb(255 255 255 / 18%);
	background: rgb(255 255 255 / 8%);
	color: var(--white-color);
}

.gallery-lightbox .post-social-sharing ul li:hover a{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.gallery-lightbox-thumbs{
	display: flex;
	gap: 10px;
	padding: 4px 8px 8px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
}

.gallery-lightbox-thumbs::-webkit-scrollbar{
	display: none;
}

.gallery-thumb{
	flex: 0 0 auto;
	width: 92px;
	height: 66px;
	padding: 0;
	border: 2px solid rgb(255 255 255 / 12%);
	border-radius: 12px;
	overflow: hidden;
	background: rgb(255 255 255 / 6%);
	cursor: pointer;
	opacity: 0.45;
	filter: grayscale(80%);
	transition: all 0.3s ease-in-out;
}

.gallery-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-thumb:hover{
	opacity: 0.9;
	filter: none;
}

.gallery-thumb.active{
	opacity: 1;
	filter: none;
	border-color: var(--accent-color);
	background: rgb(219 145 12 / 12%);
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgb(219 145 12 / 35%);
}

@keyframes galleryFadeIn{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

@keyframes galleryDialogIn{
	from{
		opacity: 0;
		transform: translateY(26px) scale(0.96);
	}
	to{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes galleryImgIn{
	from{
		opacity: 0;
		transform: scale(1.03);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}


/************************************/
/*** 	27.  Video Gallery css    ***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	border-radius: 20px;
	cursor: none;
	overflow: hidden;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--white-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.82;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  28. FAQ's Page css      ***/
/************************************/

.page-faqs{
    padding: 100px 0;
}

.page-faqs .page-single-faqs{
    margin-bottom: 80px;
}

.page-faqs .page-single-faqs:last-child{
    margin-bottom: 0px;
}

/************************************/
/***   29. Contact Us Page css    ***/
/************************************/

.page-contact-us{
    padding: 100px 0 50px;
}

.contact-us-content{
	margin-right: 20px;
}

.contact-us-item{
	min-width: 410px;
	background: var(--secondary-color);
	border-radius: 10px;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 30px;
	margin-bottom: 30px;
}

.contact-us-item:last-child{
	margin-bottom: 0;
}

.contact-us-item .icon-box img{
	width: 100%;
    max-width: 40px;
}

.contact-us-item-content{
	width: calc(100% - 55px);
}

.contact-us-item-content p{
	margin: 0 0 5px;
}

.contact-us-item-content h3{
	font-size: 16px;
}

.contact-us-item-content h3 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.contact-us-item-content h3 a:hover{
	color: var(--accent-color);
}

.contact-us-form{
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 40px;
}

.contact-us-form .section-title{
	margin-bottom: 30px;
}

.contact-us-form .section-title h2{
	font-size: 24px;
}

.contact-us-form .section-title p{
	margin: 10px 0 0 0;
}

.contact-form .form-group{
	margin: 0 0 30px 0;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25em;
	background: var(--bg-color);
	color: var(--primary-color);
	border-radius: 10px;
	padding: 15px 20px;
	border: none;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--primary-color);
	opacity: 50%;
}

.contact-form-btn{
	margin-top: 10px;
}

/* Contact form - React-managed validation states */
.contact-form .form-control.is-invalid{
	outline: 2px solid var(--error-color);
	outline-offset: -1px;
}

.contact-form .help-block.with-errors{
	margin-top: 8px;
}

.contact-form .help-block.with-errors:empty{
	margin-top: 0;
}

.contact-form-btn .btn-whatsapp i{
	font-size: 19px;
	margin-right: 8px;
}

.contact-form-status{
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}

/* WhatsApp glyph in the contact info card - sized to match the SVG icons */
.contact-us-item .icon-box i{
	display: inline-block;
	width: 40px;
	text-align: center;
	font-size: 34px;
	line-height: 1;
	color: var(--accent-color);
}


.google-map{
    padding: 50px 0 100px;
}

.google-map-iframe{
	width: 100%;
	height: 600px;
	border-radius: 20px;
	overflow: hidden;
}

.google-map-iframe iframe{
	width: 100%;
	height: 100%;
}

/************************************/
/***    30. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 600px;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      31. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1366px){

	.who-we-are::before{
		width: 250px;
		height: 403px;
	}
}

@media only screen and (max-width: 1024px){

	.main-menu ul li{
		margin: 0;
	}

	.section-title-content{
        margin-top: 10px;
    }

	.section-title-content p{
		margin-bottom: 10px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.section-content-btn .section-btn{
        margin-top: 20px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}
	
	.hero-content{
		height: auto;
		margin-bottom: 30px;
	}

	.hero-image{
		height: auto;
		max-width: 500px;
		margin: 0 auto;
	}

	.about-us-image-box{
		height: auto;
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-image.box-2 figure img,
	.about-us-image.box-2 figure,
	.about-us-image.box-2{
		height: auto;
	}

	.about-us-image figure img{
		aspect-ratio: 1 / 1.1;
	}

	.about-us::before{
		right: -40px;
    	width: 224px;
    	height: 250px;
		opacity: 50%;
	}

	.why-choose-items-list{
		gap: 40px;
	}

	.why-choose-item-content{
		padding-top: 10px;
		margin-top: 15px;
	}

	.why-choose-image{
		margin-top: 30px;
	}

	.exhibition-items-list .col-xl-4:nth-child(3n + 2) .exhibition-item{
		flex-direction: column;
	}
	
	.exhibition-items-list .col-xl-4:nth-child(3n + 2) .exhibition-item .exhibition-item-header{
		padding-top: 60px;
		padding-bottom: 45px;		
	}

	.team-item-header{
		margin-bottom: 20px;
	}

	.team-item-image img{
		aspect-ratio: 1 / 1;
	}

	.who-we-are::before{
		opacity: 60%;
        width: 180px;
        height: 290px;
    }

	.testimonial-item{
		min-height: 340px;
		background-size: 180px auto;
		padding: 30px;
	}

	.footer-header{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.about-footer{
		margin-bottom: 30px;
	}

	.about-footer-content{
		margin-top: 15px;
	}

	.footer-social-links{
		margin-top: 20px;
	}

	.footer-links-box{
		margin-left: 0;
	}

	.footer-links h2{
		margin-bottom: 20px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.footer-opening-hour-box .footer-links{
		margin-bottom: 30px;
	}

	.footer-copyright{
		margin-top: 30px;
		padding: 30px 0;
	}

	.our-history-content{
		height: auto;
		margin: 0 0 30px 0;
	}

	.history-btn{
		margin-top: 30px;
	}

	.history-images-boxes{
		max-width: 740px;
		margin: 0 auto;
	}

	.faq-content-box{
		height: auto;
		margin: 0 0 30px 0;
	}

	.our-faqs .faq-accordion{
		margin-left: 0px;
	}

	.page-single-sidebar{
		margin-right: 0;
	}

	.page-category-list .page-category-list-title{
		font-size: 14px;
		padding: 15px 20px;
	}

	.page-category-list ul{
		padding: 20px;
	}

	.page-category-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

	.page-single-image{
		margin-bottom: 30px;
	}

	.collection-entry{
		margin-bottom: 50px;
	}

	.collection-entry ul{
		margin-top: 30px;
	}

	.collection-entry ul li{
		font-size: 14px;
		padding-left: 30px;
	}

	.collection-entry ul li::before{
		font-size: 20px;
	}

	.collection-highlights-box,
	.collection-feature-box{
		margin-top: 50px;
	}

	.collection-highlights-counter-box{
		margin-top: 30px;
	}

	.collection-highlights-item-list{
		gap: 30px;
	}

	.collection-highlights-item{
		width: calc(33.33% - 20px);
		gap: 10px;
	}

	.collection-highlights-item::before{
		right: -15px;
	}

	.collection-highlights-item .icon-box img{
		max-width: 44px;
	}

	.collection-highlights-item-content{
		width: calc(100% - 54px);
	}

	.collection-highlights-item-content h2{
		font-size: 24px;
	}

	.collection-feature-item-list{
		margin-top: 30px;
	}

	.collection-feature-item{
		gap: 15px 10px;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.collection-feature-item .icon-box img{
		max-width: 50px;
	}

	.collection-feature-item-content{
		width: calc(100% - 60px);
	}

	.event-category-item-list{
		padding: 20px;
	}

	.event-category-item{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	/* The sidebar icon is a span, not an img - the old `img` rule never
	   matched, so the 24px icon + 10px gap overflowed the row by 4px here. */
	.svc-info-icon{
		width: 20px;
		height: 20px;
		font-size: 13px;
	}

	.event-category-item img{
		max-width: 20px;
	}

	.event-category-item p{
		width: calc(100% - 30px);
	}

	.event-category-social-links ul{
		padding: 0;
	}

	.event-category-social-links ul li{
		margin: 0;
		padding: 0;
	}

	.event-entry{
		margin-bottom: 50px;
	}

	.event-information-box,
	.event-exhibition-box,
	.event-featured-box{
		margin-top: 50px;
	}

	.event-info-item{
		padding: 20px;
	}

	.event-exhibition-items-list .team-item{
		width: calc(50% - 15px);
	}

	.event-exhibition-items-list,
	.event-feature-items-list{
		margin-top: 30px;
	}

	.team-member-about{
		margin-bottom: 50px;
	}

	.team-contact-item{
		padding: 20px;
	}

	.team-member-expertise-box{
		margin-bottom: 50px;
	}

	.team-skillbar-image-box{
		gap: 30px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.team-expert-skills-list, .team-skillbar-image{
		width: calc(50% - 15px);
	}

	.contact-us-content{
		margin: 0 0 30px;
	}

	.contact-us-item{
		min-width: 100%;
		padding: 20px;
		margin-bottom: 20px;
	}

	.google-map-iframe{
		height: 500px;
	}
}

@media only screen and (max-width: 991px){

	.btn-default{
		padding: 15px 40px 15px 20px;
	}

	.btn-default::before{
		right: 20px;
	}

	.navbar{
		padding: 20px 0;
	}

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.section-row{
		margin-bottom: 40px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title.section-sub-heading,
	.section-title .section-sub-title{
		margin-bottom: 10px;
	}

	.section-title .section-sub-title{
		padding: 7px 15px 7px 35px;
	}

	.section-title .section-sub-title::before{
		left: 15px;
		width: 14px;
    	height: 14px;
	}

	.section-title h1{
		font-size: 38px;
	}

	.section-title h2{
		font-size: 24px;
	}

	.hero{
		padding: 140px 0 50px;
	}

	.hero.hero-image-layout,
	.hero.hero-video,
	.hero.hero-slider-layout{
		min-height: 750px;
	}

	.hero.hero-slider-layout .hero-content .section-title p,
	.hero.hero-image-layout .hero-content .section-title p{
		font-size: 16px;
	}

	.hero-image figure{
		height: auto;
	}

	.our-scrolling-ticker{
		padding: 15px 0;
	}

	.scrolling-ticker-box{
		--gap: 30px;
	}

	.scrolling-content span{
		font-size: 18px;
	}

	.about-us{
		padding: 50px 0;
	}

	.about-us-footer{
		margin-top: 30px;
		padding-top: 30px;
	}

	.about-author-box{
		gap: 10px;
	}

	.about-author-box-image img{
		max-width: 46px;
	}
	
	.about-author-box-content {
		width: calc(100% - 56px);
	}

	.our-collection{
		padding: 50px 0;
	}

	.collection-item-content{
		bottom: 20px;
		left: 20px;
		right: 20px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-item-counter-title h2{
		font-size: 26px;
	}

	.our-exhibitions{
		padding: 50px 0 20px;
	}

	.exhibition-items-list .col-xl-4:nth-child(3n + 2) .exhibition-item .exhibition-item-header,
	.exhibition-item-header{
		padding: 50px 40px 40px;
	}

	.exhibition-item-header .icon-box{
		margin-bottom: 30px;
	}

	.our-events{
		padding: 50px 0 20px;
	}

	.event-item-body{
		padding: 10px;
	}

	.event-item-content h2{
		font-size: 14px;
	}

	.event-item-content p{
		margin: 5px 0 0;
	}

	.event-item-meta{
		margin-top: 15px;
	}

	.event-item-meta ul li{
		margin-bottom: 10px;
	}

	.event-item-meta ul li img{
		max-width: 18px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.who-we-are{
		padding: 50px 0;
	}

	.who-we-are-image{
		width: 200px;
	}

	.who-we-are-image-box-2{
		margin-top: -160px;
	}

	.who-we-are .section-footer-text{
		margin-top: 25px;
	}

	.our-testimonials{
		padding: 50px 0;
	}

	.our-testimonials .section-footer-text{
		margin-top: 40px;
	}

	.our-blog{
		padding: 50px 0 20px;
	}

	.post-item-body{
		bottom: 20px;
		left: 20px;
		right: 20px;
	}

	.post-item-btn{
		margin-top: 15px;
		padding-top: 15px;
	}

	.main-footer{
		padding: 50px 0 0 0;
	}

	.footer-header .section-title,
	.footer-newsletter-box{
		max-width: 100%;
	}

	.footer-newsletter-box h3{
		font-size: 14px;
		margin-bottom: 15px;
	}

	.page-header{
		padding: 170px 0 90px;
	}

	.page-header-box h1{
		font-size: 38px;
	}

	.our-approach{
		padding: 50px 0;
	}

	.approach-item{
		min-height: 370px;
		padding: 30px;
	}

	.approach-item-content ul{
		margin-top: 30px;
		padding-top: 30px;
	}

	.our-history{
		padding: 50px 0;
	}

	.our-faqs{
		padding: 50px 0;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 14px;
		padding: 16px 45px 16px 20px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 20px;
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 16px 0px;
		margin: 0 20px;
	}

	.cta-box{
		padding: 50px 0 20px;
	}

	.cta-box-item{
		min-height: 300px;
		padding: 30px;
	}

	.cta-box-item-content ul{
		margin-top: 30px;
	}

	.page-collection{
		padding: 50px 0 20px;
	}

	.page-collection-single{
		padding: 50px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin-bottom: 30px;
	}

	.sidebar-cta-box{
		min-height: 300px;
	}

	.collection-entry h2{
		font-size: 24px;
		margin-bottom: 15px;
	}

	.collection-entry p{
		margin-bottom: 15px;
	}

	.collection-highlights-item-content h2{
        font-size: 24px;
		margin-bottom: 5px;
    }

	.collection-feature-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.page-blog{
		padding: 50px 0;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
        padding: 50px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 24px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }

	.post-entry ol li,
	.post-entry ul li{
		font-size: 16px;
		margin-bottom: 10px;
	}
    
    .post-entry blockquote{
        background-position: 20px 25px;
        background-size: 35px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 15px;
    }
    
    .post-entry blockquote p{
        font-size: 14px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-events{
		padding: 50px 0 20px;
	}

	.page-event-single{
		padding: 50px 0;
	}

	.event-entry p{
		margin-bottom: 15px;
	}

	.event-entry h2{
		font-size: 24px;
		margin-bottom: 15px;
	}

	.event-info-items-list{
		margin: 20px 0 15px;
	}

	.event-feature-item{
		min-height: 300px;
		padding: 20px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

	.page-team-single{
		padding: 50px 0;
	}

	.team-single-image figure img{
		aspect-ratio: 1 / 0.8;
	}

	.page-testimonials{
		padding: 50px 0 20px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

	.page-faqs{
		padding: 50px 0;
	}

	.page-faqs .page-single-faqs{
		margin-bottom: 50px;
	}

	.page-contact-us{
		padding: 50px 0 25px;
	}

	.contact-us-form{
		padding: 30px;
	}

	.contact-us-form .section-title h2{
		font-size: 22px;
	}

	.google-map{
		padding: 25px 0 50px;
	}

	.error-page{
		padding: 50px 0;
	}
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 26px;
	}

	.section-title h2{
		font-size: 20px;
	}

	.hero-image{
		max-width: 280px;
	}

	.our-scrolling-ticker{
		padding: 12px 0;
	}

	.scrolling-ticker-box{
        --gap: 20px;
    }

	.scrolling-content span{
        font-size: 16px;
    }

	.about-us-image.box-1 figure{
		border-width: 5px;
		margin-right: -80px;
	}

	.about-us-item-list{
		gap: 20px;
	}

	.about-us-item{
		width: 100%;
		gap: 10px;
	}

	.about-us-item .icon-box img{
		max-width: 40px;
	}

	.about-us-item-content{
		width: calc(100% - 50px);
	}

	.about-us-item-content h3{
		font-size: 14px;
	}

	.about-us-item-content p{
		margin: 5px 0 0 0;
	}

	.about-us-footer{
		gap: 20px;
	}

	.about-author-box-content h3{
		font-size: 14px;
	}

	.collection-item-content h2{
		font-size: 14px;
	}

	.section-footer-text ul li{
		font-size: 14px;
	}

	.section-footer-text ul li{
		margin-right: 5px;
	}

	.section-footer-text .section-footer-border-list li{
		padding-right: 7px;
	}

	.why-choose-items-list{
		gap: 30px;
	}

	.why-choose-item-header{
		margin-bottom: 15px;
	}

	.why-choose-item-counter-title h2{
		font-size: 22px;
	}

	.why-choose-item-title h3{
		font-size: 14px;
	}

	.why-choose-image{
		margin: 30px 0;
	}

	.exhibition-item-content h3{
		font-size: 14px;
	}

	.exhibition-item-content p{
		margin-top: 5px;
	}

	.event-item-btn a{
		width: 40px;
		height: 40px;
	}

	.event-item-btn a img{
		max-width: 12px;
	}

	.team-item-header{
        margin-bottom: 15px;
    }

	.team-item-content h2{
		font-size: 14px;
	}

	.team-item-content p{
		margin-top: 5px;
	}

	.who-we-are::before{
        width: 100px;
        height: 161px;
    }

	.who-we-are-image-boxes{
		padding: 20px 0 10px;
	}

	.who-we-are-image{
        width: 120px;
    }

	.who-we-are-image-box-2{
        margin-top: -90px;
    }

	.who-we-are-image figure{
		border-width: 5px;
	}

	.testimonial-item{
        min-height: auto;
		gap: 20px;
		background-position: top 25% center;
        background-size: 140px auto;
        padding: 20px;
    }

	.testimonial-item-rating{
		margin-bottom: 10px;
	}

	.testimonial-item-content p{
		font-size: 16px;
	}

	.testimonial-item-author{
		padding-top: 20px;
	}

	.testimonial-author-content h2{
		font-size: 14px;
	}

	.post-item-content h2{
		font-size: 14px;
	}

	.footer-newsletter-box h3{
		font-size: 12px;
	}

	.footer-newsletter-box .form-group .form-control{
		width: calc(100% - 40px);
	}

	.footer-newsletter-box .form-group .newsletter-btn{
		width: 44px;
		height: 44px;
	}

	.footer-newsletter-box .form-group .newsletter-btn i{
		font-size: 20px;
	}

	.footer-social-links ul{
		gap: 10px;
	}

	.footer-opening-hour-box,
	.footer-links{
		max-width: 100%;
	}

	.footer-links h2{
		font-size: 14px;
		margin-bottom: 15px;
	}

	.footer-copyright{
        padding: 15px 0;
    }

	.page-header-box h1{
        font-size: 26px;
    }

	.approach-item{
        min-height: 300px;
        padding: 20px;
    }

	.approach-item-content h3{
		font-size: 14px;
	}

	.approach-item-content ul{
        margin-top: 20px;
        padding-top: 20px;
    }

	.approach-item-content ul li{
		padding: 8px 15px 8px 38px;
	}

	.approach-item-content ul li::before{
		left: 15px;
		width: 14px;
    	height: 14px;
	}

	.history-items-list{
		gap: 15px;
	}

	.history-item{
		width: calc(50% - 7.5px);
		flex-direction: column-reverse;
		text-align: center;
		padding: 15px 12px;
	}

	.history-item-content{
		width: 100%;
	}

	.history-image.box-1 figure{
		height: auto;
		margin-right: -90px;
	}

	.history-image.box-2 figure{
		border-width: 3px;
		border-radius: 23px;
	}

	.faq-cta-box{
		max-width: 100%;
		padding: 20px;
	}

	.faq-cta-box-title h2{
		font-size: 14px;
	}

	.faq-cta-btn{
		margin-top: 20px;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 15px;
	}

	.faq-accordion .accordion-header .accordion-button{
        font-size: 12px;
        padding: 12px 35px 12px 15px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
        right: 15px;
        font-size: 16px;
    }

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 0px;
        margin: 0 15px;
    }

	.cta-box-item{
        min-height: auto;
        padding: 20px;
    }

	.cta-box-item .icon-box{
		width: 50px;
		height: 50px;
	}

	.cta-box-item .icon-box img{
		max-width: 24px;
	}

	.cta-box-item-content h3{
		font-size: 14px;
	}

	.cta-box-item-content p{
		margin: 5px 0 0 0;
	}

	.cta-box-item-content ul{
        margin-top: 20px;
    }

	.page-category-list .page-category-list-title{
		font-size: 12px;
	}

	.sidebar-cta-box{
		min-height: 270px;
		gap: 20px;
		padding: 20px;
    }

	.sidebar-cta-box-content{
		padding-top: 20px;
	}

	.sidebar-cta-box-content h2{
		font-size: 14px;
	}

	.sidebar-cta-box-content ul{
		margin-top: 20px;
	}

	.sidebar-cta-box-content ul li{
		font-size: 16px;
		gap: 8px;
		margin-bottom: 10px;
	}

	.sidebar-cta-box-content ul li img{
		max-width: 18px;
	}

	.page-single-image{
        margin-bottom: 20px;
    }

    .page-single-image img{
        aspect-ratio: 1 / 0.72;
    }

	.collection-entry{
        margin-bottom: 40px;
    }

	.collection-entry h2{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.collection-entry h3{
		font-size: 14px;
	}

	.collection-entry ul{
		gap: 15px;
		margin-top: 20px;
	}

	.collection-entry ul li{
		width: 100%;
        font-size: 12px;
        padding-left: 25px;
    }

	.collection-entry ul li::before{
        font-size: 18px;
    }

	.collection-highlights-box,
	.collection-feature-box{
        margin-top: 40px;
    }

	.collection-highlights-image img{
		aspect-ratio: 1 / 0.55;
	}

	.collection-highlights-item-list{
        gap: 20px;
		padding: 10px;
    }

	.collection-highlights-item{
		width: calc(33.33% - 13.33px);
		flex-direction: column;
		text-align: center;
	}

	.collection-highlights-item::before{
        right: -10px;
    }

	.collection-highlights-item .icon-box img{
        max-width: 40px;
    }

	.collection-highlights-item-content{
		width: 100%;
	}

	.collection-highlights-item-content h2{
		font-size: 20px;
		margin-bottom: 5px;
	}

	.collection-highlights-item-content p{
		font-size: 14px;
	}

	.collection-feature-item-content{
        width: 100%;
    }

	.post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		background-position: 20px 20px;
		padding: 60px 20px 20px 20px;
	}

	.post-entry blockquote p{
		font-size: 12px;
	}

	.post-entry h2{
		font-size: 20px;
	}
	
	.tag-links{
		font-size: 14px;
		gap: 12px;
	}

	.event-entry{
        margin-bottom: 40px;
    }

	.event-entry h2{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.event-entry h3{
		font-size: 14px;
	}

	.event-information-box,
	.event-exhibition-box,
	.event-featured-box{
		margin-top: 40px;
	}

	.event-info-items-list{
		gap: 20px;
	}

	.event-info-item{
		width: 100%;
		padding: 15px;
	}

	.event-exhibition-items-list{
		gap: 20px;
	}

	.event-exhibition-items-list .team-item{
        width: 100%;
    }

	.event-exhibition-items-list .team-item .team-item-content h2{
		font-size: 14px;
	}

	.event-feature-items-list{
		gap: 20px;
	}

	.event-feature-item{
		width: 100%;
		min-height: 250px;
		gap: 20px;
	}

	.event-feature-item-content{
		padding-top: 20px;
	}

	.team-single-image figure img{
        aspect-ratio: 1 / 1;
    }

	.team-member-about{
        margin-bottom: 40px;
    }

	.team-contact-list{
		gap: 20px;
	}

	.team-contact-item{
        width: 100%;
		padding: 15px;
    }

	.team-contact-item-content h3{
		font-size: 14px;
	}

	.member-expertise-item{
		width: 100%;
	}

	.member-expertise-item .icon-box img{
		max-width: 40px;
	}

	.member-expertise-item-content{
		width: calc(100% - 55px);
	}

	.member-expertise-item-content h3{
		font-size: 14px;
	}

	.member-expertise-item-content p{
		margin-top: 5px;
	}

	.team-expert-skills-list,
	.team-skillbar-image{
        width: 100%;
    }

	.skills-progress-bar{
		margin-bottom: 20px;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 10px;
	}

	.page-faqs .page-single-faqs{
        margin-bottom: 40px;
    }

	.page-faqs .page-single-faqs .section-title{
		margin-bottom: 20px;
	}

	.contact-us-item{
        padding: 15px;
		gap: 10px;
        margin-bottom: 20px;
    }

	.contact-us-item .icon-box img{
		max-width: 34px;
	}

	.contact-us-item-content h3{
		font-size: 14px;
	}

	.contact-us-item-content{
		width: calc(100% - 44px);
	}

	.contact-us-form{
        padding: 20px;
    }

	.contact-us-form .section-title{
		margin-bottom: 20px;
	}

	.contact-us-form .section-title h2{
		font-size: 20px;
	}

	.contact-us-form .section-title p{
		margin-top: 5px;
	}

	.contact-form .form-group{
		margin: 0 0 20px 0;
	}

	.google-map-iframe{
        height: 350px;
    }
}
/************************************/
/**** 	 Ceylon Loop additions   ***/
/************************************/

/* ------------------------------------------------
   Sticky header - .sticky-active is toggled by
   components/Header.jsx when scrollY > 100.
   The shell is pinned to the viewport so the bar is
   never half-scrolled-out between 0 and 100px.
   ------------------------------------------------ */
header.main-header{
	position: fixed;
}

header.main-header .header-sticky{
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
header.main-header .navbar{
	transition: padding 0.4s ease;
}

header.main-header .navbar-brand{
	display: block;
	line-height: 0;
}

header.main-header .navbar-brand img{
	height: 64px;
	width: auto;
	transition: height 0.4s ease;
}

header.main-header.sticky-active .header-sticky{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--primary-color);
	border-radius: 0;
	border-bottom: 1px solid var(--dark-divider-color);
	box-shadow: 0 16px 40px rgb(16 59 29 / 18%);
	animation: header-sticky-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 100;
}

header.main-header.sticky-active .navbar{
	padding: 18px 0;
}

@keyframes header-sticky-in{
	from{
		transform: translateY(-100%);
	}
	to{
		transform: translateY(0);
	}
}

@media only screen and (max-width: 991px){
	header.main-header .navbar-brand img{
		height: 52px;
	}

	header.main-header.sticky-active .navbar{
		padding: 12px 0;
	}
}

/* ------------------------------------------------
   Scroll to top - components/ScrollToTop.jsx
   ------------------------------------------------ */
.scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 52px;
	height: 52px;
	cursor: pointer;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scroll-to-top:hover {
	transform: translateY(-3px) scale(1.05);
}

.scroll-to-top svg {
	position: absolute;
	top: 0;
	left: 0;
}

.scroll-to-top .scroll-track {
	stroke: var(--divider-color);
}

.scroll-to-top .scroll-progress {
	stroke: var(--accent-color);
	transition: stroke-dashoffset 0.1s linear;
}

.scroll-to-top .fa-arrow-up {
	position: relative;
	z-index: 2;
	color: var(--accent-color);
	font-size: 16px;
	transition: color 0.3s ease;
}

.scroll-to-top:hover .fa-arrow-up {
	color: var(--primary-color);
}

.footer-logo img{
	height: 64px;
	width: auto;
	max-width: none;
}

/* ------------------------------------------------
   Hero - per-slide content (app/page.jsx)
   ------------------------------------------------ */
.hero.hero-slider-layout .hero-image-slider .swiper-slide{
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero.hero-slider-layout .hero-image-slider .hero-slider-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-slider-layout .hero-image-slider .hero-slide-content{
	position: relative;
	z-index: 2;
}

.hero.hero-slider-layout .hero-image-slider .hero-slide-content .hero-content{
	padding: 140px 0 70px;
}

@media only screen and (max-width: 991px){
	.hero.hero-slider-layout .hero-image-slider .hero-slide-content .hero-content{
		padding: 120px 0 50px;
	}
}

/* ------------------------------------------------
   Airport booking flip cards - components/BookingSlider.jsx
   ------------------------------------------------ */
.booking-viewport{
	position: relative;
	overflow: hidden;
	/* Horizontal swipes belong to the slider, vertical still scrolls the page. */
	touch-action: pan-y;
}

/* While a finger is down the strip must not select text or ghost-drag an
   image from inside the card. */
.booking-viewport.is-dragging{
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

.booking-viewport.is-dragging *{
	cursor: grabbing;
}

.booking-track{
	display: flex;
	align-items: stretch;
	margin: 0 -12px;
	transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.booking-track.dragging{
	transition: none;
}

/* Previous / next steppers pinned to both edges of the strip; the left one
   is the one that walks the loop backwards. */.booking-nav{
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px;
	pointer-events: none;
	z-index: 4;
}

.booking-nav-btn{
	flex: 0 0 auto;
	width: clamp(40px, 4.4vw, 52px);
	height: clamp(40px, 4.4vw, 52px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 35%);
	background-color: rgb(16 59 29 / 88%);
	color: var(--white-color);
	font-size: clamp(15px, 1.5vw, 18px);
	box-shadow: 0 10px 26px rgb(0 0 0 / 28%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: auto;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.booking-nav-btn:hover{
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	transform: scale(1.06);
}

.booking-nav-btn:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

.booking-nav-btn i{
	line-height: 1;
}

.booking-card-col{
	flex: 0 0 33.3333%;
	padding: 0 12px;
}

/* Only the face that is turned towards the viewer may take pointer events,
   otherwise the invisible front blocks the wizard's back/next buttons. */
.booking-card:not(.is-flipped) .booking-card-back{
	pointer-events: none;
}

.booking-card.is-flipped .booking-card-front{
	pointer-events: none;
}

.booking-card{
	position: relative;
	height: 540px;
	perspective: 1600px;
}

.booking-card-inner{
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.booking-card.is-flipped .booking-card-inner{
	transform: rotateY(180deg);
}

.booking-card-face{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 20px;
	overflow: hidden;
}

.booking-card-front{
	background: var(--primary-color);
	display: block;
}

.booking-map{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.booking-map .maplibregl-canvas,
.sri-lanka-map .maplibregl-canvas{
	filter: grayscale(0.35) sepia(0.42) hue-rotate(57deg) saturate(1.35) brightness(0.97) contrast(1.04);
}

.booking-card-map-tint{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(16, 59, 29, 0.04) 0%, rgba(16, 59, 29, 0.3) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Place pins on the card maps: airport (green) + destination (gold).

   MapLibre positions every marker with a bare `translate(x, y)` transform,
   which only lands on the right pixel when the marker itself is taken out of
   flow. `position: relative` (overriding MapLibre's own .maplibregl-marker
   rule) left the pins in normal flow, so each one was pushed further down by
   the height of the pins before it - the second pin sat 28px below its real
   place, the third 56px, and the routes never lined up with their labels.
   Absolute + top/left 0 puts the origin back in the map's corner, which is
   the coordinate space those translate() values are written in. */
.map-pin{
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	display: flex;
	justify-content: center;
	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 35%));
}

.map-pin i{
	font-size: 28px;
	line-height: 1;
}

.map-pin-origin i{
	color: var(--primary-color);
}

.map-pin-dest i{
	color: var(--accent-color);
}

.map-pin-label{
	position: absolute;
	top: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--secondary-color);
	color: var(--text-color);
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	padding: 3px 8px;
	border-radius: 20px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
}

/* Info preview below each card - destination name, description and the
   calculated distance from CMB airport. */
.booking-card-info{
	/* Flex column: the distance line and the "See Price & Book" button were
	   two inline-flex siblings, so they ran together on one line and the
	   button's margin-top did nothing. */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 6px 0;
	text-align: center;
	color: var(--white-color);
}

.booking-card-info h3{
	font-size: 21px;
	margin: 0 0 7px;
	color: var(--white-color);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.booking-card-info p{
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 10px;
	color: var(--white-color);
	opacity: 0.72;
}

.booking-card-distance{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-color);
}

.booking-card-view{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--white-color);
	font-family: var(--default-font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.3s ease;
}

.booking-card-view:hover{
	color: var(--accent-color);
}

.booking-card-view i{
	font-size: 12px;
	transition: transform 0.3s ease;
}

.booking-card-view:hover i{
	transform: translateX(4px);
}

.booking-card-back{
	background: var(--secondary-color);
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	padding: 24px 22px 20px;
	color: var(--text-color);
}

.booking-card-back button{
	font-family: var(--default-font);
	cursor: pointer;
}

.booking-card-close{
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	background: var(--bg-color);
	color: var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all 0.3s ease;
}

.booking-card-close:hover{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.booking-wizard-header h3{
	font-size: 21px;
	margin: 0;
	color: var(--primary-color);
}

.booking-wizard-header span{
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-color);
	margin-top: 4px;
}

.booking-wizard-steps{
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 12px 0 10px;
	padding: 0;
}

.booking-wizard-steps li{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	position: relative;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--text-color);
	/* pending steps: 0.55 put the 10px label at 3.5:1 - still visibly
	   quieter than .is-active (1 / bold / dark green), but legible. */
	opacity: 0.75;
}

/* One continuous rail threading the four steps together - they used to read
   as four unrelated pills, not as a path from Guests to WhatsApp. The line
   runs from the centre of the previous circle to the centre of this one and
   is painted behind the circles (they are lifted with z-index). */
.booking-wizard-steps li + li::before{
	content: "";
	position: absolute;
	top: 12px;
	left: calc(-50% - 3px);
	width: calc(100% + 3px);
	height: 2px;
	background: var(--divider-color);
}

.booking-wizard-steps li.is-done::before,
.booking-wizard-steps li.is-active::before{
	background: var(--accent-color);
}

.booking-wizard-steps li span{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	background: var(--bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}

.booking-wizard-steps li.is-active{
	opacity: 1;
	color: var(--primary-color);
	font-weight: 600;
}

.booking-wizard-steps li.is-active span{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.booking-wizard-steps li.is-done{
	opacity: 1;
}

.booking-wizard-steps li.is-done span{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.booking-wizard-body{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.wizard-label{
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 14px;
}

.wizard-note{
	font-size: 12.5px;
	opacity: 0.7;
	margin: 14px 0 0;
}

.guest-stepper{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.guest-stepper button{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	background: var(--bg-color);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: all 0.3s ease;
}

.guest-stepper button:hover:not(:disabled){
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.guest-stepper button:disabled{
	opacity: 0.35;
	cursor: not-allowed;
}

.guest-stepper strong{
	font-family: var(--accent-font);
	font-size: 34px;
	color: var(--primary-color);
	min-width: 58px;
	text-align: center;
}

.wizard-vehicles{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vehicle-option{
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name price" "meta blocked";
	align-items: center;
	gap: 2px 10px;
	width: 100%;
	text-align: left;
	padding: 13px 15px;
	border-radius: 12px;
	border: 1px solid var(--divider-color);
	background: var(--bg-color);
	transition: all 0.3s ease;
}

.vehicle-option .vehicle-name{
	grid-area: name;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-color);
}

.vehicle-option .vehicle-meta{
	grid-area: meta;
	font-size: 12px;
	opacity: 0.65;
}

.vehicle-option .vehicle-price{
	grid-area: price;
	font-family: var(--accent-font);
	font-size: 14px;
	color: var(--accent-color);
	white-space: nowrap;
}

.vehicle-option .vehicle-blocked{
	grid-area: blocked;
	font-size: 11px;
	color: var(--error-color);
	text-align: right;
	white-space: nowrap;
}

.vehicle-option.is-selected{
	border-color: var(--primary-color);
	background: rgb(16 59 29 / 6%);
	box-shadow: inset 0 0 0 1px var(--primary-color);
}

.vehicle-option.is-disabled{
	opacity: 0.45;
	cursor: not-allowed;
}

.price-table{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.price-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding: 10px 14px;
	background: var(--bg-color);
	border-radius: 10px;
}

.price-row strong{
	color: var(--primary-color);
}

.price-row.price-total{
	background: var(--primary-color);
	color: var(--white-color);
}

.price-row.price-total strong{
	font-family: var(--accent-font);
	font-size: 17px;
	color: var(--accent-color);
}

.wa-preview{
	font-size: 12.5px;
	line-height: 1.6;
	background: var(--bg-color);
	border: 1px dashed var(--divider-color);
	border-radius: 12px;
	padding: 12px 14px;
	white-space: pre-wrap;
	max-height: 170px;
	overflow-y: auto;
	margin-bottom: 14px;
}

.wa-send-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The label + WhatsApp icon is the longest thing in the wizard nav: the
	   button takes whatever room the Back button leaves instead of hugging
	   its text edge-to-edge (it had no side padding at all), and the label
	   stays on one line instead of folding into a two-line pill. */
	flex: 1 1 auto;
	min-width: 0;
	gap: 10px;
	height: 48px;
	padding: 0 18px;
	text-align: center;
	white-space: nowrap;
	border-radius: 40px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 600;
	transition: all 0.4s ease-in-out;
}

.wa-send-btn:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.booking-wizard-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
}

/* Back keeps its own width; the send button flexes into what is left. */
.booking-wizard-nav .wizard-btn{
	flex: 0 0 auto;
}

.wizard-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 22px;
	border-radius: 40px;
	border: 1px solid var(--divider-color);
	background: transparent;
	color: var(--text-color);
	font-size: 14px;
	transition: all 0.3s ease;
}

.wizard-btn:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}

.wizard-btn:hover:not(:disabled){
	background: var(--bg-color);
}

.wizard-btn-next{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.wizard-btn-next:hover:not(:disabled){
	background: var(--accent-color);
	border-color: var(--accent-color);
}

/* ------------------------------------------------
   Route map + airport transfer packages - components/SriLankaMap.jsx
   ------------------------------------------------ */
.route-map-wrap{
	position: relative;
	height: 480px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--dark-divider-color);
}

.sri-lanka-map{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map-airport-label{
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 30px;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgb(16 59 29 / 35%);
}

.map-airport-label i{
	color: var(--accent-color);
}

.route-packages{
	margin-top: 30px;
	background: rgb(255 255 255 / 4%);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 32px;
}

.route-packages-header h3{
	font-size: 23px;
	margin: 0 0 6px;
	color: var(--white-color);
}

.route-packages-header p{
	font-size: 15px;
	margin: 0 0 22px;
	color: var(--white-color);
	opacity: 0.75;
}

.route-packages-list{
	display: flex;
	flex-direction: column;
}

.route-package-row{
	display: grid;
	grid-template-columns: 1fr 160px 160px;
	gap: 12px;
	align-items: center;
	padding: 13px 10px;
	border-bottom: 1px solid var(--dark-divider-color);
	color: var(--white-color);
	font-size: 15px;
	transition: background 0.3s ease;
}

.route-package-row:last-child{
	border-bottom: none;
}

.route-package-row:not(.route-package-head):hover{
	background: rgb(255 255 255 / 5%);
}

.route-package-row span:first-child i{
	color: var(--accent-color);
	margin-right: 9px;
}

.route-package-row span:nth-child(2),
.route-package-row span:nth-child(3){
	text-align: right;
}

.route-package-head span{
	font-family: var(--accent-font);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-color);
}

@media only screen and (max-width: 1199px){
	.booking-card-col{
		flex-basis: 50%;
	}
}

@media only screen and (max-width: 767px){
	.booking-card-col{
		flex-basis: 100%;
	}

	.booking-card{
		height: 560px;
	}

	.route-map-wrap{
		height: 380px;
	}

	.route-packages{
		padding: 22px 16px;
	}

	.route-package-row{
		grid-template-columns: 1fr 88px 108px;
		gap: 8px;
		font-size: 13px;
		padding: 12px 4px;
	}
}

/* ------------------------------------------------
   Services page - app/services/page.jsx
   ------------------------------------------------ */
.services-intro{
	padding: 90px 0 10px;
}

.services-intro .section-title p{
	margin-top: 14px;
}

.service-detail{
	padding: 60px 0;
	scroll-margin-top: 110px;
}

.service-detail-image figure{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.service-detail-image img{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
}

.service-detail-content{
	padding-left: 40px;
}

.service-detail-alt .col-lg-6:first-child{
	order: 2;
}

.service-detail-alt .col-lg-6:last-child{
	order: 1;
}

.service-detail-alt .service-detail-content{
	padding-left: 0;
	padding-right: 40px;
}

.service-features{
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.service-features li{
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.service-features li i{
	color: var(--accent-color);
	font-size: 17px;
	margin-top: 4px;
}

.service-features h3{
	font-size: 17px;
	margin: 0 0 4px;
	color: var(--primary-color);
}

.service-features p{
	font-size: 15px;
	margin: 0;
	color: var(--text-color);
	opacity: 0.8;
}

.service-price-box{
	margin-top: 28px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 18px 20px;
}

.service-park-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.service-park-list li{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--divider-color);
}

.service-park-list li:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

.service-park-list strong,
.service-price{
	font-family: var(--accent-font);
	color: var(--primary-color);
}

.service-price{
	display: block;
	font-size: 18px;
}

.service-price-link{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.service-price-link strong{
	font-family: var(--accent-font);
	color: var(--primary-color);
}

.service-price-link a{
	color: var(--accent-color);
	text-decoration: underline;
	font-weight: 600;
	font-size: 14px;
}

.service-detail-btn{
	margin-top: 26px;
}

.service-info{
	padding: 100px 0 70px;
}

.service-info-card{
	background: rgb(255 255 255 / 4%);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 30px;
	height: 100%;
}

.service-info-card h3{
	font-size: 21px;
	color: var(--white-color);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.service-info-card h3 i{
	color: var(--accent-color);
}

.service-info-card ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.service-info-card h4{
	font-size: 16px;
	color: var(--accent-color);
	margin: 0 0 5px;
}

.service-info-card p{
	font-size: 14.5px;
	color: var(--white-color);
	opacity: 0.8;
	margin: 0;
}

@media only screen and (max-width: 991px){
	.service-detail-content{
		padding-left: 0;
		padding-top: 30px;
	}

	.service-detail-alt .service-detail-content{
		padding-right: 0;
	}
}

/* ------------------------------------------------
   Hero slide entrance - app/home-page.jsx
   Content re-animates every time Swiper marks a slide active.
   ------------------------------------------------ */
.swiper-slide .hero-content .section-sub-title,
.swiper-slide .hero-content h1,
.swiper-slide .hero-content h2,
.swiper-slide .hero-content p,
.swiper-slide .hero-content .hero-btn{
	opacity: 0;
}

.swiper-slide-active .hero-content .section-sub-title{
	animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.swiper-slide-active .hero-content h1,
.swiper-slide-active .hero-content h2{
	animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.swiper-slide-active .hero-content p{
	animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.swiper-slide-active .hero-content .hero-btn{
	animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.swiper-slide-active .hero-slider-image img{
	animation: heroZoom 7s ease-out both;
}

@keyframes heroFadeUp{
	from{
		opacity: 0;
		transform: translateY(44px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroZoom{
	from{
		transform: scale(1.09);
	}
	to{
		transform: scale(1);
	}
}

@media only screen and (max-width: 767px){
	.booking-card-info{
		padding-top: 16px;
	}

	.booking-card-info h3{
		font-size: 18px;
	}

	.booking-card-info p{
		font-size: 13.5px;
	}
}

.airport-booking{
	scroll-margin-top: 110px;
}

/************************************/
/***   Photo Gallery responsive   ***/
/************************************/

@media only screen and (max-width: 991px){
	.gallery-filter{
		gap: 10px;
		margin-bottom: 38px;
	}

	.gallery-filter-btn{
		padding: 11px 18px;
		font-size: 15px;
	}

	.gallery-lightbox{
		padding: 14px;
	}

	.gallery-lightbox-dialog{
		/* 100% of the 100dvh lightbox, never calc(100vh …): 100vh on a
		   tablet/phone is the LARGE viewport, so the dialog ran past the
		   bottom of the visible screen and the filmstrip (prev/next
		   photos) was cut off with its scrollbar hidden. */
		max-height: 100%;
	}

	.gallery-lightbox-stage{
		border-radius: 18px;
	}

	.gallery-lightbox-image{
		min-height: clamp(90px, 15dvh, 220px);
	}

	.gallery-lightbox-arrow{
		width: 42px;
		height: 42px;
		font-size: 16px;
	}

	.gallery-lightbox-info,
	.gallery-lightbox-foot{
		padding-left: 4px;
		padding-right: 4px;
	}

	.gallery-lightbox-thumbs{
		padding: 2px 4px 6px;
	}

	.gallery-thumb{
		width: 78px;
		height: 58px;
	}
}

@media only screen and (max-width: 767px){
	.gallery-filter{
		gap: 8px;
		margin-bottom: 30px;
	}

	.gallery-filter-btn{
		padding: 10px 15px;
		font-size: 14px;
	}

	.gallery-filter-count{
		min-width: 21px;
		height: 21px;
		font-size: 12px;
	}

	.gallery-item-overlay h3{
		font-size: 16px;
	}

	.gallery-item-view{
		width: 46px;
		height: 46px;
		font-size: 17px;
	}

	.gallery-lightbox{
		padding: 10px;
	}

	.gallery-lightbox-dialog{
		max-height: 100%;
		gap: 11px;
	}

	.gallery-lightbox-topbar{
		padding: 8px 8px 8px 14px;
	}

	.gallery-lightbox-badge{
		font-size: 11px;
		padding: 8px 13px;
		letter-spacing: 0.5px;
	}

	.gallery-lightbox-count{
		font-size: 13px;
	}

	.gallery-lightbox-close{
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	.gallery-lightbox-stage{
		border-radius: 16px;
	}

	.gallery-lightbox-image{
		min-height: clamp(90px, 16dvh, 200px);
		border-radius: 12px;
	}

	.gallery-lightbox-arrow{
		width: 36px;
		height: 36px;
		font-size: 14px;
		box-shadow: 0 6px 14px rgb(0 0 0 / 35%);
	}

	.gallery-lightbox-arrow.prev{
		left: 8px;
	}

	.gallery-lightbox-arrow.next{
		right: 8px;
	}

	.gallery-lightbox-info,
	.gallery-lightbox-foot{
		padding-left: 2px;
		padding-right: 2px;
	}

	.gallery-lightbox-title{
		font-size: 19px;
		gap: 10px;
	}

	.gallery-lightbox-desc{
		font-size: 15px;
		line-height: 1.65;
	}

	.gallery-lightbox-foot{
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.gallery-lightbox .post-social-sharing{
		text-align: left;
	}

	.gallery-lightbox-thumbs{
		padding: 2px 2px 6px;
		gap: 8px;
	}

	.gallery-thumb{
		width: 70px;
		height: 54px;
		border-radius: 10px;
	}
}

/* ----------------------------------------------------------------------------------------
   Services pages - app/services/page.jsx + app/services/[slug]/*
   Index (svc-index-*), detail sidebar/proof slider/points marquee (svc-/proof-),
   light popup gallery (svc-gl-), booking wizard + popups (svc-stepper/modal/...).
   ---------------------------------------------------------------------------------------- */

/* ---------------------------------------------
   32. Services Index
   --------------------------------------------- */

.svc-index-intro{
	padding: 90px 0 100px;
}

.svc-card{
	display: block;
	height: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.svc-card:hover{
	border-color: var(--accent-color);
	box-shadow: 0 24px 50px rgb(16 59 29 / 12%);
	transform: translateY(-6px);
}

.svc-card-image{
	position: relative;
}

.svc-card-image figure{
	margin: 0;
	overflow: hidden;
}

.svc-card-image img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease-in-out;
}

.svc-card:hover .svc-card-image img{
	transform: scale(1.06);
}

.svc-card-badge{
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 8px 14px;
}

.svc-card-price{
	position: absolute;
	bottom: 14px;
	left: 14px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--white-color);
	background: rgb(6 16 9 / 72%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 100px;
	padding: 8px 14px;
}

.svc-card-body{
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.svc-card-body h3{
	font-size: 19px;
	line-height: 1.45em;
	transition: color 0.3s ease-in-out;
}

.svc-card:hover .svc-card-body h3{
	color: var(--accent-color);
}

.svc-card-body p{
	font-size: 14.5px;
	line-height: 1.65em;
	opacity: 0.8;
	margin: 0;
}

.svc-card-link{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--accent-color);
}

.svc-card-link i{
	font-size: 12px;
	transition: transform 0.3s ease-in-out;
}

.svc-card:hover .svc-card-link i{
	transform: translateX(5px);
}

/* How it works - dark band */

.svc-steps-band{
	padding: 100px 0;
}

.svc-step-card{
	position: relative;
	height: 100%;
	background: rgb(255 255 255 / 5%);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 34px 28px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.svc-step-card:hover{
	background: rgb(255 255 255 / 8%);
	border-color: rgb(219 145 12 / 45%);
	transform: translateY(-6px);
}

.svc-step-num{
	position: absolute;
	top: 6px;
	right: 18px;
	font-family: var(--accent-font);
	font-size: 74px;
	line-height: 1em;
	color: rgb(255 255 255 / 7%);
	user-select: none;
}

.svc-step-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgb(219 145 12 / 16%);
	border: 1px solid rgb(219 145 12 / 40%);
	border-radius: 16px;
	color: var(--accent-color);
	font-size: 22px;
	margin-bottom: 22px;
}

.svc-step-card h3{
	position: relative;
	font-size: 18px;
	line-height: 1.45em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.svc-step-card p{
	position: relative;
	font-size: 14.5px;
	line-height: 1.7em;
	color: rgb(255 255 255 / 72%);
	margin: 0;
}

/* Trust box */

.svc-stat-row{
	margin-top: 60px;
	margin-bottom: 0;
}

.svc-trust-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 34px;
	background: rgb(255 255 255 / 5%);
	border: 1px solid var(--dark-divider-color);
	border-radius: 22px;
	padding: 38px 42px;
}

.svc-trust-intro{
	flex: 1 1 320px;
}

.svc-trust-intro .section-sub-title{
	border-color: var(--dark-divider-color);
	color: var(--white-color);
	margin-bottom: 12px;
}

.svc-trust-intro h3{
	font-size: 24px;
	line-height: 1.4em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.svc-trust-intro p{
	font-size: 15px;
	line-height: 1.7em;
	color: rgb(255 255 255 / 70%);
	margin: 0;
}

.svc-stat-list{
	flex: 1 1 420px;
	display: flex;
	flex-wrap: wrap;
}

.svc-stat{
	flex: 1 1 40%;
	text-align: center;
	padding: 10px 16px;
	border-left: 1px solid var(--dark-divider-color);
}

.svc-stat strong{
	display: block;
	font-family: var(--accent-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2em;
	color: var(--accent-color);
	margin-bottom: 6px;
}

.svc-stat span{
	display: block;
	font-size: 13.5px;
	line-height: 1.5em;
	color: rgb(255 255 255 / 72%);
}

/* Explore more - light */

.svc-explore{
	padding: 100px 0;
}

.svc-explore-card{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	height: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px 28px;
	transition: all 0.4s ease-in-out;
}

.svc-explore-card:hover{
	border-color: var(--accent-color);
	box-shadow: 0 20px 44px rgb(16 59 29 / 10%);
	transform: translateY(-5px);
}

.svc-explore-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	background: rgb(219 145 12 / 12%);
	border-radius: 15px;
	color: var(--accent-color);
	font-size: 21px;
	transition: all 0.4s ease-in-out;
}

.svc-explore-card:hover .svc-explore-icon{
	background: var(--accent-color);
	color: var(--white-color);
}

.svc-explore-card h3{
	font-size: 17px;
	line-height: 1.4em;
	margin-bottom: 8px;
}

.svc-explore-card p{
	font-size: 14.5px;
	line-height: 1.65em;
	opacity: 0.8;
	margin: 0;
}

/* FAQ + CTA - light */

.svc-index-faq{
	padding: 100px 0;
}

.svc-cta-card{
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-size: cover;
	background-position: center;
	border-radius: 20px;
	padding: 36px 28px;
}

.svc-cta-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: rgb(219 145 12 / 18%);
	border: 1px solid rgb(219 145 12 / 45%);
	border-radius: 50%;
	color: var(--accent-color);
	font-size: 27px;
	margin-bottom: 6px;
}

.svc-cta-card h3{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.svc-cta-card p{
	font-size: 14.5px;
	line-height: 1.7em;
	color: rgb(255 255 255 / 72%);
	margin: 0 0 8px;
}

.svc-cta-card .btn-default{
	width: 100%;
	padding: 16px 24px;
	text-align: center;
}

.svc-cta-card .btn-default::before{
	right: 20px;
}

.svc-cta-secondary{
	font-size: 14.5px;
	font-weight: 600;
	color: rgb(255 255 255 / 85%);
	border-bottom: 1px solid rgb(255 255 255 / 35%);
	padding-bottom: 2px;
	transition: all 0.3s ease-in-out;
}

.svc-cta-secondary:hover{
	color: var(--accent-color);
	border-color: var(--accent-color);
}

/* ---------------------------------------------
   33. Service Detail - sidebar + content
   --------------------------------------------- */

.svc-info-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--accent-color);
	font-size: 15px;
}

.svc-inquiry-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--accent-color);
	color: var(--white-color);
	border: none;
	border-radius: 100px;
	padding: 15px 22px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.35s ease-in-out;
}

.svc-inquiry-btn:hover{
	background: var(--primary-color);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgb(16 59 29 / 22%);
}

.svc-inquiry-btn i{
	font-size: 14px;
}

.svc-share-row{
	margin-top: 4px;
}

.sidebar-cta-box-header .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: rgb(219 145 12 / 16%);
	border-radius: 15px;
}

.svc-cta-fa-icon{
	position: relative;
	z-index: 1;
	font-size: 24px;
	color: var(--accent-color);
}

.svc-cta-fa-icon-sm{
	color: var(--accent-color);
	font-size: 15px;
}

.svc-detail-features{
	margin-top: 0;
}

.svc-detail-parks{
	margin-top: 24px;
}

.svc-detail-parks li{
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 13px 18px;
}

/* Proof of previous trips - sliding gallery */

.svc-proof-box h2,
.svc-points-box h2{
	margin-bottom: 0;
}

.svc-proof-box > p,
.svc-points-box > p{
	margin-top: 12px;
}

.proof-viewport{
	position: relative;
	overflow: hidden;
	margin-top: 34px;
	padding: 14px 0 20px;
}

.proof-track{
	display: flex;
	align-items: center;
	gap: 20px;
	width: max-content;
	will-change: transform;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-track.no-transition{
	transition: none;
}

.proof-card{
	position: relative;
	flex: 0 0 auto;
	/* 3 cards + 2 gaps inside the col-lg-8 content column (>=1400px) */
	width: 275px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
	opacity: 0.88;
}

.proof-card figure{
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgb(16 59 29 / 14%);
	transition: box-shadow 0.5s ease-in-out;
}

.proof-card img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

.proof-card.active{
	opacity: 1;
	transform: scale(1.07);
	z-index: 2;
}

.proof-card.active figure{
	box-shadow: 0 26px 60px rgb(16 59 29 / 24%);
}

.proof-card-overlay{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 22px;
	border-radius: 18px;
	background: linear-gradient(to top, rgb(6 16 9 / 78%) 0%, rgb(6 16 9 / 20%) 55%, transparent 80%);
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
	pointer-events: none;
}

.proof-card:hover .proof-card-overlay,
.proof-card:focus-visible .proof-card-overlay{
	opacity: 1;
}

.proof-card-view{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--primary-color);
	background: var(--white-color);
	border-radius: 100px;
	padding: 11px 20px;
	transform: translateY(8px);
	transition: transform 0.35s ease-in-out;
}

.proof-card:hover .proof-card-view{
	transform: translateY(0);
}

.proof-card-view i{
	font-size: 12px;
	color: var(--accent-color);
}

.proof-nav{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	pointer-events: none;
	z-index: 3;
}

.proof-nav-btn{
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	color: var(--primary-color);
	font-size: 17px;
	cursor: pointer;
	box-shadow: 0 10px 26px rgb(16 59 29 / 16%);
	transition: all 0.3s ease-in-out;
}

.proof-nav-btn:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* Special points - sliding marquee */

.svc-points-marquee{
	position: relative;
	overflow: hidden;
	margin-top: 34px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.svc-points-track{
	display: flex;
	gap: 22px;
	width: max-content;
	animation: svcPointsMarquee 46s linear infinite;
}

.svc-points-marquee:hover .svc-points-track{
	animation-play-state: paused;
}

@keyframes svcPointsMarquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}

.svc-points-box .event-feature-item{
	flex: 0 0 auto;
	width: 300px;
	min-height: 230px;
	gap: 22px;
}

.svc-points-box .event-feature-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: rgb(219 145 12 / 12%);
	border-radius: 15px;
	transition: background 0.4s ease-in-out;
}

.svc-points-box .event-feature-item .icon-box i{
	font-size: 21px;
	color: var(--accent-color);
	transition: color 0.4s ease-in-out;
}

.svc-points-box .event-feature-item:hover .icon-box{
	background: rgb(255 255 255 / 22%);
}

.svc-points-box .event-feature-item:hover .icon-box i{
	color: var(--white-color);
}

.svc-points-box .event-feature-item-content{
	padding-top: 22px;
}

.svc-points-box .event-feature-item-content h3{
	font-size: 16px;
}

.svc-points-box .event-feature-item-content p{
	font-size: 14px;
}

/* Dark FAQ band on the detail page */

.svc-detail-faq{
	padding: 100px 0;
}

.svc-detail-faq .section-title{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.svc-detail-faq .faq-accordion .accordion-item{
	background: rgb(255 255 255 / 6%);
	border: 1px solid var(--dark-divider-color);
}

.svc-detail-faq .faq-accordion .accordion-header .accordion-button{
	color: var(--white-color);
	font-size: 16px;
	box-shadow: none;
}

.svc-detail-faq .faq-accordion .accordion-header .accordion-button:not(.collapsed){
	color: var(--accent-color);
	background: transparent;
	box-shadow: none;
}

.svc-detail-faq .faq-accordion .accordion-item .accordion-button::after,
.svc-detail-faq .faq-accordion .accordion-item .accordion-button.collapsed::after{
	color: var(--accent-color);
}

.svc-detail-faq .faq-accordion .accordion-item .accordion-body{
	border-top-color: var(--dark-divider-color);
}

.svc-detail-faq .faq-accordion .accordion-item .accordion-body p{
	color: rgb(255 255 255 / 75%);
	font-size: 15px;
	line-height: 1.75em;
}

/* Inquiry modal text */

.svc-inquiry-text{
	font-size: 15px;
	line-height: 1.7em;
	opacity: 0.8;
	margin: 0;
}

/* Light-mode popup gallery (photo-gallery popup, restyled for light UI) */

.svc-gallery-lightbox{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* dvh, not the default fixed-inset height: on mobile the browser toolbar
	   sits over the large viewport, which clipped the bottom of the dialog. */
	height: 100dvh;
	padding: clamp(12px, 3vh, 28px);
}

.svc-gl-backdrop{
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1100px 560px at 78% -10%, rgb(219 145 12 / 16%), transparent 62%),
		radial-gradient(900px 520px at 8% 110%, rgb(16 59 29 / 14%), transparent 60%),
		rgb(245 247 245 / 94%);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	animation: galleryFadeIn 0.4s ease both;
}

.svc-gl-dialog{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(1060px, 100%);
	/* A DEFINITE height (the padded 100dvh lightbox is its containing
	   block). With only max-height the dialog's own height stayed
	   content-based: no descendant could resolve a percentage height
	   against it, the stage could not absorb leftover space, and the
	   photo fell back to its intrinsic size inside a shorter box - which
	   then cropped it. Fixed height = the dialog always fits the screen
	   and the filmstrip never falls off the bottom. */
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: none;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 26px;
	box-shadow: 0 34px 90px rgb(16 59 29 / 22%);
	padding: clamp(16px, 2vw, 24px);
	animation: galleryDialogIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.svc-gl-dialog::-webkit-scrollbar{
	display: none;
}

.svc-gl-topbar{
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 8px 8px 8px 16px;
	background: rgb(255 255 255 / 88%);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.svc-gl-badges{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.svc-gl-badge{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 9px 16px;
}

.svc-gl-count{
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--text-color);
	opacity: 0.75;
}

.svc-gl-count .count-sep{
	color: var(--accent-color);
	margin: 0 2px;
}

.svc-gl-close{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: 17px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-gl-close:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: rotate(90deg);
}

.svc-gl-stage{
	position: relative;
	display: flex;
	flex-direction: column;
	/* The stage is the one flexible row of the dialog: it absorbs the height
	   left over after the topbar, caption and thumbnail strip, so the
	   photograph grows into the whole remaining screen. */
	flex: 1 1 auto;
	/* Same shrink rule as the photo gallery stage: the caption and thumbnail
	   strip must never be pushed off the bottom of the dialog. */
	min-height: 0;
	padding: clamp(8px, 1.5vw, 14px);
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
}

.svc-gl-image{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Definite height so `object-fit: contain` resolves: the full photograph
	   is always previewed, letterboxed, never cropped or zoomed. It tracks
	   the stage's remaining height; the floor only stops it collapsing -
	   a small floor keeps the caption and filmstrip on screen even on a
	   short landscape phone. */
	flex: 1 1 auto;
	min-height: clamp(100px, 16dvh, 240px);
	width: 100%;
	min-width: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-color);
}

.svc-gl-image img{
	/* Absolutely pinned to the definite-height box, so `contain` always
	   resolves against the real box - the old in-flow percentage height
	   fell back to the image's intrinsic size and was cropped. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	animation: galleryImgIn 0.4s ease both;
}

.svc-gl-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 17px;
	cursor: pointer;
	box-shadow: 0 10px 26px rgb(16 59 29 / 16%);
	transition: all 0.3s ease-in-out;
}

.svc-gl-arrow.prev{
	left: clamp(14px, 2vw, 26px);
}

.svc-gl-arrow.next{
	right: clamp(14px, 2vw, 26px);
}

.svc-gl-arrow:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: translateY(-50%) scale(1.08);
}

.svc-gl-info{
	padding: 2px 8px 0;
}

.svc-gl-info h3{
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.svc-gl-info h3::before{
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 1em;
	border-radius: 4px;
	background: var(--accent-color);
}

.svc-gl-info p{
	font-size: 15.5px;
	line-height: 1.75em;
	opacity: 0.8;
	max-width: 85ch;
	margin: 0;
}

.svc-gl-thumbs{
	display: flex;
	gap: 10px;
	padding: 4px 6px 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.svc-gl-thumbs::-webkit-scrollbar{
	display: none;
}

.svc-gl-thumb{
	flex: 0 0 auto;
	width: 90px;
	height: 64px;
	padding: 0;
	border: 2px solid var(--divider-color);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-color);
	cursor: pointer;
	opacity: 0.5;
	filter: grayscale(75%);
	transition: all 0.3s ease-in-out;
}

.svc-gl-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	user-select: none;
}

.svc-gl-thumb:hover{
	opacity: 0.9;
	filter: none;
}

.svc-gl-thumb.active{
	opacity: 1;
	filter: none;
	border-color: var(--accent-color);
	background: rgb(219 145 12 / 12%);
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgb(219 145 12 / 30%);
}

/* ---------------------------------------------
   34. Service Booking wizard + popups
   --------------------------------------------- */

.svc-booking{
	padding: 100px 0;
	background: var(--bg-color);
}

.svc-booking-panel{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	padding: clamp(24px, 4vw, 44px);
	box-shadow: 0 24px 60px rgb(16 59 29 / 8%);
}

/* Stepper */

.svc-stepper{
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 36px;
	padding: 0;
}

.svc-stepper li{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.svc-stepper li:last-child{
	flex: 0 0 auto;
}

.svc-stepper li:not(:last-child)::after{
	content: "";
	flex: 1 1 auto;
	min-width: 14px;
	height: 2px;
	background: var(--divider-color);
	border-radius: 2px;
	margin-left: 6px;
}

.svc-stepper li.done:not(:last-child)::after{
	background: var(--accent-color);
}

.svc-stepper button{
	display: flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--default-font);
	cursor: default;
	white-space: nowrap;
}

.svc-stepper li.done button{
	cursor: pointer;
}

.svc-step-dot{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 2px solid var(--divider-color);
	border-radius: 50%;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-color);
	opacity: 0.65;
	transition: all 0.3s ease-in-out;
}

.svc-step-label{
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
	opacity: 0.55;
	transition: all 0.3s ease-in-out;
}

.svc-stepper li.active .svc-step-dot{
	border-color: var(--accent-color);
	background: var(--accent-color);
	color: var(--white-color);
	opacity: 1;
}

.svc-stepper li.active .svc-step-label{
	color: var(--primary-color);
	opacity: 1;
}

.svc-stepper li.done .svc-step-dot{
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: var(--white-color);
	opacity: 1;
}

.svc-stepper li.done .svc-step-label{
	opacity: 0.85;
}

.svc-step-pane{
	animation: svcPaneIn 0.4s ease both;
}

@keyframes svcPaneIn{
	from{
		opacity: 0;
		transform: translateY(12px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* Guest counter + auto vehicle */

.svc-guest-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 24px;
}

.svc-field-label h3,
.svc-field-label h4{
	font-size: 18px;
	line-height: 1.4em;
	margin-bottom: 5px;
}

.svc-field-label p{
	font-size: 14px;
	opacity: 0.7;
	margin: 0;
}

.svc-counter{
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 6px;
}

.svc-counter button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-counter button:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.svc-counter button:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}

.svc-counter button:disabled:hover{
	background: var(--secondary-color);
	border-color: var(--divider-color);
	color: var(--primary-color);
}

.svc-counter strong{
	min-width: 48px;
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	color: var(--primary-color);
}

.svc-vehicle-card{
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	padding: 22px 24px;
	margin-bottom: 30px;
}

.svc-auto-chip{
	position: absolute;
	top: -11px;
	right: 20px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 6px 13px;
}

.svc-vehicle-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	background: rgb(219 145 12 / 12%);
	border-radius: 15px;
	color: var(--accent-color);
	font-size: 21px;
}

.svc-vehicle-card h4{
	font-size: 17px;
	line-height: 1.4em;
	margin-bottom: 4px;
}

.svc-vehicle-card p{
	font-size: 14px;
	opacity: 0.75;
	margin: 0;
}

/* Destination chips */

.svc-dest-label{
	margin-bottom: 16px;
}

.svc-dest-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 12px;
	margin-bottom: 26px;
}

.svc-dest-chip{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	padding: 15px 17px;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-dest-chip:hover{
	border-color: var(--accent-color);
	color: var(--primary-color);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgb(16 59 29 / 8%);
}

.svc-dest-chip.active{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

/* Route summary strip */

.svc-route-summary{
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: rgb(219 145 12 / 10%);
	border: 1px solid rgb(219 145 12 / 38%);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 26px;
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-route-summary:hover{
	background: rgb(219 145 12 / 16%);
	transform: translateY(-2px);
}

.svc-route-summary > i:first-child{
	font-size: 18px;
	color: var(--accent-color);
}

.svc-route-summary span{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.svc-route-summary strong{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
}

.svc-route-summary em{
	font-style: normal;
	font-size: 13px;
	opacity: 0.75;
	color: var(--text-color);
}

.svc-route-summary > i:last-child{
	font-size: 13px;
	color: var(--text-color);
	opacity: 0.6;
}

/* Step actions */

.svc-step-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
}

.svc-step-error{
	font-size: 14px;
	font-weight: 600;
	color: var(--error-color);
}

.svc-back-btn{
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 16px 26px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-back-btn:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.svc-back-btn i{
	margin-right: 7px;
	font-size: 13px;
}

/* Price step */

.svc-price-card{
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 22px;
	padding: 30px;
	margin-bottom: 28px;
}

.svc-price-route{
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--divider-color);
}

.svc-price-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	background: rgb(16 59 29 / 8%);
	border-radius: 15px;
	color: var(--primary-color);
	font-size: 21px;
}

.svc-price-route h4{
	font-size: 16px;
	line-height: 1.4em;
	margin-bottom: 4px;
}

.svc-price-route p{
	font-size: 14px;
	margin: 0;
	opacity: 0.8;
}

.svc-price-route p i{
	color: var(--accent-color);
	margin-right: 6px;
}

.svc-price-vehicle{
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
	padding: 8px 15px;
	white-space: nowrap;
}

.svc-price-total{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 5px;
	padding: 28px 0 8px;
}

.svc-price-total span{
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.65;
}

.svc-price-total strong{
	font-family: var(--accent-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.25em;
	color: var(--primary-color);
}

.svc-price-total small{
	font-size: 13.5px;
	opacity: 0.7;
}

.svc-price-note{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: rgb(16 59 29 / 6%);
	border: 1px solid rgb(16 59 29 / 12%);
	border-radius: 13px;
	padding: 15px 17px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--primary-color);
	margin: 16px 0 20px;
}

.svc-price-note i{
	margin-top: 3px;
	color: var(--accent-color);
}

.svc-table-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--secondary-color);
	border: 1px dashed var(--accent-color);
	border-radius: 13px;
	padding: 15px 18px;
	font-family: var(--default-font);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-table-btn:hover{
	background: var(--accent-color);
	border-style: solid;
	color: var(--white-color);
}

/* Traveller form */

.svc-form-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 28px;
}

.svc-field{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svc-field-full{
	grid-column: 1 / -1;
}

.svc-field > span{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.svc-field > span small{
	font-weight: 400;
	opacity: 0.6;
}

.svc-field input,
.svc-field textarea{
	width: 100%;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	padding: 14px 16px;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.svc-field textarea{
	resize: vertical;
	min-height: 92px;
}

.svc-field input:focus,
.svc-field textarea:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.svc-field input::placeholder,
.svc-field textarea::placeholder{
	color: rgb(28 43 32 / 45%);
}

.svc-field em{
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--error-color);
}

/* WhatsApp preview */

.svc-preview-box{
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 22px;
	padding: 26px;
	margin-bottom: 26px;
}

.svc-preview-head{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.svc-preview-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background: rgb(37 211 102 / 15%);
	border-radius: 50%;
	color: rgb(25 150 75);
	font-size: 23px;
}

.svc-preview-head h4{
	font-size: 17px;
	line-height: 1.4em;
	margin-bottom: 3px;
}

.svc-preview-head p{
	font-size: 13.5px;
	opacity: 0.7;
	margin: 0;
}

.svc-preview-box pre{
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	padding: 20px;
	margin: 0;
	font-family: "DM Sans", monospace;
	font-size: 14px;
	line-height: 1.75em;
	color: var(--text-color);
	max-height: 330px;
	overflow-y: auto;
}

.svc-send-btn{
	background: rgb(37 211 102);
}

.svc-send-btn i{
	margin-right: 8px;
}

/* Search-anywhere button + custom place strip */

.svc-search-open{
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: rgb(16 59 29 / 6%);
	border: 1px dashed var(--primary-color);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 22px;
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-search-open:hover{
	background: rgb(219 145 12 / 12%);
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.svc-search-open > i:first-child{
	font-size: 17px;
	color: var(--accent-color);
}

.svc-search-open span{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.svc-search-open strong{
	font-size: 14.5px;
	font-weight: 700;
	color: var(--primary-color);
}

.svc-search-open em{
	font-style: normal;
	font-size: 12.5px;
	opacity: 0.7;
	color: var(--text-color);
	text-transform: lowercase;
	letter-spacing: 0.04em;
}

.svc-search-open > i:last-child{
	font-size: 13px;
	opacity: 0.6;
}

.svc-search-change{
	flex: 0 0 auto;
	background: var(--white-color);
	border: 1px solid var(--accent-color);
	border-radius: 100px;
	padding: 9px 17px;
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-search-change:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.svc-vehicle-body{
	flex: 1;
}

.svc-vehicle-pick{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 13px;
}

.svc-vehicle-pick button{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 10px 18px;
	font-family: var(--default-font);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-vehicle-pick button small{
	display: block;
	font-size: 11px;
	font-weight: 500;
	opacity: 0.65;
}

.svc-vehicle-pick button:hover{
	border-color: var(--accent-color);
	color: var(--primary-color);
}

.svc-vehicle-pick button.active{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.svc-dest-chip small{
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-color);
}

.svc-dest-chip.active small{
	color: rgb(255 255 255 / 85%);
}

/* Editable WhatsApp preview */

.svc-preview-edit{
	width: 100%;
	min-height: 250px;
	resize: vertical;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	padding: 20px;
	font-family: "DM Sans", monospace;
	font-size: 14px;
	line-height: 1.75em;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.svc-preview-edit:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.svc-preview-protect{
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	opacity: 0.7;
	margin: 12px 0 0;
}

.svc-preview-protect i{
	color: var(--accent-color);
	font-size: 12px;
}

.svc-book-another{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 16px 26px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-book-another:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.svc-sent-note{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--text-color);
	background: rgb(37 211 102 / 10%);
	border: 1px solid rgb(37 211 102 / 35%);
	border-radius: 14px;
	padding: 14px 18px;
	margin: 18px 0 0;
}

.svc-sent-note i{
	color: rgb(25 150 75);
}

/* Search-anywhere popup */

.svc-search-dialog{
	width: min(660px, 100%);
}

.svc-search-bar{
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 7px 7px 7px 20px;
	transition: all 0.3s ease-in-out;
}

.svc-search-bar:focus-within{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.svc-search-bar > i{
	color: var(--accent-color);
	font-size: 14px;
}

.svc-search-bar input{
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
}

.svc-search-bar input:focus{
	outline: none;
}

.svc-search-bar input::placeholder{
	color: rgb(28 43 32 / 45%);
}

.svc-search-bar button{
	border-radius: 100px;
	padding: 13px 24px;
	white-space: nowrap;
}

.svc-search-bar button:disabled{
	opacity: 0.55;
	cursor: not-allowed;
}

.svc-search-local-label{
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-color);
	margin-bottom: 12px;
}

.svc-search-local .svc-dest-grid{
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	margin-bottom: 0;
}

.svc-search-results{
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 260px;
	overflow-y: auto;
}

.svc-search-results button{
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 13px 16px;
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-search-results button:hover{
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.svc-search-results button.active{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.svc-search-results button > i{
	flex: 0 0 auto;
	color: var(--accent-color);
	font-size: 16px;
}

.svc-search-results button.active > i{
	color: var(--accent-color);
}

.svc-search-results span{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.svc-search-results strong{
	font-size: 14.5px;
	font-weight: 700;
	color: inherit;
}

.svc-search-results em{
	font-style: normal;
	font-size: 12.5px;
	opacity: 0.7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svc-search-none{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--text-color);
	background: rgb(219 145 12 / 10%);
	border: 1px solid rgb(219 145 12 / 35%);
	border-radius: 14px;
	padding: 14px 17px;
	margin: 0;
}

.svc-search-none i{
	color: var(--accent-color);
}

.svc-search-picked{
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.svc-search-picked .svc-route-map{
	height: clamp(230px, 34vh, 320px);
}

.svc-search-manual{
	padding-top: 2px;
}

@media (max-width: 575px){
	.svc-search-bar{
		flex-wrap: wrap;
		border-radius: 20px;
		padding: 12px;
	}

	.svc-search-bar input{
		flex: 1 1 100%;
		padding: 4px 8px 10px;
	}

	.svc-search-bar button{
		flex: 1 1 100%;
	}

	.svc-vehicle-pick button{
		flex: 1 1 100%;
	}
}

/* Shared modals (inquiry / route / pricing) */

.svc-modal{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 3vh, 30px);
}

.svc-modal-backdrop{
	position: absolute;
	inset: 0;
	background: rgb(6 16 9 / 64%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	animation: galleryFadeIn 0.35s ease both;
}

.svc-modal-dialog{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 26px;
	box-shadow: 0 34px 90px rgb(6 16 9 / 40%);
	padding: clamp(22px, 3vw, 34px);
	animation: galleryDialogIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	margin: 0;
}

.svc-modal-dialog::-webkit-scrollbar{
	display: none;
}

.svc-modal-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.svc-modal-kicker{
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent-color);
	margin-bottom: 9px;
}

.svc-modal-head h3{
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.3em;
	color: var(--primary-color);
}

.svc-modal-head h3 i{
	font-size: 15px;
	color: var(--accent-color);
	margin: 0 6px;
}

.svc-modal-close{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: 17px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-modal-close:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: rotate(90deg);
}

.svc-modal-actions{
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* Live route popup */

.svc-route-dialog{
	width: min(780px, 100%);
}

.svc-route-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.svc-route-stats span{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 10px 17px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--primary-color);
}

.svc-route-stats span i{
	color: var(--accent-color);
	font-size: 13px;
}

.svc-route-stats .svc-route-osm{
	background: rgb(219 145 12 / 10%);
	border-color: rgb(219 145 12 / 35%);
	color: var(--text-color);
	font-weight: 500;
	text-transform: lowercase;
}

.svc-route-map{
	position: relative;
	overflow: hidden;
	height: clamp(300px, 46vh, 450px);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	background: var(--bg-color);
}

.svc-route-map .maplibregl-canvas{
	filter: grayscale(0.35) sepia(0.42) hue-rotate(57deg) saturate(1.35) brightness(0.97) contrast(1.04);
}

.svc-route-map .maplibregl-ctrl-attrib{
	font-size: 10px;
}

/* CMB pricing table popup */

.svc-pricing-dialog{
	width: min(740px, 100%);
}

.svc-pricing-scroll{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

.svc-pricing-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 460px;
}

.svc-pricing-table th{
	background: var(--primary-color);
	color: var(--white-color);
	font-family: var(--default-font);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 14px 18px;
}

.svc-pricing-table th:first-child{
	border-radius: 15px 0 0 0;
}

.svc-pricing-table th:last-child{
	border-radius: 0 15px 0 0;
}

.svc-pricing-table td{
	padding: 13px 18px;
	border-bottom: 1px solid var(--divider-color);
	color: var(--text-color);
}

.svc-pricing-table tbody tr:last-child td{
	border-bottom: none;
}

.svc-pricing-table tbody tr:hover td{
	background: var(--bg-color);
}

.svc-pricing-table tbody tr.current td{
	background: rgb(219 145 12 / 12%);
	font-weight: 700;
	color: var(--primary-color);
}

.svc-pricing-table td:not(:first-child){
	white-space: nowrap;
	font-weight: 600;
}

.svc-pricing-note{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.6em;
	margin: 0;
	opacity: 0.9;
}

.svc-pricing-note i{
	margin-top: 3px;
	color: var(--accent-color);
}

/* ---------------------------------------------
   35. Services pages responsive
   --------------------------------------------- */

@media (max-width: 1399px){
	.proof-card{
		width: 234px;
	}
}

@media (max-width: 1199px){
	.proof-card{
		width: 194px;
	}

	.svc-trust-box{
		padding: 32px 28px;
	}
}

@media (max-width: 991px){
	/* sidebar stacks above content - full container width again */
	.proof-card{
		width: 220px;
	}

	.svc-trust-box{
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.svc-stat-list{
		flex: 1 1 100%;
	}

	.svc-stat{
		border-left: none;
		border-top: 1px solid var(--dark-divider-color);
	}

	.svc-form-grid{
		grid-template-columns: 1fr;
	}

	.svc-dest-grid{
		grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	}

	.svc-stepper li:not(:last-child)::after{
		min-width: 8px;
	}
}

@media (max-width: 767px){
	.svc-index-intro{
		padding: 70px 0 80px;
	}

	.svc-steps-band,
	.svc-explore,
	.svc-index-faq,
	.svc-detail-faq,
	.svc-booking{
		padding: 75px 0;
	}

	.page-event-single{
		padding: 70px 0;
	}

	.proof-card{
		width: calc((100vw - 70px) / 2);
	}

	.svc-step-card{
		padding: 28px 24px;
	}

	.svc-trust-box{
		padding: 26px 22px;
	}

	.svc-booking-panel{
		padding: 24px 20px;
	}

	.svc-price-card,
	.svc-preview-box{
		padding: 22px 20px;
	}

	.svc-price-total strong{
		font-size: 34px;
	}

	.svc-gl-dialog{
		padding: 14px;
		border-radius: 22px;
	}

	.svc-gl-image{
		min-height: clamp(90px, 15dvh, 220px);
	}

	.svc-gl-arrow{
		width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.svc-modal-dialog{
		padding: 22px 18px;
		border-radius: 22px;
	}

	.svc-route-map{
		height: clamp(260px, 42vh, 360px);
	}
}

@media (max-width: 575px){
	.proof-card{
		width: calc(100vw - 60px);
	}

	.svc-points-box .event-feature-item{
		width: 260px;
	}

	.svc-stat{
		flex: 1 1 100%;
		border-left: none;
	}

	.svc-stat strong{
		font-size: 34px;
	}

	.svc-card-body{
		padding: 20px 18px 22px;
	}

	.svc-dest-grid{
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.svc-dest-chip{
		padding: 13px 14px;
		font-size: 13px;
	}

	.svc-counter strong{
		min-width: 40px;
	}

	.svc-counter button{
		width: 38px;
		height: 38px;
	}

	.svc-gl-thumb{
		width: 74px;
		height: 54px;
	}

	.svc-gl-info h3{
		font-size: 19px;
	}

	.svc-route-summary{
		padding: 14px 16px;
	}

	.svc-step-actions{
		flex-direction: column;
		align-items: stretch;
	}

	.svc-step-actions .btn-default,
	.svc-step-actions .svc-back-btn{
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.svc-step-actions .btn-default{
		padding: 16px 24px;
	}

	.svc-step-error{
		text-align: center;
	}
}

@media (max-width: 479px){
	.svc-stepper .svc-step-label{
		display: none;
	}

	.svc-stepper button{
		gap: 0;
	}

	.svc-price-total strong{
		font-size: 31px;
	}

	.svc-form-grid{
		gap: 14px;
	}

	.svc-vehicle-card{
		flex-wrap: wrap;
	}

	.svc-price-route{
		flex-wrap: wrap;
	}

	.svc-price-vehicle{
		margin-left: 0;
	}
}

/************************************/
/***   36. Services index - event-style cards + spacing fixes   ***/
/************************************/

.svc-event-card{
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.svc-event-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 24px 50px rgb(16 59 29 / 14%);
}

.svc-event-card .event-item-content h2,
.svc-event-card .event-item-content h2 a{
	transition: color 0.3s ease-in-out;
}

.svc-event-card:hover .event-item-content h2,
.svc-event-card:hover .event-item-content h2 a{
	color: var(--accent-color);
}

.svc-event-card .event-item-content p{
	font-size: 14.5px;
	line-height: 1.6em;
}

.svc-event-card .event-item-meta ul li{
	font-size: 14.5px;
	font-weight: 500;
	opacity: 0.85;
}

.svc-event-card .event-item-meta ul li i{
	width: 22px;
	font-size: 17px;
	color: var(--accent-color);
	text-align: center;
	flex: 0 0 auto;
}

/* Grid rows need breathing space between them - bootstrap gutters only
   cover the horizontal axis. */
.svc-explore-card,
.svc-step-card{
	margin-bottom: 30px;
}

/************************************/
/***   37. Service proof gallery - dark popup theme   ***/
/************************************/

.svc-gl-backdrop{
	background:
		radial-gradient(1100px 560px at 78% -10%, rgb(219 145 12 / 14%), transparent 62%),
		radial-gradient(900px 560px at 8% 110%, rgb(16 59 29 / 30%), transparent 62%),
		rgb(4 10 6 / 93%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.svc-gl-dialog{
	background: linear-gradient(180deg, #14251C 0%, #0A140E 100%);
	border: 1px solid rgb(255 255 255 / 10%);
	box-shadow: 0 44px 110px rgb(0 0 0 / 60%);
	color: var(--white-color);
}

.svc-gl-topbar{
	background: rgb(255 255 255 / 6%);
	border-color: rgb(255 255 255 / 12%);
}

.svc-gl-count{
	color: var(--white-color);
	opacity: 0.8;
}

.svc-gl-close{
	background: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 16%);
	color: var(--white-color);
}

.svc-gl-close:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--primary-color);
}

.svc-gl-stage{
	background: rgb(0 0 0 / 32%);
	border-color: rgb(255 255 255 / 8%);
}

.svc-gl-image{
	background: transparent;
}

.svc-gl-arrow{
	background: rgb(255 255 255 / 9%);
	border-color: rgb(255 255 255 / 18%);
	color: var(--white-color);
	box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}

.svc-gl-arrow:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--primary-color);
}

.svc-gl-info h3{
	color: var(--white-color);
}

.svc-gl-info p{
	color: rgb(255 255 255 / 75%);
	opacity: 1;
}

.svc-gl-thumb{
	background: #0A140E;
	border-color: rgb(255 255 255 / 14%);
	opacity: 0.55;
	filter: grayscale(60%) brightness(0.9);
}

.svc-gl-thumb:hover{
	opacity: 1;
	filter: none;
	border-color: rgb(255 255 255 / 40%);
}

.svc-gl-thumb.active{
	opacity: 1;
	filter: none;
	border-color: var(--accent-color);
}

/************************************/
/***   34. Travel Guide pages     ***/
/************************************/

/* Card: description slides open on hover (body is bottom-anchored, so the
   title glides up while the copy fades in). */

.post-item-desc{
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	font-size: 15px;
	line-height: 1.7em;
	color: rgb(255 255 255 / 78%);
	transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.5s ease;
}

.post-item:hover .post-item-desc,
.post-item:focus-within .post-item-desc{
	max-height: 180px;
	opacity: 1;
	margin-top: 12px;
}

.post-item-cat{
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: inline-block;
	background: rgb(255 255 255 / 92%);
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 500;
	line-height: 1em;
	padding: 8px 14px;
	border-radius: 100px;
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.post-item:hover .post-item-cat{
	background: var(--accent-color);
	color: var(--white-color);
}

/* Filter/search re-enter: cards re-animate on every switch (mirrors the
   gallery-item-enter pattern; WOW handles the very first paint). */

.guide-card-enter{
	animation: guideCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes guideCardIn{
	from{
		opacity: 0;
		transform: translateY(28px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* Sidebar widgets */

.guide-side-widget{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}

.guide-side-widget-head{
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 16px;
	line-height: 1.4em;
	padding: 17px 30px;
}

.guide-side-widget-body{
	padding: 30px;
}

.guide-side-search{
	position: relative;
}

.guide-side-search input{
	width: 100%;
	border: 1px solid var(--divider-color);
	background: var(--bg-color);
	border-radius: 100px;
	padding: 14px 46px 14px 20px;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	outline: none;
	transition: border-color 0.3s ease-in-out;
}

.guide-side-search input:focus{
	border-color: var(--accent-color);
}

.guide-side-search i{
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: var(--primary-color);
	pointer-events: none;
}

.guide-side-cats{
	list-style: none;
	margin: 0;
	padding: 0;
}

.guide-side-cats li + li{
	border-top: 1px solid var(--divider-color);
}

.guide-side-cats a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	font-weight: 500;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.guide-side-cats a:hover{
	color: var(--accent-color);
	padding-left: 6px;
}

.guide-side-cats a.active{
	color: var(--accent-color);
}

.guide-side-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 100px;
	background: var(--divider-color);
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s ease-in-out;
}

.guide-side-cats a:hover .guide-side-count,
.guide-side-cats a.active .guide-side-count{
	background: var(--accent-color);
	color: var(--white-color);
}

.guide-side-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.guide-side-tags a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	background: var(--bg-color);
	font-size: 14px;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.guide-side-tags a:hover{
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.guide-side-tags a.active{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.guide-side-tags a .guide-side-count{
	background: transparent;
}

.guide-side-tags a.active .guide-side-count{
	background: rgb(255 255 255 / 20%);
	color: var(--white-color);
}

/* Results header + empty state */

.guide-results-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.guide-results-bar p{
	margin: 0;
	font-size: 15px;
	color: rgb(28 43 32 / 70%);
}

.guide-results-clear{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: none;
	padding: 0;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--accent-color);
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
}

.guide-results-clear:hover{
	opacity: 0.7;
}

.guide-empty{
	background: var(--secondary-color);
	border: 1px dashed var(--divider-color);
	border-radius: 20px;
	padding: 60px 30px;
	text-align: center;
	margin-bottom: 30px;
}

.guide-empty i{
	font-size: 34px;
	color: var(--accent-color);
	margin-bottom: 18px;
	display: block;
}

.guide-empty h3{
	font-size: 22px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.guide-empty p{
	margin: 0 auto 22px;
	max-width: 420px;
	color: rgb(28 43 32 / 70%);
}

/* Detail page: highlighted key point, FAQ block, tag + share row */

.guide-highlight{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 20px;
	padding: 30px 35px;
	margin: 10px 0 35px;
}

.guide-highlight h2{
	font-size: 26px;
	color: var(--primary-color);
	margin-bottom: 12px;
}

.guide-highlight p{
	margin: 0;
	line-height: 1.8em;
	color: rgb(28 43 32 / 80%);
}

.guide-faq{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 35px;
	margin-top: 45px;
}

.guide-faq-title{
	font-size: 26px;
	color: var(--primary-color);
	margin-bottom: 25px;
}

/* Site accordion restyled for the white guide-faq card: items pick up the
   page background so they still read as separate panels inside the card. */
.guide-faq .faq-accordion .accordion-item{
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
}

.guide-faq .faq-accordion .accordion-button{
	font-size: 17px;
	font-weight: 500;
	padding: 18px 55px 18px 25px;
}

.guide-faq .faq-accordion .accordion-item .accordion-button::after,
.guide-faq .faq-accordion .accordion-item .accordion-button.collapsed::after{
	right: 25px;
}

.guide-faq .faq-accordion .accordion-item .accordion-body{
	margin: 0 25px;
	padding: 18px 0;
}

.guide-faq .faq-accordion .accordion-item .accordion-body p{
	margin: 0;
	line-height: 1.8em;
	color: rgb(28 43 32 / 80%);
}

.guide-faq-more{
	margin: 22px 0 0;
	font-size: 15px;
	color: rgb(28 43 32 / 70%);
}

.guide-faq-more a{
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.guide-faq-more a:hover{
	color: var(--primary-color);
}

/* The tag row sits directly after the FAQ card - it needs its own breathing
   room so the two blocks read as separate sections. */
.post-tag-links{
	margin-top: 34px;
}

@media only screen and (max-width: 767px){
	.post-tag-links{ margin-top: 28px; }
}

.guide-share{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.guide-share-btn{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	background: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.guide-share-btn:hover{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.guide-share-btn.is-copied{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.guide-share-btn.share-wa:hover{
	background: #25D366;
	border-color: #25D366;
}

.guide-share-btn.share-fb:hover{
	background: #1877F2;
	border-color: #1877F2;
}

.post-social-sharing.guide-share-social ul{
	display: flex;
	gap: 8px;
}

/* Pagination gap marker + mobile filter toggle / collapsible sidebar */

.page-pagination ul li span.page-gap{
	background: transparent;
	pointer-events: none;
	width: 28px;
}

.guide-filter-toggle{
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	color: var(--primary-color);
	border-radius: 100px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 600;
	padding: 14px 24px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.guide-filter-toggle span{
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.guide-filter-toggle i:last-child{
	color: var(--accent-color);
	font-size: 13px;
	transition: transform 0.3s ease-in-out;
}

.guide-filter-toggle:hover{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

/* Desktop: collapse wrapper is inert, sidebar always visible */

.guide-side-collapse{
	overflow: visible;
}

@media (max-width: 991px){
	/* Flatten the sidebar column so the toggle, panel and results grid can
	   re-order inside the flex row: toggle -> collapsible filters -> content. */
	.page-blog .row > .col-lg-4{
		display: contents;
	}

	.page-blog .row > .col-lg-8{
		order: 3;
		width: 100%;
	}

	.guide-filter-toggle{
		display: flex;
		order: 1;
		width: calc(100% - 30px);
		margin-left: 15px;
		margin-right: 15px;
	}

	/* Collapsible body: measured-height slide, closed by default */
	.guide-side-collapse{
		order: 2;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.45s ease;
		width: calc(100% - 30px);
		margin: 0 15px;
	}

	.guide-side-collapse.is-open{
		grid-template-rows: 1fr;
		margin-bottom: 25px;
	}

	.guide-side-collapse > .page-single-sidebar{
		overflow: hidden;
		min-height: 0;
		/* the item's own margin would inflate the 0fr track when closed */
		margin-bottom: 0;
	}

	/* Widgets are hidden until the panel opens - never leave them in WOW's
	   pre-animation visibility:hidden state on touch layouts. */
	.guide-side-collapse .wow{
		visibility: visible !important;
		animation: none !important;
	}
}

@media (hover: none){
	.post-item-desc{
		max-height: 180px;
		opacity: 1;
		margin-top: 12px;
	}
}

@media (max-width: 575px){
	.guide-side-widget-head,
	.guide-side-widget-body{
		padding-left: 22px;
		padding-right: 22px;
	}

	.guide-faq{
		padding: 25px 22px;
	}

	.post-item-body{
		left: 25px;
		right: 25px;
		bottom: 25px;
	}
}

/************************************/
/***  35. Privacy Policy page     ***/
/************************************/

/* Legal sections reuse .post-entry typography but sit inside the
   .page-single-faqs blocks, which already supply spacing and dividers. */
.page-legal .page-single-faqs .legal-entry{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.page-legal .page-single-faqs .legal-entry ul li a{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-legal .page-single-faqs .legal-entry ul li a:hover{
	color: var(--primary-color);
}

/* "Browse all common questions" line under service FAQ accordions. */
.faq-more-link{
	font-size: 16px;
	color: rgb(28 43 32 / 70%);
	margin: 25px 0 0;
}

.faq-more-link a{
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.faq-more-link a:hover{
	color: var(--primary-color);
}

.faq-more-link-light{
	color: rgb(255 255 255 / 70%);
}

.faq-more-link-light a{
	color: var(--accent-color);
}

.faq-more-link-light a:hover{
	color: var(--white-color);
}

/* Inline links inside section intro paragraphs (e.g. contact -> common questions). */
.section-title p a{
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all 0.3s ease-in-out;
}

.section-title p a:hover{
	color: var(--primary-color);
}

.dark-section .section-title p a:hover{
	color: var(--white-color);
}

/* Package booking: ride choice (village tour) */
.svc-ride-block{
	margin-bottom: 28px;
}

.svc-ride-options{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 16px;
}

.svc-ride-option{
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: var(--bg-color);
	border: 2px solid var(--divider-color);
	border-radius: 16px;
	padding: 16px 48px 16px 16px;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.svc-ride-option:hover{
	border-color: var(--accent-color);
}

.svc-ride-option.is-active{
	border-color: var(--accent-color);
	background: var(--white-color);
	box-shadow: 0 8px 24px rgba(16, 59, 29, 0.12);
}

.svc-ride-icon{
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--accent-color);
	font-size: 20px;
}

.svc-ride-text{
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.svc-ride-text strong{
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3em;
}

.svc-ride-text em{
	font-style: normal;
	font-size: 13px;
	line-height: 1.4em;
	opacity: 0.7;
}

.svc-ride-check{
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%) scale(0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 12px;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.svc-ride-option.is-active .svc-ride-check{
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

@media only screen and (max-width: 767px){
	.svc-ride-options{
		grid-template-columns: 1fr;
	}
}

.service-info-closing{
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
	font-style: italic;
	opacity: 0.85;
}

/* ===== Currency switcher + converted prices ===== */
.header-btn{
	display: flex;
	align-items: center;
	gap: 14px;
}

.cur-switch{
	position: relative;
}

.cur-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 100px;
	color: var(--white-color);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cur-btn:hover,
.cur-btn[aria-expanded="true"]{
	background: rgba(255, 255, 255, 0.22);
	border-color: var(--accent-color);
}

.cur-flag{
	width: 22px;
	height: 16px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	flex: 0 0 auto;
}

.cur-caret{
	font-size: 10px;
	transition: transform 0.3s ease-in-out;
}

.cur-btn[aria-expanded="true"] .cur-caret{
	transform: rotate(180deg);
}

.cur-sym{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 100px;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cur-backdrop{
	position: fixed;
	inset: 0;
	z-index: 1190;
	background: rgba(8, 30, 15, 0.45);
	backdrop-filter: blur(2px);
	animation: curFade 0.2s ease both;
}

.cur-panel{
	position: fixed;
	z-index: 1200;
	width: 440px;
	max-width: calc(100vw - 32px);
	max-height: min(640px, calc(100vh - 110px));
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	color: var(--primary-color);
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(8, 30, 15, 0.4);
	padding: 20px 20px 16px;
	animation: curIn 0.22s ease both;
}

@keyframes curIn{
	from{ opacity: 0; transform: translateY(-8px) scale(0.98); }
	to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes curFade{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

@keyframes curSheet{
	from{ transform: translateY(100%); }
	to{ transform: translateY(0); }
}

.cur-grabber{
	display: none;
}

.cur-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.cur-title{
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

.cur-sub{
	margin: 4px 0 0;
	font-size: 13px;
	opacity: 0.65;
}

.cur-close{
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--bg-color);
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.2s ease;
}

.cur-close:hover{
	background: var(--accent-color);
}

.cur-search{
	position: relative;
	display: block;
	margin: 0 0 14px;
}

.cur-search i{
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	opacity: 0.5;
	pointer-events: none;
}

.cur-search input{
	width: 100%;
	height: 46px;
	padding: 0 16px 0 42px;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	background: var(--bg-color);
	color: var(--primary-color);
	font-size: 16px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cur-search input:focus{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(219, 145, 12, 0.18);
}

.cur-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 2px 2px 4px;
	margin: 0 -2px;
	min-height: 0;
}

.cur-card{
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	text-align: left;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.2s ease;
}

.cur-card:hover{
	border-color: var(--accent-color);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(16, 59, 29, 0.1);
}

.cur-card.is-active{
	border-color: var(--accent-color);
	background: rgba(219, 145, 12, 0.1);
	box-shadow: inset 0 0 0 1px var(--accent-color);
}

.cur-card .cur-flag{
	width: 34px;
	height: 24px;
	border-radius: 4px;
}

.cur-names{
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3em;
}

.cur-names strong{
	font-size: 15px;
	font-weight: 700;
}

.cur-names strong b{
	font-weight: 600;
	color: var(--accent-color);
	margin-left: 2px;
}

.cur-names em{
	font-style: normal;
	font-size: 12px;
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cur-names small{
	font-size: 11px;
	opacity: 0.5;
	white-space: nowrap;
}

.cur-tick{
	position: absolute;
	top: 8px;
	right: 9px;
	color: var(--accent-color);
	font-size: 14px;
}

.cur-empty{
	grid-column: 1 / -1;
	margin: 18px 0;
	text-align: center;
	font-size: 14px;
	opacity: 0.6;
}

.cur-foot{
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--divider-color);
}

.cur-status{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: #9a5b00;
}

.cur-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e0a21a;
}

.cur-status.is-live{
	color: #1c7a3a;
}

.cur-status.is-live .cur-dot{
	background: #22a44c;
	box-shadow: 0 0 0 0 rgba(34, 164, 76, 0.6);
	animation: curPulse 2s infinite;
}

@keyframes curPulse{
	70%{ box-shadow: 0 0 0 7px rgba(34, 164, 76, 0); }
	100%{ box-shadow: 0 0 0 0 rgba(34, 164, 76, 0); }
}

.cur-note{
	margin: 0;
	font-size: 11px;
	line-height: 1.45em;
	opacity: 0.6;
}

@media only screen and (max-width: 640px){
	.cur-panel{
		top: auto !important;
		right: 0 !important;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 86vh;
		border-radius: 24px 24px 0 0;
		padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
		animation: curSheet 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}

	.cur-grabber{
		display: block;
		width: 44px;
		height: 5px;
		margin: 0 auto 12px;
		border-radius: 10px;
		background: var(--divider-color);
	}

	.cur-card{
		padding: 11px 10px;
		gap: 10px;
	}
}

@media only screen and (max-width: 360px){
	.cur-grid{
		grid-template-columns: 1fr;
	}
}

.money{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
}

.money-main{
	font-weight: inherit;
	white-space: nowrap;
}

.money-approx{
	opacity: 0.6;
	font-weight: 400;
	margin-right: 2px;
}

.money-original{
	font-size: 0.68em;
	font-weight: 400;
	opacity: 0.6;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.svc-price-total .money{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2px;
}

.svc-price-total .money-original{
	font-size: 14px;
}

.svc-dest-chip small .money{
	display: inline;
}

.svc-dest-chip small .money-original{
	display: none;
}

.vehicle-price .money,
.price-total .money{
	display: inline-flex;
}

.cur-mobile{
	display: none;
}

@media only screen and (max-width: 991px){
	.header-btn{
		display: none;
	}

	.cur-mobile{
		display: block;
		margin-left: auto;
		margin-right: 62px;
	}

}

/* ===== Homepage: services at a glance ===== */
.services-glance{
	padding: 100px 0;
	background: var(--bg-color);
}

.glance-card{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 22px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glance-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 24px 50px rgba(16, 59, 29, 0.14);
}

.glance-image{
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.glance-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.glance-card:hover .glance-image img{
	transform: scale(1.06);
}

.glance-badge{
	position: absolute;
	left: 20px;
	bottom: -1px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px 18px 0 0;
	background: var(--white-color);
	color: var(--accent-color);
	font-size: 22px;
}

.glance-body{
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 18px 22px 24px;
}

.glance-type{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.glance-body h3{
	margin: 6px 0 10px;
	/* Card titles are the longest strings in the grid ("Airport Pickup &
	   Island-Wide Transport"). A smaller size plus generous tracking keeps
	   each title readable at a glance instead of wrapping into a dense
	   three-line block. */
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.45em;
}

.glance-body h3 a{
	color: var(--primary-color);
}

.glance-body > p{
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55em;
}

.glance-body ul{
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 0 0;
	border-top: 1px dashed var(--divider-color);
}

.glance-body li{
	display: flex;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.4em;
	color: var(--primary-color);
}

.glance-body li i{
	margin-top: 3px;
	color: var(--accent-color);
	font-size: 13px;
}

.glance-foot{
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.glance-price{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
}

.glance-price .money{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.glance-price .money-prefix,
.glance-price .money-suffix{
	font-size: 13px;
	font-weight: 500;
	opacity: 0.7;
}

.glance-cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 20px;
	border-radius: 100px;
	background: var(--primary-color);
	color: var(--white-color);
	font-weight: 600;
	font-size: 15px;
	transition: all 0.3s ease;
}

.glance-cta:hover{
	background: var(--accent-color);
	color: var(--primary-color);
}

.glance-trust{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 34px;
	margin: 48px 0 0;
	padding: 22px 28px;
	background: var(--primary-color);
	border-radius: 100px;
}

.glance-trust li{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white-color);
	font-size: 15px;
	font-weight: 500;
}

.glance-trust i{
	color: var(--accent-color);
}

.glance-more{
	text-align: center;
	margin-top: 26px;
}

.glance-more p{
	margin: 0;
}

.glance-more a{
	color: var(--accent-color);
	font-weight: 700;
	text-decoration: underline;
}

@media only screen and (max-width: 991px){
	.services-glance{ padding: 60px 0; }
	.glance-trust{ border-radius: 24px; justify-content: flex-start; padding: 20px; gap: 12px 24px; }
}

@media only screen and (max-width: 575px){
	.glance-trust{ flex-direction: column; }
}

/* ===== Homepage: services at a glance - dark band variant =====
   The section is a .dark-section band (theme balance on the home page), so the
   cards switch from the light white card to the theme's dark card language:
   translucent white + blur, exactly like .testimonial-item and
   .exhibition-item-header on the other dark bands. All colors come from theme
   variables so a palette change follows automatically. */
.services-glance.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0;
}

.services-glance.dark-section .glance-card{
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-color: var(--dark-divider-color);
	box-shadow: none;
}

.services-glance.dark-section .glance-card:hover{
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.services-glance.dark-section .glance-badge{
	background: var(--white-color);
	color: var(--accent-color);
}

.services-glance.dark-section .glance-body h3,
.services-glance.dark-section .glance-body h3 a{
	color: var(--white-color);
}

.services-glance.dark-section .glance-body h3 a:hover{
	color: var(--accent-color);
}

.services-glance.dark-section .glance-type{
	color: var(--accent-color);
}

.services-glance.dark-section .glance-body > p{
	color: rgba(255, 255, 255, 0.72);
}

.services-glance.dark-section .glance-body ul{
	border-top-color: var(--dark-divider-color);
}

.services-glance.dark-section .glance-body li{
	color: rgba(255, 255, 255, 0.9);
}

.services-glance.dark-section .glance-body li i{
	color: var(--accent-color);
}

.services-glance.dark-section .glance-price{
	color: var(--accent-color);
}

.services-glance.dark-section .glance-price .money-prefix,
.services-glance.dark-section .glance-price .money-suffix{
	color: rgba(255, 255, 255, 0.65);
}

.services-glance.dark-section .glance-cta{
	background: var(--accent-color);
	color: var(--primary-color);
}

.services-glance.dark-section .glance-cta:hover{
	background: var(--white-color);
	color: var(--primary-color);
}

.services-glance.dark-section .glance-trust{
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--dark-divider-color);
}

.services-glance.dark-section .glance-trust li{
	color: rgba(255, 255, 255, 0.92);
}

.services-glance.dark-section .glance-more p{
	color: var(--white-color);
}

.services-glance.dark-section .glance-more a{
	color: var(--accent-color);
}

@media only screen and (max-width: 991px){
	.services-glance.dark-section{ padding: 60px 0; }
}

/* ===== Safari booking: live jeep allocation preview =====
   Shows how the group splits across jeeps (one row per jeep, seat icons)
   while the guest stepper is used, so the extra-jeep rule is visible. */
.svc-jeep-fleet{
	margin-top: -6px;
	margin-bottom: 26px;
	padding: 18px 20px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

.svc-jeep-fleet-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.svc-jeep-fleet-title{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
}

.svc-jeep-fleet-title i{
	color: var(--accent-color);
	font-size: 15px;
}

.svc-jeep-fleet-sum{
	font-size: 13px;
	font-weight: 700;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
	padding: 7px 14px;
	white-space: nowrap;
}

.svc-jeep-fleet-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svc-jeep-fleet-list li{
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 14px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
}

.svc-jeep-idx{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgb(219 145 12 / 16%);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 700;
}

.svc-jeep-seats{
	display: inline-flex;
	gap: 7px;
	font-size: 14px;
	line-height: 1;
}

.svc-jeep-seats i{
	color: var(--accent-color);
}

.svc-jeep-seats i.is-free{
	color: rgb(16 59 29 / 25%);
}

.svc-jeep-fleet-list em{
	margin-left: auto;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
	opacity: 0.75;
	white-space: nowrap;
}

.svc-jeep-fleet-note{
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 13px 0 0;
	font-size: 13px;
	line-height: 1.55em;
	color: var(--primary-color);
	opacity: 0.8;
}

.svc-jeep-fleet-note i{
	margin-top: 3px;
	color: var(--accent-color);
}

@media only screen and (max-width: 575px){
	.svc-jeep-fleet{ padding: 15px; }
	.svc-jeep-fleet-head{ flex-direction: column; align-items: flex-start; }
}

/* ===== Safari booking: price-per-jeep icon calculation =====
   money x jeeps = total, laid out as icon cells instead of a sentence. */
.svc-jeep-calc{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 22px 0 4px;
	padding: 20px 16px;
	background: var(--white-color);
	border: 1px dashed var(--divider-color);
	border-radius: 16px;
}

.svc-jeep-calc-cell{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 84px;
	text-align: center;
}

.svc-jeep-calc-cell > i:first-child{
	font-size: 17px;
	color: var(--accent-color);
}

.svc-jeep-calc-cell strong{
	font-size: 17px;
	line-height: 1.2em;
	color: var(--primary-color);
}

.svc-jeep-calc-cell em{
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-color);
	opacity: 0.6;
}

.svc-jeep-calc-op{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 13px;
}

.svc-jeep-calc-total strong{
	font-family: var(--accent-font);
	font-weight: 400;
	font-size: 24px;
	color: var(--accent-color);
}

@media only screen and (max-width: 575px){
	.svc-jeep-calc{ gap: 8px; padding: 16px 10px; }
	.svc-jeep-calc-cell{ min-width: 68px; }
}

/* ===== Service detail sidebar: spacing fixes =====
   The inquiry button and the share row are direct children of the
   .event-category-item-list, which only styled the info rows - they were
   flush against the last row and against each other. */
.event-category-item-list > .svc-inquiry-btn{
	margin: 24px 0 18px;
}

.event-category-item-list > .svc-share-row{
	margin: 0;
	padding-top: 4px;
}

.event-category-social-links.svc-share-row p{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

/* The three info rows always have the inquiry button and the share row after
   them, so every row keeps its rule - no :last-child trim is possible here
   (they are never the last children of the list). */

/* ===== Client-side hardening (paired with components/SecurityGuard.jsx) =====
   Deterrent only - blocks casual text selection / drag / iOS long-press
   scraping. Form fields keep normal selection so real users can type & paste. */
body{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

body input,
body textarea,
body [contenteditable="true"]{
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

img{
	-webkit-user-drag: none;
	user-drag: none;
}

/* ===== Related guides on a post (app/guide/[category]/[slug]/page.jsx) =====
   Same card language as the guide browser - photo with a bottom-anchored white
   overlay - under a heading block that carries the cross-links. The card title
   is an h3 so the article keeps one h1 and section-level h2s. */
.post-related{
	margin-top: 60px;
	padding-top: 50px;
	border-top: 1px solid var(--divider-color);
}

.post-related-head{
	margin-bottom: 35px;
}

.post-related-head h2{
	font-size: 30px;
	line-height: 1.8em;
	margin-bottom: 12px;
}

.post-related-head p{
	margin-bottom: 0;
	line-height: 1.8em;
	color: rgb(28 43 32 / 82%);
}

.post-related-head p a{
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.post-related-head p a:hover{
	color: var(--accent-color);
}

.post-related .post-item-content h3,
.svc-related .post-item-content h3{
	font-size: 16px;
	line-height: 1.8em;
	margin-bottom: 0;
	color: var(--white-color);
}

.post-related .post-item-content h3 a,
.svc-related .post-item-content h3 a{
	color: inherit;
}

@media only screen and (max-width: 767px){
	.post-related{
		margin-top: 45px;
		padding-top: 38px;
	}

	.post-related-head h2{
		font-size: 24px;
	}
}

/* ===== Hero headline parity (app/home-page.jsx) =====
   Slide 0 renders the h1 and the remaining slides render h2, but the theme only
   scales .section-title h1 at the small breakpoints. Without this the h1 went
   50 -> 38 -> 26px while an h2 stayed on the base 50px rule, so the headline
   visibly jumped size as the visitor swiped through the slider. */
@media only screen and (max-width: 991px){
	.hero.hero-slider-layout .hero-content h2,
	.hero.hero-image-layout .hero-content h2{
		font-size: 38px;
		line-height: 1.6em;
	}
}

@media only screen and (max-width: 767px){
	.hero.hero-slider-layout .hero-content h2,
	.hero.hero-image-layout .hero-content h2{
		font-size: 26px;
		line-height: 1.6em;
	}
}

/* ===== Related guides on a service page (service-detail-page.jsx) =====
   Same card component as the guide browser and the guide detail page. The
   section only needs its own bottom spacing: .page-event-single already gives
   100px above it and the dark FAQ band gives 100px below. */
.svc-related{
	padding-bottom: 40px;
}

.svc-related .section-title{
	margin-bottom: 45px;
}

@media only screen and (max-width: 767px){
	.svc-related{
		padding-bottom: 20px;
	}
}

/* Map attribution (third-party MapLibre control): the OpenStreetMap links sit
   inline in a low-contrast text block, so they need an underline to be
   distinguishable without relying on colour alone (axe link-in-text-block). */
.maplibregl-ctrl-attrib a{
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =====================================================================
   Contrast pass (WCAG AA / axe) - app/*, components/*

   1. White label sitting on the gold --accent-color (#DB910C) measures
      2.6:1 against a 4.5:1 minimum for the 16px/700 button labels. The
      label flips to the theme's dark green (4.9:1) instead - the same
      dark-on-gold pairing the currency switcher already uses - and back
      to white wherever a hover state sweeps a dark panel across the
      button (which would otherwise hide dark-on-dark).
   2. Gold used as *text* on a light surface is only 2.4-2.6:1, so body
      links inherit their sentence colour (readable on both the light
      and the dark bands that share the same markup) and the remaining
      gold labels go to --primary-color.
   3. Gold text sitting on the dark green bands measures 4.1-4.2:1, a
      hair under 4.5:1, so those instances use one step brighter of the
      same hue (#E3A021 -> 4.7-4.8:1) - the gold itself is unchanged
      everywhere it is used as a fill.
   ===================================================================== */

/* -- 1. gold buttons keep white lettering + a white arrow -------
   Client's call, re-confirmed: white on the gold fill is the clearest
   preview of the button. The contrast trade-off is accepted for every
   gold button, the gold ticker and nowhere else. Base `.btn-default`
   and `.svc-inquiry-btn` already ship `color: var(--white-color)` with
   `arrow-white.svg`, so the dark-green label override from the last
   pass is simply retired rather than replaced. On hover the button
   sweeps to dark green, which puts white back to ~14:1. */
.our-scrolling-ticker .scrolling-content span{
	color: var(--white-color);
}

.page-category-list .page-category-list-title{
	color: var(--primary-color);
}

.guide-side-widget-head{
	color: var(--primary-color);
}

.guide-side-count{
	color: var(--primary-color);
}

.gallery-filter-btn.active,
.gallery-filter-btn.active:hover{
	color: var(--primary-color);
}

.post-tags .tag-links a{
	color: var(--primary-color);
}

.post-tags .tag-links a:hover{
	color: var(--white-color);
	background: var(--primary-color);
	border-color: var(--primary-color);
}

/* -- 2. gold text on a light surface ---------------------------- */
.section-footer-text p a,
.section-title p a,
.faq-more-link a{
	color: inherit;
}

.guide-side-cats a.active,
.guide-side-cats a.active:hover{
	color: var(--primary-color);
}

.svc-jeep-idx{
	color: var(--primary-color);
}

.svc-dest-chip .money{
	color: var(--primary-color);
}

/* 0.6 opacity dropped a #1C2B20 price to 4.09:1 on white; 0.75 keeps the
   "secondary price" feel while clearing 4.5:1. */
.money-original{
	opacity: 0.75;
}

/* -- 3. gold text on the dark green bands ----------------------- */
.svc-detail-faq.dark-section .accordion-button{
	color: #E3A021;
}

.services-glance.dark-section .glance-type{
	color: #E3A021;
}

.services-glance.dark-section .money-original{
	color: #E3A021;
	opacity: 1;
}

/* =====================================================================
   Contrast pass - round 2: instances where a more specific theme rule
   already claimed the colour, so these repeat the exact specificity.
   ===================================================================== */

/* Open accordion question on the dark service FAQ band: the theme's
   :not(.collapsed) rule wins at higher specificity and leaves it gold
   (4.1:1), so the brighter tint has to beat it at the same weight. */
.svc-detail-faq .faq-accordion .accordion-header .accordion-button:not(.collapsed),
.svc-detail-faq .faq-accordion .accordion-header .accordion-button:not(.collapsed):hover{
	color: #E3A021;
}

/* Category count badge inside the active guide filter (white on gold). */
.guide-side-cats a.active .guide-side-count,
.guide-side-cats a:hover .guide-side-count,
.guide-side-cats a.active:hover .guide-side-count{
	color: var(--primary-color);
}

/* Pull-quote on a gold card. */
.post-entry blockquote p{
	color: var(--primary-color);
}

/* CTA links sitting inside article text. */
.guide-faq-more a,
.post-entry p a,
.post-entry li a,
.booking-wizard-header span{
	color: var(--primary-color);
}

.guide-faq-more a:hover,
.post-entry p a:hover,
.post-entry li a:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Info-card heading on the dark services band - 4.3:1. */
.service-info-card h4{
	color: #E3A021;
}

/* "From / per ride" price qualifiers: 65% white at 70% opacity was 3.6:1
   against the dark card. */
.glance-price .money-prefix,
.glance-price .money-suffix{
	color: rgba(255, 255, 255, 0.85);
	opacity: 1;
}

/* Converted currency under a total price: 0.65 opacity measured 4.2:1. */
.svc-price-total .money-main{
	opacity: 0.8;
}

/* =====================================================================
   About page photos (client-reported: "too many height, not properly")

   Two stacked bugs:
   1. The template stretches the photo column to `height: 100%` of the
      text column, so a tall text block produced 1020-1203px photos that
      `object-fit: cover` then cropped to a narrow strip.
   2. Every one of these <img> tags carries HTML width/height attributes
      (e.g. width={200} height={200}). Those presentational hints only
      apply where the stylesheet says nothing about height - so with
      `width: 100%; max-width: 50px; aspect-ratio: 1/1` the width obeyed
      CSS (50px) while the height obeyed the attribute (200px), yielding
      50x200 avatar slivers, and `aspect-ratio` was silently ignored.

   Declaring `height: auto` restores the intended aspect ratios.
   ===================================================================== */
.about-us-image.box-2,
.about-us-image.box-2 figure,
.about-us-image.box-2 figure img,
.about-us-image figure img,
.history-image.box-1 figure,
.history-image figure img,
.about-author-box-image img,
.testimonial-author-image img,
/* Third instance of the same bug: the "satisfied clients" avatar strip
   (30-50px wide) was still taking its 200px height from the HTML attribute,
   rendering the square 200x200 source as a 30x200 stretched sliver - the one
   image on the whole site Lighthouse still called image-aspect-ratio. */
.satisfy-client-image img{
	height: auto;
}

/* =====================================================================
   DevTools shield (components/SecurityGuard.jsx)
   Mounted only when a docked panel is *detected*, never for crawlers or
   Lighthouse (webdriver guard), and always escapable for the session - so
   a wrong guess can never trap a real visitor. z-index sits under the
   preloader so the two can never fight for the top of the stack.
   ===================================================================== */
.security-shield{
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(9, 24, 15, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-align: center;
	/* The preloader runs a keyed spin animation for 40s+ and keeps starting a
	   new one; it claims its own animation on .preloader. Shown once. */
	animation: security-shield-in 240ms ease-out both;
}

@keyframes security-shield-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

.security-shield-card{
	max-width: 460px;
	color: var(--white-color);
}

.security-shield-card i{
	display: block;
	font-size: 46px;
	color: var(--accent-color);
	margin-bottom: 18px;
}

.security-shield-card h2{
	font-family: var(--heading-font);
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--white-color);
}

.security-shield-card p{
	font-size: 15.5px;
	line-height: 1.65;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

.security-shield-dismiss{
	margin-top: 22px;
	padding: 9px 20px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--base-font);
	font-size: 13px;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: all 0.3s ease;
}

.security-shield-dismiss:hover,
.security-shield-dismiss:focus{
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.security-shield-dismiss:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

@media (max-width: 575px){
	.security-shield-card i{ font-size: 38px; }
	.security-shield-card h2{ font-size: 21px; }
	.security-shield-card p{ font-size: 14.5px; }
}

/* =====================================================================
   Tap-target sizing - WCAG 2.5.8 (AA) wants a 24 x 24 CSS px target.
   Measured before this rule: breadcrumb links 21px tall, footer links
   21px, "Contact Page" 19px. Vertical padding grows the hit area and
   nothing else: inline padding never participates in line-height, so
   not a single line of type moves. 3px each side puts every one of them
   over 24px (19+6 = 25, 21+6 = 27).
   ===================================================================== */
nav .breadcrumb-item a,
.footer-links ul li a,
.footer-links a,
.footer-copyright-text p a{
	padding-top: 3px;
	padding-bottom: 3px;
}

/* The two text CTAs that measure under the limit: "See Price & Book" on the
   booking preview cards (16px) and the sidebar "Contact Page" link (19px).
   .booking-card-view is an inline-flex with align-items:center, so vertical
   padding centres itself and the label does not move. */
.booking-card-view{
	padding-top: 5px;
	padding-bottom: 5px;
}

.svc-cta-secondary{
	padding-top: 6px;
}

/* "Need Help Planning?" sidebar phone + WhatsApp links measured 21px. */
.sidebar-cta-box-content ul li a{
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
}


/* ----------------------------------------------------------------------------------------
   Round 3 - client review fixes (responsive gaps, phone fields, date picker, toasts,
   floating WhatsApp, booking slider geometry, lightbox clipping).
   ---------------------------------------------------------------------------------------- */

/* --- 1. /common-questions: gap above "Experiences & Guides Behind These Answers" ------
   The related-links block is a sibling of the .page-faqs-category wrapper, not of a
   .page-single-faqs, so the template's 80px sibling margin never applied and the two
   sat flush against each other. */
.page-faqs .page-faqs-category + .page-single-faqs{
	margin-top: 80px;
	padding-top: 64px;
	border-top: 1px solid var(--divider-color);
}

@media only screen and (max-width: 991px){
	.page-faqs .page-faqs-category + .page-single-faqs{
		margin-top: 56px;
		padding-top: 44px;
	}
}

@media only screen and (max-width: 767px){
	.page-faqs .page-faqs-category + .page-single-faqs{
		margin-top: 44px;
		padding-top: 34px;
	}
}

/* --- 8. /services how-it-works: gap under "why travellers book with us" ---------------
   .section-sub-title is display:inline, so its own margin-bottom never applied and the
   h3 below it overlapped the sub-title by 2px. A margin on the heading works whatever
   the sub-title's display turns out to be, on every breakpoint. */
.svc-trust-intro .section-sub-title{
	display: inline-block;
}

.svc-trust-intro h3{
	margin-top: 18px;
}

.svc-trust-intro p{
	margin-top: 12px;
}

/* --- 4. Booking search button: one icon, comfortable rhythm -------------------------- */
.svc-search-open{
	gap: 16px;
	align-items: center;
}

.svc-search-open > i:first-child{
	flex: 0 0 auto;
	width: 22px;
	text-align: center;
}

.svc-search-bar{
	gap: 14px;
}

.svc-search-bar button{
	flex: 0 0 auto;
}

/* --- 5. Footer newsletter: real gap between the field, the send button and the new
       WhatsApp-this-email button ---------------------------------------------------- */
.footer-newsletter-box .form-group{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.footer-newsletter-box .form-group .form-control{
	flex: 1 1 190px;
	width: auto;
	min-width: 0;
}

/* The newsletter box now has a single button (it opens WhatsApp), so the old
   second `.newsletter-wa` button, the "prefer WhatsApp?" hint line and the
   link button that appeared after a submit are gone - no rules left for them. */
.footer-newsletter-box .form-group .newsletter-btn{
	flex: 0 0 auto;
}

.footer-newsletter-box .form-group .newsletter-btn:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

/* --- 12. Footer WhatsApp number is a real link --------------------------------------- */
.footer-opening-hour-box .footer-links ul li span a{
	color: var(--accent-color);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.footer-opening-hour-box .footer-links ul li span a:hover{
	color: var(--white-color);
}

/* --- 13. Floating WhatsApp button, bottom-left corner --------------------------------
   The scroll-to-top ring and the toast stack own the bottom-right, so the
   contact button is parked in the opposite corner: thumb-reachable on a
   phone, never sitting on top of another floating control. */
.whatsapp-float{
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 9999;
	display: flex;
	align-items: center;
	animation: whatsappIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

@keyframes whatsappIn{
	from{ opacity: 0; transform: translateY(20px); }
	to{ opacity: 1; transform: translateY(0); }
}

.whatsapp-float-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #25D366;
	color: var(--white-color);
	font-size: 26px;
	line-height: 1;
	box-shadow: 0 12px 28px rgb(37 211 102 / 38%);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float-btn:hover,
.whatsapp-float-btn:focus-visible{
	transform: translateY(-3px) scale(1.06);
	background-color: #1eb857;
	color: var(--white-color);
}

.whatsapp-float-btn:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

.whatsapp-float-tip{
	position: absolute;
	/* The button now hugs the left edge, so the pill opens to its right -
	   otherwise it would run off the screen. */
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(-6px);
	white-space: nowrap;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 9px 14px;
	border-radius: 100px;
	box-shadow: 0 10px 24px rgb(0 0 0 / 25%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease-in-out;
}

.whatsapp-float:hover .whatsapp-float-tip,
.whatsapp-float-btn:focus-visible + .whatsapp-float-tip,
.whatsapp-float-tip:hover{
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Visible as soon as the page has any scroll distance at all (the button is a
   contact route, not a navigation aid, so it does not wait for 300px). */
.whatsapp-float.is-visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media only screen and (max-width: 991px){
	.whatsapp-float{
		left: 22px;
		bottom: 24px;
	}

	.whatsapp-float-btn{
		width: 48px;
		height: 48px;
		font-size: 24px;
	}
}

@media only screen and (max-width: 575px){
	/* On a phone the tooltip has nowhere to go, so it reads underneath the
	   button instead of beside it. */
	.whatsapp-float{
		left: 16px;
		bottom: 20px;
	}

	.whatsapp-float-tip{
		display: none;
	}
}

/* --- 6. Toast notifications, bottom right, above the floating actions ---------------- */
.cl-toast-region{
	position: fixed;
	right: 30px;
	bottom: 104px;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.cl-toast{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	width: 100%;
	pointer-events: auto;
	padding: 15px 16px 17px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 16px;
	box-shadow: 0 20px 46px rgb(16 59 29 / 20%);
	overflow: hidden;
	animation: clToastIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cl-toast-success{ border-left-color: var(--primary-color); }
.cl-toast-error{ border-left-color: #C0392B; }
.cl-toast-warning{ border-left-color: var(--accent-color); }
.cl-toast-info{ border-left-color: var(--primary-color); }

.cl-toast-icon{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 15px;
	background: rgb(219 145 12 / 12%);
	color: var(--accent-color);
}

.cl-toast-success .cl-toast-icon{ background: rgb(16 59 29 / 10%); color: var(--primary-color); }
.cl-toast-error .cl-toast-icon{ background: rgb(192 57 43 / 10%); color: #C0392B; }

.cl-toast-body{
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}

.cl-toast-body strong{
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 3px;
}

.cl-toast-body p{
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55em;
	color: rgb(28 43 32 / 78%);
	overflow-wrap: anywhere;
}

.cl-toast-close{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: -2px -4px 0 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: rgb(28 43 32 / 45%);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cl-toast-close:hover{
	background: var(--bg-color);
	color: var(--primary-color);
}

.cl-toast-timer{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--accent-color);
	transform-origin: left center;
	animation-name: clToastTimer;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.cl-toast-success .cl-toast-timer{ background: var(--primary-color); }
.cl-toast-error .cl-toast-timer{ background: #C0392B; }

@keyframes clToastIn{
	from{ opacity: 0; transform: translateY(18px) scale(0.97); }
	to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes clToastTimer{
	from{ transform: scaleX(1); }
	to{ transform: scaleX(0); }
}

@media only screen and (max-width: 767px){
	/* Full width, lifted clear of the scroll-to-top ring and the WhatsApp
	   button so a validation warning never covers either. */
	.cl-toast-region{
		right: 16px;
		left: 16px;
		bottom: 96px;
		width: auto;
		align-items: stretch;
	}
}

/* --- 2. International phone field ---------------------------------------------------- */
.phone-field{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.phone-field-label{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.phone-control{
	display: flex;
	align-items: stretch;
	gap: 0;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	overflow: hidden;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.phone-control:focus-within{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.phone-country-btn{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 0 13px;
	background: var(--secondary-color);
	border: none;
	border-right: 1px solid var(--divider-color);
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.phone-country-btn:hover{
	background: rgb(219 145 12 / 14%);
}

.phone-country-btn .fi{
	font-size: 20px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}

.phone-country-iso{
	letter-spacing: 0.04em;
	opacity: 0.75;
	font-size: 12.5px;
}

.phone-dial{
	white-space: nowrap;
}

.phone-country-btn .fa-chevron-down{
	font-size: 10px;
	opacity: 0.5;
	transition: transform 0.3s ease-in-out;
}

.phone-field.is-open .phone-country-btn .fa-chevron-down{
	transform: rotate(180deg);
}

.phone-control .phone-input{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 14px 15px;
	font-family: var(--default-font);
	font-size: 15px;
	letter-spacing: 0.03em;
	color: var(--text-color);
}

.phone-field.is-invalid .phone-control{
	border-color: #C0392B;
}

.phone-error{
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: #C0392B;
}

.phone-pop{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 60;
	width: min(380px, calc(100vw - 40px));
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	box-shadow: 0 26px 60px rgb(16 59 29 / 22%);
	padding: 10px;
	animation: clToastIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.phone-pop-head{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px 10px;
	border-bottom: 1px solid var(--divider-color);
}

.phone-pop-head .fa-magnifying-glass{
	color: var(--accent-color);
	font-size: 13px;
}

.phone-search{
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--default-font);
	font-size: 14.5px;
	color: var(--text-color);
}

.phone-pop-count{
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.phone-list{
	list-style: none;
	margin: 0;
	padding: 6px 0 2px;
	max-height: 268px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.phone-list li button{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	background: transparent;
	border-radius: 10px;
	font-family: var(--default-font);
	font-size: 14px;
	color: var(--text-color);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.phone-list li button:hover,
.phone-list li button:focus-visible{
	background: rgb(219 145 12 / 12%);
	outline: none;
}

.phone-list li button.is-selected{
	background: rgb(16 59 29 / 8%);
	color: var(--primary-color);
	font-weight: 700;
}

.phone-list li button .fi{
	font-size: 19px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}

.phone-list-name{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phone-list-code{
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	opacity: 0.65;
}

.phone-list-empty{
	padding: 18px 12px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: rgb(28 43 32 / 65%);
}

/* --- 10. Branded date picker --------------------------------------------------------- */
.cl-date{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cl-date-label{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.cl-date-trigger{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cl-date-trigger:hover,
.cl-date.is-open .cl-date-trigger{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.cl-date-trigger.is-empty{
	color: rgb(28 43 32 / 45%);
}

.cl-date-trigger > span{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl-date-trigger > i:first-child{
	color: var(--accent-color);
	font-size: 15px;
}

.cl-date-trigger .fa-chevron-down{
	font-size: 11px;
	opacity: 0.5;
	transition: transform 0.3s ease-in-out;
}

.cl-date.is-open .cl-date-trigger .fa-chevron-down{
	transform: rotate(180deg);
}

.cl-date-clear{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--divider-color);
	color: var(--primary-color);
	font-size: 11px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.cl-date-clear:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.cl-date-pop{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 70;
	width: min(330px, calc(100vw - 40px));
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	box-shadow: 0 26px 60px rgb(16 59 29 / 22%);
	padding: 14px;
	animation: clToastIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cl-date-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.cl-date-title{
	font-size: 15.5px;
	font-weight: 700;
	color: var(--primary-color);
	letter-spacing: 0.02em;
}

.cl-date-nav{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: var(--bg-color);
	color: var(--primary-color);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cl-date-nav:hover:not(:disabled){
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.cl-date-nav:disabled{
	opacity: 0.35;
	cursor: not-allowed;
}

.cl-date-weekdays,
.cl-date-grid{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.cl-date-weekdays{
	margin-bottom: 6px;
}

.cl-date-weekdays span{
	text-align: center;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(28 43 32 / 45%);
}

.cl-date-cell{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: none;
	background: transparent;
	border-radius: 10px;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.cl-date-cell.is-blank{
	cursor: default;
}

.cl-date-cell:hover:not(:disabled){
	background: rgb(219 145 12 / 14%);
	color: var(--primary-color);
}

.cl-date-cell:disabled{
	color: rgb(28 43 32 / 26%);
	text-decoration: line-through;
	cursor: not-allowed;
}

.cl-date-cell.is-today{
	box-shadow: inset 0 0 0 1px var(--accent-color);
	font-weight: 700;
}

.cl-date-cell.is-selected{
	background: var(--primary-color);
	color: var(--white-color);
	font-weight: 700;
	box-shadow: none;
}

.cl-date-foot{
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--divider-color);
	font-size: 12px;
	line-height: 1.5em;
	color: rgb(28 43 32 / 60%);
}

.cl-date-foot i{
	color: var(--accent-color);
}

.cl-date-error{
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: #C0392B;
}

/* The wizard step panel is focused programmatically after "next" so the view
   lands on the fields to fill - the ring must be visible but not jarring. */
.svc-booking-panel:focus,
.booking-wizard-body:focus,
.tp-panel:focus{
	outline: none;
}

.svc-booking-panel:focus-visible,
.booking-wizard-body:focus-visible,
.tp-panel:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 6px;
	border-radius: 20px;
}

/* --- 11. Gallery lightboxes: never taller than the viewport they live in ------------- */
.gallery-lightbox{
	overflow: hidden;
}

@media only screen and (max-width: 991px){
	/* 100% of the padded overlay, not 100vh: 100vh is the *large* viewport on
	   phones, so the dialog grew past the toolbars and the bottom - captions,
	   share row and thumbnails - was unreachable and unsrollable. */
	.gallery-lightbox-dialog{
		max-height: 100%;
	}
}

@media only screen and (max-width: 767px){
	.gallery-lightbox-dialog{
		max-height: 100%;
	}
}

/* The stage box has a definite height at every breakpoint (it is the flexible
   row of the dialog), so `object-fit: contain` on the img can always resolve.
   The img fills that box exactly and the *photograph* is scaled down to fit
   inside it - so a 4:3, a 3:2 or a 9:16 frame all show the complete,
   uncropped original with no zoom, no matter how large or small the window
   is. */
.gallery-lightbox-image,
.svc-gl-image{
	width: 100%;
}

.gallery-lightbox-image img,
.svc-gl-image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media only screen and (max-width: 575px){
	.gallery-lightbox-image{
		min-height: clamp(90px, 16dvh, 190px);
	}

	.svc-gl-image{
		min-height: clamp(90px, 16dvh, 190px);
	}

	.gallery-lightbox-foot{
		gap: 12px;
	}

	.gallery-lightbox-thumbs{
		padding-bottom: 10px;
	}
}

/* --- 14. Airport transfer slider: shorter cards, buttons centred on the card -------- */
/* The variable MUST be declared on .booking-viewport - the element that owns
   BOTH the card and the stepper strip. It used to be declared on .booking-card
   only, but .booking-nav is a *sibling* of the cards, so `var(--bk-card-h)`
   never resolved there: the declaration was invalid at computed-value time,
   the nav fell back to `height: auto` (just the buttons) with `top: 0`, and
   the prev/next buttons stuck to the top edge of the map instead of sitting
   in its vertical middle - which also made them awkward to hit. */
.booking-viewport{
	--bk-card-h: 430px;
}

.booking-card{
	/* Was a fixed 540px, which pushed the strip to 620px+ with the info block
	   underneath. The map is now framed on the whole island, so a shorter box
	   still shows the entire route. */
	height: var(--bk-card-h);
}

/* The steppers used to centre against the whole column (card + info text),
   which put them well below the map. They now centre on the card alone. */
.booking-nav{
	bottom: auto;
	height: var(--bk-card-h);
	padding: 0 10px;
}

@media only screen and (max-width: 1199px){
	.booking-viewport{
		--bk-card-h: 400px;
	}
}

@media only screen and (max-width: 767px){
	.booking-viewport{
		--bk-card-h: 380px;
	}
}

/* Endpoint labels need room inside the card now that the whole island is in
   frame - pull them in from the very edge so neither is clipped. */
.map-pin-label{
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ----------------------------------------------------------------------------------------
   /services/tour-plan - multi-stop tour planner (appended so the site keeps one stylesheet).
   ---------------------------------------------------------------------------------------- */

/* /services/tour-plan - standalone styles for the multi-stop tour planner.
   Every selector is anchored by a .tp-* class (the page sections carry
   .tp-intro / .tp-planner / .tp-trust / .tp-faq and everything inside the
   wizard lives under .tp-planner), so nothing here can leak into other
   routes. Rules that adjust the shared .svc-* wizard widgets are written
   as ".tp-planner .x" - the extra class raises specificity above
   custom.css's own ".svc-*" and element rules, so this file never depends
   on whether it loads before or after custom.css. Palette comes from the
   site-wide custom properties only. */

/************************************/
/***  page sections               ***/
/************************************/

.tp-intro{
	padding: 100px 0 40px;
	background: var(--bg-color);
}

.tp-highlight{
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px 28px;
	transition: all 0.4s ease-in-out;
}

.tp-highlight:hover{
	border-color: var(--accent-color);
	box-shadow: 0 20px 44px rgb(16 59 29 / 10%);
	transform: translateY(-5px);
}

.tp-highlight-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	background: rgb(219 145 12 / 12%);
	border-radius: 15px;
	color: var(--accent-color);
	font-size: 21px;
	transition: all 0.4s ease-in-out;
}

.tp-highlight:hover .tp-highlight-icon{
	background: var(--accent-color);
	color: var(--white-color);
}

.tp-highlight h3{
	font-size: 17px;
	line-height: 1.4em;
}

.tp-highlight p{
	font-size: 14.5px;
	line-height: 1.65em;
	opacity: 0.8;
	margin: 0;
}

/* Trust band + FAQ wrapper */

.tp-trust{
	padding: 100px 0;
}

.tp-faq{
	padding: 100px 0;
	background: var(--bg-color);
}

.tp-trust-card{
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	background: rgb(255 255 255 / 5%);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 28px 26px;
	transition: all 0.4s ease-in-out;
}

.tp-trust-card:hover{
	border-color: rgb(219 145 12 / 45%);
	transform: translateY(-5px);
}

.tp-trust-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	background: rgb(219 145 12 / 18%);
	border: 1px solid rgb(219 145 12 / 45%);
	border-radius: 15px;
	color: var(--accent-color);
	font-size: 21px;
}

.tp-trust-card h3{
	font-size: 17px;
	line-height: 1.4em;
	color: var(--white-color);
}

.tp-trust-card p{
	font-size: 14px;
	line-height: 1.65em;
	color: rgb(255 255 255 / 72%);
	margin: 0;
}

/************************************/
/***  the wizard panel            ***/
/************************************/

.tp-planner{
	padding: 60px 0 100px;
	background: var(--bg-color);
}

/* Step transitions scroll the panel into view and focus it - keep the
   sticky header from covering it and never paint a ring for the
   programmatic focus, only for keyboard users. */
.tp-panel{
	scroll-margin-top: 120px;
}

.tp-panel:focus{
	outline: none;
}

.tp-panel:focus-visible{
	outline: 3px solid rgb(219 145 12 / 55%);
	outline-offset: 4px;
}

.tp-block{
	margin-top: 4px;
}

/* Shared field bits (labels/errors used outside .svc-field too) */

.tp-label{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.tp-planner .tp-field-error{
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--error-color);
}

.tp-planner .tp-hint{
	font-style: normal;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.6em;
	color: var(--text-color);
	opacity: 0.65;
	margin: 0;
}

.tp-hint{
	font-size: 13px;
	line-height: 1.6em;
	opacity: 0.7;
	margin: 12px 0 0;
}

/* ---- start / end point picker ---- */

.tp-point-card{
	position: relative;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	padding: 22px 24px;
	margin-bottom: 26px;
}

.tp-point-head{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.tp-point-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background: rgb(16 59 29 / 8%);
	border-radius: 14px;
	color: var(--primary-color);
	font-size: 19px;
}

.tp-point-head .svc-field-label{
	flex: 1 1 220px;
	min-width: 0;
}

.tp-point-current{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--primary-color);
	border-radius: 100px;
	padding: 9px 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--white-color);
}

.tp-point-current i{
	color: var(--accent-color);
	font-size: 11px;
}

.tp-point-field{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tp-point-field input,
.tp-input{
	width: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	padding: 14px 16px;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.tp-point-field input:focus,
.tp-input:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

.tp-point-field input::placeholder,
.tp-input::placeholder{
	color: rgb(28 43 32 / 45%);
}

.tp-select{
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--secondary-color);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23103B1D'%3E%3Cpath d='M10 13.5 4 6.5h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px 14px;
	border: 1px solid var(--divider-color);
	border-radius: 13px;
	padding: 13px 42px 13px 15px;
	font-family: var(--default-font);
	font-size: 14.5px;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.tp-select:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgb(219 145 12 / 15%);
}

/* local suggestions */

.tp-place-list{
	position: absolute;
	z-index: 6;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	box-shadow: 0 20px 44px rgb(16 59 29 / 14%);
	max-height: 308px;
	overflow-y: auto;
}

.tp-place-list li + li{
	margin-top: 4px;
}

.tp-place-list button{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 11px;
	padding: 11px 12px;
	font-family: var(--default-font);
	text-align: left;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}

.tp-place-list button:hover,
.tp-place-list button.active{
	background: rgb(219 145 12 / 10%);
	border-color: rgb(219 145 12 / 35%);
}

.tp-place-list button.tp-place-use{
	border-style: dashed;
	border-color: rgb(16 59 29 / 30%);
}

.tp-place-list button > i{
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--accent-color);
}

.tp-place-list button > span{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tp-place-list button strong{
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tp-place-list button em{
	font-style: normal;
	font-size: 12px;
	line-height: 1.4em;
	opacity: 0.65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tp-chip-row{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin-top: 16px;
}

.tp-chip-label{
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.55;
}

.tp-chip-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* ---- stop list ---- */

.tp-route-list{
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
}

.tp-stop{
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 16px 18px;
	transition: all 0.3s ease-in-out;
}

.tp-stop:hover{
	border-color: rgb(219 145 12 / 45%);
}

.tp-stop-idx{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 6px;
	background: var(--primary-color);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--white-color);
}

.tp-stop-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: rgb(219 145 12 / 12%);
	border-radius: 13px;
	color: var(--accent-color);
	font-size: 17px;
}

.tp-stop-body{
	flex: 1;
	min-width: 0;
}

.tp-stop-top{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.tp-stop-top h4{
	font-size: 15px;
	line-height: 1.4em;
}

.tp-stop-tag{
	font-size: 10px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
	background: rgb(219 145 12 / 14%);
	border-radius: 100px;
	padding: 6px 11px;
}

.tp-stop-sub{
	font-size: 13px;
	line-height: 1.55em;
	opacity: 0.75;
	margin: 5px 0 0;
}

.tp-stop-dest{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 13px;
	max-width: 420px;
}

.tp-stop-controls{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.tp-move,
.tp-remove{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	font-size: 12.5px;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.tp-move:hover:not(:disabled){
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.tp-move:disabled{
	opacity: 0.35;
	cursor: not-allowed;
}

.tp-remove:hover{
	background: var(--error-color);
	border-color: var(--error-color);
	color: var(--white-color);
}

.tp-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--bg-color);
	border: 1px dashed var(--divider-color);
	border-radius: 16px;
	padding: 30px 24px;
	margin-bottom: 28px;
	text-align: center;
}

.tp-empty i{
	font-size: 24px;
	color: var(--accent-color);
}

.tp-empty h4{
	font-size: 16px;
}

.tp-empty p{
	font-size: 14px;
	line-height: 1.6em;
	opacity: 0.75;
	margin: 0;
}

/* ---- catalog ---- */

.tp-catalog-label{
	margin-top: 4px;
}

.tp-catalog{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.tp-catalog-card{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 18px;
	font-family: var(--default-font);
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.tp-catalog-card:hover:not(:disabled){
	border-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgb(16 59 29 / 10%);
}

.tp-catalog-card:disabled{
	opacity: 0.5;
	cursor: not-allowed;
}

.tp-catalog-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: rgb(16 59 29 / 8%);
	border-radius: 13px;
	color: var(--primary-color);
	font-size: 18px;
}

.tp-catalog-body{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tp-catalog-tag{
	font-size: 10px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-color);
}

.tp-catalog-body strong{
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

.tp-catalog-body em{
	font-style: normal;
	font-size: 13px;
	line-height: 1.55em;
	opacity: 0.75;
}

.tp-catalog-price{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--primary-color);
}

.tp-catalog-price .money{
	display: inline;
}

.tp-catalog-add{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding-top: 12px;
	border-top: 1px solid var(--divider-color);
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.tp-catalog-card:hover:not(:disabled) .tp-catalog-add{
	color: var(--accent-color);
}

/* ---- live summary strip ---- */

.tp-live-summary{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	background: rgb(16 59 29 / 6%);
	border: 1px solid rgb(16 59 29 / 12%);
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 26px;
}

.tp-live-summary span{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	opacity: 0.85;
}

.tp-live-summary strong{
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
}

.tp-live-summary .is-priced strong{
	color: var(--primary-color);
}

.tp-live-summary .is-wa strong{
	color: rgb(25 150 75);
}

.tp-reset-end{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: -12px 0 26px;
}

/* ---- price breakdown ---- */

.tp-lines{
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 22px 0 8px;
	padding: 0;
}

.tp-line{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px 14px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 14px 16px;
}

.tp-line-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	background: rgb(16 59 29 / 8%);
	border-radius: 11px;
	color: var(--primary-color);
	font-size: 15px;
}

.tp-line-body{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.tp-line-body strong{
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

.tp-line-body em{
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.55em;
	opacity: 0.72;
}

.tp-line-body em .money-original{
	display: none;
}

.tp-line-amount{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	white-space: nowrap;
}

.tp-line-wa{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgb(37 211 102 / 12%);
	border-radius: 100px;
	padding: 8px 13px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--primary-color);
	white-space: nowrap;
}

.tp-line-wa i{
	color: rgb(25 150 75);
	font-size: 12px;
}

.tp-line-empty{
	display: block;
	font-size: 14px;
	line-height: 1.6em;
	opacity: 0.7;
	text-align: center;
	padding: 18px 16px;
}

/* multi-currency totals (transfers LKR + village tour USD) */

.tp-planner .tp-total{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
}

.tp-total-part{
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.tp-total-plus{
	font-style: normal;
	font-weight: 700;
	opacity: 0.5;
}

.tp-planner .tp-total-wa{
	font-family: var(--default-font);
	font-style: normal;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5em;
	text-transform: none;
	color: var(--accent-color);
}

/* ---- details step ---- */

.tp-details-head{
	margin-bottom: 12px;
}

.tp-recap{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 9px;
	font-size: 13.5px;
	line-height: 1.6em;
	opacity: 0.8;
	margin: 0 0 26px;
}

.tp-recap i{
	color: var(--accent-color);
}

.tp-field-phone{
	min-width: 0;
}

/************************************/
/***  responsive                  ***/
/************************************/

@media (max-width: 991px){
	.tp-intro{
		padding: 80px 0 30px;
	}

	.tp-planner{
		padding: 50px 0 80px;
	}

	.tp-trust,
	.tp-faq{
		padding: 80px 0;
	}
}

@media (max-width: 767px){
	.tp-intro{
		padding: 70px 0 20px;
	}

	.tp-planner{
		padding: 40px 0 75px;
	}

	.tp-trust,
	.tp-faq{
		padding: 75px 0;
	}

	.tp-point-card{
		padding: 18px 18px;
	}

	.tp-line{
		grid-template-columns: auto 1fr;
	}

	.tp-line-amount,
	.tp-line-wa{
		grid-column: 2;
		justify-self: start;
	}

	.tp-stop-dest{
		max-width: none;
	}
}

@media (max-width: 575px){
	.tp-stop{
		flex-wrap: wrap;
	}

	.tp-stop-idx,
	.tp-stop-icon{
		order: 1;
	}

	.tp-stop-body{
		flex: 1 1 100%;
		order: 2;
	}

	.tp-stop-controls{
		flex: 1 1 100%;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.tp-catalog{
		grid-template-columns: 1fr;
	}

	.tp-live-summary{
		gap: 8px 14px;
		padding: 12px 14px;
	}

	.tp-chip-label{
		flex: 1 1 100%;
	}
}


/* --- /services: tour-planner promo band -------------------------------------- */
.svc-tourplan-band{
	padding: 0 0 100px;
}

.svc-tourplan-card{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px 38px;
	background:
	radial-gradient(760px 320px at 8% -20%, rgb(219 145 12 / 12%), transparent 62%),
	radial-gradient(620px 300px at 104% 120%, rgb(16 59 29 / 10%), transparent 60%),
	var(--white-color);
	border: 1px solid var(--divider-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 24px;
	padding: 40px 44px;
}

.svc-tourplan-icon{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 22px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 30px;
}

.svc-tourplan-copy{
	flex: 1 1 340px;
	min-width: 0;
}

.svc-tourplan-copy h3{
	font-size: 27px;
	line-height: 1.3em;
	color: var(--primary-color);
	margin: 10px 0 12px;
}

.svc-tourplan-copy p{
	font-size: 15.5px;
	line-height: 1.75em;
	color: rgb(28 43 32 / 78%);
	margin: 0;
}

.svc-tourplan-points{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 18px 0 0;
	padding: 0;
}

.svc-tourplan-points li{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.svc-tourplan-points li i{
	color: var(--accent-color);
	font-size: 12px;
}

.svc-tourplan-actions{
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.svc-tourplan-secondary{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.3s ease-in-out;
}

.svc-tourplan-secondary i{
	font-size: 11px;
	margin-left: 5px;
	transition: margin-left 0.3s ease-in-out;
}

.svc-tourplan-secondary:hover{
	color: var(--accent-color);
}

.svc-tourplan-secondary:hover i{
	margin-left: 9px;
}

@media only screen and (max-width: 991px){
	.svc-tourplan-band{
		padding-bottom: 70px;
	}

	.svc-tourplan-card{
		padding: 32px 28px;
		gap: 24px 28px;
	}

	.svc-tourplan-actions{
		width: 100%;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 767px){
	.svc-tourplan-band{
		padding-bottom: 50px;
	}

	.svc-tourplan-card{
		padding: 26px 20px;
		border-radius: 20px;
	}

	.svc-tourplan-icon{
		width: 60px;
		height: 60px;
		font-size: 24px;
		border-radius: 18px;
	}

	.svc-tourplan-copy h3{
		font-size: 22px;
	}

	.svc-tourplan-points{
		gap: 8px 16px;
	}

	.svc-tourplan-actions .btn-default{
		width: 100%;
		justify-content: center;
	}
}

/* The booking panel is scrolled into view on every step change; without this
   the sticky header lands on top of the step label. */
.svc-booking-panel,
.tp-panel{
	scroll-margin-top: 120px;
}

@media only screen and (max-width: 991px){
	.svc-booking-panel,
	.tp-panel{
		scroll-margin-top: 96px;
	}
}


/* ----------------------------------------------------------------------------------------
   Round 2 - home page + booking fixes, numbered after the issue list they belong to.
   ---------------------------------------------------------------------------------------- */

/* --- 2c. Airport transfer wizard: every step fits the card, no scrolling inside it -----
   The card's fixed height is split into header + step rail + body + nav, and the body
   used to be handed ~178px for 220-240px worth of step. The traveller had to scroll
   inside a box that is barely bigger than a postcard to read their own price or the
   WhatsApp message they were about to send. The chrome is tightened, the message
   preview is set in a compact size that never grows its own scrollbar, and the card
   itself gains the 30-40px the two deepest steps (price table / message preview)
   were short by. */
.booking-card-back{
	padding: 20px 20px 16px;
}

.booking-wizard-header h3{
	font-size: 19px;
}

.booking-wizard-steps{
	margin: 10px 0 8px;
}

.booking-wizard-nav{
	padding-top: 14px;
}

.wizard-label{
	font-size: 14px;
	margin: 0 0 10px;
}

/* No max-height, no overflow: a preview that quietly clips itself is exactly
   the "I have to scroll inside the message" complaint. It is sized so the
   whole note is on screen at every breakpoint instead. */
.wa-preview{
	font-size: 11.5px;
	line-height: 1.45;
	padding: 9px 11px;
	max-height: none;
	overflow: visible;
	margin-bottom: 0;
}

.wa-preview:last-child{
	margin-bottom: 0;
}

.wizard-note{
	font-size: 12.5px;
	margin-top: 10px;
}

/* The price table and the vehicle grid are the two tallest steps; a couple of
   pixels off each row keeps both of them inside the body at the 420px mobile
   card, which is where the overflow used to show up first. */
.price-table{
	gap: 7px;
}

.price-row{
	padding: 9px 14px;
}

.booking-viewport{
	--bk-card-h: 470px;
}

@media only screen and (max-width: 1199px){
	.booking-viewport{
		--bk-card-h: 460px;
	}
}

@media only screen and (max-width: 767px){
	.booking-viewport{
		--bk-card-h: 450px;
	}
}

/* --- 5. Booking search button: drop the arrow the shared .btn-default adds --------------
   .btn-default is the site's link/CTA style and paints an arrow in its ::before with
   46px of right padding reserved for it. On a one-word "Search" submit inside the
   destination popup that arrow is a stray glyph next to nothing - the button says
   Search and points at the edge of the field. Same for the wide, full-width CTAs that
   already carry their own icon. */
.svc-search-bar button.btn-default::before{
	content: none;
	display: none;
}

.svc-search-bar button.btn-default{
	padding: 14px 26px;
}

.svc-search-bar button.btn-default:disabled{
	opacity: 0.55;
}

/* --- 3. Travel guide slider (home) -------------------------------------------
   The section was a static 3-card grid; it is now the same Swiper strip the
   testimonials use (1 / 2 / 3 per view, looping, autoplaying), so the two
   sliders glide at the same speed. The grid's card rules assumed a Bootstrap
   column: `height: calc(100% - 30px)` + a 30px bottom margin, which inside a
   swiper-slide leaves a strip of dead space under every card and stops the
   slides from stretching to one shared height. */
.guide-slider .post-item{
	height: 100%;
	margin-bottom: 0;
}

.guide-slider .swiper .swiper-wrapper{
	cursor: none;
}

/* --- 6. Gallery popups ----------------------------------------------------------
   a) Click-to-zoom. Both popups blanket their own <img> with
      `pointer-events: none` (an anti-drag guard), which also killed a click on
      the photo. The stage image gets the pointer back so it can open the
      full-screen preview; the filmstrip thumbs keep the guard.

   b) `.gallery-zoom` is the full-screen preview itself: ONLY a close button
      (top) and the one photograph below it - no title, description, category,
      tags, share row or thumbnail strip. The photograph keeps its own aspect
      ratio (`object-fit: contain`, so no crop, no stretch, no zoom, never
      compressed) and fits inside the width AND height that are left. It sits
      above both lightboxes (z-index 10000) and swallows the backdrop click so
      the popup underneath does not close at the same time. */
.gallery-lightbox-image img,
.svc-gl-image img{
	pointer-events: auto;
	cursor: zoom-in;
}

.gallery-zoom{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	padding: clamp(10px, 2vw, 22px);
	background: rgb(4 8 6 / 97%);
	cursor: zoom-out;
	animation: galleryFadeIn 0.25s ease both;
}

/* Close button owns the top band, so a wide photo can never slide under it. */
.gallery-zoom-bar{
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	padding-bottom: clamp(6px, 1.2vw, 12px);
}

.gallery-zoom-close{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	color: var(--white-color);
	font-size: 18px;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.3s ease-in-out;
}

.gallery-zoom-close:hover,
.gallery-zoom-close:focus-visible{
	background: var(--accent-color);
	border-color: var(--accent-color);
	transform: rotate(90deg);
}

/* The remaining screen, shared between the photograph and nothing else. */
.gallery-zoom-stage{
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-zoom img{
	/* The whole original photo at its own aspect ratio: contained inside
	   the available width AND height, never cropped, covered, stretched,
	   zoomed or distorted. A portrait or oddly proportioned frame simply
	   shows smaller - showing the complete image is the priority. */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 30px 90px rgb(0 0 0 / 55%);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* --- 6b. Tighter popup rhythm: the caption block, share row and filmstrip were
   each padded so generously that a band of dead space opened between the photo
   and the text. Everything below pulls in by a few pixels while keeping each
   row on screen at every breakpoint. */
.gallery-lightbox-dialog,
.svc-gl-dialog{
	gap: 10px;
}

.gallery-lightbox-info{
	padding: 0 6px;
}

.gallery-lightbox-title{
	margin-bottom: 6px;
	gap: 11px;
}

.gallery-lightbox-desc{
	margin-bottom: 0;
	line-height: 1.6;
}

.gallery-lightbox-foot{
	padding: 0 6px;
	gap: 12px;
}

.gallery-lightbox-thumbs{
	padding: 2px 6px 4px;
	gap: 8px;
}

.gallery-lightbox-stage{
	padding: clamp(8px, 1.5vw, 14px);
}

.svc-gl-info{
	padding: 0 6px;
}

.svc-gl-info h3{
	margin-bottom: 5px;
}

.svc-gl-thumbs{
	padding: 2px 4px 4px;
	gap: 8px;
}

/* ============================================================= *
   Language switcher - slim tab pinned to the left edge of the
   window, expands into a searchable panel. Transform-only motion
   so nothing on the page ever reflows.                          *
   ============================================================= */
.lang-switch{
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 950;
}

.lang-tab{
	width: 42px;
	padding: 13px 0 11px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	border: 0;
	cursor: pointer;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 0 14px 14px 0;
	box-shadow: 0 10px 26px rgba(10, 34, 18, 0.3);
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
	position: relative;
	z-index: 2;
}

.lang-tab i{
	font-size: 15px;
	line-height: 1;
}

.lang-tab-code{
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;
}

.lang-tab:hover,
.lang-tab:focus-visible{
	background: var(--accent-color);
	color: var(--primary-color);
	transform: translateX(2px);
}

.lang-panel{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-18px);
	width: min(306px, calc(100vw - 58px));
	max-height: min(76vh, 620px);
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 0 18px 18px 0;
	box-shadow: 0 22px 60px rgba(6, 26, 13, 0.36);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	z-index: 3;
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}

.lang-switch.is-open .lang-panel{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.lang-panel-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 12px 13px 16px;
	background: var(--primary-color);
	color: #ffffff;
	flex: 0 0 auto;
}

.lang-panel-title{
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.lang-panel-title i{
	color: var(--accent-color);
	font-size: 14px;
}

.lang-panel-close{
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.lang-panel-close:hover,
.lang-panel-close:focus-visible{
	background: var(--accent-color);
	color: var(--primary-color);
}

.lang-panel-search{
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 12px 14px 2px;
	padding: 9px 12px;
	border: 1px solid #e2e8e2;
	border-radius: 11px;
	background: #f6f9f6;
	color: #7b8a7d;
	flex: 0 0 auto;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lang-panel-search:focus-within{
	border-color: var(--accent-color);
	background: #ffffff;
}

.lang-panel-search i{
	font-size: 12px;
}

.lang-panel-search input{
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 13.5px;
	color: var(--primary-color);
}

.lang-panel-search input::placeholder{
	color: #93a094;
}

.lang-panel-body{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 8px 16px;
	scrollbar-width: thin;
}

.lang-group-label{
	margin: 14px 8px 7px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a978c;
}

.lang-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lang-item{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	border-radius: 11px;
	cursor: pointer;
	text-align: left;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.lang-item:hover,
.lang-item:focus-visible{
	background: #eef4ef;
}

.lang-item.is-active{
	background: #e8f1e9;
	box-shadow: inset 0 0 0 1px rgba(16, 59, 29, 0.16);
}

.lang-code{
	min-width: 31px;
	padding: 5px 0;
	border-radius: 7px;
	background: #edf3ee;
	color: var(--primary-color);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-align: center;
	flex: 0 0 auto;
}

.lang-item.is-active .lang-code{
	background: var(--primary-color);
	color: #ffffff;
}

.lang-names{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}

.lang-names strong{
	font-size: 13.5px;
	font-weight: 600;
	color: #17251a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lang-names em{
	font-style: normal;
	font-size: 12px;
	color: #8a978c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lang-flag .fi{
	font-size: 15px;
	border-radius: 3px;
	overflow: hidden;
	flex: 0 0 auto;
}

.lang-check{
	color: var(--accent-color);
	font-size: 12px;
	flex: 0 0 auto;
}

.lang-chip{
	flex: 0 0 auto;
	padding: 3px 8px;
	border: 1px solid #e4e9e4;
	border-radius: 999px;
	background: #f5f7f5;
	color: #8a978c;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.lang-empty{
	list-style: none;
	padding: 12px 10px;
	font-size: 13px;
	color: #8a978c;
}

@media (max-width: 767px){
	.lang-tab{
		width: 38px;
		padding: 11px 0 9px;
	}

	.lang-tab i{
		font-size: 14px;
	}

	.lang-panel{
		max-height: min(70vh, 520px);
	}
}

@media (max-width: 400px){
	/* The tab stays vertically centered on every screen (base rule
	   top:50% + translateY(-50%)); only the panel tightens up - it must
	   never outgrow a short viewport. */
	.lang-panel{
		max-height: min(66vh, 480px);
	}
}

/* ============================================================= *
   "View full screen" affordance on the gallery popups - a real
   button floating over the photo so the full-screen preview is
   discoverable on mouse AND touch (no hover-only hint).         *
   ============================================================= */
.gl-zoom-btn{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(9, 26, 15, 0.66);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
		transform 0.22s ease;
	animation: gl-zoom-pulse 2.8s ease-in-out infinite;
}

.gl-zoom-btn i{
	font-size: 12px;
}

.gl-zoom-btn:hover,
.gl-zoom-btn:focus-visible{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--primary-color);
	transform: translateY(-1px);
}

@keyframes gl-zoom-pulse{
	0%, 100%{
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(219, 145, 12, 0.5);
	}
	55%{
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(219, 145, 12, 0);
	}
}

@media (max-width: 575px){
	.gl-zoom-btn{
		padding: 7px 10px;
		font-size: 11px;
		top: 8px;
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce){
	.lang-tab,
	.lang-panel,
	.lang-item,
	.lang-panel-close,
	.gl-zoom-btn{
		transition-duration: 0.01ms !important;
		animation: none !important;
	}
}