:root {
   --primary-color: #c4944e;
   --secondary-color: #84ac8c;
   --accent-color: #3498db;
   --text-color: #333;
   --light-gray: #f5f5f5;
   --dark-gray: #777;
   --white: #ffffff;
   --off-white: #f0f0f0;
   --black: #000000d7;
 }
 
 
 body,
 html {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #fff;
   overflow-x: hidden;
 }
 
 main {
   width: 100%;
   height: auto ;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
 }
 
 .property-details-container {
   height: 100%;
   width: 90%;
   max-width: 1200px;
   background: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   position: relative;
   padding-top: 2rem;
   padding-bottom: 2rem;
   box-sizing: border-box;
 }
 
 .property-details-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   padding-bottom: 1rem;
 }
 
 .property-details-header .section-header {
   width: 70%;
 }
 
 .property-details-header-right {
   width: 30%;
 
   display: flex;
   justify-content: flex-end;
   align-items: center;
 
   padding-right: 1rem;
 }
 
 .property-details-header-right button {
   font-size: 1.5rem !important;
   width: auto;
 }
 
 .property-type-heading {
   font-size: 2.2rem;
   font-weight: bold;
   margin-bottom: 1.5rem;
   letter-spacing: 1px;
   text-align: start;
 }
 
 .property-swiper {
   width: 100%;
   height: 100%;
   border-radius: 5px;
 
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   background: #fff;
   position: relative;
   box-sizing: border-box;
 }
 
 .image-overlay-container {
   width: 100%;
   height: 100%;
   position: relative;
 
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
 }
 
 .image-overlay-container img {
   width: 100%;
   max-width: 1400px;
   height: auto;
   aspect-ratio: 16/9;
   object-fit: cover;
 }
 
 .image-overlay {
   position: absolute;
   left: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0);
   color: #fff;
   padding: 1.2rem 1.5rem 1.2rem 1.5rem;
   border-radius: 5px;
   max-width: 40%;
 }
 
 .image-overlay h2 {
   margin: 0 0 0.5rem 0;
   font-size: 1.5rem;
   font-weight: 700;
   text-align: left;
   width: 100%;
 }
 
 .image-overlay p {
   margin: 0;
   font-size: 1rem;
   line-height: 1.4;
   text-align: left;
   width: 100%;
 }
 
 /* Swiper navigation custom style */
 .swiper-button-next,
 .swiper-button-prev {
   color: #222 !important;
   background: rgba(255, 255, 255, 0.7) !important;
   border-radius: 50%;
   width: 3rem !important;
   height: 3rem !important;
   top: 50% !important;
   transform: translateY(-50%) !important;
 }
 
 .swiper-button-next:after,
 .swiper-button-prev:after {
   font-size: 1.5rem !important;
   font-weight: 900 !important;
 }
 
 .swiper-pagination-bullet {
   background: #222;
   opacity: 0.7;
 }
 
 
 
/* Property Filter Buttons */
.property-filters {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  margin: 0rem 0 2rem 0;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: #719976 #f5f5f5;
}

/* Cover native scrollbar arrow buttons at the edges */
.property-filters::before,
.property-filters::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 14px;
  background: var(--white);
  z-index: 2;
  pointer-events: none;
}

.property-filters::before {
  left: 0;
  border-radius: 0 8px 0 0;
}

.property-filters::after {
  right: 0;
  border-radius: 8px 0 0 0;
}

.property-filters::-webkit-scrollbar {
  height: 12px;
}

.property-filters::-webkit-scrollbar-track {
  margin: 0 24px;
  background: rgba(44, 62, 80, 0.1);
  border-radius: 999px;
}

.property-filters::-webkit-scrollbar-thumb {
  background: linear-gradient(
    90deg,
    rgba(44, 62, 80, 0.45),
    rgba(196, 148, 78, 0.85)
  );
  border: 2px solid var(--white);
  border-radius: 999px;
}

.property-filters::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    90deg,
    rgba(44, 62, 80, 0.65),
    rgba(196, 148, 78, 1)
  );
}

.property-filters::-webkit-scrollbar-button,
.property-filters::-webkit-scrollbar-button:single-button,
.property-filters::-webkit-scrollbar-button:horizontal:decrement,
.property-filters::-webkit-scrollbar-button:horizontal:increment {
  display: none;
  width: 0;
  height: 0;
}
 
 .filter-btn {
   background: var(--primary-color);
   border: 2px solid var(--primary-color);
   color: var(--white);
   padding: 0.8rem 1.5rem;
   border-radius: 50px;
   font-family: "Poppins", sans-serif;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
 }
 
 .filter-btn:hover {
   background: var(--secondary-color);
   color: #fff;
   transform: translateY(-2px);
 }
 
 .filter-btn.active {
   background: var(--secondary-color);
   color: #fff;
   border: 2px solid var(--secondary-color);
 }
 
 /* Property Type Badge */
 .property-type-badge {
   display: inline-block;
   background: rgba(44, 62, 80, 0.8);
   color: #fff;
   padding: 0.3rem 0.8rem;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 500;
   margin-top: 0.5rem;
 }
 
 @media (max-width: 1024px) and (min-width: 768px) {
   .property-details-container {
     height: auto;
     min-height: auto;
     background: #fff;
     padding: 3rem 0;
 
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
   }
 
   .property-swiper {
     width: 100% !important;
     max-width: 1200px;
     height: 80vh;
     max-height: 700px;
     border-radius: 5px;
     overflow: hidden;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
     background: #fff;
     position: relative;
   }
 
   .image-overlay {
     position: absolute;
     left: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0);
     color: #fff;
     padding: 1.2rem 1.5rem 1.2rem 1.5rem;
     padding-bottom: 3rem;
     border-radius: 5px;
     max-width: 70%;
   }
 
   .property-filters {
     gap: 0.8rem;
     margin: 1.5rem 0;
   }
 
   .filter-btn {
     padding: 0.7rem 1.2rem;
     font-size: 0.85rem;
   }
 }
 
 @media (max-width: 768px) {
   main {
     width: 100%;
     height: 100% !important;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     max-height: auto !important;
     min-height: fit-content !important;
   }
 
   .property-details-container {
     height: auto;
     min-height: auto;
     background: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     position: relative;
     padding: 3rem 0;
     width: 95%;
   }
 
   .r {
     display: none !important;
   }
 
   .property-details-header {
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     width: 95%;
     height: auto;
   }
 
   .property-details-header .section-header .doted-line {
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     /* justify-content: flex-start !important; */
     gap: 0.5rem;
     margin-top: 0.5rem !important;
   }
 
   .property-details-header-right {
     width: 0px !important;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
 
     display: none;
   }
 
   .property-details-header .section-header {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
   }

   .property-details-header .section-header .doted-line {
    margin: 0 auto;
   }
 
   .property-details-header-right button {
     font-size: 1rem !important;
     width: 130px !important;
   }
 
   .property-swiper {
     width: 98vw;
     height: 70vh;
     max-height: 70vh;
   }
 
   .image-overlay-container img {
     height: 100%;
     width: 100%;
   }
 
   .image-overlay {
     padding: 0.7rem 1rem 0.7rem 1rem;
     padding-bottom: 2rem;
     font-size: 0.95rem;
     max-width: 100%;
   }
 
   .property-type-heading {
     font-size: 1.3rem;
   }
 
   .swiper-button-next,
   .swiper-button-prev {
     display: none !important;
   }
 
  .property-filters {
    gap: 0.5rem;
    margin: 1rem 0;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 1rem 1rem;
  }
 
   .filter-btn {
     padding: 0.6rem 1rem;
     font-size: 0.8rem;
     min-width: fit-content;
     flex-shrink: 0;
   }
 
   .property-type-badge {
     font-size: 0.7rem;
     padding: 0.2rem 0.6rem;
   }
 }
 
 @media (max-width: 468px) {
   main {
     width: 100%;
     height: 100%;
     max-height: fit-content;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
   }
 
   .property-swiper {
     width: 100% !important;
     height: 400px;
     max-height: 400px;
   }
 
  .property-filters {
    gap: 0.4rem;
    margin: 1rem 0;
    padding: 0 0.5rem 1rem;
  }
 
   .filter-btn {
     padding: 0.5rem 0.8rem;
     font-size: 0.75rem;
   }
 }