/* Estilos CSS */

body {
  font-family: "Raleway", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

button {
  text-decoration: none;
}

.container {
  padding: 0 18%;
}

@media screen and (max-width: 1100px) {
  .container {
  padding: 0 10%;
  }
}

h2 {
  position: relative;
  padding-left: 20px;
   font-size: 35px;
}

#nosotros,
#equipo,
#contacto{
  background-color: #f5f5f5;
  padding: 1vw 0;
  text-align: justify;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 100%;
  background-color: skyblue;
}

#servicios,
#credenciales {
  background: linear-gradient(135deg, #d1ecef, #27b78f); /* Adjust the colors as desired */
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 1vw 0;
}

#servicios h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 100%;
  background-color: #142f4a;
}

#credenciales h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 100%;
  background-color: #142f4a;
}

/*HEADER*/

  header {
    background-color: white;
    width: 100%;
    z-index: 1000;
    color: #142f4a;
    font-weight: bold;
  }

  nav {
    display: flex;
    align-items: center;
  }

  nav .logo {
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
  }

  .logo img {
    width: 6vw;
    height: auto;
    margin: 10%
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav li {
    display: inline-block;
    margin: 0 10px;
    text-align: center;
  }

  nav a {
    display: block;
    padding: 10px;
    transition: background-color 0.3s ease;
    color: #142f4a;
    font-weight: bold;
  }

  nav a:hover {
    background-color: #a2d3ce;
    color: #142f4a;
  }

  nav .navigation {
    margin: auto;
  }

  nav .indicators {
    margin: auto;
  }

  @media screen and (max-width: 1100px) {
    .logo img {
      width: 15vw; /* Adjust the width as needed */
    }

    nav .navigation{
      display: none;
    }
  }

/*MAIN*/

  main {
  }

  /*SHOWCASE*/

    #showcase {
      background-image: url(showcase.jpg);
      background-size: cover;
      background-position: center;
      text-align: center;
      padding: 5%;
    }

    #showcase h1 {
      background-color: rgba(39, 183, 143, 0.7);
      padding: 1vw 2vw;
      color: white;
      border-radius: 0.9vw;
      font-size: 2.5vw;
      text-shadow: 0.2vw 0.1vw 0 #142f4a;
    }

    #showcase p {
      background-color: rgba(39, 183, 143, 0.8);
      padding: 1vw 5vw;
      color: white;
      border-radius: 0.9vw;
      font-size: 1.5vw;
      text-shadow: 0.1vw 0.1vw 0 #142f4a;
      font-weight: bold;
    }

    .btn {
      background-color: #27b78f;
      color: white;
      font-weight: bold;
      display: inline-block;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #a2d3ce;
    }

    /*MOBILE*/

    @media screen and (max-width: 1100px) {
      #showcase h1 {
      font-size: 4.5vw;
      text-shadow: 0.4vw 0.2vw 0 #142f4a;
    }

    #showcase p {
      font-size: 3vw;
      text-shadow: 0.2vw 0.2vw 0 #142f4a;
      padding: 1vw 4vw;
    }

    h2{
      font-size: 30px;
    }
    }

  /*NOSOTROS*/

    .sobre{
      display: flex;
      align-items: center;
    }

    .sobre img{
      width: 50%;
      height: auto;
      border-radius: 10%;
    }

    .stext{
      background-color: rgba(39, 183, 143, 0.3);
      margin: 1vw;
      padding: 4vw;
      border-radius: 10%;
      width: 50%;
      font-size: 1vw;
      font-weight: bold;
    }

    /*MOBILE*/

    @media screen and (max-width: 1100px) {
     .sobre{
      flex-direction: column;
      }

      #nosotros img{
        width: 75vw;
        height: auto;
      }

      .stext{
        width: 100%;
        background-color: #f5f5f5;
        font-size: 3vw;
      }
    }

  /*SERVICIOS*/
    .servicio h3 {
      font-size: 1.5vw;
      background-color: #142f4a;
      color: white;
      width: 36vw;
      padding: 1vw;
      border-radius: 4px;
    }

    .servicio p {
      font-weight: bold;
    }

    /*MOBILE*/
    
    @media screen and (max-width: 1100px) {
      .servicio h3 {
        font-size: 3.5vw;
        width: 50vw;
        padding: 2vw;
      }

      .servicio {
        font-size: 3vw;
      }
    }

  /*EQUIPO*/

    .fullteam{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

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

    .persona h3{
      text-align: center;
      background: linear-gradient(45deg, #27b78f 0%, #142f4a 100%);
      color: white;
      font-weight: bold;
      padding: 0.5vw 1vw;
      border-radius: 4px;
      margin: 0.5vw 1vw;
    }

    .persona h3:nth-child(2){
      background: #142f4a;
    }

    .persona img {
      width: 10vw;
      height: auto;
      border-radius: 10px;
    }

    .link h3{
       background: #0e76a8;
    }

    /*MOBILE*/
      
      @media screen and (max-width: 1100px) {

        .fullteam{
          flex-direction: column;
        }

        .persona {
          flex-direction: row;
          padding: 2vw;
        }

        .persona h3{
          margin: 1vw;
          padding: 1.5vw 8vw
        }

        .persona img {
        width: 25vw;
        }
      }

  /*CREDENCIALES*/

    #credenciales {
    }

    #credenciales img {
      width: 11vw;
      height: auto;
      margin: 1%;
      box-shadow: 2px 2px 0 #142f4a;
    }

    /*MOBILE*/

    @media screen and (max-width: 1100px) {
      #credenciales img {
      width: 35vw;
      }
    }

  /*CONTACTOS*/
    .cont {
      display: flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      list-style-type: none;
      font-size: 0.75vw;
      width: 75%;
    }

    .cont a{
      text-decoration: none;
      color: white;
    }

    .cont h3{
      background-color: #142f4a;
      text-align: center;
        color: white;
        font-weight: bold;
      padding: 0.5vw 1vw;
        border-radius: 4px;
        margin: 0.5vw 1vw;
    }

    .cont div{
      display: flex;
    }

    .cont div h3{
      background: linear-gradient(45deg, #27b78f 0%, #142f4a 100%);
    }

    #contacto ul{
      background-color: #d1ecef;
    }

    #contacto ul:nth-of-type(2) {
      background-color: white;
    }

    #DL{
      background: grey;
    }

    #DL:hover{
      background: #142f4a;
    }

    /*MOBILE*/

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

      .cont div{
        flex-direction: column;
      }

      .cont {
        padding: 1vw;
        width: 100%;
      }

      .cont h3{
        font-size: 3vw;
        padding: 1.2vw;
      }
    }

/*FOOTER*/
  footer {
    background-color: #142f4a;
    color: #d1ecef;
    text-align: center;
    padding: 1% 0;
  }

  footer p {
    margin: 2% 0;
  }

  .linkedin-logo {
        position: fixed;
        bottom: 10px;
        right: 20px;
        z-index: 1000;
      }

  .linkedin-logo img {
    width: 4vw;
    height: auto;
    animation: shake 2s infinite;
  }

  @media screen and (max-width: 1100px) {
    .linkedin-logo img {
    width: 7vw;
  }
  }

  @keyframes shake {
        0% { transform: rotate(0deg); }
        10% { transform: rotate(-10deg); }
        20% { transform: rotate(10deg); }
        30% { transform: rotate(-10deg); }
        40% { transform: rotate(10deg); }
        50% { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
      }