.title {
  margin-bottom: 24px;
}
.title h1,
.title h2 {
  margin-bottom: 12px;
}

.contact-template {
  height: 558px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #444444;
  display: flex;
}
.contact-template .list-contact-info {
  width: 466px;
  min-width: 466px;
  height: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 0 40px 0 37px;
  color: #fff;
  gap: 60px;
  background-image: url(./../assets/img/banners/home-banner-1.jpeg);
  background-size: cover;
  position: relative;
}
.contact-template .list-contact-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
}
.contact-template .list-contact-info h2 {
  color: #fff !important;
  z-index: 3;
}
.contact-template .list-contact-info h4 {
  margin-bottom: 4px;
}
.contact-template .list-contact-info .contact-info {
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.contact-template .list-contact-info .contact-info .item {
  display: flex;
  gap: 25px;
}
.contact-template .list-contact-info .contact-info .item p {
  font-weight: 300;
}
.contact-template .list-contact-form {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
  justify-content: center;
  padding: 0 56px;
}
.contact-template .list-contact-form h1 {
  margin-bottom: 10px;
}
.contact-template .list-contact-form > p,
.contact-template .list-contact-form .title-form > p {
  color: hsla(0, 0%, 27%, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 6px;
  font-size: 16px;
}
.contact-template .list-contact-form .title-form h1,
.contact-template .list-contact-form .title-form h2 {
  color: #444444;
}
.contact-template .list-contact-form .row {
  --bs-gutter-x: 36px;
}

.career-template {
  height: 602px;
}
.career-template .list-contact-info {
  width: 50%;
  min-width: 50%;
  background-image: url(./../assets/img/others/career.jpg);
}
.career-template .list-contact-info::before {
  display: none;
}
.career-template .list-contact-form {
  gap: 24px;
  padding: 0 56px 0 100px;
}

form .alert {
  padding: 10px 20px !important;
  font-size: 16px !important;
}

@media only screen and (max-width: 1023.98px) {
  .contact-template .list-contact-info,
  career-template .list-contact-info {
    width: 50%;
    min-width: 50%;
  }
  .contact-template .list-contact-form,
  career-template .list-contact-form {
    padding: 0 40px;
  }
  .contact-template .list-contact-form .row,
  career-template .list-contact-form .row {
    --bs-gutter-x: 20px;
  }
}
@media only screen and (max-width: 767.98px) {
  .contact-template {
    height: unset;
    display: grid;
  }
  .contact-template .list-contact-info {
    order: 2;
    width: 100%;
    min-width: 100%;
    padding: 30px;
    gap: 30px;
  }
  .contact-template .list-contact-info .contact-info {
    gap: 20px;
  }
  .contact-template .list-contact-form {
    padding: 30px;
    order: 1;
  }
  .career-template .list-contact-info {
    width: 100%;
    aspect-ratio: 1/1;
  }
}