@font-face {
    font-family: 'Proximanova';
    src: url('../fonts/ProximaNova-Light.ttf') format('truetype'); /* Cambia 'ruta/a/tu/font/archivo.ttf' por la ruta a tu archivo de fuente */
    /* También puedes agregar más formatos de fuente aquí, como woff, woff2, etc., para una compatibilidad más amplia */
}

:root {

  /* Fonts */
  --font-default:  Proximanova;
*{
	font-family: var(--font-default);
}

body{
	overflow-x:hidden !important;
	margin: 0;
    padding: 0 !important;
}


.min-text {
	font-size: 15px;
}

@media screen and (max-width: 576px){
	.min-text {
	font-size: 14px;
    }
}

a {
	text-decoration: none;
}

.card{
	background: none !important;
	border: none !important;
    color:#ffffff !important;
}

.card-body{
	padding: 0px !important;
}


@media screen and (max-width: 576px){
	.card{
		padding: 10px !important;
	}

	.card-text{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 768px){
	.card{
		padding-left: 5p0x !important;
		padding-right: 5px !important;
	}
}

.box, .box2 {
	padding: 2rem 3rem;
}

.box3{
  padding: 2rem 5rem;
}

@media screen and (max-width: 576px){
	.box {
		padding: 4rem 2rem;
	}

	.box2 {
		padding: 1rem;
	}

  .box3{
    padding: 2rem 2rem;
  }
}


.btn-download{
	border-radius: 50px;
	font-size: 10px;
	background-color: #ffffff;
	border:none;
}


.back-to-top {
  position: fixed;
  display: none;
  right: 45px;
  bottom: 80px;
  z-index: 11;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.whatsapp{
  position: fixed;
  display: none;
  right: 45px;
  bottom: 140px;
  z-index: 11;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  background: #25d366;
}

@media screen and (max-width: 576px){

  .back-to-top{
         padding: 10px 14px;
        font-size: 14px;
        bottom: 40px;
        right: 15px;
      }

       .whatsapp{
        padding: 10px 14px;
        font-size: 14px;
        bottom: 95px;
        right: 15px;
       }

}



/*** Header ***/ 

header {
	width: 100%;
	height: 100vh;
    margin: 0;
    padding: 0;
}

.index-background{
	background: url("../img/01_ima_home.jpg") center center;
    background-size: cover;
}

.reserve-background{ 
    background: url("../img/the_reserve_at_tecuan_01.jpg") center center;
    background-size: cover;
}

.location-background{
	background: url("../img/the_reserve_at_tecuan_location_01.jpg") center center;
    background-size: cover;
}

.project-background{
	background: url("../img/the_reserve_at_tecuan_project_01.jpg") center center;
    background-size: cover;
}

.amenities-background{
  background: url("../img/the_reserve_at_tecuan_amenities_01.jpg") center center;
    background-size: cover;
}

.contact-background{
  background: url("../img/the_reserve_at_tecuan_contact_01.jpg") center center;
  background-size: cover;
}

.privacy-background{
  background: url("../img/03_ima_thereserveattecuan.jpg") center center;
  background-size: cover;
}

@media screen and (max-width: 576px){
	.location-background{
	background: url("../img/the_reserve_at_tecuan_location_01_movil.jpg") center center;
    background-size: cover;
}

.project-background{
	background: url("../img/the_reserve_at_tecuan_project_01_movil.jpg") center center;
    background-size: cover;
}
}

.navbar {
  margin: 0;
  padding: 0px;
  border: none;
  padding-left: 4rem;
  padding-right: 4rem;
}

.navbar a img {
	width: 180px;
}

@media (max-width: 576px) {
  .navbar{
     padding-left: 1rem;
     padding-right: 1rem;
   }

   .navbar a img {
	width: 100px;
}
}

.navbar .nav-link {
  color: #FFFFFF;
  margin-left: 10px;
  position: relative;
}

.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: white;
}

.navbar .nav-link.active-primary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #6c5b49;
}



@media (max-width: 767.98px) {

	.fullscreen-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 1050;
    text-align: center;
    padding-top: 2rem;
    animation: slideFadeIn 0.4s ease forwards;
  }

  .fullscreen-menu .nav-link {
    color: #6c5b49 !important;
    font-size: 1rem;
    margin: 1rem 0;
  }

  .btn-close-mobile {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    border: none;
    font-size: 1rem;
    color: #6c5b49;
    z-index: 1051;
  }
  
 
  .navbar-toggler {
    border-color: #6c5b49;
    background: #6c5b49;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  .navbar .nav-link.active::after {
    background-color: #6c5b49;
  }
}


header .hero{
	padding-top: 5rem;
	padding-bottom: 5rem;
}


header .welcome{
	padding-left: 4rem;
	padding-top: 2rem;
	font-size: 25px;
}

.esp{
	height: 100vh;
}


@media screen and (max-width: 576px){
   
   .header-index{
     height: 70vh !important;
   }

   .header-reserve,.header-location{
   	height: auto !important;
   }

   .esp{
	height: auto !important;
}

}




/*** Info **/

#info{
	height: auto;
	width: 100%;
	margin-top: 0px;
  background: url("../img/01_ima_home_blur.jpg")center center;
    background-size: cover; 
    background-repeat: no-repeat;
}


.beachfront{
	padding-left: 5rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
	font-size: 25px;
}

.beachfront2{
	padding: 2rem 3rem;
	font-size: 25px;
}

.beachfrontdetails{
	padding-left: 1rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.hero{
   bottom:0px;
}



@media screen and (max-width: 576px){

  .beachfront,.beachfront2{
  	 padding-left: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
   }

   .beachfrontdetails{
     padding-left: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
   }

  .thereserve{
	margin-top: 300px !important;
   }

}



#tecuan-banner{
    width: 100%;
	height: 100vh;
	background: url("../img/02_ima_thereserveattecuan.jpg") center center;
    background-size: cover;
    /*margin-top: -405px;*/
}


@media screen and (max-width: 1200px){
    #tecuan-banner{
    	height: 70vh;
    	margin-top: -435px;
    }
}


@media screen and (max-width: 768px){
    
    #tecuan-banner{
        margin-top: -440px;
    }

}

@media screen and (max-width: 576px){
    
    #tecuan-banner{
        margin-top: -290px;
    }



}


.card-33{
	width: 33.33%;
}

@media screen and (max-width: 576px){
	.card-33{
	width: 100%;
}
}

/** Footer **/

footer .legal{
	padding: 40px;
}

@media screen and (max-width: 576px){
	footer .legal{
	padding: 5px;
	text-align: center;
	font-size: 14px;
    }

}

/***** Reserve ******/


#reserveBox3{
	height: 700px; 
	background: url('../img/the_reserve_at_tecuan_06.jpg') center center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding: 0px;
}

#architecture{
	height: 1600px; 
	background: url('../img/the_reserve_at_tecuan_project_06.jpg') center center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding: 0px;
}

#wellness{
  height: 700px; 
  background: url('../img/the_reserve_at_tecuan_amenities_06.jpg') center center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding: 0px;
}


#homeBox{
  height: 700px; 
  background: url('../img/02_ima_thereserveattecuan.jpg') center center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding: 0px;
}

.natural{
	padding: 3rem 20rem 3rem 20rem;
	text-align: center;
}

.privacy{
  padding: 3rem 10rem 3rem 10rem;
  text-align: justify;
}

@media screen and (max-width: 576px){
  #reserveBox3,#wellness{
  	height: 400px; 
  }

  #architecture{
  	height: 1900px; 
  }

  .natural,.privacy{
  	padding: 0.5rem 1rem;
  	text-align: left;
  }

}





/** Colors **/

.bg-primary{
	background: #6c5b49 !important;
}

.color-primary{
	color: #6c5b49 !important;
}

.bg-secondary{
	background: #516862 !important;
}

.bg-info{
	background: #9ca37a !important;
}

.color-auxiliar{
	color:#e6ddd0 !important;
}

.bg-resaltado{
	background: #abab9b !important;
}

.bg-rgba-white{
	background: rgba(255,255,255,0.8);
}

.bg-rgba-primary{
	background: rgba(108,91,73,0.8);;
}

.bg-gray{
	background: #757e6e;
}

.color-gray{
	color: #828282;
}

.bg-fofofo{
  background: #f0f0f0;
}

.bg-dfdfdf{
  background: #dfdfdf;
}

.bg-d3d3d3{
  background: #d3d3d3;
}

/* Modal */ 

/* Fondo oscuro y centrado */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      display: none; /* Oculta por defecto */
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    .modal-overlay.show {
      display: flex; /* Muestra el modal */
    }

    .modal-content {
      background: #ffffff;
      border-radius: 1rem;
      padding: 2rem;
      width: 90%;
      max-width: 400px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      animation: fadeInUp 0.3s ease;
    }

    @keyframes fadeInUp {
      from { transform: translateY(30px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .modal-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #333;
    }

    .modal-message {
      font-size: 1rem;
      color: #666;
      margin-bottom: 1.5rem;
    }

    .modal-btn {
      background: #007BFF;
      color: white;
      padding: 0.6rem 1.5rem;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .modal-btn:hover {
      background: #0069d9;
    }