.homepage_dropdown {

    padding: 4.8rem 9.6rem 0;

}

.homepage_header {
  position: sticky;
  width: 100%;
  top: 0;
  background: #ffffff;
}

.homepage_container {
    background: #fff7ee;
    padding: 6.4rem 0;
}
.homepage .property_text_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 86.4rem;
  width: 90%;
  text-align: center;
}
.homepage .property_text_inner p {
  color: #FFFFFF;
  font-size: 21px;
  line-height: 26px;
  letter-spacing: 0;
  padding-bottom: 48px;
  font-weight: 300;
}
.index_page .property_main_text {
  font-size: 6.4rem;
  line-height: 72px;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.homepage .property_text_inner {
  padding: 0;
  color: #ffffff; 
}
.dropdown-select {

    width: 412px; /* adjust as needed */

    padding: 14px 40px 14px 16px;

    font-size: 16px;

    color: #8ab38a; /* soft green text */

    border: 1px solid #a8c8a8; /* light green border */

    border-radius: 4px;

    background-color: #fff;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    cursor: pointer;



    /* custom arrow */

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%238ab38a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 12px;

  }



  /* On focus */

  .dropdown-select:focus {

    outline: none;

    border-color: #8ab38a;

  }



  /* Placeholder (disabled option) color */

  .dropdown-select option[disabled] {

    color: #8ab38a;

  }



  .villa-card {

        display: flex;

        overflow: hidden;

        justify-content: space-between;

        align-items: center;

        gap: 32px;

    }



    /* LEFT: Slider */

    .villa-slider {

      position: relative;

      width: 50%;

      overflow: hidden;

    }



    .villa-slider img {

      width: 100%;

      height: 512px;

      object-fit: cover;

      display: none;

    }



    .villa-slider img.active {

      display: block;

      animation: fadeIn 0.5s ease-in-out;

    }

.villa-slider {

  position: relative;

  overflow: hidden;

}



.villa-slider img {

  width: 100%;

  display: block;

  object-fit: cover;

}



.slider-btn:hover {

  background: rgba(0, 0, 0, 0.8);

}



.slider-btn svg path {

  fill: #fff;

}



.slider-btn.prev {

  left: 10px;

}

.slider-btn.next {

  right: 10px;

}

.slider-btn {

  width: 4.8rem !important;

  height: 4.8rem !important;

}

.swiper-button-next svg, .swiper-button-prev svg {

  max-width: 1.6rem;

}

/* Hide Swiper default arrow icons */

.swiper-button-prev::after,

.swiper-button-next::after {

  display: none;

}



    @keyframes fadeIn {

      from {opacity: 0;}

      to {opacity: 1;}

    }



    .slider-btn {

        position: absolute;

        top: 50%;

        transform: translateY(0);

        background-color: rgba(255, 255, 255, 0.2);

        backdrop-filter: blur(6px);

        border: .1rem solid rgba(255, 255, 255, 0.4);

        font-size: 22px;

        cursor: pointer;

        border-radius: 50%;

        width: 48px;

        height: 48px;

        display: flex;

        justify-content: center;

        align-items: center;
        transition: background 0.3s ease;

    }

    .slider-btn.prev { left: 10px; }

    .slider-btn.next { right: 10px; }



    /* RIGHT: Content */

    .villa-info {

      width: 50%;
      padding: 0 14rem 0 3.2rem;

    }



    .villa-info h2 {

      font-size: 32px !important;
      line-height: 38px !important;
      font-weight: 650 !important;
      margin-bottom: 8px !important;
      color: #84634E;
      text-transform: capitalize;
      letter-spacing: 0 !important;
    }



    .villa-info h4 {

      font-size: 2.1rem;

      color: #84634E;

      margin-bottom: 12px;

      line-height: 26px;
      font-weight: 300;

    }



    .villa-info p.desc {

      font-size: 1.8rem;

      color: #84634e;

      line-height: 26px;

      margin-bottom: 3.2rem;
      font-weight: 200;

    }



    .villa-details {

      display: flex;

      flex-wrap: wrap;

      gap: 15px 40px;

      font-size: 1.8rem;

      line-height: 26px;

    }

    .villa-details .details_flex {

        display: flex;

        flex-direction: column;

        gap: 2px;

        width: calc(50% - 20px);

    }

    .villa-details span {

      color: #84634E;

      font-weight: 300;

      font-size: 2.1rem;

      line-height: 28px;
      font-family: "Crimson Pro";
    }

    .villa_opacity {

        opacity: 0.6;
        font-family: "Raleway" !important;
        font-size: 14px !important;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        font-weight: 400 !important;
    }



    .enquire-btn {

        display: inline-block;

        color: #0066BF;

        font-weight: 600;

        font-size: 2rem;

        line-height: 28px;

        text-decoration: underline;

    }



    .enquire-btn:hover {

      text-decoration: underline;

    }

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin: 40px 0;

}



.page-btn {

    background: transparent;

    border: 1px solid #b5c9af;

    color: #95B995;

    padding: 6px 28px;

    border-radius: 26px;

    font-size: 2rem;

    cursor: pointer;

    line-height: 28px;

    transition: all 0.3s ease;

}



.page-btn:hover {

  background: #95B995;

  color: #fff;

}



.page-btn.active {

  background: #b5c9af;

  color: #fff;

}



.page-btn[disabled] {

  opacity: 0.5;

  cursor: not-allowed;

}

.homepage .check-layout-btn {
  position: unset;
  background: url(../images/inquirnow_btn.webp) no-repeat;
  background-size: 31.8rem;
  width: 32.5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-top: 32px;
  transition: all 0.3s;
  font-family: "Raleway";
  letter-spacing: 0.8px;
}
.btn__hover:hover {
  background: url(../images/btn-hover.webp) no-repeat;
  width: 32.5rem;
  background-size: 31.8rem;
}
section.homepage_container {
  position: relative;
  background: url(../images/texture_img.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.villa-slider .swiper-slide {
    position: relative;
  }

  /* Overlay layer */
  .villa-slider .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1); /* adjust opacity */
    z-index: 1;
  }
  .villa_slider_arrows {
    position: absolute;
    bottom: 40px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 4rem;
  }
  .villa_slider_arrows button {
    background: transparent;
    border: none;
  }
@media (max-width: 768px) {

  .homepage_dropdown{

    padding: 2.4rem 1.6rem 0;

  }

  .dropdown-select {

    width: 100%;

  }

  .villa-info {
    position: relative;
    padding: 3.2rem 1.6rem;
  }

  .villa-info:before {
    content: '';
    position: absolute;
    right: 0;
    width: 17rem;
    height: 17rem;
    top: 0;
    background: url(../images/raaya18.webp);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
}

  .villa-card {

    flex-direction: column;

    gap: 0;

  }

  .homepage_container {

    padding: 4.8rem 0 0;
    background: #fff7ee;

  }

  .villa-slider, .villa-info {

    width: 100%;

  }

  .villa-slider img {

    height: 300px;
  }
  .villa-info h2 {

    font-size: 2.8rem !important;

    line-height: 36px;
    text-align: left;

    margin-bottom: 4px;

  }

  .villa-info h4 {

    font-size: 2.1rem;

    line-height: 24px;

    margin-bottom: 8px;

  }

  .villa-info p.desc {

    font-size: 1.8rem;

    line-height: 24px;

  }

  .villa-details span {

    font-size: 1.8rem;
    font-family: "Crimson Pro";
    line-height: 22px;

  }
.villa-details .villa_opacity {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;

}
  .villa-details {

    gap: 24px 40px;

  }
  .homepage .check-layout-btn span svg {
    width: 10px;
    height: 10px;
  }
  .homepage .property_text_inner p {
    font-size: 18px;
    line-height: 26px;
    font-weight: 300;
  }
}

@media screen and (min-width: 769px) {
  .villa-details .details_flex {
    width: 25%;
  }

.villa-card:before {
    content: '';
    position: absolute;
    right: 0;
    width: 26rem;
    height: 26rem;
    top: 0;
    background: url(../images/raaya18.webp);
    background-repeat: no-repeat;
    background-size: cover;
}
}