/* ============================
Webfonts
(replace URLs with your files)
============================ */
@font-face{
	font-family:"Didot LP Display";
	src:url("/fonts/DidotLPDisplay.woff2") format("woff2");
	font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Garet";
	src:url("/fonts/Garet.woff2") format("woff2");
	font-weight:300 700; font-style:normal; font-display:swap;
}
.header-icon-list a{
	display: flex;
    flex-direction: row-reverse;
    justify-content: start;
}
/* ============================
Fluid type scale + tokens
============================ */
:root{
	--font-display: "Didot LP Display", Didot, "Bodoni Moda", Georgia, serif;
	--font-body: "Garet", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;

	/* Fluid sizes (use clamp for responsive text) */
	--fs-display: clamp(2.0rem, 1.1rem + 3vw, 3.5rem);   /* hero / big H1 */
	--fs-h1:      clamp(1.75rem, 1.0rem + 2.2vw, 2.75rem);
	--fs-h2:      clamp(1.5rem,  .9rem + 1.6vw, 2.25rem);
	--fs-h3:      clamp(1.25rem, .85rem + 1.1vw, 1.75rem);
	--fs-h4:      clamp(1.125rem,.8rem + 0.8vw, 1.375rem);
	--fs-body-lg: clamp(1.0625rem, .95rem + .6vw, 1.25rem);
	--fs-body:    clamp(.95rem, .9rem + .4vw, 1.125rem);
	--fs-small:   clamp(.8125rem, .78rem + .25vw, .95rem);
	--fs-xsmall:  clamp(.72rem, .7rem + .2vw, .85rem);

	/* Line-heights tuned for each size */
	--lh-tight: 1.15;
	--lh-snug:  1.25;
	--lh-normal:1.45;
	--lh-loose: 1.6;

	/* Color tokens you’re already using */
	--c-blue: #004799;
	--c-blue-bright:#019EE2;
	--c-yellow:#F9B900;
	--c-ink:#0f172a;
	--c-muted:#61646b;
}
.phone{

	display:flex !important;
}
.phone select{
	    border-radius: 0px !important;
    border-right: 0px !important;
}
.vc-amenities--icons {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}

.vc-amenities--icons .amenity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px; /* keeps label from wrapping too tight */
}

.amenity__icon {
  width: 56px;
  height: 56px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

.amenity__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.8); /* subtle mono grey look */
}

.amenity__fallback,
.amenity__more {
  font-weight: 700;
  font-size: 14px;
  color: #777;
  line-height: 1;
}

.amenity__label {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}

.vc-amenities--icons .amenity--more .amenity__icon {
  background: #fafafa;
}

.villa-category-luxe{
	background-color:#e9579bf2 !important;
}
.vc-categories{
	margin-bottom:10px !important;
}
/* Center wrapper */
.villa-loadmore-wrap {
  text-align: center;
  margin: 40px 0;
}
.villa-slider {
  width: 100%;
  max-width: 600px; /* adjust */
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

.villa-slider img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.swiper-pagination {
  bottom: 10px !important;
}

.swiper-pagination-bullet {
  background: #004799;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

/* Button style */
#villa-load-more {
  position: relative;
  display: inline-block;
  padding: 9px 19px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  background: #f5c400; /* yellow base */
  color: #000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 1;
}

/* Hover effect */
#villa-load-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #019EE2;; /* deep blue */
  transition: left 0.4s ease;
  z-index: -1;
}

#villa-load-more:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

#villa-load-more:hover::before {
  left: 0;
}

/* Optional: active (click) state */
#villa-load-more:active {
  transform: scale(0.96);
}

/* Hidden state */
.is-hidden {
  display: none;
}

/* Container to hide overflow */
.villa-image {
	position: relative;
	overflow: hidden;
}

/* Image animation */
.villa-image img {
	transition: transform 0.6s ease, filter 0.6s ease;
	display: block;
	width: 100%;
	height: auto;
}



.villa-category-prime{
	background-color:#F9B900 !important;
}
.villa-category-signature{
	background-color:#019EE2 !important;
}
/* ============================
Global base
============================ */
html{font-size:100%;}
body{
	font-family:var(--font-body);
	font-size:var(--fs-body);
	line-height:var(--lh-loose);
	font-weight:400;
	color:var(--c-ink);
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.title-wishlist{
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
}
/* Headings = Didot (lighter weights) */
h1,h2,h3,h4,h5,h6{
	font-family:var(--font-display);
	font-weight:500;                 /* not too bold */
	letter-spacing:.005em;
	margin:0 0 .35em;
	color:var(--c-blue);
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-snug); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-snug); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-tight); }
h4{ font-size:var(--fs-h4); line-height:var(--lh-tight); }

/* Utilities (use anywhere) */
.fs-display{ font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-snug); }
.fs-h1{ font-size:var(--fs-h1); }
.fs-h2{ font-size:var(--fs-h2); }
.fs-h3{ font-size:var(--fs-h3); }
.lead{ font-size:var(--fs-body-lg); line-height:var(--lh-loose); }
.small{ font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--c-muted); }
.eyebrow{ font-size:var(--fs-xsmall); text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); font-weight:500; }

/* ============================
Map onto your existing UI
============================ */

/* Elementor button icon wrapper you already have */
.villa-button .elementor-button-content-wrapper{ align-items:center; }
.villa-button .elementor-button-icon{ background:#fff; color:#000; }

/* VM popup / dashboard text (keep weights gentle) */
.vm-popup h3,
.vm-dashboard-header .vm-logo,
.vm-header .vm-logo,
.filter-heading,
.villa-title,
.villa-policies h2,
.villa-description h2,
.villa-amenities h2,
.villa-map h2{
	font-family:'Hanken Grotesk';
	font-weight:500;
	color:var(--c-blue);
}
.select2-dropdown--below{
	margin-top:10px;
}
/* Sizes for specific places */
.vm-popup h3{ font-size:var(--fs-h3); line-height:var(--lh-snug); }
.filter-heading{ font-size:var(--fs-h3); line-height:var(--lh-tight); color:#000; }

/* Villa detail header */
.villa-header h1{
	font-family:var(--font-display);
	font-size:var(--fs-display);     /* big & responsive */
	line-height:var(--lh-snug);
	font-weight:500;
	color:var(--c-blue);
}

/* Card titles */
.villa-title{
	font-size:var(--fs-h2);
	line-height:var(--lh-snug);
	font-weight:500;
	color:#000;
}

/* Secondary/Body text everywhere */
.villa-location,
.item-meta > span,
.vm-note,
.vm-privacy,
.villa-count,
.villa-amenities li,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span{
	font-family:var(--font-body);
	font-size:var(--fs-body);
	font-weight:400;
}

/* Small/aux text */
.villa-price .from,
.villa-price .night,
.vm-pill,
.round label,
.round input + label:after{
	font-family:var(--font-body);
	font-size:var(--fs-small);
	font-weight:500;
}

/* Form headings in VM */
.vm-form-head h3{ font-size:var(--fs-h3); line-height:var(--lh-tight); }
.vm-form label{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:500; letter-spacing:.02em; }

/* Pagination emphasis without heavy bold */
.custom-pagination .current span,
.custom-pagination .active span{
	font-weight:600;                  /* slightly stronger but not heavy */
}

/* Replace any old explicit fonts */
.filter-heading,
.villa-title{ font-family:var(--font-body) !important; padding-bottom:5px !important; }
.villa-location{ font-family:var(--font-body) !important; }

/* Optional: tighten large desktop headings slightly */
@media (min-width:1280px){
	.villa-header h1{ letter-spacing: .002em; }
}



.heading-line {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	gap: 5px;
	color: #333;
}

.heading-line::before {
	content: "";
	display: inline-block;
	width: 40px;       /* line length */
	height: 2px;       /* line thickness */
	background: #004799; /* line color */
	margin-right: 2px; /* space between line and text */
}


.villa-button a {
	position: relative !important;
	display: inline-block !important;
	font-size: 16px !important;
	color: #fff !important;
	background: #019EE2 !important; /* default background */
	border: none !important;
	cursor: pointer !important;
	overflow: hidden !important;   /* important for effect */
	z-index: 1 !important;
	transition: color 0.3s ease !important;
}

.villa-button a::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: #004799 !important; /* hover color */
	color:#fff !important;
	transition: left 0.4s ease !important;
	z-index: -1 !important;
}
.villa-button-yellow a {
  position: relative !important;
  display: inline-block !important;
  font-size: 16px !important;
  color: #fff !important;
  background: #019EE2 !important; /* default background */
  border: none !important;
  cursor: pointer !important;
  overflow: hidden !important; /* important for effect */
  z-index: 1 !important;
  transition: color 0.3s ease !important;
}

/* Pseudo-element must be on the <a> */
.villa-button-yellow a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
	color:#fff !important;
  width: 100% !important;
  height: 100% !important;
  background: #004799 !important; /* hover background */
  transition: left 0.4s ease !important;
  z-index: -1 !important;
}

.villa-button-yellow a:hover {
  color: #fff !important; /* text color on hover */
}

.villa-button-yellow a:hover::before {
  left: 0 !important;
}

/* Icon styling */
.villa-button-yellow .elementor-button-icon {
  background: white;
  color: black;
  padding: 14px;
}

.villa-button-yellow .elementor-button-content-wrapper {
  align-items: center;
}

.villa-button a:hover::before {
	left: 0 !important;
}
.villa-button a:hover {
	color: #fff !important; /* text color on hover */
}




/*CSS*/
.villa-button .elementor-button-icon{
	background: white;
	color: black;
	padding: 14px;
}
.villa-button .elementor-button-content-wrapper{
	align-items:center;
}

/* Overlay background */
.vm-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	/*     width: 100%; */
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9998;
}

/* Popup modal */
.vm-popup {
	display: none;
	position: fixed;
	background: #fff;
	width: 100%;
	max-width: 400px;
	padding: 25px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	box-shadow: 0 15px 25px rgba(0,0,0,0.2);
	border-radius: 8px;
	animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
	from {opacity: 0; transform: translate(-50%, -60%);}
	to {opacity: 1; transform: translate(-50%, -50%);}
}

.vm-popup h3 {
	margin-bottom: 15px;
	font-size: 22px;
	text-align: center;
}
.vm-popup form {
	display: flex;
	flex-direction: column;
}
.vm-popup input {
	font-family:var(--font-body);
	margin-bottom: 12px;
	padding: 10px;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.vm-popup input[type="submit"] {
	font-family:var(--font-body);
	background: #0073aa;
	color: white;
	cursor: pointer;
	border: none;
}
.vm-popup input[type="submit"]:hover {
	font-family:var(--font-body);
	background: #005f8d;
}

.vm-auth-buttons {
	display: flex;
	gap: 10px;
}
.vm-auth-buttons button, .vm-auth-buttons a {
	padding: 10px 15px;
	background: #0073aa;
	color: white;
	border: none;
	border-radius: 5px;
	text-decoration: none;
}
.vm-auth-buttons button:hover, .vm-auth-buttons a:hover {
	background: #005f8d;
}

/* Close Button */
.vm-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 22px;
	color: #888;
	cursor: pointer;
}

/* Alert Message */
.vm-alert {
	padding: 10px;
	margin-bottom: 15px;
	border-left: 4px solid #0073aa;
	background: #f1f1f1;
	font-size: 14px;
	border-radius: 5px;
}
.vm-dashboard-header {
	background: #0073aa;
	color: white;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.vm-logo {
	font-weight: bold;
	font-size: 18px;
}

.vm-profile-dropdown {
	position: relative;
}

.vm-profile-pic {
	cursor: pointer;
	border-radius: 50%;
	background: white;
	color: #0073aa;
	padding: 10px;
}

.vm-dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	background: white;
	border: 1px solid #ddd;
	padding: 10px;
	z-index: 999;
	border-radius: 5px;
}
.vm-profile-dropdown:hover .vm-dropdown-menu {
	display: block;
}

.vm-sidebar {
	width: 200px;
	float: left;
	background: #f1f1f1;
	height: calc(100vh - 60px);
	padding: 20px;
}
.vm-sidebar ul {
	list-style: none;
	padding: 0;
}
.vm-sidebar ul li {
	margin-bottom: 10px;
}
.vm-sidebar ul li a {
	text-decoration: none;
	color: #333;
}

.vm-content-area {
	margin-left: 220px;
	padding: 20px;
}

.vm-footer {
	clear: both;
	text-align: center;
	padding: 15px;
	background: #f9f9f9;
	border-top: 1px solid #ddd;
}
.vm-dashboard-wrapper {
	font-family: 'Segoe UI', sans-serif;
}

.vm-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #004080;
	color: white;
	padding: 15px 20px;
}
.vm-logo {
	font-weight: bold;
	font-size: 20px;
}
.vm-user-menu {
	position: relative;
}
.vm-avatar {
	width: 40px;
	height: 40px;
	background: white;
	color: #004080;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: bold;
}
.vm-dropdown {
	display: none;
	position: absolute;
	right: 0;
	background: white;
	border: 1px solid #ddd;
	z-index: 99;
	margin-top: 10px;
}
.vm-user-menu:hover .vm-dropdown {
	display: block;
}
.vm-dropdown a {
	display: block;
	padding: 10px 15px;
	color: #333;
	text-decoration: none;
}
.vm-dropdown a:hover {
	background: #f0f0f0;
}

.vm-main-layout {
	display: flex;
}

.vm-sidebar {
	width: 220px;
	background: #f7f7f7;
	padding: 20px;
	min-height: 100vh;
}
.vm-sidebar ul {
	list-style: none;
	padding: 0;
}
.vm-sidebar ul li {
	margin-bottom: 12px;
}
.vm-sidebar ul li a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
	padding: 10px 15px;
	display: block;
	border-radius: 5px;
}

.vm-dashboard-content {
	flex: 1;
	background: #fff;
	min-height: 100vh;
}

.vm-dashboard-footer {
	text-align: center;
	padding: 15px;
	background: #f1f1f1;
	border-top: 1px solid #ddd;
}


/* For Chrome, Edge, Safari */
/* Global scrollbar styling */
::-webkit-scrollbar {
	width: 6px;
	height: 6px; /* Optional: for horizontal scroll */
}

::-webkit-scrollbar-thumb {
	background-color: #004799;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1; /* Light neutral track */
	border-radius: 5px;
}


/*design of single villa */
.villa-map-box {
	background: #ccc;
	min-height: 480px;
	border-radius: 8px;
	overflow: hidden;
}
.villa-map-box iframe {
	width: 100%;
	height: 100%;
	display: block;
}

.site-main{max-width:100% !important;}
.villa-page { max-width: 1430px !important; color: #111;  display:flex; padding: 0px 30px !important; 
	flex-direction:column;
	align-items:center;
	justify-content:center; }
.villa-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.villa-gallery-img img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; }
.villa-header h1 { font-size: 48px; margin-bottom: 0; font-weight:500; }
.villa-header-list{    display: flex;
	justify-content: space-between;
/* 	padding-bottom: 30px; */
	align-items: center;
/* 	border-bottom: 1px solid #00000012; */
/* 	margin-bottom: 30px; */
}
.villa-location { color: #4f4f4f !important; margin-top: 5px;font-weight:500;  font-size: 48px; font-size: 20px; }
.villa-actions { margin-top: 10px; display: flex; gap: 15px; }
.villa-actions a { text-decoration: none; color: #2563eb; font-weight: 600; }
.villa-description .villa-desc { overflow: hidden; position: relative; transition: 0.3s ease; }
.villa-map-box { background: #ccc; height: 280px; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.villa-amenities ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 10px !important;
}

.vs-nav{
	background-color: #fff7f7 !important;
	border: 0px solid transparent !important;
	border-radius: 50% !important;
	color: #000000 !important;
	font-size: 50px !important;
	padding: 0px 18px 10px !important;
	max-height: 60px !important;
	min-width: 60px !important;
}
.vs-nav:hover{
	background-color: #aeadadd1 !important;
}
.villa-amenities li {
	font-size: 16px;
	color:black;
}





.villa-conditions .villa-checkin { display: flex; justify-content: space-between; margin-bottom: 10px; max-width: 400px; }
.villa-similar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.villa-description button {  margin-top: 10px; background: transparent; color:black; border: none; padding: 8px 16px; cursor: pointer; border-radius: 6px; font-weight: 600; }
.villa-description button:hover { color:#90a4ae; }
.villa-description-inner{display:flex; justify-content:center; font-family:var(--font-body);}

.villa-similar{margin-bottom:50px; border:0px !important;}
.villa-description h2,.villa-similar h2,.villa-amenities h2,.villa-map h2, .villa-nearby h2{
	margin-bottom: 5px;
	margin-top: 20px;
	font-size: 26px;
	line-height: 1.3076923077;
	color: #000000b5;
	font-weight: 600;

}
.villa-page-inner{
	max-width:1410px;
}
.item-meta i {
	color: #00479973;
	font-size: 13px;
	margin-right: 6px;

} 


.villa-description, .villa-map, .villa-amenities, .villa-similar {
	border-bottom: 1px solid #E8E8E8;
	padding-bottom: 30px;}


/* kill old grid rules */
.villa-gallery { display: block !important; grid-template-columns: unset !important; gap: 0 !important; margin-left:-500px; margin-right:-500px; }

/* config */
.villa-slider { --vs-per-view: 3; --vs-gap: 28px; }
@media (max-width:1024px){ .villa-slider{ --vs-per-view: 2; --vs-gap: 22px; }}
@media (max-width:640px){  .villa-slider{ --vs-per-view: 1; --vs-gap: 14px; } }

.vs-viewport { overflow: hidden; }
.vs-track { display: flex; will-change: transform; gap: var(--vs-gap); }

.vs-slide {overflow: hidden;}
.vs-slide img { width:100%; height: clamp(220px, 42vw, 620px); object-fit: cover; display: block; }

/* arrows like the screenshot (optional) */
.vs-nav{
	position:absolute; top:40%; border-radius:50%;
	display:flex; justify-content:center; align-items:center; border:none; cursor:pointer;
	background: rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:1;
}
.vs-prev{ left: 12px; }
.vs-next{ right: 12px; }
.vs-nav:disabled{ opacity:.35; cursor:default; }
.villa-page-inner{
	width:100%;
}

@media (min-width:768px) and (max-width:1024px){
	.villa-similar-grid{
		grid-template-columns: repeat(auto-fit, minmax(309px, 1fr));
	}
	/* 	.villa-title {
	font-size: 24px !important; 
} */
}
/* Make sure this loads AFTER your base styles */
@media only screen and (max-width: 425px) {
	.title-wishlist {
		display:flex !important;            
		flex-direction: column !important;
	}
	.villa-map-box iframe {
		height:310px !important; 
	}
	.vs-slide img {
		width:100%;
		height: clamp(220px, 42vw, 620px);
		object-fit: contain !important;
		display:block;
	}
}


.round {
	position: relative;
}

.round label {
	background-color: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 20px;
}

.round label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	content: "";
	height: 6px;
	left: 3px;
	opacity: 0;
	position: absolute;
	top: 3px;
	transform: rotate(-45deg);
	width: 12px;
}

.round input[type="checkbox"] {
	visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
	background-color:#004799;
	border-color: #004799;
}

.round input[type="checkbox"]:checked + label:after {
	opacity: 1;
}







.custom-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 20px 0;
	margin: 0;
	font-family: 'Segoe UI', sans-serif;
}

.custom-pagination li {
	display: inline-block;
}

.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
	display: block;
	padding: 8px 14px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
	background-color: #f9f9f9;
}

.custom-pagination .page-numbers a:hover {
	background-color: #004799;
	color: #fff;
}

.custom-pagination .current span,
.custom-pagination .active span {
	background-color: #004799;
	color: #fff;
	font-weight: 600;
	border-color: #0073aa;
}

.custom-pagination .disabled span {
	background-color: #eee;
	color: #aaa;
	cursor: not-allowed;
	border-color: #ddd;
}

.filter-heading{
	font-size:20px;
	color:black;
	font-family:'Villax Heading', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-weight:700;
}
.villa-page-layout {
	display: flex;
	gap: 30px;
	font-family: 'Segoe UI', sans-serif;
	padding-bottom:100px;
}


/* Sidebar */
.villa-sidebar {
	width: 324px;
	background: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius:5px;
	max-height: fit-content;
}


.filter-group {
	padding-top: 15px;
	border-top: 1px solid #E8E8E8;
	margin-bottom: 20px;
}

.filter-group .main-label {
	font-family:var(--font-display);
	color: #000000;
	font-size: 18px;
	font-weight: 700;
	display:block;
	padding-bottom:10px;
}
.filter-group .inner-label {
	font-family:var(--font-body);
	color: #4F4F4F;
	font-size: 14px;
	font-weight: 500;
	display:block;
	padding-bottom:7px;
	padding-top:7px;
}
.filter-group .inner-label strong{
	font-weight: 600;
	font-size: 16px !important
}

.filter-group .innerto-box{
	padding-left:15px !important;
}
.filter-group input[type=checkbox]{
	border:1px solid #A3A3A3;
}
.filter-value{
	font-family:var(--font-body);
	display: inline-block;
	width: 100%;
	border: none;
	font-size: 16px;
	color: #000;
	line-height: 1.5em;
	padding: 0;
}
.filter-group  .inner-box{
	padding-left: 0;
	overflow: auto;
	max-height: 300px;
	overflow-x: clip;
	list-style:none;
	padding-left:5px;
}
.filter-group ul{
	list-style:none;
}	
.filter-group .innerto-label{
	color: #4F4F4F;
	font-size: 14px;
	font-weight: 500;
	display:block;
	padding-bottom:10px;
}



/* Grid Section */
.villa-grid-section {
	flex: 1;
	max-width:100%;
}
.page-content a{
	text-decoration:none !important;
}

.villa-count {
	color: #343434cf;
	font-size: 15px;
	font-weight: 550;
	font-family: 'Segoe UI', sans-serif;
}


/* Wrapper */
.villa-sort {
	position: relative;
	display: flex;
	gap:10px;
	align-items:center;
}
.villa-sort label {
	color: #202020cc;
	font-size: 15px;
	font-weight: 550;
}
/* Style the select */
.villa-sort select {
	max-width:100px;
	appearance: none;              /* hide default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #f9fafb;           /* light gray background */
	border: 1px solid #e5e7eb;     /* subtle border */
	border-radius: 0px;
	padding: 8px 40px 8px 14px;  /* space for custom arrow */
	font-size:14px;
	color: #1a2738d9;                /* dark gray text */
	cursor: pointer;
	transition: border .2s ease, box-shadow .2s ease;
	min-width: 140px;
	font-weight:500;
}

/* Focus state */
.villa-sort select:focus {
	border-color: transparent; /* your theme blue */
	outline: none;
}

/* Custom arrow */
.villa-sort::after {
	content: "▾"; /* down arrow */
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #4b5563; /* gray-600 */
	pointer-events: none;
}
.price-button-2{
	display:flex;
	justify-content:space-between;
	align-items:center;
	color:white;
}
/* Card Grid Layout */
.villa-cards{
	display:grid;
	grid-template-columns: 1fr;      /* list, not masonry */
	gap:48px;
}

/* Individual Card */
/* Individual Card */
.villa-card{
	display:grid;
	grid-template-columns: minmax(280px, 435px) minmax(0, 1fr);
	gap:24px;
	align-items:start;
	background:transparent;
	border-bottom:1px solid #EEF1F4;
	padding-bottom:32px;
}

.villa-image{
	width:100%;
	min-width:0;
}

.villa-card-body{
	min-width:0;
}


/* Tablet / mobile */
@media (max-width: 520px){
	.villa-cards{
		justify-content:center;
		align-items:center;
		display:flex;
		flex-direction:column;
	}
	.price-button-2{
		display:block;
	}

	.villa-card{
		display:flex;
		flex-direction:column;
		gap:12px;align-content;
		max-width:400px;
		box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	}

	.villa-image{
		width:100%;
	}

	.villa-card-body{
		width:100%;
		padding:10px;
	}

	.cta-btn1 .text{
		padding:12px 15px;
	}

	.cta-btn1 .icon{
		padding:7px 12px;
	}

	.vc-desc{
		width:100%;
	}

	.vm-info{
		position:static !important;
	}

	.villa-price{
		padding-bottom:15px !important;
	}

	.price-button{
		display:flex;
		justify-content:end;
	}
}

/* Image Section */
.villa-image {
	border-radius:5px;
	position: relative;
	overflow: hidden;    
	z-index:0;
	line-height:0;
}
.villa-image:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.27%, rgba(0, 0, 0, 0.8) 100%);
}
.villa-image img {
	width:100%;
	aspect-ratio:0.99/1;
	object-fit: cover;
}

.vc-category{
	position: absolute;
	top: 25px;
	left: 15px;
}
.villa-badge {
	font-family: 'Geologica';

	background-color: #f9b900d6;
	color: black;
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 2px;
}
.item-meta > span {

	font-family: 'Geologica';
	background-color: #0047990d;
	margin-bottom: 5px;
	padding: 0 10px;
	font-size: 13px;
	line-height: 28px;
	display: inline-block;
	color: #4c4c4c;
	text-transform: capitalize;
}

/* Wishlist Button */
.wishlist-button {
	display:none;
	position: absolute;
	top: 20px;
	right: 30px;
}
.villa-card:hover .wishlist-button{
	display:block;
}
.wishlist-button .vm-wishlist {
	background: white;
	padding: 8px;
	display: inline-block;
}
.vm-wishlist-btn{
	background: #00000061 !important;
	width:35px;
	height:35px;
	border-radius:50%;
	border: 0pc;
	display: flex;
	justify-content: center;
	align-items: center;
}
.vm-wishlist-btn:hover{
	background: #000 !important;

}
.vm-wishlist-btn i{
	color:White;
}
.wishlist-button .vm-wishlist:hover {
	color: white;
	transform: scale(1.1);
}

/* Card Body */
.villa-card-body {
	padding-top: 15px;
}

.villa-price {
	font-size: 11px;
	font-weight: 600;
	bottom: 0px;

}




.cta-btn1 {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	overflow: hidden;
	background-color: #019EE2; /* Blue */
	color: #fff;
	font-family: Arial, sans-serif;
	font-weight: 500;
	font-size: 12px;
	padding:5px;
	font-family:'Geologica';
	text-transform:uppercase;
}

.cta-btn1 .text {
	padding: 12px 16px;
	position: relative;
	z-index: 2;
	transition: color 0.3s ease;
}

.cta-btn1 .icon {
	padding-bottom: 15px !important;
	background-color: #fff;
	color: #000;
	padding: 8px 13px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	position: relative;
}

.cta-btn1::before {
	content: "";
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #004799; /* Hover color */
	transition: left 0.4s ease;
	z-index: 1;
}

.cta-btn1:hover::before {
	left: 0;
}

.cta-btn1:hover .text {
	color: white;
}

.cta-btn1 {
	position: relative;
}





.villa-price strong {
	color: #00c48c;
	font-weight: 700;
}
.vc-location{
	color: #000000a3;
	font-size: 16px;
	padding-bottom: 15px;
	font-family: 'Geologica';
}
.vc-desc{
	font-size: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 80%;
	color: #000000c7;
	font-family: 'Hanken Grotesk';

}
.vc-amenities{display: flex;
	gap: 4px;
	width: 100%;
	font-family:var(--font-body);
	flex-wrap: wrap;
	margin-top:10px;
	margin-bottom:15px;}

.vc-amenities .chip{
	background: #0047998c;
	padding: 5px 8px;
	border-radius: 2px;
	color: white;
	font-size: 12px;
	font-weight: 500;
	font-family: 'Hanken Grotesk';
}
.villa-price .from{
	color: #000;
	line-height: 18px;
	font-weight: 500;
	font-size: 18px;
	padding-right: 3px;
}
.villa-price .price{
	font-family: 'Geologica';
	line-height: 18px;
	font-weight: 500;
	font-size: 24px;
	color: #01188d;
}
.villa-price .night {
	font-size: 18px;
	color: #0b3c88;
	font-weight: 500;
}
.villa-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.3076923077;
	font-family: inherit;
	text-transform: capitalize;
	font-weight: 600;
	color: #484343;	
}
.villa-title a{
	text-decoration:none;
	color:#000000ad;
}
.villa-location {
	color: #A3A3A3;

	font-family: 'Heebo', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	line-height: 1.625;
	text-rendering: optimizeLegibility;
	font-weight: 400;
}

/* Pagination */
.villa-pagination {
	display:flex;
	justify-content:end;
	margin-top: 30px;
}

.villa-pagination .current {
	background-color: #00c48c;
	color: white;
	border-color: #00c48c;
}
/* price range */
.price-slider {
	position: relative;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}
.price-slider input[type=range] {
	position: absolute;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 2;
}
.price-slider input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #004799;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px;
}
.price-slider input[type=range]::-moz-range-thumb {
	pointer-events: all;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #c5a66d;
	cursor: pointer;
	border: none;
}
.slider-track {
	position: absolute;
	height: 4px;
	background: #004799;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	border-radius: 5px;
}
@media  (max-width:810px){
	.price-button-2{
		display:block;

	}
	.villa-card{
		display:flex;
		flex-direction: column;
		gap: 5px;
		box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	}
	.villa-image{
		width:100%;
	}
	.villa-card-body{
		width:100%;
		padding: 10px;
	}
	.cta-btn1 .text {
		padding: 12px 15px;
	}
	.cta-btn1 .icon{
		padding:7px 12px;
	}
	.vc-desc{
		width:100%
	}
	.vm-info{
		position:static !important;
	}
	.villa-price{padding-bottom:15px !important;}
	.price-button{  display: flex;
		justify-content: end;}
}
@media  (max-width:768px){
	.villa-title {font-size: 24px;}
	.villa-header h1 { font-size: 42px;}
	.villa-page-layout {
		display: flex;
		flex-direction:column;
	}

	.villa-grid-section{
		max-width:100% !important;
	}
	.villa-sidebar{
		width:100% !important;
		position:fixed;
		bottom:50px;
		left:0;
		padding:0px !important;
	}
	.villa-header-list {
		margin-bottom: 20px;
	}
	.villa-sort {
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: space-between;
	}
	.villa-sidebar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		margin: 0;
		border-radius: 20px 20px 0 0;
		border: 1px solid #e6e6e6;
		box-shadow: 0 -10px 30px rgba(0,0,0,0.12);
		transform: translateY(calc(100% - 56px)); /* show only header bar */
		transition: transform .35s ease;
		z-index: 1001;
		padding: 0;
		background: #fff;
	}

	/* Header row */
	.villa-sidebar .filter-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		font-size: 16px;
		font-weight: 700;
		color: #111;
		cursor: pointer;
		user-select: none;
		border-bottom: 1px solid #eee;
	}
	.villa-sidebar .filter-heading::after {
		content: "";
		width: 10px; height: 10px;
		border-right: 2px solid #111;
		border-bottom: 2px solid #111;
		transform: rotate(45deg); /* down arrow */
		transition: transform .25s ease;
	}

	/* Scrollable filter content */
	.villa-sidebar .filter-content {
		max-height: min(70vh, 520px);
		overflow: auto;
		padding: 14px 18px 24px;
	}

	/* Open state */
	.villa-sidebar.is-open {
		transform: translateY(0);
	}
	.villa-sidebar.is-open .filter-heading::after {
		transform: rotate(-135deg); /* up arrow */
	}

	/* Backdrop */
	.filter-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.28);
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
		z-index: 1000;
	}
	.filter-backdrop.show {
		opacity: 1;
		pointer-events: auto;
	}
	.vm-search-form{
		height:70vh !important;
		padding:16px 16px 0px;
	}
	.vm-search-form .select2-container--default .select2-selection--single{
		width:100%;
	}
	.vm-search-form .vm-search-field{
		gap:15px;
	}
	.vm-search-form .vm-button-wrap{padding-top:25px;}
	.vm-search-form [type=submit]:hover{
		background-color:#f9b900d6 !important;
		color:#ffffff !important;
	}
	.vm-search-form .vm-sheet__bar {
		top: -16px;
		background: #ffffff !important;
		z-index: 10 !important;
		padding:14px 4px;
	}
	.vm-search-form .vm-field-wrap{
		z-index:1;
	}
	.vm-search-form .vm-sheet__close{
		font-size: 15px;
		font-weight: 600;
	}

	#vm-toggle:checked ~ .vm-mobile-toggle {
		display: none;
	}
	#vm-toggle:not(:checked) ~ .vm-mobile-toggle {
		display: flex;
	}
	/* Prevent scrolling */
	body.no-scroll {
		overflow: hidden;
	}
	.vm-login-hero{
		padding:0 30px;
	}
	.vm-login-hero button[type="submit"]{
		font-size:18px !important;
	}
}
@media  (max-width:425px){
	.villa-header h1 {
		font-size: 38px;
	}
	.vm-login-hero{
		padding:0 20px;
	}
	.vm-form{
		grid-template-columns:1fr !important;
	}
	.vm-btn{
		padding:7px 10px !important;
		font-size:16px !important;
	}
	.vm-headbar__title{
		display:block !important;
	}
	.vm-headbar__title h2{
		font-size:24px !important;
	}
	.vm-headbar{
		padding:10px 0px !important;
		gap:10px;
	}
}
@media  (max-width:375px){
	.villa-header h1 {
		font-size: 35px;
	}
	.villa-card{
		padding-bottom:10px;
	}
	.villa-count{
		font-size: 14px;
	}
	.villa-sort label{
		font-size:12px;
	}
	.villa-sort select {
		font-size:12px;
	}
	.villa-price .night,.villa-price .from{
		font-size:16px;
	}
	.villa-price .price{
		font-size:18px;
	}
	.cta-btn1 .text {
		padding: 10px 10px;
	}
	.cta-btn1 .icon {
		padding: 6px 10px;
	}
	.cta-btn1{
		font-size:11px;
	}
	.price-button{
		gap:10px;
	}
	.vm-login-hero{
		padding:0 20px;
	}
}
@media  (max-width:340px){
	.villa-image {
		width:93% !important;
	}
	.villa-title {font-size: 22px;}
	.villa-header-list {
		margin-bottom: 0px;
		gap:30px;
	}
	.villa-sort{gap:5px;}
	.vm-login-hero{
		padding:0 20px;
	}
}

/*------------------------------------------------------- Container styling -----------------------------------------------------------*/
.etl-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Each card */
.etl-item {
    position: relative;
    border: none !important;
    transition: transform 0.4s ease;
    overflow: hidden;
    padding: 0 !important;
}

/* Image section */
.etl-item__image {
    margin: 0 !important;
    width: 100%;
    height: 350px;
    transition: transform 0.7s ease;
}

.etl-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content wrapper - only used for positioning */
.etl-item-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 20px 15px;
    display: flex;
    flex-direction: column-reverse;
    align-items: start;
    justify-content: end;
    pointer-events: none;
	gap:20px;
}

/* Background overlay (hidden by default) */
.etl-item-content::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(#00000000 0%, #000000ad 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

/* Show overlay on hover */
.etl-item:hover .etl-item-content::before {
    opacity: 1;
}

/* Title (always visible) */
.etl-item__title {
    position: relative;
	bottom:0;
    margin: 0px !important;
    color: #ffffff;
    z-index: 2;
}

/* Description (hidden by default) */
.etl-item__desc {
    position: relative;
    margin: 0;
    color: #f1f1f1 !important;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.5s ease, opacity 0.7s ease;
    z-index: 2;
}

/* Show description on hover */
.etl-item:hover .etl-item__desc {
    opacity: 1;
    transform: translateY(0);
}

/* ✅ RESPONSIVE STYLES */

/* Tablet */
@media (max-width: 1024px) {
    .etl-item__image {
        height: 300px;
    }

    .etl-item__title {
        font-size: 20px;
    }

    .etl-item__desc {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .etl-terms {
        gap: 30px !important;
    }

    .etl-item__image {
        height: 250px;
    }

    .etl-item-content {
        padding: 15px 10px;
    }

    .etl-item__title {
        font-size: 18px;
    }

    .etl-item__desc {
        font-size: 14px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .etl-terms {
        gap: 30px !important;
    }

    .etl-item__image {
        height: 200px;
    }

    .etl-item-content {
        padding: 12px 8px;
    }

    .etl-item__title {
        font-size: 16px;
    }

    .etl-item__desc {
        font-size: 13px;
    }
}




/* ================================================================
   VILLA SINGLE PAGE — COMPLETE MOBILE FIX
   Add this as the LAST stylesheet on the page.
   Fixes horizontal scroll and all layout issues.
================================================================ */

/* ----------------------------------------------------------------
   GLOBAL: Kill horizontal overflow everywhere
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

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

.villa-page,
.villa-page-inner,
.single-villa-left,
.single-villa-right,
.villa-header,
.villa-similar,
.vs-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Images and videos never overflow */
img, video, iframe {
  max-width: 100% !important;
  height: auto;
}

/* ----------------------------------------------------------------
   DESKTOP BASE (keep existing styles, just ensure no overflow)
---------------------------------------------------------------- */
.villa-page {
  width: 100%;
}

.villa-page-inner {
  display: flex;
  gap: 20px;
  width: 100%;
}

.single-villa-left {
  width: 70%;
  min-width: 0;
}

.single-villa-right {
  width: 30%;
  min-width: 0;
}

/* ----------------------------------------------------------------
   NEARBY LIST — was set to width:50% causing issues on mobile
---------------------------------------------------------------- */
.nearby-list li {
  width: 70% !important;
}

@media (max-width: 768px) {
  .nearby-list li {
    width: 100% !important;
  }
}

/* ----------------------------------------------------------------
   AMENITIES UL — was display:flex with fixed width items
---------------------------------------------------------------- */
.villa-amenities ul {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
}

.amenity {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ----------------------------------------------------------------
   MEAL LIST — was fixed width items
---------------------------------------------------------------- */
.villa-meal-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.villa-meal-item {
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

/* ----------------------------------------------------------------
   SIMILAR VILLAS GRID
---------------------------------------------------------------- */
.villa-similar-grid,
.vs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.vs-card {
  min-width: 0 !important;
  width: 100% !important;
}

/* ----------------------------------------------------------------
   TABS — scrollable on all screens
---------------------------------------------------------------- */
.vt-tabs {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.vt-tabs::-webkit-scrollbar {
  display: none !important;
}

.vt-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ================================================================
   BREAKPOINT: TABLET ≤ 1024px
================================================================ */
@media (max-width: 1024px) {

  .villa-page {
    padding: 0 20px !important;
  }

  /* Stack columns */
  .villa-page-inner {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .single-villa-left {
    width: 100% !important;
  }

  .single-villa-right {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
  }

  /* CTA card no longer sticky */
  .vm3-cta-card {
    position: static !important;
    top: auto !important;
  }

  /* Right column: center the CTA buttons */
  .vm3-cta-actions.v2 {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .cta-btn.is-primary {
    flex: 1 !important;
    max-width: 320px !important;
  }

  /* Amenities grid */
  .villa-amenities ul {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Similar villas */
  .villa-similar-grid,
  .vs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Sticky tabs */
  .vt-tabs.is-sticky {
    top: 80px !important;
    position: sticky !important;
  }

  .vt-tab {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}

/* ================================================================
   BREAKPOINT: SMALL TABLET ≤ 768px
================================================================ */
@media (max-width: 768px) {

  .villa-page {
    padding: 0 14px !important;
  }

  /* Breadcrumb + download row */
  .villa-page > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-left: 0 !important;
  }

  /* Breadcrumbs font */
  .vm-breadcrumbs {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    line-height: 1.6 !important;
  }

  /* Gallery: hero on top, 2 thumbs below */
  .villa-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .vg-item.vg-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .vg-item.vg-side {
    grid-row: 2 !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Tabs */
  .vt-tabs.is-sticky {
    top: 60px !important;
  }

  .vt-tab {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  /* Villa title */
  .villa-header h1 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }

  .title-wishlist {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .villa-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .villa-item-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Amenities */
  .villa-amenities ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .am-grid--full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Similar villas */
  .villa-similar-grid,
  .vs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Map */
  .villa-map-box iframe {
    height: 300px !important;
  }

  /* Amenities modal */
  .am-dialog {
    width: 96vw !important;
    margin: 3vh auto 0 !important;
    padding: 14px 12px !important;
  }
}

/* ================================================================
   BREAKPOINT: LARGE MOBILE ≤ 480px
================================================================ */
@media (max-width: 480px) {

  .villa-page {
    padding: 0 10px !important;
  }

  /* Breadcrumb row — stack vertically */
  .villa-page > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Download button — icon + short text */
  .villa-page > div:first-child a > span {
    gap: 6px !important;
    font-size: 13px !important;
  }

  /* Gallery — fully stacked */
  .villa-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .vg-item.vg-main,
  .vg-item.vg-side {
    grid-column: 1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .vg-item.vg-main img,
  .vg-item.vg-side img,
  .vg-item.vg-main video,
  .vg-item.vg-side video {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .vg-item.vg-more .vg-more-label {
    font-size: 16px !important;
  }

  /* Tabs */
  .vt-tabs.is-sticky {
    top: 56px !important;
  }

  .vt-tab {
    font-size: 12px !important;
    padding: 10px 10px !important;
  }

  /* Title */
  .villa-header h1 {
    font-size: clamp(1.25rem, 6vw, 1.6rem) !important;
  }

  .title-wishlist {
    margin-top: 16px !important;
  }

  .villa-categories img {
    height: 22px !important;
  }

  /* Location + meta */
  .villa-location-line {
    font-size: 13px !important;
  }

  .villa-item-meta span {
    font-size: 12px !important;
  }

  /* Amenities: 2 columns */
  .villa-amenities ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .am-grid--full {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .amenity-media {
    width: 48px !important;
    height: 48px !important;
  }

  .amenity-label {
    font-size: 11px !important;
  }

  /* Meals: 2 per row */
  .villa-meal-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .villa-meal-item {
    width: 100% !important;
  }

  .meal-type-text {
    font-size: 14px !important;
    margin-top: 4px !important;
  }

  .meal-icon {
    max-width: 34px !important;
  }

  /* Nearby: full width, stacked */
  .nearby-list li {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .nearby-list .place {
    width: 100% !important;
  }

  /* Policies */
  .vp-title {
    font-size: 15px !important;
  }

  .vp-list li {
    font-size: 13px !important;
  }

  .vp-header {
    padding: 10px 8px !important;
  }

  /* Similar villas: 1 column */
  .villa-similar-grid,
  .vs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .vs-title {
    font-size: 18px !important;
  }

  .vs-body {
    padding: 10px 10px 40px !important;
  }

  /* Map */
  .villa-map-box iframe {
    height: 240px !important;
  }

  /* CTA buttons: stack */
  .vm3-cta-actions.v2 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .cta-btn.is-primary {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .whatsapp-btn-wrappers {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .cta-btn.is-whatsapp {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
  }

  /* Gallery modal grid */
  .vg-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vg-gallery > .vg-cell:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .vg-media {
    aspect-ratio: 4 / 3 !important;
  }

  /* Amenities modal */
  .am-dialog {
    width: 98vw !important;
    padding: 12px 10px !important;
  }

  /* Section spacing */
  .villa-description,
  .villa-amenities,
  .villa-meals,
  .villa-nearby,
  .villa-policies {
    padding-bottom: 20px !important;
  }

  /* H2 underline */
  .villa-page h2::after,
  .villa-description h2::after,
  .villa-amenities h2::after,
  .villa-policies h2::after,
  .villa-similar h2::after,
  .villa-nearby h2::after {
    width: 36px !important;
  }

  /* Section headings */
  .villa-page h2,
  .villa-description h2,
  .villa-amenities h2,
  .villa-policies h2,
  .villa-similar h2,
  .villa-nearby h2,
  .villa-meals h2 {
    font-size: 20px !important;
  }
}

/* ================================================================
   BREAKPOINT: STANDARD MOBILE ≤ 375px
================================================================ */
@media (max-width: 375px) {

  .villa-page {
    padding: 0 8px !important;
  }

  .villa-header h1 {
    font-size: 1.2rem !important;
  }

  .vt-tab {
    font-size: 11px !important;
    padding: 9px 8px !important;
  }

  /* Meals: single column on very small screens */
  .villa-meal-list {
    grid-template-columns: 1fr !important;
  }

  .villa-item-meta {
    gap: 4px !important;
  }

  .villa-item-meta span {
    font-size: 11px !important;
    padding: 0 7px !important;
  }

  .amenity-label {
    font-size: 10px !important;
  }

  .vs-title {
    font-size: 16px !important;
  }

  .vp-title {
    font-size: 14px !important;
  }

  .nearby-list .distance {
    font-size: 12px !important;
  }

  /* CTA card */
  .vm3-block.vm3-cta-card {
    padding: 8px !important;
  }
}
.vm-search-trigger-wrap  .vm-search-trigger-btn{
	border-radius: 6px !important;
}

/* ================================================================
   FLOATING BOTTOM BAR ON MOBILE (enquire + whatsapp always visible)
   Optional: uncomment if you want a sticky bottom CTA on mobile
================================================================ */
/*
@media (max-width: 768px) {
  .single-villa-right {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
    padding: 10px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  .vm3-cta-head,
  .item-meta > p {
    display: none !important;
  }

  .villa-page-inner {
    padding-bottom: 80px !important;
  }
}
*/