@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Seccion 1 - Base*/

* {
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.section {
  width: 100%;
  height: auto;
}

.section-1__container {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
}

.section-1__logo {
  width: 54px;
  height: 50px;
  margin: 18px 17px;
}

.section-1__menu {
  width: 36px;
  height: 32px;
  margin: 29px 20px;
}

.section-1__menu-responsive {
  display: none;
  gap: 20px;
}

.section-1__text-menu {
  font-size: 24px;
}
.section-1__text {
  margin: 0 42px 58px 42px;
  text-align: center;
  font-size: 48px;
}

.section-1__profile {
  display: block;
  max-width: 100%;
  margin: 20px auto;
  height: auto;
}

/* Seccion 2*/

.section-2 {
  background-color: black;
}

.section-2__container {
  display: flex;
  flex-direction: column;
}

.section-2__tittle {
  text-align: center;
  margin: 55px 52px 42px 52px;
  color: #fff;
  font-size: 32px;
}

.section-2__p {
  text-align: center;
  margin: 0px 32px 57px 31px;
  color: #fff;
  font-size: 16px;
}

.section-2__icon {
  width: 80px;
  height: 80px;
  margin: 0 148px 68px 147px;
}

/* Seccion 3 */

.section-3__tittle {
  text-align: center;
  margin: 70px 52px 0px 52px;
  font-size: 32px;
}

.section-3__container {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.section-3__logo {
  width: 138px;
  height: 138px;
  margin: 104px 119px 0 119px;
}

.section-3__subtittle {
  font-size: 24px;
}

.section-3__p {
  font-size: 16px;
  margin: 0 56px 0 57px;
}

/* Seccion 4 */

.section-4 {
  display: flex;
  flex-direction: column;
  background-color: #141414;
}

.section-4__tittle {
  text-align: center;
  margin: 70px 52px 37px 52px;
  color: #fff;
}

.section-4__form {
  display: flex;
  flex-direction: column;
  margin: 0px 20px;
  color: #fff;
  font-size: 13px;
}

.section-4__inputs {
  width: 335px;
  height: 45px;
}

.section-4__subtittles {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  margin: 27px 0px 9px 0px;
}

.section-4__subtittleTextArea {
  margin-top: 21px;
}

.section-4__textArea {
  width: 335px;
  height: 113px;
  margin: 9px 0 60px 0;
}

.section-4__button {
  width: 335px;
  height: 45px;
  font-weight: 600;
  font-size: 16px;
  background-color: #FFD953;
  margin-bottom: 70px;
  border: none;
  border-radius: 4px;
}

/* Seccion 5 */

.section-5 {
  background-color: #DBDBDB;
}

.section-5__marca {
  display: flex;
  flex-direction: column;
}

.section-5__icon {
  width: 70px;
  height: 71px;
  margin: 53px 0 18px 16px;
}

.section-5__textMarca {
  font-size: 13px;
  margin-left: 20px;
}

.section-5__redesSociales {
  display: flex;
  flex-direction: column;
  margin: 85px 0 119px 20px;
}
.section-5__icons {
  margin-top: 29px;
  width: 29px;
  height: 29px;
}

.section-5__github {
  margin-bottom: 133px;
}

@media(min-width: 376px) {
  .section-1__menu {
    display: none;
  }

  .section-1__menu-responsive {
    display: flex;
    gap: 60px;
    margin: 62px 103px;
  }

  .section-1__logo {
    width: 95px;
    height: 109px;
    margin: 36px 80px;
  }

  .section-1__container-main {
    display: flex;
  }

  .section-1__text {
    margin: 115px 80px;
    text-align:left;
    font-size: 48px;
  }

  .section-1__profile {
    display: block;
    max-width: 435px;
    margin-top: 221px;
    margin-right: 103px;
    height: auto;
  }

  .section-2__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .section-2__icon {
    grid-column: 1;
    grid-row: 1;
    width: 211px;
    height: 211px;
    margin: 145px 90px 182px 306px;
  }

  .section-2__tittle {
    text-align: left;
    grid-column: 2;
    grid-row: 1;
    margin: 132px -100px; 
  }

  .section-2__p {
    text-align: left;
    grid-column: 2;
    grid-row: 1;
    margin: 204px 301px 169px -100px; 
    width: 80%;
    font-size: 24px;
  }

  .section-3__container {
    display: flex;
    flex-direction: row;
  }

  .section-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .section-4__tittle {
    font-size: 48px;
    margin: 116px 77px 488px 304px ;
  }

  .section-4__form {
    margin-top: 116px;
  }

  .section-5 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .section-5__icon {
    width: 105px;
    height: 103px;
  }

  .section-5__marca {
    margin: 98px 0 145px 80px;
  }

  .section-5__redesSociales {
    margin: 95px 0;
  }
}