:root {
  --bs-font-sans-serif: "Roboto", sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
}

.contact_us {
  width: var(--main-width);

  margin: 0 auto;

  .title {
    margin-top: 2rem;

    text-align: center;

    h3 {
      font-size: 28px;

      color: var(--main-color);

      font-weight: 900;
    }

    h5 {
      font-size: 20px;

      font-weight: 500;
    }

    p {
      font-size: 16px;

      color: var(--text-color);

      font-weight: 400;
    }
  }

  .contact-body {
    margin-top: 2rem;

    .gallery {
      display: grid;

      grid-template-columns: repeat(8, 1fr);

      grid-template-rows: repeat(8, 7vw);

      column-gap: 0.5rem;

      row-gap: 0.5rem;
    }

    figure {
      margin: 0rem;
    }

    .gallery__img {
      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;
    }

    .gallery__item--1 {
      grid-column-start: 1;

      grid-column-end: 5;

      grid-row-start: 1;

      grid-row-end: 5;
    }

    .gallery__item--2 {
      grid-column-start: 1;

      grid-column-end: 5;

      grid-row-start: 5;

      grid-row-end: 9;
    }

    .gallery__item--3 {
      grid-column-start: 5;

      grid-column-end: 7;

      grid-row-start: 1;

      grid-row-end: 5;
    }

    .gallery__item--4 {
      grid-column-start: 5;

      grid-column-end: 7;

      grid-row-start: 5;

      grid-row-end: 9;
    }

    .gallery__item--5 {
      grid-column-start: 7;

      grid-column-end: 9;

      grid-row-start: 1;

      grid-row-end: 9;
    }

    .contact-form {
      display: flex;

      margin-top: 2rem;

      justify-content: space-between;

      .form-left {
        width: 60%;

        background-color: #f8f8f8;

        padding: 2rem;

        .head {
          margin-bottom: 1rem;

          h3 {
            font-size: 25px;
          }
        }

        label,
        select,
        input {
          font-size: 17px;
        }

        label {
          font-weight: 500;

          color: var(--text-color);
        }
      }

      .form-right {
        width: 38%;

        .top-info {
          background-color: #024568;

          padding: 2rem;

          height: 60%;

          h4 {
            font-size: 25px;

            color: var(--white);
          }

          .media {
            display: flex;

            align-items: center;

            padding-top: 1rem;

            p {
              font-size: 16px;

              color: var(--white);

              margin-left: 1rem;

              margin-bottom: 0;
            }
          }

          .other-info {
            display: flex;

            margin-top: 1rem;

            img {
              padding-right: 0.5rem;
            }
          }
        }

        .mape {
          margin-top: 2%;

          height: 38%;
        }
      }

      .btn-primary {
        padding: 8px 30px;

        background-color: var(--main-color);

        border: none;
      }
    }
  }
}

@media (max-width: 1380px) {
  .contact_us {
    width: auto;

    padding: 1rem;
  }
}

@media (max-width: 1280px) {
  .contact_us {
    & .contact-body {
      & .contact-form {
        & .form-right {
          & .top-info {
            height: 55%;

            padding: 1rem;

            .media {
              display: flex;

              align-items: center;

              padding-top: 0.5rem;
            }
          }

          .mape {
            margin-top: 2%;

            height: 43%;
          }
        }
      }
    }
  }
}

@media (max-width: 1080px) {
  .contact_us {
    .title {
      h3 {
        font-size: 25px;
      }

      h5 {
        font-size: 18px;
      }

      p {
        font-size: 15px;
      }
    }

    & .contact-body {
      & .contact-form {
        & .form-left {
          & .head {
            h3 {
              font-size: 22px;
            }
          }

          label,
          select,
          input {
            font-size: 15px;
          }
        }

        & .form-right {
          & .top-info {
            height: 55%;

            h4 {
              font-size: 22px;
            }

            & .media {
              p {
                font-size: 14px;
              }
            }

            .other-info {
              img {
                width: 13%;
              }
            }
          }

          .mape {
            height: 43%;
          }
        }

        .btn-primary {
          padding: 6px 20px;
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 980px) {
  .contact_us {
    .title {
      margin-top: 1rem;

      h3 {
        font-size: 22px;
      }

      h5 {
        font-size: 16px;
      }

      p {
        font-size: 14px;
      }
    }

    & .contact-body {
      & .contact-form {
        & .form-left {
          & .head {
            h3 {
              font-size: 20px;
            }
          }

          label,
          select,
          input,textarea {
            font-size: 14px;
          }
        }

        & .form-right {
          & .top-info {
            h4 {
              font-size: 20px;
            }

            & .media {
              p {
                font-size: 14px;
              }
            }

            .other-info {
              img {
                width: 13%;
              }
            }
          }
        }
        .btn-primary {
          padding: 5px 20px;
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 880px) {
  .contact_us {
    & .contact-body {
      & .contact-form {
        margin-top: 1rem;
        .form-left {
          padding: 0.5rem;
        }
        & .form-right {
          width: 39%;
          & .top-info {
            & .media {
              img {
                width: 10%;
              }
            }
            .other-info {
              margin-top: 0.2rem;
            }
          }
        }
      }
    }
    textarea.form-control {
      min-height: 80px;
      height: 150px;
    }
  }
}

@media (max-width: 780px) {
  .contact_us {
    .title {
      margin-top: .8rem;

      h3 {
        font-size: 20px;
      }

      h5 {
        font-size: 15px;
      }

      p {
        font-size: 13px;
      }
    }

    & .contact-body {
      & .contact-form {
        display: block;
        & .form-left {
          width: 100%;
          & .head {
            h3 {
              font-size: 20px;
            }
          }

          label,
          select,
          input {
            font-size: 13px;
          }
        }

        & .form-right {
          width: 100%;
          margin-top: 2rem;
          & .top-info {
            h4 {
              font-size: 20px;
            }

            & .media {
              p {
                font-size: 14px;
              }
              img {
                width: 5%;
              }
            }

            .other-info {
              img {
                width: 5%;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 600px) {
  .contact_us {
    .title {
      margin-top: .5rem;

      h3 {
        font-size:18px;
      }

      h5 {
        font-size: 14px;
      }

      p {
        font-size: 13px;
      }
    }

    & .contact-body {
        margin-top: 1rem;
      & .contact-form {
        & .form-left {
          & .head {
            h3 {
              font-size: 18px;
            }
          }

          label,
          select,
          input {
            font-size: 13px;
          }
        }

        & .form-right {
          width: 100%;
          margin-top: 2rem;
          & .top-info {
            h4 {
              font-size: 18px;
            }

            & .media {
              p {
                font-size: 13px;
              }
              img {
                width: 8%;
              }
            }

            .other-info {
              img {
                width: 8%;
              }
            }
          }
        }
      }
    }
  }
}