* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 /*=============================================================================================================
    WHATSAPP BUTTON (DEFAULT)
  ===============================================================================================================*/
  
  /* Hide the WhatsApp button by default (for larger screens) */
  .whatsapp-button {
    display: none; 

  }

  /* Show the WhatsApp button only on mobile devices */
  @media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16) {
    .whatsapp-button {
      display: block; /* Show on mobile */
      position: fixed; /* Sticks to the bottom-right corner */
      bottom: 20px; /* Distance from the bottom of the viewport */
      right: 20px; /* Distance from the right of the viewport */
      width: 50px; /* Button width */
      height: 50px; /* Button height */
      z-index: 1000; /* Ensure it stays above other elements */
      cursor: pointer; /* Change cursor to pointer for interactivity */
      transition: transform 0.3s ease; /* Add smooth hover effect */
      animation: pulse 1s infinite; /* Apply pulsating animation */
    }
  }
  
  .whatsapp-button img {
    width: 100%; /* Scale image to fit button dimensions */
    height: 100%; /* Scale image to fit button dimensions */
    object-fit: contain; /* Ensure the SVG scales properly */
  }
  
  /* Hover Effect */
  .whatsapp-button:hover {
    transform: scale(1.1); /* Slightly enlarge the button on hover */
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(157, 34, 53, 0.4); /* Initial shadow */
    }
    70% {
      transform: scale(1.1);
      box-shadow: 0 0 0 10px rgba(157, 34, 53, 0); /* Expanded shadow */
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(157, 34, 53, 0); /* Back to initial shadow */
    }
  }
  
/*=============================================================================================================
  SECTION 0: HERO
===============================================================================================================*/
.hero {
  position: relative;
  width: 100%;
  height: 80vh; 
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}

/* HERO BACKGROUND */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  background: url("https://imagedelivery.net/X8kiEL2OAGYkWn3DW3aOkg/2737ce37-1120-46ed-4c70-4501520d7100/public") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.banner-background {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

  

/* TOP NAVIGATION BAR */
.top-nav {
  position: absolute; /* sits on top of the hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: flex-start;
  background: rgba(0,0,0,0.2); /* subtle transparent bar */
  z-index: 2; /* ensure it’s above the overlay */
}
  


/* LOGO  */
.logo-container {
width: calc(105 / 1440 * 100vw);
max-height: 100%;
margin-left: calc(20 / 1440 * 100vw);
margin-bottom: calc(10 / 1440 * 100vw);
margin-top: calc(23 / 1024 * 100vh);
display: flex;
}

.logo-container img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* NAV SECTIONS */

.banner {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.29);
}
.logo-container {

  z-index: 1000;
}
.nav-center,
.nav-right {
  display: flex;
  align-items: center;
  gap: 30px; /* spacing between nav items */
  padding: 0 20px;
  z-index: 1000;
}

.nav-center {
margin-left: calc(40 / 1440 * 100vw);
color: white;
}

.nav-center span {
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
}

.nav-right {
  margin-left: auto; /* push items to the right */
  margin-right: calc(132 / 1440 * 100vw);
}

.nav-links a {
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

  
/*=================================project-title-container============================================*/
  
  
.project-title-container {
  /* margin-top: calc(473 / 1024 * 100vh); */
  flex-direction: row;
  margin-left: calc(117 / 1440 * 100vw);
  /* margin-bottom: 0; */
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  z-index: 1000;
}

.project-title-phone {
  display: none;
}

.project-title-laptop {
  margin-top: calc(400 / 1024 * 100vh);
}

.project-title-laptop h1 {
  color: #FFF;
  font-family: Montserrat;
  font-size: calc(73 / 1440 * 100vw);
  font-style: normal;
  font-weight: 400;
  line-height: calc(88 / 1024 * 100vh);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
  z-index: 1000;

}


/*============================Subtitle container: Invest in Rooms and Villas===============================*/
.sub-title-container {

  margin-bottom: calc(50 / 1024 * 100vh);
  display: flex;
  width: calc(500 / 1440 * 100vw);
  z-index: 2;
}

.text-elements {
  margin-left: 0;
  display: flex;
  align-items: flex-start; 
  justify-content: center;
  gap: calc(10 / 1024 * 100vh);
  position: relative;
}

.text-elements p:first-child {
  color: #FFF;
  font-family: Montserrat;
  font-size: calc(27 / 1440 * 100vw);
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 20px;
}

.text-elements p:last-child {
  color: #FFF;
  font-family: Montserrat;
  font-size: calc(57 / 1440 * 100vw);
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/*============================Additional info===============================*/

/* .additional-info,
.additional-info p {
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.additional-info {
  margin-top: 20px;
  margin-left: 117px;
  padding-left: 0; 
  width: 100%;
  text-align: center;
}


.additional-info p {
  margin: 0.5em 0; 
  white-space: nowrap;
  color: yellowgreen;
  font-family: Montserrat;
  font-size: 16px;
  font-style: bold;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 1.28px;
  color: #fff !important;
} */

/*============================Price Button===============================*/ 

.project-title-container-button .price-button {
  margin-bottom: 50px;
  margin-left: calc(50 / 1440 * 100vw);
  display: flex;
  flex-direction: column; /* Align <p> tags in a column */
  align-items: center;
  justify-content: center;

  border-radius: calc(44.67 / 1440 * 100vw);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(calc(12.485 / 1440 * 100vw));
  font-size: clamp(16px, 2vw, 22px);
  color: #ffffff;
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  text-transform: none;
  font-weight: normal;
  /* width: calc(250 / 1440 * 100vw); */
  width: 250px;
  height: 100px;
  line-height: 1.5;
  padding: 10px 20px;
  border: none;
  white-space: nowrap;
  /* cursor: pointer;  */
}

.project-title-container-button .price-button p {
  color: #FFF;
  font-family: Montserrat;
  font-size: 19.56px;
  font-style: italic;
  font-weight: 500;
  line-height: 120%; /* 23.472px */
}

.price-button p:first-child {
  color: #FFF;
  font-family: Montserrat;
  font-size: 19.56px;
  font-style: italic;
  font-weight: 500;
  line-height: 120%; /* 23.472px */
}

.price-button p:last-child {
  color: #FFF;
  font-family: Montserrat;
  font-size: 19.56px;
  font-style: italic;
  font-weight: 700;
  line-height: 120%; /* 23.472px */
}

/*=============================================================================================================
  SECTION 1: INFO-ROW
===============================================================================================================*/                          


.info-row {
  position: relative; /* Ensure it's placed below */
  background: white;
  width: 100%;
  height: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 3; /* Ensure it is above hero */
}

/* INFO ITEM */
.info-item {
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
}

/*=============================================================================================================
  SECTION REGISTER INTEREST
===============================================================================================================*/



.register-interest-laptop {
  display: flex;
  flex-direction: row;
  align-items: top;

  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.register-interest-laptop .content-mobile {
  display: none;

}

.register-interest-laptop .content {
  margin-left: calc(123 / 1440 * 100vw);
  margin-top: calc(50 / 1040 * 100vh);
  flex: 1;
  padding-right: 20px;
  width: calc(517 / 1440 * 100vw);
}

.register-interest-laptop .form-container {
  min-height: calc(471 / 1040 * 100vh);
  max-height: fit-content;
  width: calc(518 / 1440 * 100vw);
  max-width: 518px;
  flex: 1;
  padding: 20px;
  border-radius: 8px;
}


.register-interest-laptop .content ul {
  list-style-type: disc;
  padding-left: 20px;
}

.register-interest-laptop .content ul li {
  margin-bottom: 35px;
  color: var(--black, #3E4044);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.register-interest-laptop .form-container h2 {
  margin-bottom: 20px;
  color: #AC936E;
  font-family: Inter;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.form-container p {
  margin-bottom: 30px;
  color: var(--text, #54595F);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.register-interest-laptop .form-container input{
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.register-interest-laptop .form-container button {
  margin-top: 50px;
  width: 100%;
  background: #AC936E;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.form-container img {
  margin-right: 20px;
}

.register-interest-laptop .form-container button:hover {
  background: #7f6339;
}

.register-interest-laptop .form-container .email-submit-button span {
  color: white !important; /* Set the text color to white and use !important to override other styles */
}

/*=====================MOBILE STYLES=====================*/
@media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16) {
  .register-interest-laptop {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 20px;
  }

  /* .register-interest-laptop .content {
    display: none;
  } */

  .register-interest-laptop .content-mobile,
  .register-interest-laptop .form-container {
    display: block;
    margin-left: 0;
    width: calc(333 / 430 * 100vw);
    height: auto;
  }

  .register-interest-laptop .content-mobile ul {
    list-style-type: disc;
    padding-left: 20px;
  }

  .register-interest-laptop .content-mobile ul li { /* Use .content-mobile here */
    color: var(--black, #3E4044);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 10px; /* Add gap between li elements */
  }
}


/*=============================================================================================================
  SECTION  LOCATION
===============================================================================================================*/                          

.location-section {
  display: flex;
  align-items: center; /* Vertically align image and text */
  justify-content: center; /* Horizontally center the items */
  width: 100%;
  height: calc(211 / 1024 * 100vh);

}

.location-section .location-item {
  display: flex;
  align-items: center; 
  gap: 10px;
}

.location-section .location-item img {
  width: 33px;
  height: 33px;
}

.location-section .location-item .location-text {
  font-size: 16px;
  color: #54595F;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.location-map h1 {
  margin: 20px;
}

.location-map .button {
  padding: 10px 15px;
  font-size: 16px;
  background-color: #007AFF;
  color: white;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.location-map .button:hover {
  background-color: #005ecb;
}

#map {
  width: 80%;
  height: 500px;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}


 /*=============================================================================================================
  SECTION 3: DESCRIPTION
===============================================================================================================*/

.description {

  width: 100%;
  height: calc(224 / 1024 * 100vh);
  border: 1px solid transparent;
  padding: 0; /* Ensure no extra padding */

}
.description .subtitle,
.description .description-text {

  position: relative;
  margin-left: calc(211 / 1440 * 100vw);
}

.description .subtitle {

margin-top: calc(62 / 1024 * 100vh);
color: #000;
font-family: Montserrat;
font-size: 24px;
font-style: italic;
font-weight: 300;
line-height: 28.8px; /* 120% */
letter-spacing: 4px;
text-transform: uppercase;

}

.description .description-text {

line-height: calc(24 / 1024 * 100vh);
margin-top: calc(40 / 1024 * 100vh); /* Top margin */
width: calc(859 / 1440 * 100vw); /* Ensure shared width scaling */
color: #54595F;
font-family: Montserrat;
font-size: 15.4px;
font-style: normal;
font-weight: 400;

}

/*=============================================================================================================
  SECTION  GALLERY
===============================================================================================================*/ 

/* Wrapper to center slider both vertically & horizontally */
.slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Keep the same 4096x2304 ratio container */
.slider-container {
  margin-top: calc(150 / 1040 * 100vh);
  margin-bottom: calc(150 / 1040 * 100vh);
  width: 98vw;
  height: auto;
  position: relative;
  /* overflow: hidden; */
  background: #fff;
}


/* Each slide (with caption below the image) */
.slider-image {
  display: none;
  width: 100%;
  height: 100%;
  /* Stack image & caption vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Show first slide initially */
.slider-image:first-of-type {
  display: block;
}

/* Slide images fill container width */
.slider-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Visible text beneath the image */
.gallery-caption {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #333;
  z-index: 1000;
}

/* Navigation arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: calc(10 / 1440 * 100vw);
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999; 
}

.arrow:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow-left {
  left: 3rem; /* Shift to left of container; adjust as needed */
}

.arrow-right {
  right: calc(100 / 1440 * 100vw); /* Shift to right of container; adjust as needed */
}

/*=============================================================================================================
  SECTION  INVESTMENT SECTION
===============================================================================================================*/ 

.investment-section-laptop {
  max-width: 1200px; 
  margin: 0 auto; /* Center the section */
  padding: 20px;
}

.investment-section-laptop h2 {
  text-align: center;
}

/* Header */
.audio-header {
  text-align: center; 
  margin-bottom: 20px;
}

.audio-header h3 {
  color: #AC936E;
  margin-bottom: 25px;
}

/* Container for the three cards */
.card-container {
  display: flex;
  flex-wrap: wrap;        /* Allows wrapping on small screens */
  gap: 20px;              /* Space between cards */
  align-items: stretch;   /* Ensures all cards stretch to the tallest card */
  justify-content: center;
}

/* Each card */
.card {
  flex: 1 1 calc(33.333% - 20px); /* 3 columns in a row */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #AC936E;
  display: flex;
  flex-direction: column; /* Stack content vertically within card */
  padding: 15px;
}

/* Card heading */
.card h3 {
  margin-top: 0;
  color: white;
}

/* Bullet list grows to fill space */
.card ul {
  flex-grow: 1;  /* Takes up remaining vertical space */
  padding-left: 20px;
  margin: 0;
  color: white;
}

/* Audio wrapper anchors the player to the bottom */
.audio-wrapper {
  margin-top: auto;        /* Pushes audio to the bottom of its card */
  display: flex;
  justify-content: center; /* Optional: center the audio player horizontally */
}

/*=============================================================================================================
  SECTION 5: LOCATION2
===============================================================================================================*/ 

/* General styling for the section */
.location2 {
  width: 100%;
  max-width: 400px; /* Adjust width for readability */
  margin: 50px auto; /* Center the section */
  padding: 20px;
  background-color: #fff; /* White background */
  border-radius: 8px; /* Optional: rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: left;
}

/* Styling for the list */
.location-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.location-list li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #e0e0e0; /* Light separator between items */
}

/* Remove the last border */
.location-list li:last-child {
  border-bottom: none;
}

/* Styling for time */
.location-list span {
  font-weight: bold;
  color: #444;
  width: 80px; /* Fixed width to align text consistently */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Styling for location names */
.location-list .location-name {
  font-weight: bold;
  color: #AC936E; /* Dark pink color */
  flex-grow: 1; /* Allow text to take available space */
}

/*=============================================================================================================
  SECTION 6: GOLF COURSE
===============================================================================================================*/

.golf-image-phone {
  display: none;
}

.golf-content-phone .golf-image-phone {
  display: none;
}

.golf-content-phone .golf-image-phone img {
  display: none;
}
.golf-title-phone {
  display: none;
}

.golf-content-laptop {
  width: 100vw;
  padding: 5px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.golf-image-laptop {
  width: 100%;
  text-align: center;
  object-fit: cover;
  margin-bottom: 110px;
}

.golf-image-laptop img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}


.golf-title-laptop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 0 50px;
  margin-left: 0px;

  }

.golf-title-laptop h2 {
  margin-left: calc(110 / 1440 * 100vw);
  color: #000;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 46px; /* 143.75% */
  white-space: nowrap;
}

.golf-title-laptop p {
  margin-left: calc(260 / 1440 * 100vw);
  width: calc(581 / 1440 * 100vw);
  color: #000;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 16.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 31px; /* 187.879% */
  white-space: wrap;
}








/*=============================================================================================================
  SECTION 8: HOTEL INFORMATION
===============================================================================================================*/
.hotel-image-phone {
  display: none;
}

.hotel-image-phone img {
  display: none;
}

.hotel-content-phone {
  display: none;
}

.hotel-title-phone {
  display: none;
}

.hotel-image-laptop {
  width: 100%;
  text-align: center;
  margin-top: 87px;
  margin-bottom: 15px;
}

.hotel-image-laptop img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}



.hotel-content-laptop {
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  width: 100vw;
}
.hotel-content-laptop .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 50%;

}
.hotel-title-laptop {
  margin-top: calc(53 / 1024 * 100vh);
  margin-left: calc(188 / 1440 * 100vw);
  width: calc(324 / 1440 * 100vw);

  white-space: nowrap;
}

.hotel-title-laptop .h2 {
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 46px;
}
.hotel-content-laptop .left .hotel-content-info {
  margin-top: 35px;
  margin-left: calc(188 / 1440 * 100vw);
  gap: 10px;

}
.left .hotel-content-info ul {
  color: #000;
  font-family: Montserrat;
  font-size: 16.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 133.333% */
}


.hotel-content-laptop .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: calc(75 / 1024 * 100vh);
  width: 50%;
}

.hotel-investing-text p {
  margin-right: 50px;
  color: #000;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 16.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 31px; /* 187.879% */
}


.hotel-content-laptop .icons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  color: gray;
}
.hotel-content-laptop .right .hotel-success-text {
  color: #000;
  font-family: Montserrat;
  font-size: 32px;
  font-style: italic;
  font-weight: 275;
  line-height: 46px; /* 143.75% */
  letter-spacing: 0.64px;
}


/*=============================================================================================================
  SECTION 9: PRICING
===============================================================================================================*/
.price-table {

  margin-top: 300px;
  margin-bottom: 60px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-table-container {

  margin-bottom: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}


.price-table-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height:80%;
}

.price-table-title {
  font-size: 44px;
  font-weight: bold;
  color: #3E4044;
  margin-bottom: 3vh;
}

.price-table {
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding: 20px;
  border-radius: 7.321px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: auto;
  max-width: 90vw;
  height: auto;
}





.price-table-grid {
  .price-table-grid {
    width: 100%;
    border-collapse: collapse;
  }
}

.price-table-grid th, .price-table-grid td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.price-table-grid th {
  color: #000;
  font-family: Montserrat;
  font-size: 20.477px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.price-table-grid td {
  color: #000;
  font-family: Montserrat;
  font-size: 19.015px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/* Highlight Price */
.highlight-price {
  color: #AC936E !important;
  font-weight: 600;
}
.price-table-grid td.highlight-price {
  text-align: right;
}

/*=============================================================================================================
  SECTION  PAYMENT PLAN
===============================================================================================================*/

.payment-plan-phone {
  display: none;
}

.payment-plan {
  max-width: 960px; /* Limit the width for larger screens */
  margin: 2rem auto; /* Center the section and add some spacing */
  padding: 2rem;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border-radius: 8px; /* Rounded corners */
}

.payment-plan h2 {

  text-align: center;

}

.payment-container {
  padding: 10px;
  background-color: #AC936E;
}

.payment-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;

}

.payment-item {
  border: 1px solid #ddd; /* Light border */
  padding: 1.5rem;
  text-align: center;
  border-radius: 8px; /* Rounded corners */
  background-color: #f9f9f9; /* Very light grey background */
}
.payment-item:hover{
  transform: scale(1.03);
}

.payment-item h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #AC936E;
}

.payment-item p {
  font-size: 1rem; /*Consistent font size*/
}
.payment-item p:first-of-type{
  margin-bottom: 0.5rem
}

.payment-info {
  margin-top: 20px;
  display: flex;
  justify-content: space-between; /* Adjust spacing between the two divs */
  align-items: flex-start; /* Align to the top */
  gap: 20px; /* Optional: Adds some spacing between the elements */
}

.payment-account,
.completion-date {
  display: flex;
  flex-direction: column; /* Aligns inner elements in a column */
}




/*=============================================================================================================
  SECTION FLOOR PLANS
===============================================================================================================*/
.section-layouts {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 100%;
  margin: 0 auto;

}


.price-table-title {
  margin-top: calc(100 / 1040 * 100vh);
  color: #AC936E; /* Gold/tan color */
  text-align: center;
  font-size: 42px;
  margin-bottom: 30px;
  font-weight: normal;
}


/* Tab Buttons */
.header {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  gap: 10px;
}


.bedroom-button {
  padding: 10px 25px;
  background: transparent;
  border: 1px solid #B0AEAB;
  color: #B0AEAB;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.bedroom-button:hover, .bedroom-button.active {
  background-color: white;
  color: #AC936E;
  border: 1px solid #AC936E;
}


/* Main Content Layout */
.main-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}



#type-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#type-list li {
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
  color: #b3a369;
  cursor: pointer;
  transition: color 0.3s ease;
}

#type-list li:hover, #type-list li.active {
  color: #8a7a45;
  font-weight: bold;
}

/* Image Display Area */
.image-display {
  flex: 1;
  position: relative;
  background-color: #fbfbf6; /* Light cream background */
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}

#layout-image {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* Zoom Controls */
.zoom-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
}

#zoom-in, #zoom-out {
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

#zoom-in {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

#zoom-out {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top: none;
}

/* North Indicator (N with arrow) */
.zoom-controls::after {
  content: "N";
  position: absolute;
  top: 75px;
  right: 15px;
  font-size: 14px;
  color: #888;
}


/*=============================================================================================================
  SECTION 11: CLIFF VILLAS INFO
===============================================================================================================*/


.cliff-villas-info {
  width: 100%;
}

.cliff-villas-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  width: 100%;
  background-color: #F8F8F8;
}

.cliff-villas-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.cliff-villas-container .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 50%;
}

.cliff-villas-container .left h2 {
  margin-top: 100px;
  margin-left: calc(197 / 1440 * 100vw);
  color: #000;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 46px; /* 143.75% */

}


.cliff-villas-container .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: calc(75 / 1024 * 100vh);
  width: 50%;
  white-space: wrap;
}

.cliff-villas-container .right p {
  margin-right: 50px;
  color: #000;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px rgba(0, 0, 0, 0.00);
  font-family: Montserrat;
  font-size: 16.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 31px; /* 187.879% */
}


.cliff-villas-container .icons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  color: gray;
}

/*=============================================================================================================
  SECTION 12: CLIFF VILLAS LAYOUT - see HOTEL ROOMS LAYOUT
===============================================================================================================*/
.hotel-rooms-layout-laptop {
  display: none;
}
/*=============================================================================================================
  SECTION 13: DEVELOPER-SECTION
===============================================================================================================*/


.developer-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  max-width: 1000px;
  margin: auto;
  background-color: white;
}
.developer-section .left-section {
  width: 50%;
}
/* .developer-section .left-section h2 {
  color: #161629;
  font-size: 22px;
  margin-top: 60px;
  margin-bottom: 10px;
} */
.developer-section .left-section p {
  color: #606060;
  font-size: 14px;
  line-height: 1.5;
}
.developer-section .right-section {
  width: 40%;
  text-align: right;
}
.developer-section .stat {
  margin-bottom: 20px;
}
.developer-section .stat span {
  font-size: 28px;
  font-weight: bold;
  color: #3c6359;
}
.developer-section .stat p {
  font-size: 14px;
  color: #606060;
  margin: 5px 0;
}
.developer-section .stock {
  font-size: 22px;
  font-weight: bold;
  color: #3c6359;
}
.developer-section .exchange {
  font-size: 14px;
  color: #606060;
}

/*=============================================================================================================
  SECTION 13: GOOFLE MAP?
===============================================================================================================*/


/*=============================================================================================================
  SECTION 14: CONTACT FORM
===============================================================================================================*/

.get-in-touch {
  display: flex; /* Enables Flexbox layout */
  flex-direction: column; /* Stacks items vertically */
  align-items: center; /* Centers items horizontally */
  height: 800px;
  min-height: 100vh; /* Ensures the section takes full viewport height */
  box-sizing: border-box; /* Includes padding in height calculations */
}

.get-in-touch-container {
  display: flex;
  flex-direction: column;
  margin-top: 200px;
  width: 100%;
}

.get-in-touch .get-in-touch-container h2 {
  margin-top: 0px;
  font-size: 16px;
  font-family: "Montserrat";
  letter-spacing: 2.8;
  text-align: center;
  color: #54595F
}

/* .get-in-touch h1 {
  margin-top: calc(50 / 1024 * 100vh);
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  color: #54595F;
} */

.get-in-touch p {
  margin-top: calc(100 / 1024 * 100vh);
  font-size: 1.0rem;
  line-height: 1.5;
  margin-top: calc(30 / 1024 * 100vh);

  text-align: center;
  color: #666;
}

.get-in-touch .get-in-touch-container .whatsapp-get-in-touch-button {
  background-color: #b38b59;
  color: white;
  font-size: 1.1rem;
  padding: 10px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-self: center; /* Centers the button in Flexbox layout */
  margin-top: calc(25 / 1024 * 100vh);
  margin-bottom: 10px;
  width: 200px
}

/* .get-in-touch-button:hover {
  background-color: #569145;
} */

.whatsapp-button-icon {
  width: 30px;
  height: 40px;
  object-fit: contain;
}

  /* Calendly booking button */
  .calendly-booking {
    margin-top: 20px;
    text-align: center;

  }

  .calendly-link {
    text-decoration: none;
  }

  .get-in-touch .calendly-link .calendly-get-in-touch-button {
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #b38b59;
    color: white;
    font-size: 1.1rem;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 200px;
  }

  .google-meet-button-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  .calendly-get-in-touch-button:hover {
    background-color: #569145;
  }


.phone-address-dubai {
  margin-top: 20px;
  display: flex; 
  flex-direction: column; /* Stacks children vertically */
  align-items: center;
  justify-content: center;
}

.phone-address-dubai h3 {
  margin-top: 30px;
  font-size: 18px;
  font-family: "Montserrat";
  color: #54595F;
  text-align: center;
  align-items: center;
  width: 300px;
}


.phone-address-dubai .phone-info {
  display: flex; /* Aligns phone number and image horizontally */
  align-items: center;
  gap: 2px; /* Space between the image and phone number */
}

.phone-number {
  font-size: 16px;
  font-weight: bold;
}

.email {
  display: flex; /* Aligns phone number and image horizontally */
  flex-direction: column;; /* Vertically aligns content */
  gap: 2px; /* Space between the image and phone number */
}

.email-address {
  font-size: 16px;
  font-weight: bold;
}

/*================================FOOTER==================================================*/

.footer {
  margin-top: calc(500 / 1024 * 100vh);
  display: flex; /* Enables Flexbox layout */
  justify-content: center; /* Centers text horizontally */
  align-items: center; /* Centers content vertically if there's more height */
  padding: 20px; /* Adds spacing inside the footer */
  color: #54595F;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  text-align: center;
}

.footer-text {
  margin: 0; /* Removes default margin around the text */
}