* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }
  * li {
    list-style: none; }

body {
  height: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: 'Lato', sans-serif; }

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #e7f9ff;
  position: relative; }
  header .menu-abrir, header .menu-cerrar {
    display: none;
    align-items: center; }
  @media (max-width: 768px) {
    header {
      flex-direction: row;
      justify-content: space-around; }
      header .button {
        display: none; }
      header .menu-abrir, header .menu-cerrar {
        display: block;
        color: black; }
      header .menu {
        position: absolute;
        top: -400%;
        transition: top .4s ease-out; }
        header .menu:target {
          top: 0; }
        header .menu ul {
          flex-direction: column;
          margin-top: 25px; } }
  header .menu {
    width: 100%;
    background-color: #3d3b3b;
    color: white; }
    header .menu ul {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2em;
      margin-bottom: 0; }
      header .menu ul li {
        padding: 0 10px; }
        header .menu ul li:hover {
          background-color: #e7f9ff;
          transition: .5s; }
        header .menu ul li a {
          font-size: 1.5vw;
          text-decoration: none;
          color: white;
          text-transform: uppercase; }
          @media (max-width: 768px) {
            header .menu ul li a {
              font-size: 3vw; } }
          @media (max-width: 520px) {
            header .menu ul li a {
              font-size: 5vw; } }
          header .menu ul li a:hover {
            color: black; }

.main-index {
  background-image: url(../img/nurse-helping-patient.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center; }
  .main-index .container {
    display: flex;
    justify-content: center;
    margin-left: 60%;
    margin-right: 10%;
    border: solid rgba(250, 250, 250, 0.3) 1px;
    padding: 15px 15px; }
    @media (max-width: 768px) {
      .main-index .container {
        margin-left: auto;
        margin-right: auto; } }
    @media (max-width: 574px) {
      .main-index .container {
        margin: 0 5%; } }
    .main-index .container div {
      background-color: rgba(250, 250, 250, 0.6);
      display: flex;
      flex-direction: column;
      padding: 10px; }
      .main-index .container div h1 {
        font-size: 1.6em;
        text-align: center;
        font-weight: bolder;
        color: #09708f; }
      .main-index .container div h2 {
        font-size: 2em;
        text-align: center;
        font-weight: bolder;
        color: #09708f;
        text-transform: uppercase; }
      .main-index .container div p {
        text-align: center; }

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #09708f;
  color: black; }
  footer section {
    display: flex;
    align-items: center;
    justify-content: space-around; }
    @media (max-width: 771px) {
      footer section {
        flex-direction: column; } }
    @media (max-width: 531px) {
      footer section {
        text-align: center; } }
    footer section img {
      width: 180px;
      height: 75px; }
  footer ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 0; }
    @media (max-width: 770px) {
      footer ul {
        flex-direction: column;
        align-items: center; } }
    footer ul i {
      padding: 5px; }
  footer p {
    text-align: center;
    color: white;
    margin: 0 0;
    height: 100%;
    background-color: #201e1e; }

.main-nosotros {
  display: flex;
  background-color: #1d1b1a;
  color: white; }
  @media (max-width: 768px) {
    .main-nosotros .nosotros {
      padding: 50px;
      background-image: url(../img/mundo.jpg);
      background-position: center;
      background-repeat: no-repeat; }
      .main-nosotros .nosotros p {
        background-color: rgba(250, 250, 250, 0.4);
        color: black;
        font-weight: bold; }
    .main-nosotros img {
      display: none; } }
  @media (max-width: 425px) {
    .main-nosotros .nosotros {
      padding: 15px; } }
  .main-nosotros img {
    margin-left: 25px; }
  .main-nosotros .nosotros {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .main-nosotros .nosotros h2 {
      text-align: center; }
    .main-nosotros .nosotros p {
      padding: 30px 40px; }

.main-servicios {
  display: flex;
  flex-direction: column;
  background-color: #e7f9ff; }
  .main-servicios .titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 100%;
    height: 15vh;
    background-color: #09708f; }
    .main-servicios .titulo h2 {
      font-size: 4em; }
  .main-servicios .containerServicios {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #e7f9ff;
    color: white;
    margin-top: 35px; }
    .main-servicios .containerServicios .servicios {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30%;
      padding: 20px;
      margin: 10px 10px;
      box-shadow: 0 0 40px -5px rgba(121, 103, 103, 0.301); }
      @media (max-width: 851px) {
        .main-servicios .containerServicios .servicios {
          flex-direction: column;
          width: 40%; } }
      @media (max-width: 614px) {
        .main-servicios .containerServicios .servicios {
          flex-direction: column;
          width: 80%; } }
      .main-servicios .containerServicios .servicios p {
        text-align: center;
        padding: 15px;
        color: black;
        font-weight: bold; }
      .main-servicios .containerServicios .servicios i {
        text-align: center;
        font-size: 70px;
        padding: 30px;
        border-radius: 100%;
        color: white;
        background-color: #09708f; }

.main-preguntas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #e7f9ff;
  color: black; }
  .main-preguntas .titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 100%;
    height: 15vh;
    background-color: #09708f; }
    .main-preguntas .titulo h2 {
      font-size: 4em; }
  .main-preguntas .preguntas {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5% 0;
    width: 100%; }
  .main-preguntas div {
    width: 70%;
    margin-top: .5em;
    padding: .7em;
    box-shadow: 0 0 40px -5px rgba(121, 103, 103, 0.301);
    border-radius: 25px;
    background-color: #e7f9ff; }
  .main-preguntas .consulta {
    text-align: center;
    background-color: #e7f9ff;
    color: black;
    width: 50%;
    padding: .1em;
    border-radius: 25px; }
    .main-preguntas .consulta p i {
      background-color: #53f553;
      border-radius: 50%; }
    @media (max-width: 534px) {
      .main-preguntas .consulta {
        width: 90%; } }
    .main-preguntas .consulta p {
      font-weight: bold;
      margin: 0 0; }
  @media (max-width: 728px) {
    .main-preguntas {
      padding: 0 20px; }
      .main-preguntas div {
        width: 90%; } }

.main-contacto {
  background-color: #e7f9ff;
  display: flex;
  flex-direction: column; }
  .main-contacto .titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 100%;
    height: 15vh;
    background-color: #09708f; }
    .main-contacto .titulo h2 {
      font-size: 4em; }
  .main-contacto .contacto {
    display: flex;
    justify-content: space-around;
    margin: 35px 15px;
    align-items: center; }
    @media (max-width: 576px) {
      .main-contacto .contacto {
        flex-direction: column-reverse; } }
    .main-contacto .contacto iframe {
      height: 50vh;
      width: 50%;
      box-shadow: 0 0 40px -5px rgba(121, 103, 103, 0.301); }
      @media (max-width: 576px) {
        .main-contacto .contacto iframe {
          width: 85%;
          height: 30vh; } }