:root {
  /*Colores*/
  --primarylight: #f2f2f2;
  --primarydark: #032250;
  --light: #b8c9e3;
  --dark: #181818;
  --text: #242424;

  --fuenteprincipal: 3.5rem;
}

/*Global*/

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

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

/*Contenido*/

body {
  font-size: 16px;
  /* 1rem = 10px */
  font-family: "Bahnschrift Light", "Bahnschrift SemiLight",
    sans-serif;
  background-color: var(--primarylight);
  /*background-image: linear-gradient(to top, #F2F2F2 0%, #F5F5F5 100%);*/
}


.background-light {
  background-color: var(--primarylight);
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
  color: var(--text);
}
.background-light h1{
  color: var(--primarydark)
}

.background-dark {
  background-color: var(--primarydark);
  padding: 4.5rem 2.4rem;
  color: var(--primarylight);
}
.background-dark h1{
  color: var(--primarylight);
}
/*Textos*/
h1 {
  font-size: 3.6rem;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  font-size: 3.2rem;
  font-weight: lighter;
  text-align: center;
}

h3 {
  font-size: 2.4rem;
}

p {
  font-size: 2.2rem;
}
#habs h2{
    text-align: center;
}
#eduyexp h2{
  color: var(--primarydark);
  text-align: left;
  text-transform: none;
}

.location{
  font-size: 2rem;
}

@media (max-width: 768px) {
  /*576px,768px,992px,1200px*/
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.5rem;
    font-weight: lighter;
  }

  h3 {
    font-size: 2rem;
  }

  a {
    font-size: 2rem;
  }

  p {
    font-size: 2.2rem;
  }
}

/*Recursos*/
.logo-main {
  width: 110px;
  height: 35px;
}

.img-me {
  width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*Elementos*/
hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

.hr-dark{
    border-top: 1px solid #a6a9ad26
}

.btn {
  padding: 1.25rem 2.75rem;
  text-decoration: none;
  max-width: 18rem;
  border-radius: 0.2rem;
  margin: 1.5rem 0;
  border: none;
  font-size: 1.7rem;
}
.btn-dark{
    background-color: var(--primarydark);
    color: var(--primarylight);
    font-size: 1.1 rem;
}
.btn-light{
    background-color: var(--light);
    color: var(--primarydark);
}
.btn-light:hover {
  background-color: var(--primarydark);;
  color: var(--light);
  cursor: pointer;
}
.btn-dark:hover {
  background-color: var(--text);
  color: var(--primarylight);
  cursor: pointer;
}

/*Navegación*/
.navbar {
  background: var(--primarydark);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

.navbar-title:hover {
  color: var(--primarylight);
  text-decoration: none;
}

.navbar-text {
  font-size: 18px;
  color: var(--primarylight);
}

.nav-link:hover {
  color: var(--light);
}

.navbar-menu {
  min-width: 35px;
  min-height: 35px;
  color: var(--primarylight);
}

.navbar-toggler:focus {
  outline: none;
}

/*Hero*/
#hero {
  background-image: url("../Imgs/topimgwebp.webp");
  background-size: cover;
  min-height: 720px;
  position: relative;
  margin-top: 5rem;
}

.contenido-hero {
  position: absolute;
  width: 50rem;
  left: 10rem;
  top: 14rem;
}

.contenido-hero h2 {
  text-align: left;
  color: var(--primarylight);
  font-size: 8rem;
  font-weight: lighter;
  margin-bottom: 0.75rem;
}

.contenido-hero p {
  font-size: 2.4rem;
  color: var(--primarylight);
  line-height: 3.5rem;
}

@media (max-width: 768px) {
  .contenido-hero {
    width: 30rem;
    left: 3rem;
    top: 8rem;
  }

  .contenido-hero h2 {
    font-size: 5rem;
  }

  .contenido-hero p {
    font-size: 2.2rem;
    line-height: 3.5rem;
  }
}

/*Otros*/
.ubicacion {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /*align-items: center;*/
}

/*Habilidades*/

.progress{
    height: 1.8rem;
}

.bar-title{
    color: var(--primarylight);
    font-size: 2rem;
    text-transform: none;
    
}
.bar-title:hover{
    text-decoration: none;
    color: var(--primarylight);   
}
.bar-icon{
    font-size: 2.8rem;
}

@media (min-width: 768px) {
  .habilidades {
    display: grid;
    grid: repeat(4, 1fr) / repeat(2, 1fr);
    column-gap: 3rem;
  }

}

/*Servicios*/

@media (min-width: 768px) {
  .servicios {
    display: grid;
    grid: repeat(2, 1fr) / repeat(3, 1fr);
    column-gap: 4.5rem;
  }
}

.servicio {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.servicio h3 {
    font-size: 3rem;
}

.servicio p {
  line-height: 1.5;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.servicio .iconos {
  height: 12rem;
  width: 12rem;
  background-color: var(--light);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primarydark);
  font-size: 6.2rem;
  margin-bottom: 2.5rem;
}
.servicio .iconos:hover {
    font-size: 8rem;
}
/*Contacto*/
.campo{
    padding: 1.25rem 1.25rem;
    font-size: 1.5rem;
}
#contacto a{
    font-size: 2rem;
    text-decoration: none;
    color: var(--text);
}
#contacto .icon-dark{
    font-size: 2.2rem;
}

/*Footer*/
footer .icon-light{
color: var(--primarylight);
font-size: 3.5rem;
}



/*Utilidades*/

.color-light {
  color: var(--primarylight);
}

.color-dark {
  color: var(--primarydark);
}

.margin-icon {
  margin: 0 7.5rem;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .margin-icon {
    margin: 0 1.5rem;
  }
  #contacto a{
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--text);
}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
  .margin-icon {
    margin: 0 2.5rem;
  }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
  .margin-icon {
    margin: 0 5rem;
  }
}