body{
    font-family: poppins;
}
h2 {
    font-family: Poppins;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px !important;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
}



.section-padding {
    padding: 90px 0;
}

.section-heading {
    color: #0a0a35;
    font-weight: 500;
    font-size: 32px;
    white-space: nowrap;
}

.content-text {
    font-family: Poppins;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #424242;

}
.amenities{
    margin-top: 90px;
}
.feature-text{
font-family: Poppins;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
margin-top: 15px;

}

.feature-card {
  position: relative;
  overflow: hidden !important; 
  transition: transform 0.5s ease-in-out;
}

.feature-card img {
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card:hover img {
  transform: scale(1.07); 
}
.dark-blue-bk{
    background-color: #000A3E;
}
.text-white{
color: #ffffff !important;
}
.explore-title{
font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 24px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
color: #ffffff;
}
.explore-text{
font-family: Poppins;
font-weight: 400 !important;
font-style: Regular;
font-size: 16px;
line-height: 28px;
letter-spacing: 0%;
text-align: center;
color: #ffffff;
}
.explore-c-title{
font-family: Poppins;
font-weight: 500;
font-style: Medium;
font-size: 18px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
color: #ffffff;
}
.explore-c-text{
font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
color: #ffffff;
}
.explore-c-title,
.explore-c-text {
  margin: 5px;
  padding: 0;
}

.explore-card {
  position: relative;
  overflow: hidden !important; 
  transition: transform 0.5s ease-in-out;
}

.explore-card img {
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-card:hover img {
  transform: scale(1.06); 
}
.plan-text{
font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 24px;
line-height: 36px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color: #424242;
}
.plan-title{
  font-family: Poppins;
font-weight: 500;
font-style: Medium;
font-size: 32px;
line-height: 40px;
letter-spacing: 0%;
text-align: center;
text-transform: uppercase;
color: #000A3E;
}
.plan-title span{
    color: #FFBA5C;
}
.plan-logo{
    padding: 50px 0;
    width: 50%;
}
.title-hr {
  width: 70px;
  height: 2px !important;
  background-color: #000A3E;
  border: none;
  margin: 0;
  opacity: 1;
}
.dark-blue-bk .title-hr {
  background-color: #ffffff;
}

/* .section-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
} */

/* accordion */

.accordion-section {
  padding: 60px 0;
}

.accordion {
  width: 100%;
}

.accordion-item {
  background-color: #ffffff;
  margin-bottom: 8px;
  /* border-radius: 2px; */
  overflow: hidden;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e0e0e0;
}

.accordion-header {
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-header .icon {
  font-size: 22px;
  font-weight: bold;
  line-height: 0;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0px 20px;
}

.accordion-item.active .accordion-body {
  max-height: 200px;
  opacity: 1;
  padding-bottom: 15px;
}

.accordion-body-text {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #333;
  margin: 10px 0 0;
}

 .slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-container img.active {
  opacity: 1;
  z-index: 1;
}

.slider-container .main-slide {
  position: relative;
  opacity: 1;
  z-index: 0;
}














/* Responsive heading font size */
@media (max-width: 768px) {
  .section-heading {
    font-size: 24px !important;
  }
  
 h2{
  font-size: 28px;
  line-height: 34px;
 }
 
.content-text{
  font-size: 14px;
  line-height: 24px;
}
.feature-text{
  font-size: 14px;
}
.explore-text {
  font-size: 14px;
  line-height: 24px;
}
.explore-title {
  font-size: 20px;
}
.explore-c-title{
  font-size: 16px;
}
.explore-c-text{
  font-size: 14px;
}
.accordion-header{
  font-size: 16px;
}
.accordion-body-text{
  font-size: 14px;
  line-height: 22px;
}
.plan-text{
  font-size: 20px;
  line-height: 30px;
}
.plan-title{
font-size: 26px;
line-height: 38px;
}
.banner-btn{
  padding: 10px 20px !important;
}

.banner-text{
  font-size: 14px;
}
h1{
  font-size: 28px;
  line-height: 38px;
}
.part-content {
  position: absolute;
  left: 40% !important;
  bottom: 1%;
  font-size: 12px !important;
}
.part:hover .part-content,
.part.hovered .part-content {
  font-size: 18px !important;
  transform: translateX(-50%) translateY(-50%);
  top: 50% !important;
  bottom: auto;
  left: 50% !important;
}
}



 
/* header css */

.banner-image {
  background-image: url(../images/westfield-hotel-exterior.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end; 
  justify-content: center;
  text-align: center;
  padding-top: 420px; 
}

.banner-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.4); */
  z-index: 1;
}

.banner-image .content {
  /* position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 15px; */
}
.banner-image .content {
    z-index: 2;
    color: #fff;
    padding: 30px 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); */
    background-color: rgba(0, 0, 0, 0.3);
    /* border-radius: 5px; */
}
.banner-image h1 {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  color: #ffffff;
  margin-bottom: 20px;
}

.banner-text {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  margin-bottom: 40px !important;
}

.banner-btn {
    background-color: #FFBA5C;
    font-family: poppins;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #000A3E;
    font-weight: 400;
    padding: 10px 32px;
    border-radius: 8px;
    text-decoration: none !important;
}

.banner-btn:hover {
    background-color: #000A3E !important;
    color: #FFBA5C !important;
}



/* 📱 Responsive Design */

/* Laptop / Large Tablet */
@media (max-width: 992px) {
  /* .banner-image {
    padding-top: 420px;
  } */
  .banner-image h1 {
    font-size: 30px;
    line-height: 38px;
  }
  .banner-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Tablet / Medium Devices */
@media (max-width: 768px) {
  .banner-image {
    height: 90vh;
    /* padding-bottom: 100px; */
  }
  .banner-image h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .banner-text {
    font-size: 15px;
    line-height: 22px;
  }
  .banner-btn {
    font-size: 16px;
    padding: 10px 28px;
  }
  .banner-image .content {
      width: 80%;
  }
  .section-padding {
    padding: 50px 0;
  }
}

/* Mobile / Small Devices */
@media (max-width: 576px) {
  .banner-image {
    height: 100vh;
    padding-top: 400px;
  }
  .banner-image h1 {
    font-size: 22px;
    line-height: 30px;
  }
  .banner-text {
    font-size: 14px;
  }
}


/* Mobile / Small Devices */
@media (max-width: 410px) {
  .banner-image {
    height: 100vh;
    padding-top: 300px;
  }
}
@media (min-width: 992px) {
  .banner-image {
    height: 100vh;
    /* padding-bottom: 320px; */
  }
}





.parts-section {
  display: flex;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease;
}

/* ==== PARTS ==== */
.part {
  flex: 1;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.62);
  overflow: hidden;
}

/* Last part border remove */
.part:last-child {
  border-right: none;
}

/* ==== TEXT CONTENT ==== */
.part-content {
  position: absolute;
  left: 40%;
  transform: translateX(-50%) translateY(0%);
  bottom: 1%;
  color: #fff;
  font-size: 18px;
  font-family: Poppins, sans-serif;
  transition: transform 0.4s ease, top 0.4s ease, font-size 0.4s ease;
}

.part:hover .part-content,
.part.hovered .part-content {
  font-size: 24px;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  bottom: auto;
}
.part.hovered {
    backdrop-filter: blur(10px);
}
.explore-card img {
  height: 355px;
  object-fit: cover;
}
/* ==== BACKGROUND IMAGES ==== */
.parts-section:has(.part-1.hovered) {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 82.81%),
    url('../images/part-1.png');
}

.parts-section:has(.part-2.hovered) {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 82.81%),
    url('../images/part-2.png');
}

.parts-section:has(.part-3.hovered) {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 82.81%),
    url('../images/part-3.png');
}

.parts-section:has(.part-4.hovered) {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 82.81%),
    url('../images/part-4.png');
}
.plan-text a {
    text-decoration: none;
    color: #424242;
    font-weight: 500;
}

.amenities-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 20px;
}
.amenities-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}
.amenities-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #0a0a35;
  font-weight: bold;
}