@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/516bc44c-c695-425d-660c-3c8241dd4700/public") center/cover no-repeat;
    }



    .top-nav-laptop {
    display: none;
    }
    .top-nav-mobile {
        width: 100%;
        height: calc(114 / 1024 * 100vh);
    }

    .top-nav-mobile .banner {
        width: 100%;
        position: absolute;
        height: auto;
        background-color: rgba(0, 0, 0, 0.29);
        z-index: 2000;
      }

    .navbar-text {
        margin-top: calc(31 / 1024 * 100vh);
        margin-left: calc(20 / 1440 * 100vw);
        gap: calc(25 / 1440 * 100vw);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

  .top-nav-mobile .nav-center {
    margin-left: calc(150 / 1440 * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10 / 1024 * 100vh);

  }

    .top-nav-mobile .nav-center .logo-container {
        width: calc(105 / 1440 * 100vw);
        max-height: 100%;
    }

    .top-nav-mobile .nav-center span:first-child {
        color: #FFF;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Inter;
        font-size: calc(50 / 1440 * 100vw);
        font-style: normal;
        font-weight: 300;
        line-height: 16.32px; /* 102% */
    }

    .top-nav-mobile .nav-center span:second-child {
        color: #FFF;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Inter;
        font-size: calc(50 / 1440 * 100vw);
        font-style: normal;
        font-weight: 300;
        line-height: 16.32px; /* 102% */
    }

    .top-nav-mobile .nav-center

  .nav-right {
    display: none;
  }

/*=================================project-title-container============================================*/
.project-title-container {

    margin-left: 0;
  }

  .project-title-laptop {
    display: none;

    }
  .project-title-phone {
    margin-left: calc(36 / 430 * 100vw);
    display: block;

    margin-top: calc(103 / 932 * 100vh);
    color: #FFF;
    font-family: Inter;
    font-size: 70px;
    font-style: normal;
    font-weight: 500;
    line-height: 90px; /* 128.571% */
    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: 85px;
      }

    
      .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 {
    display: none;
  }

/*=============================================================================================================
SECTION 2: LOCATION
===============================================================================================================*/

.register-interest-laptop {
    display: none;
  }

/*=============================================================================================================
  SECTION BENEFITS
===============================================================================================================*/ 
/* .benefits-section-laptop {
    display: none;
} */
.benefits-section-laptop {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    align-items: center;
    height: auto; /* Allow height to adjust based on content */
    padding: 40px 0; /* Optionally adjust padding for mobile */
  }


  
  .benefits-section-laptop .card {
    width: 90%;       /* Increase width to fill most of the mobile screen */
    max-width: 90%;   /* Remove the desktop constraint */
    margin: 10px auto; /* Center each card and add vertical spacing */
  }
  
  .benefits-section-laptop .card img {
    width: 100%;
    max-width: 100%; /* Ensure images fill the card width */
  }
  
  /* Optionally adjust font sizes for mobile readability */
  .benefits-section-laptop .benefit-title,
  .benefits-section-laptop .benefit-subtitle {
    font-size: 16px;
  }
  /*=============================================================================================================
  SECTION 7: PAYMENT PLAN
===============================================================================================================*/


  .payment-plan {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    height: auto; /* Adjust height dynamically */
    padding: 20px; /* Add padding around the section */
    background-color: #F8F8F8;
    margin-top: 50px;
    align-items: center;
    background-color: #3c6359;
  }

  .payment-plan .payment-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
  }

   /* Payment percentage */
   .payment-plan .payment-percentage {
    color: #FFF;
    font-family: Inter;
    font-size: 46px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }

  /* Payment title */
  .payment-plan .payment-title {
    color: #FFF;
    font-family: Inter;
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }

  /* Payment description */
  .payment-plan .payment-description {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
  }

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


/* Main container styles for phone/compact layout */
.price-table-phone {
  margin-top: 200px;
  margin-bottom: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Inner container to constrain width and center content */
.price-table-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Heading style */
.price-table-title {
  color: var(--brand, #668580);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px; /* 118.75% */
}

/* Table section wrapper */
.price-table-section {
  margin-top: 56px;
  margin-bottom: 20px;
}

/* Table styling */
.price-table-grid {
  width: 100%;
  border-collapse: collapse;
}

.price-table-grid thead th {
  text-align: left;
  padding-bottom: 29px;
  border-bottom: 1px solid #ccc;
  color: var(--text, #54595F);
  font-family: Montserrat;
  font-size: 13.577px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.price-table-grid tbody tr td {
  padding: 8px 0;
  /* border-bottom: 1px solid #eee; */
}

/* Divider line between tables */
.price-table-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

/* Highlight price column with a different color or font-weight */
.highlight-price {
  color: #00693e; /* Example green color */
  font-weight: 700;
}

/* Button styling */
.price-table-button-wrapper {
  text-align: center;
  margin-top: 20px;
}

.price-table-button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #00693e;
  background-color: #fff;
  color: #00693e;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.price-table-button:hover {
  background-color: #00693e;
  color: #fff;
}



/*=============================================================================================================
  SECTION 10: HOTEL ROOMS LAYOUT
===============================================================================================================*/
    .hotel-rooms-layout-laptop {
        display: none;
    }
    .hotel-rooms-layout-phone {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 0;
      width: 100vw;
      max-width: 100vw;
      height: auto;
      min-height: 100vh;
      position: relative;
    }  
  
    .hotel-rooms-layout-phone .unit-layout-section-header {
      width: 100%;
      height: 150px;
      margin-bottom: 20px;
      text-align: center;
        }
  
        .hotel-rooms-layout-phone .unit-layout-section-header h1 {
      max-width: 75%;
      color: #3c6359; 
      font-family: 'Montserrat', sans-serif;
      font-size: 32px;
      font-weight: 500;
      margin-top: 50px;
      margin-bottom: 10px;
      text-align: center;
    }
  
    .hotel-rooms-layout-phone .thumbnail-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      width: 100%; 
      height: auto; 
      margin: 0, auto;
      justify-items: center; 
      background-color: #f8f8f8;
      margin-top: 50px;
    }
    .hotel-rooms-layout-phone .thumbnail-wrapper {
      display: flex;
      flex-direction: column; 
      align-items: center; 
      text-align: center;
      gap: 20px; 
      padding: 10px;
      box-sizing: border-box; 
      max-width: 300px; 
      border: 0.98px solid #E1E1E1;
    }
  
    .hotel-rooms-layout-phone .thumbnail-info {
      display: flex;
      flex-direction: column; 
      gap: 5px; 
    }
  
    .hotel-rooms-layout-phone .unit-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0;}
  
      .hotel-rooms-layout-phone .unit-price {
      font-size: 16px;
      font-weight: 400;
      color: #777; 
  
    }

    .hotel-rooms-layout-phone .thumbnail-container .enlarge {
      margin-top: 50px;
      font-weight: bold;
    }
  
    .hotel-rooms-layout-phone .thumbnail {
      /* margin-top: 10px; */
      width: auto;
      height: 80%;
      cursor: pointer;
    }
  
    .hotel-rooms-layout-phone .large-image-container {
      display: none;
      position: fixed;
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%);
      justify-content: center;
      align-items: center;
      overflow: auto;
      background-color: #000;
      margin-bottom: 100px;
      z-index: 1000;
    }
  
  
    .hotel-rooms-layout-phone .large-image-container img {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      max-width: none;
      width: auto;
      height: auto;
    }

}