.homepage_dropdown {

    padding: 4.8rem 9.6rem 0;

}

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

.homepage_container {

    padding: 6.4rem 9.6rem;

}

.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: 416px;

      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%;

      background: #fff;

    }



    .villa-info h2 {

      font-size: 3.2rem;

      font-weight: 900;

      margin-bottom: 8px;

      line-height: 40px;

    }



    .villa-info h4 {

      font-size: 2rem;

      color: #101010;

      margin-bottom: 12px;

      line-height: 28px;

    }



    .villa-info p.desc {

      font-size: 1.8rem;

      color: #101010;

      line-height: 26px;

      margin-bottom: 3.2rem;

    }



    .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: 8px;

        width: calc(50% - 20px);

    }

    .villa-details span {

      color: #101010;

      font-weight: 500;

      font-size: 2rem;

      line-height: 28px;

    }

    .villa_opacity {

        opacity: 0.6;

    }



    .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;

}



@media (max-width: 768px) {

  .homepage_dropdown{

    padding: 2.4rem 1.6rem 0;

  }

  .dropdown-select {

    width: 100%;

  }

  .villa-info {

    padding: 3.2rem 1.6rem

  }

  .villa-card {

    flex-direction: column;

    gap: 0;

  }

  .homepage_container {

    padding: 4.8rem 0 0;

  }

  .villa-slider, .villa-info {

    width: 100%;

  }

  .villa-slider img {

    height: 300px;

  }

  .villa-info h2 {

    font-size: 2.4rem;

    line-height: 36px;

    margin-bottom: 4px;

  }

  .villa-info h4 {

    font-size: 1.6rem;

    line-height: 24px;

    margin-bottom: 8px;

  }

  .villa-info p.desc {

    font-size: 1.6rem;

    line-height: 24px;

  }

  .villa-details span {

    font-size: 1.6rem;

    line-height: 22px;

  }

  .villa-details {

    gap: 24px 40px;

  }
  .homepage .check-layout-btn span svg {
    width: 10px;
    height: 10px;
  }
}

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