* {
    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: 100vh; 
    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/ee9bebe0-6184-4522-be2a-ac097612cd00/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;
  }
  
     /* NAV BAR */ 
  
     .top-nav {
      position: relative;
      width: 100%;
      background-color: rgba(0,0,0,0.3);
      z-index: 1000;
    }
    
    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap; /* prevent overflow by wrapping */
      padding: 10px 20px;
      gap: 10px;
    }
    
    /* Logo Container (left) */
    .logo-container {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    
    /* Center Section */
    .nav-center {
      display: flex;
      gap: 15px;
      color: #fff;
      flex-shrink: 0;
    }
    
    /* Right Section */
    .nav-right {
      display: flex;
      gap: 15px;
      flex-shrink: 0;
    }
    
    .nav-links a {
      font-size: 14px;
      color: #fff;
      text-decoration: none;
    }
    
    /* Language Toggle */
    .language-toggle {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    
    .lang-btn {
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 4px;
    }
    
    /* Explicitly set .active for the active language button */
    .lang-btn.active {
      background-color: rgba(255,255,255,0.3);
      color: #fff;
    }
    
    .lang-btn:hover {
      background-color: rgba(255,255,255,0.2);
      color: #fff;
    }
    
    /* Responsive adjustments to avoid intersections on phones */
    @media (max-width: 1000px) {
      .nav-right {
        display: none;
      }
    }
    
    @media (max-width: 768px) {
      .nav-container {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 15px; /* add padding to prevent intersection */
      }
    
      .nav-center {
        flex-direction: column;
        gap: 5px;
      }
    
      .language-toggle {
        align-self: flex-end;
        margin-top: 5px;
      }
      
      /* Ensure next section never intersects */
      .top-nav {
        margin-bottom: 20px; /* provide spacing below nav */
      }
    }


    
  /*=================================project-title-container============================================*/
    
    
  .project-title-container {
    position: relative;
    width: 100vh;
    height: 100vh;
    margin:0 auto;
    overflow: visible;
    z-index: 1000;
  }
  
  .project-title-phone {
    display: none;
  }
  
  .project-title-laptop {
    margin-top: calc(50 / 1024 * 100vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  
  .project-title-laptop h1 {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: calc(66 / 1040 * 100vw);
    font-style: normal;
    font-weight: 500;
    line-height: 85px; /* 98.837% */
    letter-spacing: 9px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .project-title-laptop h2 {
    display: flex;
    width: 279px;
    height: 43px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px; /* 27.778% */
    letter-spacing: 9px;
    text-transform: uppercase;
    white-space: nowrap;
  }


  
  
  /*==========================================Subtitle and price button container======================================*/
  .project-button-subtitle-container-phone {
    display: none;
  }
  
  .project-button-subtitle-container-laptop {
  
    margin-top: calc(25 / 1024 * 100vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
  }
  



  
  
  /*============================Price Button===============================*/ 
  
  .project-button-subtitle-container-laptop .price-button {
    margin-top: calc(85 / 1024 * 100vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(20 / 1040 * 100vh);
    border-radius: 5px;
    border: 0.975px solid #FFF;
    background: #FFF;
    padding: calc(29 / 1440 * 100vw) calc(20 / 1440 * 100vw);
    width: 275px;
    height: 85px;
  }
  

  
  .price-button p:first-child {
    color: var(--text, #54595F);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 15.602px; /* 97.515% */
  }
  
  .price-button p:last-child {
    color: var(--text, #54595F);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Inter;
    font-size: 16px;
    font-style: italic;
    font-weight: 300;

  }

   /*============================Text Elements===============================*/
  
   .text-elements {
    margin-top: calc(77 / 1040 * 100vh);
    margin-bottom: calc(50 / 1040 * 100vh);
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    gap: calc(10 / 1024 * 100vh);
    position: relative;
  }

   .text-elements p {
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: bold;
    line-height: calc(40 / 1440 * 100vw);
    letter-spacing: 1.44px;
    color: white;
  }

  @media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16) {

    /*=============================================================================================================
      SECTION 1: HERO
    ===============================================================================================================*/
        .hero {
            min-height: 100vh;
            position: relative;
            /* overflow: hidden; */
        }
    
        .hero-background {
            background: url("https://imagedelivery.net/X8kiEL2OAGYkWn3DW3aOkg/5d052ebe-c5fd-4e0d-338e-870d7407ca00/public") center/cover no-repeat;
        }
    
    
    
    /*=================================project-title-container============================================*/
    .project-title-container {
    
        margin-left: 0;
      }
    
      .project-title-laptop {
        display: none;
    
        }
        .project-title-laptop h1{
          display: none;
      
          }

      .project-title-phone {
        margin-left: calc(36 / 430 * 100vw);
        display: block;
        margin-top: calc(50 / 932 * 100vh);
  
      }
  
      .project-title-phone h1 {
        color: #FFF;
        font-family: Inter;
        font-size: calc(50 / 493 * 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: 60.694px; /* 121.388% */
        text-transform: uppercase;
        display: block;
    }
  
      .project-title-phone h2 {
        margin-top: calc(33 / 1000 * 100vh);
        color: #FFF;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: Inter;
        font-size: calc(36 / 493 * 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: 10px; /* 27.778% */
        letter-spacing: 9px;
        text-transform: uppercase;
      }
    
      /*============================Price Button===============================*/ 
      .project-button-subtitle-container-laptop {
        display: none;
        }
    
        .project-button-subtitle-container-phone {
            margin-top: calc(85 / 932 * 100vh);
            display: flex;
            flex-direction: column;
    
        }
    
        .project-button-subtitle-container-phone .price-button {
            margin-left: calc(36 / 430 * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 19.503px 24.379px;
            border-radius: 5px;
            border: 0.975px solid #FFF;
            background: #FFF;
            width: 200px;
            height: auto;
          }
    
        
          .project-button-subtitle-container-phone .text-elements {
            margin-left: calc(36 / 430 * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            width: calc(320 / 430 * 100vw);
            height: auto;
          }
    
          .project-button-subtitle-container-phone .text-elements p {
            color: #FFF;
            font-family: Inter;
            font-size: 25px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 1.28px;
          }
  
        }
  

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


.info-row {
  position: relative;
  width: 100%;
  height: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 / 1440 * 100vw);
  z-index: 3;
}

.info-item {
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 5px;
}

.info-item img {
  margin-right: 5px;
}

.info-item img {
  margin-right: 5px;
  flex-shrink: 0; /* Prevent image from shrinking */
}

.info-item span,
.info-item p {
  padding: 0 5px; /* Add padding */
}

/* =====================
   PHONE VERSION STYLES
   ===================== */
   @media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16) {
    .info-row {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 16px;
    }
  
    .info-item {
      color: var(--text, #54595F);
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      width: 100%;
      justify-content: left;
      text-align: left;
      padding: 20px;
    }
    .info-item img {
      margin-right: 5px;
      flex-shrink: 0; /* Prevent image from shrinking */
      }
      .info-item span,
      .info-item p {
        padding: 0 5px; /* Add padding */
  }
   }


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



.register-interest {
  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 .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 .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 .content ul {
  list-style-type: disc;
  padding-left: 20px;
}

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

.register-interest .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 .form-container input{
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.register-interest .form-container button {
  margin-top: 50px;
  width: 100%;
  background: #AC936E;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.register-interest .form-container button:hover {
  background: #a5680c;
}

.register-interest .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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 20px;
  }


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

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

  .register-interest .content 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  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  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  INVESTMENT SECTION
===============================================================================================================*/ 

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

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

   /* Container for both cities */
   .cities {
    display: flex;
    gap: 20px; /* Space between columns */
    margin: 20px;
    justify-content: center;
    align-items: flex-start;
  }
  
  /* Each individual city column */
  .city {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
  }
  
  /* Styling the heading with a bottom line */
  .city h2 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
  }
  
  /* Styling for the list items */
  .city ul {
    list-style: disc;
    padding-left: 20px;
  }

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

.audio-header h3 {
  color: #3E4044;
  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: #9D2235;
  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: #9D2235;
  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: #9D2235;
  flex-grow: 1; /* Allow text to take available space */
}

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

.video-mobile {
  display: none;
}

.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); */
  border-radius: 8px;
}

/* .payment-plan h2 {
  margin-top: calc(250 / 1040 * 100vh);
  text-align: center;
  margin-bottom: 2rem;
  color: #FFF;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.965px;
  color: #9D2235;
} */

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

.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;
  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: #a8894f;
  color: #9D2235;
}

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


/*=============================================================================================================
  SECTION 9: PRICING
===============================================================================================================*/
.price-table-phone {
  display: none;
}



.price-table {

    margin-top: calc(100 / 1040 * 100vh);
    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: 40%;
  }
  
  .price-table-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* width: 40%; */
  }
  
  .price-table {
    /* margin-left: calc(100 / 1440 * 100vw);
    margin-right:  calc(100 / 1440 * 100vw); */
    flex: 1;
    background-color: white;
    padding: 20px;
    border-radius: 7.321px;
    text-align: center;
    width: auto;
    /* height: calc(486 / 1024 * 100vh); */
  }
  
  .price-table-title {
    margin-bottom: calc(50 / 1040 * 100vh);
    color: var(--black, #3E4044);
    text-align: center;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  
  .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: #9D2235 !important;
    font-weight: 600;
  }
  .price-table-grid td.highlight-price {
    text-align: right;
  }

  @media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16) {

    .price-table {
      display: none;
    }
  
    .price-table-phone {
  
      margin-top: 0;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

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

  }

  .price-table-container {

    margin-bottom: 0;
  }


  }


/*=============================================================================================================
  SECTION ENQUIRE AVAILABILITY POP-UP FORM
===============================================================================================================*/

/* Main trigger button */
.open-form-btn {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 25px;
  border-radius: 5px;
  border: 2px solid #9D2235;
  background: #FFF;
  cursor: pointer;
  color: #9D2235;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  width: 400px;
  margin: 40px auto;
  box-shadow: 0 4px 8px rgba(157,34,53,0.15);
  transition: background 0.3s ease, color 0.3s ease;
  font-family: Arial, sans-serif;
}

.open-form-btn:hover {
  background: #9D2235;
  color: #FFF;
}

.open-form-btn .button-note {
  font-size: 13px;
  color: #555;
  font-weight: normal;
  margin-top: 6px;
}

/* Popup overlay */
.popup-form-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}

/* Popup container */
.popup-form-container {
  background: #ffffff;
  padding: 30px;
  border-radius: 6px;
  width: 420px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  position: relative;
  font-family: Arial, sans-serif;
}

.popup-form-container h2 {
  font-size: 22px;
  color: #9D2235;
  margin-bottom: 20px;
}

.close-form-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.close-form-btn:hover {
  color: #555;
}

/* Form fields styling */
.request-form input,
.request-form select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.request-form input:focus,
.request-form select:focus {
  border-color: #9D2235;
  box-shadow: 0 0 0 2px rgba(157,34,53,0.2);
  outline: none;
}

/* Buttons container styling */
.button-group {
  display: flex;
  flex-direction: column;   /* Stack buttons vertically */
  gap: 10px;                /* Space between each button */
  margin-top: 10px;
}

/* Style each button */
/* Each button fills the width of .button-group */
.email-submit-button,
.whatsapp-button-enquire {
  display: flex;             /* Place icon + text in a row inside the button */
  align-items: center;       /* Center vertically */
  justify-content: flex-start;
  width: 100%;               /* Fill parent width */
  padding: 10px;
  box-sizing: border-box;    /* Ensure padding doesn't overflow */
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #9D2235;
  cursor: pointer;
}

/* Icon styling */
.email-submit-button img,
.whatsapp-button-enquire img {
  width: 24px;              /* Adjust icon size as needed */
  height: 24px;
  margin-right: 8px;        /* Space between icon and text */
  border-radius: 3px;       /* Slight rounding if desired */
  transition: transform 0.3s ease;
}

/* Button text styling */
.email-submit-button span,
.whatsapp-button-enquire span {
  font-size: 16px;
  color: white;
}

/* Hover effect (optional) */
.email-submit-button:hover img,
.whatsapp-button:hover img {
  transform: scale(1.05);
}
.small-print {
  font-size: 10px;
  color: #777;
  text-align: center;
  margin-top: 12px;
}

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

}



/* 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: #9D2235;
  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: #B0AEAB;
  cursor: pointer;
  transition: color 0.3s ease;
}

#type-list li:hover, #type-list li.active {
  color: #9D2235;
  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 STANDALONE FORM LAPTOP
===============================================================================================================*/
/* Common styles for both devices */
.standalone-form-overlay {
  position: relative;
  width: 100vw;
  z-index: 1000;
}

.standalone-form-container {
  position: relative;
  z-index: 2;
  background: #ffffff;
  padding: 30px;
  font-family: Arial, sans-serif;
}

.standalone-form-container h2 {
  color: var(--black, #3E4044);
  font-family: Inter;
  font-size: 23.1px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Laptop styles (apply when screen width is 1024px or larger) */
@media screen and (min-width: 800px) {
  .standalone-form-overlay {
    height: calc(868 / 1040 * 100vh);
    display: flex;
    padding: calc(52 / 1440 * 100vh) 0;
  }
  
  .standalone-form-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://imagedelivery.net/X8kiEL2OAGYkWn3DW3aOkg/f6fa102a-48a7-4c9a-fec5-64dcde1d6100/public")
                center/cover no-repeat;
    display: block;
  }
  
  .standalone-form-container {
    margin-left: calc(168 / 1440 * 100vw);
    width: calc(700 / 1440 * 100vw);
    max-width: 650px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}




.standalone-form-container h2 {

  color: var(--black, #9D2235);
  font-family: Inter;
  font-size: 23.1px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 124.675% */
  letter-spacing: 4px;
  text-transform: uppercase;
}

.form-intro {
  margin-bottom: calc(53 / 1040 * 100vh);
  color: var(--text, #54595F);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}



/* Standalone close button */
.standalone-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.standalone-close-btn:hover {
  color: #555;
}

/* Standalone form fields styling */
.standalone-request-form input,
.standalone-request-form select {
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 10px;
  overflow: hidden;
  color: #54595F;
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: 1.096px solid rgba(84, 89, 95, 0.50);
}


/* Buttons container styling */
.button-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin-top: calc(62 / 1040 * 100vh);
  /* margin: 0 auto; */
}

/* Style each button */
.whatsapp-button-enquire {
  display: flex;
  height: calc(100 / 1040 * 100vh);
  width: 256px;
  padding: 24.617px 30.771px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border: 2px solid #9D2235;
  background: #9D2235;
}

.email-submit-button {
  display: flex;
  width: 256px;
  height: calc(100 / 1040 * 100vh);
  padding: 24.617px 30.771px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color:   #9D2235;
  background-color: white;
}

.email-submit-button span {
  color:   #9D2235 !important;
  z-index: 1000;
}

/* Icon styling */
.email-submit-button img,
.whatsapp-button-enquire img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 3px;
  transition: transform 0.3s ease;
}

/* Button text styling */
.email-submit-button span,
.whatsapp-button-enquire span {
  font-size: 16px;
  color: white;
}

/* Hover effect */
.email-submit-button:hover img,
.whatsapp-button-enquire:hover img {
  transform: scale(1.05);
}

/* Small print styling */
.small-print {
  margin-top: 12px;
  font-size: 10px;
  color: #777;
  text-align: center;
}

/* Phone styles (apply when screen width is less than 1024px) */
@media screen and (max-width: 800) {
  .standalone-form-overlay {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    max-height: none;
  }
  
  .standalone-form-background {
    display: none;
  }
  
  .standalone-form-container {
    width: 90vw;
    margin: 0 auto;
    max-height: none;
  }
}

/*=============================================================================================================
  SECTION DEVELOPER
===============================================================================================================*/


.developer-section {

  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /* background-color: #f8f8f8; */
}
.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-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  background: url("https://imagedelivery.net/X8kiEL2OAGYkWn3DW3aOkg/7dba3367-f425-425d-76c6-b1540cba8900/public") center/cover no-repeat;
  /* background-color: rgba(0, 0, 0, 0.2); */
  z-index: 10;
}

.developer-section .left-section {
  margin-top: calc(100 / 1040 * 100vh);
  width: 50%;
}

.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: #9D2235;
}
.developer-section .stat p {
  font-size: 14px;
  color: #606060;
  margin: 5px 0;
}
.developer-section .stock {
  font-size: 22px;
  font-weight: bold;
  color: #9D2235;
}
.developer-section .exchange {
  font-size: 14px;
  color: #606060;
}

@media screen and (max-width: 768px), screen and (max-aspect-ratio: 9/16){

  .developer-section {
    margin-top: 0;
    padding: 0;
    width: 80vw;
  }
  .developer-section .left-section {
    margin-top: calc(100 / 1040 * 100vh);
    width: 100%;
  }
  .developer-section .right-section {
    width: 100% !important;
    text-align: right;
  }
  .developer-section p {
  width: 100%;
  color: var(--text, #54595F);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.122px;
  }

  .developer-section p:first-child {
    margin-bottom: 5px;
  }
  
  .developer-section .exchange {
    margin-bottom: 50px;
  }
}
/* -------------------------------------
   Base Section Styles
------------------------------------- */
body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f5f5;
}

.projects-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.projects-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #3E4044;
}

.projects-section h2 span {
  color: #9D2235; /* accent color if desired */
}

.projects-section p {
  color: red;
  margin-bottom: 20px;
}

/* -------------------------------------
   Container & Card Layout
------------------------------------- */
.projects-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap;  /* row layout by default (laptop) */
}

.project-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 220px;
  /* Adjust card width as needed */
  overflow: hidden;
  text-align: center;
}

.project-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.card-details {
  padding: 10px;
}

.card-details h3 {
  font-size: 1.2rem;
  margin: 10px 0;
  color: #3E4044;
}

.card-details p {
  margin: 5px 0;
  color: #333;
}

/* -------------------------------------
   Responsive (Mobile) Layout
   2 columns x 2 rows for smaller screens
------------------------------------- */
@media (max-width: 768px) {
  .projects-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 20px;
    justify-items: center;         /* center the cards */
  }

  .project-card {
    width: 90%;  /* Let cards fill most of the mobile screen width */
  }
}


/*=============================================================================================================
  SECTION GET IN TOUCH
===============================================================================================================*/

.get-in-touch {
  display: flex; /* Enables Flexbox layout */
  flex-direction: column; /* Stacks items vertically */
  align-items: center; /* Centers items horizontally */
  /* height: calc(800 / 1024 * 100vh); */
  box-sizing: border-box; /* Includes padding in height calculations */
}

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


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

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


  /* 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: #9D2235;
    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(100 / 1024 * 100vh);
  margin-bottom: 0 !important; /* Overrides any other margin */
  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-family: "Montserrat", sans-serif;
  font-size: 10px !important;
  width: 100%;
  text-align: center;
}

.footer-text {
  margin: 0; /* Removes default margin around the text */
  margin-bottom: 0 !important; /* Overrides any other margin */

}