/* Mobile version of CSS */


@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/d4dfb26a-b1e0-480b-e58f-5d6266c3eb00/public") center/cover no-repeat;
  }


  .top-nav {
    display: flex;
    height: calc(114 / 1024 * 100vh);
    justify-content: flex-start;
    text-align: left;
  }

  .nav-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: calc(57 / 1024 * 100vh);
    margin-bottom: calc(25 / 1024 * 100vh);
    margin-left: auto;
    gap: 5px;

  }

  .nav-right {
    display: none;
  }

/*=================================project-title-container============================================*/


  .project-title-container {

    display: flex;
    flex-direction: column;  /* Arrange child elements vertically */
    align-items: flex-start;
    margin-top: calc(50 / 1024 * 100vh);
    margin-left: 21px;
    position: relative;
    width: 100%;
    /* min-height: 100vh; */
  }
  .project-title-laptop {
    display: none;
  }
  .project-title-phone {
    display: block;
  }
  

  .project-title-phone h1 {
    margin-top: calc(150 / 1024 * 100vh);
    color: #FFF;
    font-family: Montserrat;
    font-size: calc(75 / 1024 * 100vh) !important;
    font-weight: 400;
    line-height: calc(60.862 / 1024 * 100vh) !important;
    font-stretch: normal;
    font-style: bold;
    letter-spacing: calc(5 / 1024 * 100vh);
  }

 /*============================Subtitle container: Invest in Rooms and Villas===============================*/
  .sub-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0px;
    margin-bottom: calc(50 / 1024 * 100vh);
  }

  .text-elements {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
  }

  .text-elements p:first-child {
    color: #FFF;
    font-family: Montserrat;
    font-size: calc(21.734 / 1024 * 100vh);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

    margin-left: 0;
    text-align: left;
  }



  .text-elements p:last-child {
    margin: 0;
    text-align: left;
    color: #FFF;
    font-family: Montserrat;
    font-size: calc(26 / 1024 * 100vh);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

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

  .project-title-container-button {
    display: inline-block; 
    flex-direction: column;  /* Stack elements vertically */
    align-items: flex-start;
    margin-left: 0;
    position: relative;
    width: auto !important; 
    overflow: visible;
  }
  
  .project-title-container-button .price-button {
    display: inline-flex !important;
    flex-direction: column; 
    margin-left: 0;
    margin-top: calc(250 / 1024 * 100vh);
    width: auto !important;
    height: calc(100 / 1024 * 100vh);

    border-radius: 27.5px;
    /* background: linear-gradient(154deg, rgba(255, 255, 255, 0.45) 0.88%, rgba(255, 255, 255, 0.08) 97%); */
    backdrop-filter: blur(7.7px);

    color: #ffffff;
    font-family: 'Libre Baskerville', serif;
    font-style: bold;
    text-align: center;
    text-transform: none;
    font-weight: normal;

    line-height: 1.5;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    z-index:1000;
  }
  
  .project-title-container-button .price-button p {
    color: #FFF;
    font-family: Montserrat;
    font-size: clamp(16px, 2vw, 22px);
    font-style: italic;
    font-weight: 500;
    line-height: 120%;
  }



    .additional-info {
      display: none;

    }
    

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


    .info-row {
      display: none;
    }

/*=============================================================================================================
  SECTION 2: LOCATION see styles.css
===============================================================================================================*/



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

 .description {
  /* margin-top: 20px; */
  width: 100%;
  height: auto;
  border: 1px solid transparent;

  /* margin: auto; Center the section horizontally */
  background-color: #F8F8F8; /* Background color */
  }  

 /*=============================================================================================================
  SECTION 4: BENEFITS
===============================================================================================================*/ 

  .benefits-section {
    /* margin-top: 20px; */
    flex-direction: column; /* Stack cards vertically */
    height: auto; /* Allow height to adjust based on content */
    padding: 40px 0; /* Optionally adjust padding for mobile */
  }
  
  .benefits-section .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 .card img {
    width: 100%;
    max-width: 100%; /* Ensure images fill the card width */
  }
  
  /* Optionally adjust font sizes for mobile readability */
  .benefits-section .benefit-title,
  .benefits-section .benefit-subtitle {
    font-size: 16px;
  }

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

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


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


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

  .golf-content-phone .golf-image-phone {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 87px;
    margin-bottom: 15px;
  }

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

  
  
  .golf-content-phone .golf-title-phone {

    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 300px;
    margin-bottom: 10px;


  }

  .golf-title-phone h2 {
    margin-left: 34px;
    text-align: left;
    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: 26.1px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; 
    }

  .golf-title-phone p {
    text-align: left;
    width: auto;
    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: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 31px;
    white-space: wrap;
  }


  
 */


/*=============================================================================================================
  SECTION 7: PAYMENT PLAN
===============================================================================================================*/
/* Hide laptop version on mobile */
  .payment-plan-laptop {
    display: none;
  }

  .payment-plan-phone {
    display: block; /* Visible on phones */
    width: 100%; /* Full width */
    height: auto; /* Adjust height dynamically */
    padding: 20px; /* Add padding around the section */
    background-color: #F8F8F8; /* Match section background */
    align-items: center;
  }



  /* Payment grid - displays items stacked on mobile */
  .payment-plan-phone .payment-grid {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 150px;
    gap: 20px; /* Space between items */
  }


  /* Remove bottom border for the last item */
  .payment-plan-phone .payment-item:last-child {
    border-bottom: none;
  }

  /* Payment percentage */
  .payment-plan-phone .payment-percentage {
    color: #AC936E;
    font-family: "Libre Baskerville";
    font-size: 50.497px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
  }

  /* Payment title */
  .payment-plan-phone .payment-title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px;
  }

  /* Payment description */
  .payment-plan-phone .payment-description {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin: 0;
  }

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

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


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


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

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



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

  .hotel-title-phone {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    width: 324px; /* Ensures it takes full width */
    margin-top: 300px;
    margin-bottom: 10px;

    margin-right: 34px;
  }

  .hotel-title-phone h2 {

    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: 26.1px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 137.931% */
  }

  /* Description */
  .hotel-title-phone p {
    margin-top: 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: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 31px; /* 193.75% */
    white-space: wrap;
  }

  /* Information section */
  .hotel-info {
    margin-bottom: 100px;
    display: flex;

    justify-content: flex-start;
    align-items: left;
    gap: 9.12px;
    flex-shrink: 0;
  }

  .hotel-info p {
    align-items: left;
    width: 168.72px;
    height: 34.2px;
    padding: 0px 0px 0.2px 3.588px;

  }

  .icon {
    width: 168.72px;
    height: 34.2px;
    padding: 0px 16.181px 0.2px 3.588px;
  }

  .hotel-benefits {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 50px;
  }

  /* Benefits list */
  .hotel-benefits li {
    color: #000;
    font-family: Montserrat;
    font-size: 14.943px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.925px; /* 133.333% */
    align-items: left;
  }



  /* Success text */
  .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;
    text-align: center;
    margin-bottom: 150px;
  }

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



  .price-table-title {
    font-size: 22px;
  }


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

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

  /* Highlight Price */
  .highlight-price {
    color: #AC936E;
    font-family: Montserrat;
    font-size: 12.608px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .price-table-grid td.highlight-price {
    color: #AC936E !important;
}

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

.payment-plan {
  display: none;
}

.payment-plan-phone {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 20px;
  align-items: center;
}

.payment-plan-phone h2 {

  text-align: center;

}


/*=============================================================================================================
  SECTION FLOOR PLANS
===============================================================================================================*/
    /* Hide the zoom controls on mobile */
    .zoom-controls {
      display: none;
    }

    /* Enable pinch-and-pan smoothly */
    #layout-image {
      transform-origin: center center;
      touch-action: none;
    }
 

}