/**
 * Theme Name:     OceanWP Child
 * Author:         AA
 * Template:       oceanwp
 * Text Domain:	   oceanwp-child
 * Description:    OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it
 */

.hostaway-swiper {
    width: 100%;
    padding: 20px 0;
  }
  
  .swiper-slide {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 300px;
    overflow: hidden;
    position: relative;
    user-select: none;
  }
  
  .listing-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  
  .listing-content {
    padding: 16px;
  }
  
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
  }
  
  .details {
    font-size: 15px;
    margin-bottom: 8px;
    color: #333;
  }
  
  .amenities {
    font-size: 14px;
    color: #555;
  }
  
  .card-arrow {
    position: absolute;
    top: 90px;
    background: rgba(0,0,0,0.4);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .swiper-slide:hover .card-arrow {
    opacity: 1;
    visibility: visible;
  }
  
  .card-arrow.left {
    left: 10px;
  }
  
  .card-arrow.right {
    right: 10px;
  }


.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 14px !important; /* Choti arrow */
    color: #2c3f3a !important;  /* Arrow color */
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: #000;
}
.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
    color: #fff !important;
}
.content-area{
    width:100% !important;
	padding: 50px 25px 50px 25px;
	float: none !important;
}


/* By default hide arrows */
.swiper-button-prev,
.swiper-button-next {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Show on hover of the whole swiper */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Common arrow style */
.swiper-button-prev,
.swiper-button-next {
  color: #2c3f3a !important; /* arrow color */
  background-color: #ffffff !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important; /* smaller arrow icon */
  transition: .4s ease-in-out;
}

/* On hover, background becomes white */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #000 !important;
  color: #fff !important;
}

.hostaway-single-page{
    width:1250px; 
    max-width:100%;
    display:block;
    margin:0px auto; 
	padding: 0px;
}

.hostaway-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 30px;
  height: 450px; 
}
.hostaway-gallery .large-image {
    grid-row: span 1;
    position: relative;
    height: 100%;
    outline:none !important;
}
.hostaway-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.hostaway-gallery .thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    height: 450px;
    width: 100%;
}
.hostaway-gallery .thumbs a {
    position: relative;
    height: 220.5px;
    outline:none !important;
}
.hostaway-gallery .large-image img {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.more-overlay {
  position: relative;
}
.more-overlay::after {
  content: attr(data-count) " more photos";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .hostaway-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hostaway-gallery .thumbs {
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    display: none;
  }
}
.single-page-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 15px;
}
.content-part {
    padding-right: 50px;
}

.content-part h1 {
    font-family: Unna;
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: #000;
}

.content-part p {
    font-size: 18px;
    line-height: 1.6;
    color: #000;
}

.content-part hr {
    opacity: 0.3;
    border-style: solid;
    border-width: 0.0625rem 0px 0px;
    border-color: rgb(3, 3, 3);
    margin: 2.4375rem 0px;
}

.content-part h2 {
    font-family: Unna;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
}
.content-part ul {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: disc;
    gap: 30px;
    color: rgb(14, 140, 140);
    font-size: 18px;
}

.content-part ul span {
    color: #000;
}
.btn-readmore {
    background: transparent;
    text-decoration: underline;
    font-size: 18px;
    padding: 0;
    margin: 0px 0px 20px 0px;
    color: #000;
}

.btn-readmore i {
    padding-left: 6px;
    font-size: 14px;
}

/*  -----------------------Amenities Start -------------------------- */

.amenities-two-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 700px;
}

.amenity-pair {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.amenity {
    flex: 1;
    display: flex;
    align-items: baseline;
    border-radius: 10px;
    padding: 10px 12px;
    color: #000;
    gap: 15px;
}

.amenity img {
	width: 20px;
	height: 20px;
}

.show-all-btn {
	color: white;
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-top: 15px;
	border: 0.0625rem solid rgb(14, 140, 107);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	user-select: none;
	text-decoration: none;
	font-size: 14px;
	height: 4.25rem;
	padding: 0px 1.5rem;
	border-radius: 2.5rem;
	background-color: transparent;
	color: rgb(3, 3, 3);
}
.show-all-btn:hover {
	color: white;
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-top: 15px;
	border: 0.0625rem solid rgb(14, 140, 107);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	user-select: none;
	text-decoration: none;
	font-size: 14px;
	height: 4.25rem;
	padding: 0px 1.5rem;
	border-radius: 2.5rem;
	background-color: rgba(14, 140, 107, 0.05);
	color: rgb(3, 3, 3);
}

.amenity span {
	font-size: 20px;
    line-height: 1.5;
    color: #000;
}

@media (max-width: 600px) {
	.amenity-pair {
		flex-direction: column
	}
	.amenity span {
		font-size: 18px
	}
}
/*  -----------------------Amenities End -------------------------- */

.content-part h3 {
    font-family: Unna;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
}
/*  -----------------------Modal css Start -------------------------- */
/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  animation: fadeIn 0.3s ease;
}
/* Modal content */
.modal-content {
background-color: #fff;
margin: 8% auto;
padding: 25px;
border-radius: 10px;
width: 90%;
max-width: 600px; /* Increased from 400px to 600px */
animation: slideIn 0.4s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
position: relative;
}
.modal-content h3 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
    font-family: "Open Sans",sans-serif;
}

/* List style */
.modal-content ul {
list-style: none;
padding: 0;
margin: 0;
display: inherit;
height: 300px;
overflow-y: auto;
}

.modal-content ul li {
padding: 12px 0;
border-bottom: 1px solid #ddd;
line-height: 1.8; /* Added line height */
color: #000;
}

.modal-content ul li:last-child {
border-bottom: none;
}
/* Close button */
.close-btn {
    float: right;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #000000;
    position: absolute;
    top: 12px;
    right: 12px;
}

.close-btn:hover {
  color: #000;
}

/* Animations */
@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

@media (max-width: 500px) {
  .modal-content {
    margin: 30% auto;
    padding: 15px;
  }
}
/*  -----------------------Modal css End -------------------------- */
.content-part h4 {
    font-family: Unna;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
    margin-top: -20px;
    margin-bottom: 10px;
}
.cancel-policy p {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.cancel-policy p:last-child {
    margin-bottom: 0;
}
.content-part h5 {
    font-family: Unna;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
    margin-top: -20px;
    margin-bottom: 10px;
}
.calendar-container {
    padding-top: 25px;
}
.iZnpBX {
    border-color: #0e8c6b !important;
}

.iZnpBX:hover {background-color: #0e8c6b !important;}

.iZnpBX:hover span {
    color: #fff !important;
}
.gRAtCG {
    width: 100% !important;
    max-width: 100% !important;
}
.dvfhrq {
    width: 100% !important;
    max-width: 100%;
}

.hKhBw {
    grid-auto-rows: 5rem !important;
    grid-template-columns: repeat(7, 5rem) !important;
}

.cbUckU {
    font-size: 1.8125rem !important;

}

.ejATSg {
	font-size: 1.8125rem !important;
}

.dCLcQB {
	font-size: 1.8125rem !important;
}

.eyROoo {
	font-size: 1.8125rem !important;
	text-align: center !important;
}

.ggaFci button:first-child {
    margin-left: 100% !important;
    left: 10px !important;
    float: right !important;
    margin-top: 10px !important;
	font-size: 1.8125rem !important;
}
.dhPmZz * {
    float: left !important;
	font-size: 1.8125rem !important;
}

.ggaFci button {
    margin-top: 10px !important;
	font-size: 1.8125rem !important;
}

.eWhnZH {
	height: 4rem !important;
}

.gftAsv {
	height: 4rem !important;
	background-color: rgb(185 228 216) !important;
}

.cbUckU {
	font-weight: 500 !important;
}

.styled__Title-sc-17f83tm-2.eyROoo {
    margin-left: 38% !important;
}

.ggaFci button {
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    border: 0.0625rem solid rgb(14, 140, 107) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    user-select: none !important;
    text-decoration: none !important;
    font-size: 14px !important;
    height: 4.25rem !important;
    padding: 0px 1.5rem !important;
    border-radius: 2.5rem !important;
    background-color: transparent !important;
    color: rgb(3, 3, 3) !important;
}

.ggaFci button:hover {
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    border: 0.0625rem solid rgb(14, 140, 107) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    user-select: none !important;
    text-decoration: none !important;
    font-size: 14px !important;
    height: 4.25rem !important;
    padding: 0px 1.5rem !important;
    border-radius: 2.5rem !important;
    background-color: transparent !important;
    color: rgb(3, 3, 3) !important;
    background-color: rgba(14, 140, 107, 0.05) !important;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.review-header .heading {
    font-family: Unna;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    word-break: break-word;
    color: #000;
    margin-bottom: 10px;
}

.average-rating-div {
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    border: 1px solid rgba(44, 63, 58, 0.2);
    width: max-content;
    padding: 0.25rem 1.5rem;
    background-color: rgba(44, 63, 58, 0.1);
    font-size: 16px;
    line-height: 1.6;
}

.left-nav {
    border: 0.0625rem solid rgb(14, 140, 107);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.25rem;
    user-select: none;
    text-decoration: none;
    font-size: 1.5rem;
    height: 4.25rem;
    padding: 0px;
    width: 4.25rem;
    border-radius: 2.5rem;
    background-color: transparent;
    color: rgb(3, 3, 3);
    transition: .4s ease all;
}

.right-nav {
    border: 0.0625rem solid rgb(14, 140, 107);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.25rem;
    user-select: none;
    text-decoration: none;
    font-size: 1.5rem;
    height: 4.25rem;
    padding: 0px;
    width: 4.25rem;
    border-radius: 2.5rem;
    background-color: transparent;
    color: rgb(3, 3, 3);
    transition: .4s ease all;
}

.average-rating {
    display: flex;
    gap: 12px;
    align-items: center;
}
.right-nav:hover {
    background-color: rgb(14, 140, 107);
    border: 0.0625rem solid rgb(14, 140, 107);
    color: #fff;
}

.left-nav:hover {
    background-color: rgb(14, 140, 107);
    border: 0.0625rem solid rgb(14, 140, 107);
    color: #fff;
}
.slick-initialized .slick-slide {
    background-color: #fff;
    padding: 40px 30px 40px 30px;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 40px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 16px;
    font-family: 'Open Sans';
    line-height: 1.6;
}
.ratinginslider {
    display: inline-block;
    border-radius: 24px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    background-color: rgb(44, 63, 58);
    padding: 4px 10px 4px 14px;
    margin-top: 10px;
}
.author {
    color: rgb(113, 139, 138);
    margin-left: 1rem;
    display: inline-block;
}
.map-container hr {
    opacity: 0.3;
    border-style: solid;
    border-width: 0.0625rem 0 0;
    border-color: rgb(3, 3, 3);
    margin: 2.4375rem 0;
}
.map-parent{
    width: 90%;
    height: 400px;
    margin: 40px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#map {
  width: 100%;
  height: 100%;
}
.hostaway-gallery .large-image .singlelargeImageRating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #27302B;
  color: #fff;
  padding: 4px 8px;
  border-radius: 18px;
  font-size: 14px;
  margin: 18px 10px 0px 0px;
  z-index: 1;
}
/* --------------------- responsive css --------------------  */

/* Responsive Design */
@media (max-width: 768px) {
	.hostaway-gallery {
	  padding-left: 10px;
	  padding-right: 10px;
	  padding-top: 10px;
	}
	.single-page-content {
	  overflow: hidden;
	  padding-left: 10px;
	  padding-right: 10px;
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap;
	}
	.content-part {
	  padding: 0;
	  width: 100%;
	}
	.content-part h1 {
	  font-size: 2rem;
	}
	.content-part p {
	  font-size: 14px;
	}
	.btn-readmore {
	  font-size: 14px;
	}
	.btn-readmore i {
	  font-size: 12px;
	}
	.content-part ul {
	  display: inline-block;
	  margin-left: 20px;
	  font-size: 14px;
	}
	.content-part ul>span {
	  font-weight: 600;
	}
	.content-part h2 {
	  font-size: 2rem;
	}
	.amenity {
	  max-width: 100%;
	  display: flex;
	  align-items: center;
	  padding: 0;
	  gap: 2px;
	}
	.amenity span {
	  font-size: 14px;
	  margin-left: 6px;
	  line-height: 1em;
	  margin-bottom: 0;
	  margin-top: 0;
	  display: inline-block;
	}
	.content-part h4 {
	  margin-top: 20px;
	  margin-bottom: 0;
	  font-size: 1.8rem;
	}
	.cancel-policy span {
	  font-size: 14px;
	}
	.content-part h5 {
	  font-size: 1.8rem;
	}
	.ggaFci button span {
	  font-size: 14px !important;
	  padding: ;
	}
	.ggaFci button {
	  height: 34px !important;
	  margin: 6px 0px 0px 5px !important;
	}
	.ggaFci button:first-child {
	  margin: 6px 0px 0px 5px !important;
	  padding: ;
	  width: ;
	}
	.review-container {
	  padding-left: 10px;
	  padding-right: 10px;
	}
	.review-header {
	  flex-direction: column;
		margin-bottom: 20px;
	}
	.review-header .heading {
	  font-size: 2rem;
	  text-align: center;
	  margin-bottom: 20px;
	}
	.average-rating {
	  flex-direction: column;
	  width: 100%;
	  justify-content: flex-start;
	  align-items: center;
	}
	.average-rating-div {
	  display: block;
	  margin: 0 !important;
	  font-size: 14px;
	  padding: 0.50rem 1.5rem;
	}
	.slick-initialized .slick-slide {
	  margin-left: 0;
	  margin-right: 0px;
	  padding: 15px 15px;
	  border-radius: 10px;
	  font-size: 14px;
	}
	.ratinginslider {
	  margin-bottom: 12px;
	  display: block;
	  width: max-content;
	}
	.author {
	  margin-left: 5px;
	  margin-bottom: 10px;
	}
	
	.review-slider {
	  height: auto !important;
	}
	.slick-slide p {
	  height: 120px;
	  overflow-y: auto;
	}
	.hostaway-gallery .large-image .singlelargeImageRating {
	  margin: 0px 0px 0px 0px;
	  top: 15px;
	  right: 10px;
	  padding: 4px 9px 5px 13px;
	}
	.ggaFci {
    	justify-content: right !important;
	}

	.ggaFci button {
		font-size: 14px !important;
		min-width: 145px !important;
	}
	
	.cbUckU {
    font-size: 1rem !important;
	}
	
	.ejATSg {
    font-size: 1rem !important;
	}
	
	.hKhBw {
    grid-template-columns: repeat(7, 4rem) !important;
	}
	
	.styled__Title-sc-17f83tm-2.eyROoo {
    margin-left: 0 !important;
	}
	.dhPmZz * {
   	    float: none !important;
		font-size: 14px !important;
	}
}