html{
  box-sizing: border-box;
}

*,*::after,*::before{
  box-sizing: inherit;
}





section{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

h1{font-size: 2rem;
color: #14093f;
font-family: 'Rubik', sans-serif;

}

h2{
   font-size: 1.5rem;
   font-family: 'Rubik', sans-serif;
}


.seccion-titulo{

   font-size: 2rem;
   margin: 10px;
   font-family: 'Rubik', sans-serif;
   
}

.seccion-texto{
   font-size: 1.2rem;
   font-family: 'Rubik', sans-serif;
  margin:0px 20px 20px 20px;
  padding: 0px;
   

}

.btn-info{
  font-size: 1.1rem;
  margin: 20px;
  font-weight: 800;
}










.hero-principal{padding: 3rem;}

.hero-imagen-desarrollador{
   width: 300px;
   height: 300px;
   border-radius: 50%;
   margin: 20px;
}







body{
    margin: 0;
    min-height: 100vh;
    background-image: url(../img/1000004531.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body:before{
    content: "";
    width: 100%;
    min-height: 100vh;
    position: relative;
    top: 0;
    left: 0;

    background:linear-gradient(65deg,#df52ae,#6255c1);

    opacity: 0.2;
    z-index: -2;
}
 .navbar {
    padding: 0.5rem;
    background-color: #52dfc1;
 }

 .navbar-collapse{
    align-items: center;
    justify-content: space-between;
 }

 .hero{
   
   min-height: 450px;
   text-align: center;
 }

 .seccion-oscura{
   background-color:#1f71be;
   color:rgb(75, 9, 9);
   
 }

 .seccion-clara{
   color: black;
   background-color: white;
 }

 .sobre-mi {
   height: 500px;
   padding: 30px;
 }

 .sobre-mi .contenedor{
   max-width: 500px;
   text-align: center;
   padding: 30px;
 }

 .sobre-mi .parrafo{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px 0 30px;
 }




 .experiencia{
   padding: 40px;
 }

 .experiencia .row .div {
  background-color: #6255c1;
  border: 3px solid orange;

   height: 250px;
 }

 .experiencia-icono{

  font-size: 2.5rem;
  color: #7ade30;
  background-color: rgb(18, 93, 139);
  padding: auto;
  border:2px solid rgb(0, 255, 255);
  margin: 10px;
  border-radius: 30%;
 }


 .experiencia-titulo{

   font-size: 25px;
   font-weight: bold;
   margin: 10px 0;
 }


 .experiencia .columna{
  padding: 20px;
  border: 5px solid #f813134d;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  transition: all 0.5s ease-in;
}
.experiencia .columna:hover{

  color: antiquewhite;
  background-color: #1b1b32;
}

 .badges-contenedor{
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
  
 }

 .badges {margin: 5px;}

 /* SECCION PROYECTOS */

 .proyectos-recientes{padding: 40px;}

 .texto-negro{color: #1b1b32;}

 .texto-blanco{color: aliceblue;}

 .seccion-descripcion{
  font-size: 1.2rem;
  color: #584e4e;
  font-family: 'Rubik', sans-serif;
 }

 .proyectos-recientes img {

  height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  display: block;
  transition: all 0.2s ease;
  }

  .proyectos-contenedor{
    padding-top: 60px;
    margin-bottom: 40px;
  }

  .overlay{

    transition: all 0.2s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%) ;
    text-align: center;
}

.overlay p{

  font-size: 25px;
  font-weight: bold;
  margin-bottom: 0;
}

.proyectos{position: relative;}

.proyectos:hover img{opacity: 0.2;}

.proyectos:hover .overlay{opacity: 1;}

.overlay .iconos-contenedor{display: flex;}

.overlay i { color: black;
             font-size: 60px;
             margin: 10px;


}

/* ARTICULOS*/

.articulos{

  min-height: 500px;
  padding: 30px;
}

.articulos .card{

  width: 80%;
  max-width: 600px;
  margin: 20px;
  font-weight: bold;


}

/* TESTIMONIOS*/

.carousel-item .container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.testimonio-imagen{

  height: 150px;
  width: 150px;
  margin: 10px 10px 20px 10px;
}

.testimonio-texto{
  max-width: 70%;
  font-size: 20px;
  text-align: center;
}

.testimonio-info{
  font-weight: 900;
  text-align: center;
}

.testimonio-info p {
  margin-bottom: 5px;
}

.testimonio-footer .cliente{
  font-size: 1.2rem;
}

.testimonio-info .cargo{
  font-size: 0.9rem;
  color: #584e4e;
}


/* CONTACTO*/

.contacto .container{
                max-width: 1100px;
                min-height: 200px;
                padding: 20px;
}

.contacto .rectangulo{

               margin-top: -2rem;
               background-color: rgb(0, 255, 255);
               border-radius: 20px;
               box-shadow: 0px 2px 6px 2px wheat;

               
}

.contacto .row {
  width: 100%;
  display: flex;
  align-items: center;
}


.contacto .descripcion{

  color: #121010;
  font-size: 1.2rem;
  font-weight: 900;
}

.contacto button{
  color: rgb(204, 64, 212);
  font-weight: bold;
  background-color: transparent;
  border: 5px solid white;
   padding: 1.25em 2em;
   margin: 10px;
   border-radius: 100px;
   transition: all 0.2s ease-in-out;

}

.contacto button i {
  color: rgb(63, 57, 180);
  font-size: 1.3rem;
  transition: all 0.2s ease-in-out;
}

.contacto button:hover{
  background-color: rgb(221, 91, 26);
  color:black;
}

.contacto button:hover i {
  color: #14093f;
}

/*footer*/


.footer {min-height: 500px;
}

.footer-logo{

      height: 80px;
      width: 80px;
      margin: 10px;
    
}

.footer-texto{
  font-size: 1.5rem;
  padding: 20px;
  margin-bottom: 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  
}

.iconos-redes-sociales a {

  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 10px;
  border: 2px solid white;
  border-radius: 50%;
  transition: all 0.5s ease-in;
}

.iconos-redes-sociales i{

  color: white;
  font-size: 1.5rem;
  transition: all 0.5s ease-in;
}

.iconos-redes-sociales a:hover {

  background-color: white;
  border: 2px solid rgb(63, 57, 180);
}

.iconos-redes-sociales a:hover i{
  color: #14093f;
}

/* derecho del autor*/

.derecho-de-autor{
  font-size: 15px;
  color: #584e4e;
  padding: 20px;
}



























 






 @media screen and (max-width:767px){
    .navbar-brand{display: none;}
 }

 @media screen and (min-width:700px){
   .hero-inferior-imagen{max-width: 600px;}
}