@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


body{
    background-color: var(--primary-color);
}




/*ajustes generales*/
html{
    box-sizing: border-box;
}
/*Variables para definir paleta de color*/
:root{
    --primary-color: #080e42;
    --secondary-color: #F7F4EE;
    --tertiary-color: #7CDEDC;
    --quaternary-color: #F283B6;
}

*{
    margin: 0;
    padding: 0;
}

.btn-primary {
   --bs-btn-hover-color: var(--secondary-color);
   --bs-btn-hover-bg: #12428f;
   --bs-btn-active-color: var(--secondary-color);
   --bs-btn-active-bg: #12428f;
   --bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--secondary-color);
   --bs-btn-disabled-bg: var(--primary-color);
  
}

.botones{
   background: var(--primary-color);
   color: var(--secondary-color);
   font-size: 15px;
   font-family: 'Roboto', sans-serif;
   
}

/*Fuentes principales*/
h1,h2,h3,h4,h5,h6{
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    
}
h2{
   font-size: 40px;
   font-weight: 550;
   color: var(--primary-color);
   
}
a{
   text-decoration: none;
}

/*.font1 @font-face {
    font-family: 'Noto Serif', serif;

}*/


p,a,li,label,input,textarea{
    font-family: 'Roboto', sans-serif;
    color: var(--primary-color);
    

}

.container{
    width: 100%;
    max-width: 1065px;
    height: 100%;
    /* min-height: 768px; */
    margin: 0 auto;
}


nav{
    height: 66px;
    /* border: #F7F4EE solid; */
    
}


/* 
#navbarNav{
    position: relative; 
    display:flex;
    width: 100%;

} */
.navbar{
    background: var(--primary-color);
}

.bg-portafolio #logo a{
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--secondary-color);
    letter-spacing: 2px;
}

 .bg-portafolio ul li a { /*no es recomendable usar mas de 4 selctores, si hay un elemento unico como ul, no hace falta agegar calses secudnarias (antes) */
    color: #F7F3EA;

 } 

 .bg-portafolio ul li a:hover {
      
     color: #F283B6;
     background-color: #F7F3EA;

 }

 /*Estilos Hero*/

 header #hero{
    background-color: var(--primary-color);
    padding: 110px 0px 110px 0px;
   /* height: 100vh; */
    
 }

#hero .welcomeimg img{
   width: 600px;
   display: block;
   float: left;
   /* border: #b7b8c4 solid; */
  
   
   
   

}

 #hero .container .row .welcome{
   margin-top: 100px;
   

}

 header #hero .welcome h3{
    color: var(--secondary-color);
    font-size: 30px;
    

 }


 header #hero .welcome h1{
    color: var(--secondary-color);
    font-size: 60px;
    
    

 }


 header #hero .welcome h1 b{
    color: var(--tertiary-color);
    font-weight: 350;

 }

 #carouselAbbilitiesControls{
    position: relative;
    
 }

.carousel-inner{
    position: absolute;
    /* height: 143px; */
    z-index: 99;
    bottom: -70px;
 }

 #habilidad{
   background: var(--primary-color);
 }

 .habilidades .carousel-item .habilidadFig{
    width: 143px;
    height: 143px;
    float: left;
    margin: 0 17px 0 17px;
    background: linear-gradient(to bottom, #F7F4EE 50%, #080e42 50.1%);
    border-radius: 143px;
    text-align: center;
 }

 .habilidades .habilidadFig h2{
   
    font-size: 22px;
    font-weight: 500;
    color: var(--secondary-color);
 }

 .habilidades .habilidadFig h3{
   padding-top: 32px;
   font-size: 32px;
   font-weight: 550;
   color: var(--primary-color);
}

 .habilidades .carousel-item{
 
    margin-left: 170px;
  
 }

 .carousel-control-next-icon, .carousel-control-prev-icon {
   background: src 
}

.izquierda, .derecha{
    width: 70px;
    z-index: 999;
 
    /* background: #F283B6; */
 }

.izquierda{
 margin-left: 108px;
 
}

.derecha{
margin-right: 108px;
   }


 #estudios{
    background-color: var(--secondary-color);
    padding: 80px 0px 80px 0px;
    /* height: 100vh; */

 }

 #estudios .estudioContent{
margin-top: 30px;

}

#estudios .estudioContent .miTarjeta  h3,h4{
   font-family: 'Roboto', sans-serif;
   
   }

 #estudios .bxs-graduation{
   font-size: 103px;
   color: var(--tertiary-color);

}

#estudios .miTarjeta, #portafolio .miTarjeta {
   width: 310px;
   background: transparent;
   border: none;

}


 #perfil{
    background-color: var(--quaternary-color);
   padding: 80px 0px 80px 0px;
    /* height: 100vh;  */
   


 }

 #perfil .container .row{
   padding-right: 5px;
   
  /* border: #0fbe1b solid;*/

 }

 #perfil .container .row  .miImagen img{
   width: 500px;
   display: block;
   float: left;
   
   /* border: #b7b8c4 solid; */
  
   
   
   

}


#perfil .container .row .miTexto h5{
  font-weight: 700;
  
   
   
   

}

 #perfil .container .miExperiencia .bxs-award{
   font-size: 83px;
   margin-top: 3px;
   margin-left: 5px;
   color: var(--tertiary-color);
   
   display: block;
   float: left;
   
  /* border: #0fbe1b solid;*/

 }

 #perfil .container .miExperiencia h4{
background: var(--primary-color);
color: var(--secondary-color);
font-weight: 400;
padding-right: 10px;
font-size: 18px;
max-width: 220px;
min-height: 28px;
padding-top: 3px;
margin: 0px 0px 0px 80px;
text-align: center;
border-radius: 133px;

 }



 #perfil .container .miExperiencia p{
  
   font-size: 16px;
   min-width: 133px;
   min-height: 28px;
   margin-left: 100px;
  

    }

    #perfil .container .miExperiencia article{
      margin-top: 8px;
      /* border: #080e42 solid; */

   }

   #perfil .container .miTexto{
      padding-right: 5px;
      font-size: 18px;
      /* border: #080e42 solid; */

   }



 #portafolio{
    background-color: var(--secondary-color);
   padding: 80px 0px 80px 0px;
     /* height: 100vh;  */
   
 }

 
 #portafolio .estudioContent{
   margin-top: 30px;
   
   }

   #portafolio h2, #portafolio p {
      text-align: center;
      
      }
   
   #portafolio .estudioContent .miTarjeta  h5{
      font-family: 'Roboto', sans-serif;
      
      }
   

   
   #portafolio .container .row .miTarjeta{
      width: 310px;
      justify-content: space-between;
   
   }

   #portafolio .container .row .miTarjeta .card-body article{
     
      justify-content: space-between;
   
   }

   #portafolio .miTarjeta .card-body a{
      width: 100%;
      font-size: 20px;
      
   }
   


 #contacto{
    background-color: var(--tertiary-color);
    padding: 80px 0px 80px 0px;
   
     /* height: 100vh;  */

 }

#contacto .container button{
   width: 120px;
   margin: 20px 0px 0px 10px;
   
   
 }

 /* #contacto .container .row {
  
   border: #df5c16 solid;
   
 } */

#contacto .container .formulario {
   
   width: 730px;
   /* border: #0fbe1b solid; */
   
 }



 #contacto .container .datosContacto {
   position: absolute; 
   width: 300px;
   margin-left: 745px;
   margin-bottom: 100px;
   /* border: #080E42 solid; */
  
   
 }



 
 #contacto .container .datosContacto h3  {
   font-family: 'Roboto', sans-serif;
   
 }

 #contacto .container .datosContacto .cardC1 {
   
   background: var(--primary-color);
   color: var(--secondary-color);
   border-radius: 5px;
   padding: 25px;
 }

 #contacto .container .datosContacto .cardC1 p {
   
   
   color: var(--secondary-color);
  
 }

 #contacto .container .datosContacto .cardC2 {
   
   background:var(--quaternary-color);
   border-radius: 5px;
   padding: 25px;
 }

 #contacto .container .datosContacto .cardC2 i {
   
   font-size: 25px;
   letter-spacing: 10px;
 }

 #contacto .container .row span h2,  #contacto .container .row span p {
   display: block;
   float: left;
   /* border: #080E42 solid; */


 }

 #contacto .container .row span p {

   
   margin-right: 200px;



 }
 
 

footer{
    background: var(--primary-color);
    
    padding: 20px 0px 0px 20px;


 }

 
 footer .container .row .pie p{

   color: var(--secondary-color);
   text-align: center;
  
}

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

   .navbar .container #navbarNav{ 
      position: relative;
      background: var(--primary-color);
     
   
   
   }

   .navbar-toggler{ 

      color: var(--secondary-color);
      background: var(--secondary-color);
     
   
   
   }

   #hero .welcomeimg img{
      width: 400px; 
   }

   #hero .container .row .welcome{      
      margin-top: 20px;
        
   }

   header #hero .welcome h3{      
      font-size: 25px;
        
   }
  
  
   header #hero .welcome h1{      
      font-size: 50px;
             
   }

   .habilidades .carousel-item .habilidadFig{
      width: 110px;
      height: 110px;
      border-radius: 110px;
      margin: 0px 5px 0px 5px;
 
   }

   .habilidades .carousel-item{
   
      margin-left: 160px;
 
   }

   .carousel-inner{

      bottom: -55px;
   }

   
 .habilidades .habilidadFig h2{
   
   font-size: 15px;

}

.habilidades .habilidadFig h3{
  padding-top: 22px;
  font-size: 25px;

}

#perfil .container .row  .miImagen img{
   margin-top: 40px;
   width: 400px;    
}

#perfil .container .miExperiencia h4{
   max-width: 120px;
   height: 45px;
   font-size: 12px;
   background: var(--primary-color);
   color: var(--secondary-color);
   padding: 10px;
   text-align: center;
   
    }

#perfil .container .miExperiencia p{
  
      font-size: 10px;
      min-width: 133px;
      min-height: 28px;
      margin-left: 70px;
     
   
       }

       #perfil .container .miExperiencia .bxs-award{

         margin-left: 0px;   
               
      
       }

       
 #contacto .container .datosContacto {
   position: relative; 
  width: 90%;

  display: block;
  margin: 10px 0px 0px 0px;

  
   
 }

 #contacto .container .datosContacto article:nth-child(1) {
  width: 50%;
  display: block;
  float: left;
 padding-bottom: -10px;

  
   
 }

 #contacto .container .datosContacto article:nth-child(2) {
   float: right;
   width: 50%;
   
   
    
  }
 


   
 }


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

   #hero .welcomeimg img{
      width: 400px; 
   }

   #hero .container .row .welcome{      
      margin-top: 20px;
        
   }

   header #hero .welcome h3{      
      font-size: 25px;
        
   }
  
  
   header #hero .welcome h1{      
      font-size: 50px;
             
   }

.navbar .container #navbarNav ul li:nth-child(2){ 
   display: none;


}



.navbar{ 
   
   background: var(--primary-color);
  


}


.navbar-toggler{ 

   color: var(--secondary-color);
   background: var(--secondary-color);
  


}




   .habilidades .carousel{
   
      display: none;
 
   }

   

#perfil .container .row  .miImagen img{
   margin-top: 40px;
   width: 400px;    
}

#perfil .container .miExperiencia .bxs-award{
   font-size: 83px;
   margin-top: 3px;
   margin-left: 5px;
   color: var(--tertiary-color);
   
   display: block;
   float: left;
   
  /* border: #0fbe1b solid;*/

 }

 #perfil .container .miExperiencia h4{
background: var(--primary-color);
color: var(--secondary-color);
font-weight: 400;
padding-right: 10px;
font-size: 18px;
max-width: 220px;
min-height: 28px;
padding-top: 10px;
margin: 0px 0px 0px 80px;
text-align: center;
border-radius: 133px;

 }



 #perfil .container .miExperiencia p{
  
   font-size: 16px;
   min-width: 133px;
   min-height: 28px;
   margin-left: 100px;
  

    }

       
 #contacto .container .datosContacto {
   position: relative; 
  width: 100%;

  display: block;
  margin: 10px 0px 0px 0px;

  
   
 }

 #contacto .container .datosContacto article:nth-child(1) {
  width: 55%;
  display: block;
  float: left;
 padding-bottom: -10px;

  
   
 }

 #contacto .container .datosContacto article:nth-child(2) {
   float: right;
   width: 45%;
   
   
    
  }
 


   
 }