* {
    box-sizing: border-box; 
}

html{
    font-family: Merriweather, serif;
}

body{
    align-items: center;
    background-image: url(../img/background.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: contain;
}


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    
}

.row::after {
  content: "";
  clear: both;
  display: table;
}




.navbar{
    display: flex;
    padding: 10px;
    float: left;
    width: 100%;
    margin-bottom: 10%;
    height: auto;
    font-family: Merriweather, serif;
    background-color: #727c65;  
}

.top-links{
    display: flex;
    gap: 30px;
    justify-content: right;
    
    font-size: 20px;
    padding: 20px;
}

a:link{
    text-decoration: none;
}

.link:hover{
    color: #8e554a;
}

a:hover {
    color: #E5E7EB
}

.link{
    display: inline; 
    color: #E5E7EB;
}
.return-home{
    font-size: 40px;
    font-weight: bold;
    padding: 10px;
    float: left;
}


.button {
    font-family: Merriweather;
    background-color: #8e554a;
    width: 60%;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border: #727c65 solid 5px;
    border-radius: 5px;
    font-size: 20px;
    margin: 20%;
    text-decoration: none;
    float: left;
}

.button-2 {
    font-family: Merriweather;
    background-color: #8e554a;
    border: solid #F9FAF8 3px;
    color: #F9FAF8;
    width: 50%;
    height: auto;
    margin-left: 20%;
    margin-right: 20%; 
    padding: 2%;
    font-weight: bold;
    font-size: 20px;
    border-radius: 5px;
    float: left;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: #727c65;
    color: #E5E7EB;
}

.button-2:hover {
    background-color: #F9FAF8;
    color: #8e554a;
}

.middle {
    font-family: Merriweather;
    width: 100%;
    height: auto;
    margin:0px 0% auto;
    display: flex;
}

.information-header {
    width: 60%;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 36px;
    font-weight: 800;
    color: #E5E7EB;
    text-align: center;
    float: left;
}

h1{
    border-color: #727c65;
    border-width: 5px;
    border-style: solid;
    border-radius: 20px;
    padding: 3%;
    background-color: #8e554a;
    float: left;
}

.description {
    background-color: #8e554a;
    margin-top: 50px; 
    font-size: 22px;
    text-align: justify;
    padding: 3%;
    border-color: #727c65;
    border-width: 5px;
    border-style: solid;
    border-radius: 20px;
    float: left;
}

.blueboxes {
    display: flex;
    flex-direction: column;
    
    gap: 3%;
    width: auto;
    
    float: left;
   
}

.box{
    width: 100%;
    height: fit-content;
    border-radius: 20px;
    
    float: left;
    
}



.img{
    height: auto;
    width: 100%;
    margin: 5%;
    object-fit: fill;
    border-radius: 15px;
    border: #8e554a solid 5px;
    float: left;
}

img:hover {
    -webkit-transform:scale(1.5); 
    transform:scale(1.5);
}

.cabins-main{
    display: flex;
    flex-direction: column;
    float: left;
}

.quotes{
    background-color: #727c65;
    color: #E5E7EB;
    font-family: Merriweather;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 10%;
    margin-bottom: 10%;  
    float: left; 
}

.cab{
    width: 90%;
    margin: 5%;
}

.quotes-title{
    width: 90%;
    font-size: 54px;
    padding: 10px;
    background-color: #8e554a;
    border: solid 5px #E5E7EB;
    border-radius: 20px;
    text-align: center;
    margin: 5%;
}



.call {
    font-family: Merriweather;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 10%;
    background-color: #8e554a;
    margin-bottom: 10%;
}




.nearby{
    background-color: #8e554a;
    color: #E5E7EB;
    font-family: Merriweather;
    display: flex;
    flex-direction: column;
}

.nearby-title{
    margin: 5%;
    font-size: 48px;
    padding: 10px;
    background-color: #727c65;
    border: solid 5px #E5E7EB;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    height: auto;
    
}

.nrby{
    border: solid 5px #727c65;
    width: 90%;
    margin: 5%;
}

.reverse{
    width: 50%;
    background-color: #727c65;
}

.footer{
    background-color: #727c65;
    color: #E5E7EB;
    display: flex;
    flex-direction: row;
    font-family: Merriweather;
    font-size: 18px;
    text-align: center;
    padding: 5%;
    width: 100%;
    height: auto;
    
}

.contact{
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 33%;
    height: auto;
    border-right: #F9FAF8 5px solid;
}

.contact-header{ 
    margin: 0%;
}

.contact-container{
   
}

.num-list{
    font-size: 30px;
    margin: 5%;
}

.mail{
    font-size: 24px;
    margin: 5%;
}

.fa-envelope{
    margin-right: -5%px;
}


.social-media{
    width: 33%;
    height: auto;
    border-right: #F9FAF8 5px solid;
}





.fa-facebook{
    margin: 10%;   
}

.fa-instagram{
    margin: 10%;
}

.email{
    width: 33%;
    height: auto;
}

/* cabanas.html starts here*/


.cabin-container{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    background: #8e554a;
    border-radius: 20px;
    border:#F9FAF8 solid 5px;

}

.cabins{
    font-family: Merriweather;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
     
}

.giffoni{
    background-color: #8e554a;
    width: 90%;
    height: auto;
    margin-bottom: 10%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10%; 
    display: flex;
    justify-content: space-between;  
    
}



.cabin-title{
    font-family: Merriweather;
    font-size: 24px;
    color: #F9FAF8;
}

.img-giffoni-1{
    width: 100%;
    height: auto;

}





.img-cabins{
    height: auto;
    width: 80%;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 15%;
    object-fit: fill;
    border-radius: 15px;
    border: #E5E7EB solid 5px;
    
}

.cabins-card{
    width: 90%;
    height: auto;
    margin-left: 10%;
    margin-right: 5%;
    margin-top: 5%;
}

.features{
    width: 100%;
    border: solid #F9FAF8 5px;
}


.giffoni-title{
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 5%;
    height: auto;
    
}


.cabin-card-title{
    color: #F9FAF8;
    font-size: 30px;
    font-weight: bolder;
    text-align: center;
    font-family: Merriweather;   
}

.cabins-button{
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 5%;
    height: auto;
    text-align: center;

}

.giffoni-features{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    height: auto; 
    font-size: 30px;
    color: #F9FAF8;
    font-family: Merriweather;
    text-align: start;
}

.feature-icons{
    font-size: 58px;
    width: 70%;
    color: #F9FAF8;
    font-family: Merriweather;
    display: flex;
    justify-content: center;
    gap: 15%;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 5%;

}

.tooltip{
    position: relative;
  display: inline-block;
  border-bottom: 1px dotted rgb(97, 95, 95);
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: rgb(105, 99, 99);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;   
    position: absolute;
    z-index: 1;
    font-size: 20px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
  }

.features-price{
    font-family: Merriweather;
    font-size: 30px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
    text-align: center;
    color: #F9FAF8;
    border: #F9FAF8 solid 5px;
    
}


/*entorno.html starts here */

.entorno{
    font-family: Merriweather;
    color: #F9FAF8;
    display: flex;
    flex-direction: column;
    width: 90%;
    height: auto;
    justify-content: center;
    margin: 5%;
}

.entorno-card{
    width: 90%;
    height: auto;
    border: #F9FAF8 solid 5px;
    border-radius: 20px;
    margin: 5%;
    background-color: #727c65;
}

.entorno-title{
    background-color: #727c65;
    width: 90%;
    height: auto;
    text-align: center;
    justify-content: center;
    margin: 5%;
    font-size: 30px;
    color: #F9FAF8;
    border: #F9FAF8 5px solid;
    border-radius: 20px;
}



.entorno-card-title{
    font-size: 30px;
    color: #F9FAF8;
    padding: 3%;
}

.entorno-card-main{
    display: flex;
    justify-content: space-evenly;
}

.entorno-card-description{
    border: #F9FAF8 solid 5px;
    border-radius: 20px;
    padding: 3%;
    width: 40%;
    margin-bottom: 5%;
}



.entorno-img{
    height: auto;
    width: 40%;
    margin: 5%;
    object-fit: fill;
    border-radius: 15px;
    border: #F9FAF8 solid 5px;
}

.icons-title{
    font-size: 32px;
    color: #F9FAF8;
}

.entorno-icons{
    font-size: 24px;
    color: #F9FAF8;
}

.conguillio{
    background-color: #727c65;
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 5%;
    text-align: center;
}

.conguillio:hover{
    color: #727c65;
}

/* contact.html starts here*/

.contact-main{
    background-color: #727c65;
    width: 90%;
    height: auto;
    margin: 5%;
    display: flex;
    justify-content: center;
}

.contact-list{
    
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 28px;
    color: #F9FAF8;
    font-family: Merriweather;
}

.mapcontainer{
    width: 50%;
    height: auto;
    font-size: 28px;
    color: #F9FAF8;
}

.map-title{
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 5%;
}

.mapouter{
    width: 60%;
    height: auto;
   
   
}

/*moreimg.html starts here*/

.photos{
   width: 90%;
   background-color: #8e554a;
   height: auto;
   margin: 5%;
   
}

.photos-title{
    font-size: 28px;
    color: #F9FAF8;
    font-family: Merriweather;

}

.photo-container{
    padding: 5%;
    
    

}

.giffoni-img{
    display: flex;
    flex-direction: column;
}

.gentille-img{
    display: flex;
    flex-direction: column;
}

.romana-img{
    display: flex;
    flex-direction: column;
}

.moreimg-title{
    color: #F9FAF8;
}

.interior-img{
    border: solid #F9FAF8 5px;
    max-width: 100%;
    height: auto;
}

/*productos.html starts here*/

.hazel-description{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    margin: 1.25%;
    background-color: #8e554a;
    font-size: 24px;   
}

.hazel-title{
    text-align: center;
    border: solid 3px #F9FAF8;
    border-radius: 20px;
    width: 50%;
    padding: 5px;
    margin-left: 25%;

}

.hazel.image{
    
}

.img-cont-hazel{
    

}

.img-hazelnut{
   object-fit: cover;
   width: 40%;
   border: solid 5px #8e554a;
   border-radius: 20px;
   margin-left: 25%;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    

    .cabin

    .img-cabins{
        max-width: 10%;
       
    }

 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (max-width: 395px) {

    [class*="col-"] {
        width: 100%;
      }

    .navbar{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        
    }
    .return-home{
        margin-top: 2%;
        margin-left: 30%;
        font-size: 10px;
        width: 40%;
        justify-content: center;
    }

    .top-links{
        font-size: 5px;
        width: 80%;
        margin-left: 50%;
    }

    h1{
        font-size: 100%;
        margin-left: 10%;
    }

    .middle{
        width: 100%;
    }

    .information-header{
        font-size: 15px;
        width: 100%;
    }

    

    .description{
        font-size: 10px;
    }


    .nearby-title{
        font-size: 12px;
    }

    .quotes-title{
        font-size: 12px;
        
    }

    .button{
        font-size: 10px;
    }

    .button-2{
        font-size: 10px;
    }

    .blueboxes{
        max-width: 100%;
        flex-direction: column;
        margin-left: 15%;
    }

    .img{
        max-width: 100%;
    }

    .contact{
        width: 33%;
        justify-content: start;
    }

    .num-list{
        font-size: 7px;
     }

     .social-media{
        width: 33%;
        justify-content: start;
     }

     .email{
        width: 33%;
        justify-content: start;
     }

     .mail{
        font-size: 5px;
     
     }

     .fa-brands{
        font-size: 80%;
        
     }
     .fa-ul{
        margin: 0%;
     }

     .giffoni{
        flex-direction: column-reverse;
    }

    .giffoni-features{
        font-size: 75%;
    }

    .features-price{
        font-size: 75%;
    }

    .fas{
        font-size: 75%;
    }

    .cabin-title{
        font-size: 75%;
    }

    .img-cabins{
        max-width: 100%;
        
       
    }

    .entorno-card-main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 90%;;
    }

    .entorno-card-description{
        width: 70%;
        margin-left: 10%;
        font-size: 90%;
    }

    .entorno-img{
        width: 70%;
        margin-left: 10%;
        font-size: 90%;
    }

    .entorno-icons{
        margin-left: 30%;
        font-size: 90%;
    }

    .feature-icons {
        font-size: 99%;
    }

    .contact-main{
        display: flex;
        flex-direction: column;
        font-size: 90%;
    }

    .contact-list{
        font-size: 90%;
    }


    .map-title{
        font-size: 50%;
    }

    .mapouter{ 
        overflow:hidden;

        padding-bottom:56.25%;
    
        position:relative;
    
        height:0;
        
        

    }

    .mapouter iframe{

        left:0;
    
        top:0;
    
        height:100%;
    
        width:100%;
    
        position:absolute;
    
    }

    .gmap_canvas{
        width: 100%;
        height: 100%;
       
       
    }

    .hazel-title{
        font-size: 15px;
    }

    .hazel-description{
        font-size: 11px;
    }

    .hazel-page{
        display: flex;
        flex-direction: column;
    }
 }

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    

    .cabin

    .img-cabins{
        max-width: 10%;
       
    }

 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (max-width: 700px) {

    [class*="col-"] {
        width: 100%;
      }

    .navbar{
        max-width: 100%;
    }
    .return-home{
        margin-top: 2%;
        font-size: 10px;
        width: 60%;
        justify-content: center;
    }

    .top-links{
        font-size: 8px;
        width: 40%;
    }

    .middle{
        width: 100%;
    }

    .information-header{
        font-size: 20px;
        width: 90%;
    }

    .description{
        font-size: 12px;
    }


    .nearby-title{
        font-size: 15px;
    }

    .quotes-title{
        font-size: 15px;
        
    }

    .button{
        font-size: 12px;
    }

    .button-2{
        font-size: 12px;
    }

    .blueboxes{
        max-width: 100%;
        flex-direction: column;
        margin-left: 15%;
    }

    .img{
        max-width: 100%;
    }

    .contact{
        width: 33%;
        justify-content: start;
    }

    .num-list{
        font-size: 9px;
     }

     .social-media{
        width: 33%;
        justify-content: start;
     }

     .email{
        width: 33%;
        justify-content: start;
     }

     .mail{
        font-size: 8px;
     
     }
     .fa-ul{
        margin: 0%;
     }

     .giffoni{
        flex-direction: column-reverse;
    }

    .img-cabins{
        max-width: 100%;
        
       
    }

    .entorno-card-main{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .entorno-card-description{
        width: 70%;
        margin-left: 10%;
        
    }

    .entorno-img{
        width: 70%;
        margin-left: 10%;
    }

    .entorno-icons{
        margin-left: 30%;
    }

    .contact-main{
        display: flex;
        flex-direction: column;
    }

    .mapouter{
        
   
    }

    .gmap_canvas{
        width: 25%;
        height: auto;

       
    }

    .hazel-title{
        font-size: 15px;
    }

    .hazel-description{
        font-size: 11px;
    }

    .hazel-page{
        display: flex;
        flex-direction: column;
    }
 }

 
 
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (max-width: 1350px) {

    .giffoni{
        flex-direction: column-reverse;
    }

    .img-cabins{
        max-width: 70%;
        
       
    }

    .hazel-title{
        font-size: 20px;
    }

    .hazel-description{
        font-size: 15px;
    }

    .hazel-page{
        display: flex;
        flex-direction: column;
    }

    

 } 

 @media only screen and (max-width: 1350px) {
    .middle{
        flex-direction: column;
    }

    .blueboxes{
        width: 70%;
        display: flex;
        flex-direction: column;
        
        
        

 }

 
}