*{
 text-decoration: none;
 color: black;
}

html {
    scroll-behavior: smooth;
  } 
  

body{
    padding: 0%;
    padding-top: 0;
}

.flex{
    display: flex;
}

nav{
   padding-top: 11px;
   padding-bottom: 19px;
   padding-left: 0px;
   height: 5vb;
   display: flex;
   justify-content: space-between;
   width: 100% ; 
   
   position: fixed;
   right: 0px;
   top: 0px;

   background-color: rgb(23, 104, 170);
}

.navdiv{
  height: 5vb;
  font-size: 6vb;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0px;
  color: white;
}

.container3{

    margin-top: 60px;
    display: grid;
    grid-template-columns: 24% 24% 24% 24%; 
    grid-template-rows: 24% 24% 20% 28%;
    width: 100%;
    height: 80vh;
    grid-gap: 15px;
    grid-template-areas: 
     "img img . ."
     "img img . ."
     "img img title ."
     "img img text text"
     ;

}

.container4{

    margin-top: 60px;
    display: grid;
    grid-template-columns: 20% 20% 30% 25%; 
    grid-template-rows: 24% 24% 20% 28%;
    width: 100%;
    height: 80vb;
    grid-gap: 15px;
    grid-template-areas: 
     "img img . ."
     "img img . ."
     "img img title ."
     "img img text text"
     ;

}

.container5{

    margin-top: 60px;
    display: grid;
    grid-template-columns: 24% 24% 24% 24%; 
    grid-template-rows: 24% 24% 30% 20%;
    width: 100%;
    height: 80vb;
    grid-gap: 15px;
    grid-template-areas: 
     "img img . ."
     "img img . ."
     "img img title ."
     ". . text text"
     ;

}

.title1{
    display: flex;
    grid-area: title;
    font-size: 30px;
    margin-bottom: 0%;   
    align-items: flex-end;

}

.text1{
    grid-area: text;
}

.title2{
    display: flex;
    grid-area: title;
    font-size: 46px;
    margin-bottom: 0%;   
    align-items: flex-end;
    margin-top: 18px;
}

.title4{
        margin-top: 0px;
        display: flex;
        grid-area: title;
        font-size: 32px;
        margin-bottom: 0%;   
        align-items: flex-start;
    
    }

.text2{
    grid-area: text;
    font-size: 24px;
}

.text_hafacafe{
    grid-area: text;
    margin-right: 120px;
    font-size: 24px;
}

.title3{
    display: flex;
    grid-area: title;
    font-size: 30px;
    margin-bottom: 0%;   
    align-items: flex-end;

}

.text3{
    display: flex;
    grid-area: text;
    align-items: flex-end;
}

.portfolio1{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
}
.portfolio2{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
}

.portfolio3{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
    
}



.portfolio4{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
}

.portfolio5{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
}

.portfolio6{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
}

.portfoliofloor{
    background-color: white;
    height: 100px;
}



.link1{
    text-decoration: underline;
}


.container12{
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: 29% 69%;
    grid-template-rows: auto;   
    width: auto;
    height: auto;
    grid-gap: 25px;
    grid-template-areas:
    "text img"
     ;
}

.container_hafacafe{
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: 56% 42%;
    grid-template-rows: auto;   
    width: auto;
    height: auto;
    grid-gap: 40px;
    grid-template-areas:
    "text img"
     ;
}

.port_img{
        display: flex;
        flex-direction: column;
        grid-area: img;
}


.port_img img{
    margin-bottom: 10px;
    object-fit: fill;
    width: 100%;
    height: 100%;
    }

.port_text {
    display: flex;
    flex-direction: column;
    grid-area: text;
}

.img_rowsplit{
    display: flex;
    flex-direction: row;
    width: 50%;
    margin-bottom: 30px;
}

.img_rowsplit img{
    margin-bottom: 30px;
    object-fit: cover;
    
   
}

.white{
    color: white;
}

footer {
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 5vh;
    background-color: rgb(23, 104, 170);
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed; */
    bottom: 0;
    
}

footer p{
    color: white;
    font-size: 24px;
}


::-webkit-scrollbar {
    width: 40px; /* Ancho de la barra de desplazamiento vertical */
    height: 12px; /* Alto de la barra de desplazamiento horizontal */
    
  }
  
  /* Personalizar el "thumb" (la parte que puedes arrastrar) */
  ::-webkit-scrollbar-thumb {
    background-color:rgb(110, 169, 224); /* Color del "thumb" */
    border-radius: 0px; /* Bordes redondeados del "thumb" */
    border: 5px solid #ffffff; /* Añadir un borde blanco alrededor del "thumb" */
  }

  
  @media all and (max-width: 600px) { 

    .title1{
        display: flex;
        grid-area: title;
        font-size: 30px;
        margin-bottom: 0%;   
        align-items: flex-start;
    
    }
    
    .text1{
        grid-area: text;
    }
    
    .title2{
        display: flex;
        grid-area: title;
        font-size: 42px;
        margin-bottom: 0%;   
        align-items: flex-start;
    
    }


    .title3{
        display: flex;
        grid-area: title;
        font-size: 30px;
        margin-bottom: 0%;   
        align-items: flex-start;
    
    }

    body {
        
        padding-top: 0;
        box-sizing: border-box;
    }
    

    .padding_mobile{
        padding-left: 7%;
        padding-right: 7%;
        padding-top: 0%;
    }
     
           .navdiv{
            height: 5vb;
            font-size: 3vb;
            padding-left: 10px;
            padding-right: 20px; 
            margin: 0px;
          }

        nav{
            
            padding-top: 11px;
            padding-bottom: 19px;
            padding-left: 0px;
            height: 2vb;
            display: flex;
            justify-content: space-between;
            width: 100% ; 
            
            position: fixed;
            right: 0px;
            top: 0px;
            background-color: rgb(23, 104, 170);
         }
     
     .container3 {
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        width: 100%;
        height: auto;
        grid-gap: 15px;
        grid-template-areas: 
            "img img"
            "title title"
            "text text";
    }

     .container4{

        margin-top: 60px;
        display: grid;
        grid-template-columns: 20% 20% 30% 25%; 
        grid-template-rows: 24% 24% 30% 28%;
        width: 90%;
        height: 90vb;
        grid-gap: 15px;
        grid-template-areas: 
         "img img img img"
         "img img img img"
         "title title title title"
         "text text text text"
         ;
    
    }
    
    .container5{
    
        margin-top: 60px;
        display: grid;
        grid-template-columns: 24% 24% 24% 24%; 
        grid-template-rows: 24% 24% 20% 20%;
        width: 90%;
        height: auto;
        grid-gap: 15px;
        grid-template-areas: 
         "img img img img "
         "img img img img "
         "title title title title"
         "text text text text"
         ;
    
    }

    .title1{
        display: flex;
        grid-area: title;
        font-size: 30px;
        margin-bottom: 0%;   
        align-items: flex-start;
    
    }



    .container12{
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: 99%;
    grid-template-rows: auto auto;   
    width: auto;
    height: auto;
    grid-gap: 25px;
    grid-template-areas:
    "text"
    "img"
     ;
     }

.container_hafacafe{
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: 99%;
    grid-template-rows: auto auto;
    width: auto;
    height: auto;
    grid-gap: 40px;
    grid-template-areas:
        "text"
        "img";
   }

   .text_hafacafe{
    grid-area: text;
    margin-right: 0px;
    font-size: 24px;
}
  
}