p {
  color: #5d5d5d;
}
label,
span {
  display: block;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  > h2 {
    font-size: 5rem;
    margin-bottom: 0;
  }
  > p {
    margin: 1rem;

    font-size: 1.5rem;
    width: 40%;
  }
}

.container .forms-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-top: 2rem;
  h2 {
    margin-bottom: 0.5rem;
    font-size: 2.1rem;
  }
  p {
    width: 40%;
    font-size: 1.1rem;
  }
  span.error{
    text-align: center;
    color: #dc2527;
    background-color: #fdcac9;
    padding:  .5rem 1rem;
    text-align: center;
    width: 100%;
    border-radius: 5px;
  }

  form {
    border: 1.5px solid #ddd;
    width: 35%;
    padding: 2rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 1px 1px 0.7rem #ddd;

    .item-forms {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 1rem;
      span {
        padding: 0.5rem;
        gap: 0.5rem;
        width: 100%;
        display: flex;
        flex-direction: column;

        input,
        select,
        textarea {
          width: 100%;
          border-radius: 10px;
          padding: 0.7rem;
          border: 1px solid #eee;
          background-color: #f1f1f1;
          resize: vertical;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
      }
    }
    button {
      width: 100%;
      border-radius: 5px;
    }
  }
}

.container .ubication-container {
  font-size: 1.5rem;
  padding: 1rem;
  gap: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > p {
    font-size: 1.5rem;
  }
  > ul {
    width: 70%;
    padding: 1rem;
    display: flex;
    gap: 2rem;
    justify-content: center;

    > li {
      border: 2px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      width: 550px;
      transition: 0.35s all;

      iframe {
        transition: 0.35s all;
      }
      .info {
        transition: 0.35s all;
        padding: 1rem;
        p {
          text-wrap: wrap;
          display: block;
          padding: initial;
          margin: initial;
          font-size: 1rem;
          margin-bottom: 2rem;
        }
        h2 {
          font-size: 1.5rem;
        }
        ul {
          li {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;

            address {
              display: flex;
              align-items: center;
              gap: 1rem;
            }
            img {
              margin-right: 5px;
              width: 35px;
              height: 35px;
              padding: 5px;
              border: 1px solid #000;
              object-fit: scale-down;
              border-radius: 5px;
              filter: invert(1);
              background-color: #fff;
            }
            a {
              text-decoration: none;
              color: #4d4d4d;
            }
          }
        }
      }
    }

    > li:hover {
      box-shadow: 1px 1px 1rem #a8a8a8;
      transform: translateY(-20px);
      iframe {
        transform: scale(1.05);
      }
      .info {
        transform: translateY(-5px);
      }
    }
  }
}

@media only screen and (max-width: 750px) {
  .container {
    > h2 {
      font-size: 2rem;
      margin-bottom: 0;
      text-align: center;
    }
    > p {
      font-size: 1rem;
      width: 100%;
    }

    .forms-container {
      width: 100%;
      form {
        padding: 1rem;
        width: 100%;
        align-items: center;
        button {
          height: 2.5rem;
          width: 80%;
        }
        .item-forms {
          flex-direction: column;
        }
      }
    }
    .ubication-container {
      h2 {
        font-size: 2rem;
        text-align: center;
      }
      p {
        font-size: 1rem;
        margin: 0;
      }

      ul {
        flex-direction: column;
        padding: 0;
        width: 100%;
        gap: 3rem;
        li {
          width: 100%;
          font-size: 1rem;

          h2 {
            text-align: start;
          }
          p {
            font-size: 0.8rem;
            text-align: start;
          }
          .info {
            ul {
              li {
                width: 100%;
                address,a {
                  width: 100%;
                }
              }
            }
          }
        }

        > li:hover {
          box-shadow: inherit;
          transform: none;
          iframe {
            transform: none;
          }
          .info {
            transform: none;
          }
        }
      }
    }
  }
}