/* ── Page layout ── */
.contactus {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5.4vh 2.2vh;
  min-height: 100vh;
  height: auto;
  text-transform: uppercase;
}

/* ── Banner ── */
.contactus .ban {
  width: 90%;
  height: 10.5vw;
  margin-top: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/img/Banners/ContactUsBanner.webp) center center / cover;
}

/* ── Heading ── */
.contactus .Title {
  margin-top: 5vh;
  color: #fff;
  font-size: clamp(5vh, 10vw, 10vh);
  font-weight: bolder;
  text-align: center;
  transform: translateY(5.4vh);
  opacity: 0;
  animation: bantextani 1s ease-in-out forwards;
}

@keyframes bantextani {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Form wrapper ── */
.contactus form {
  margin-top: 3.3vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 130.4vh;
  width: 100%;
  position: relative;
  border-radius: 4.3vh;
  z-index: 1000;
}

.contactus form h2 {
  margin: 3.3vh 0;
  text-align: center;
  color: #f1f1f1;
  font-size: 5.4vh;
  font-weight: bolder;
  text-shadow: 0 0.3vh 0 rgb(156, 156, 156);
}

.contactus form h2 span {
  color: var(--ThemeColor-);
  text-shadow: 0 0.3vh 0 rgb(136, 111, 0);
}

/* ── Contact form panel ── */
.contactus .contactform {
  position: relative;
  padding: 3.3vh 6.5vh 3.3vh 3.3vh;
  max-width: 54.3vh;
  width: 80%;
  height: 65.2vh;
  font-weight: 800;
  font-size: 1.3vh;
  border-radius: 3.8vh;
}

/* ── Labels & inputs ── */
.contactus label {
  display: block;
  margin-bottom: 2vh;
  color: var(--ThemeColor-);
  position: relative;
}

.contactus label span {
  display: block;
  margin-bottom: 0.7vh;
  margin-top: 1.1vh;
  margin-left: 1.1vh;
  font-weight: 500;
  color: var(--ThemeColor-);
}

.contactus input[type="text"],
.contactus input[type="email"],
.contactus input[type="tel"],
.contactus textarea {
  width: 100%;
  padding: 1.3vh 1.5vh;
  font-size: 1.7vh;
  border: none;
  border-radius: 1.1vh;
  background-color: #262626;
  box-shadow: 0 0.3vh 0 0.1vh rgba(0, 0, 0, 0.418);
  color: #fff;
  transition: box-shadow 0.1s ease-in-out;
}

.textp {
  font-size: 1.7vh;
}

.contactus input:focus,
.contactus textarea:focus {
  box-shadow: 0 0.3vh 0 0.1vh var(--ThemeColor-);
  outline: none;
}

.contactus textarea {
  resize: none;
  min-height: 10.9vh;
}

.test {
  width: 100%;
}

/* ── Submit button ── */
.contactus button[type="submit"] {
  text-transform: uppercase;
  font-size: 1.8vh;
  color: var(--ThemeColor-);
  font-weight: 600;
  margin-top: 1vh;
  padding: 1.2vh 2vh;
  border-radius: 1.4vh;
  border: 0.4vh solid var(--ThemeColor-);
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: padding 0.3s ease;
}

.contactus button[type="submit"]::after {
  content: "";
  position: absolute;
  background: url(/img/default/icon/right-arrow.webp) center / cover no-repeat;
  height: 1.8vh;
  width: 1.8vh;
  top: 50%;
  right: 0.5vh;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contactus button[type="submit"]:hover {
  padding: 1.2vh 4vh 1.2vh 1vh;
}

.contactus button[type="submit"]:hover::after {
  opacity: 1;
}

/* ── Misc ── */
.g-recaptcha {
  position: absolute;
  top: 83.5%;
  left: 33%;
  transform: translate(-50%, -50%);
}

.hidden {
  display: none;
}

.r {
  font-size: 4vh;
}

/* ── Info panel ── */
.contactus .info {
  width: 54.3vh;
  height: 71.7vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0 3.3vh;
  border-radius: 3.8vh;
}

.info .one {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.info .one .image {
  width: 2.5vh;
  height: 2.5vh;
  margin-right: 1vh;
  background-size: cover;
}

.info .adress .one .image {
  background-image: url(/img/default/icon/maps-and-flags\ 1.webp);
}
.info .phone .one .image {
  background-image: url(/img/default/icon/phone-call\ 1.webp);
}
.info .whatsapp .one .image {
  background-image: url(/img/default/icon/whatsapp\ 1.webp);
}
.info .email .one .image {
  background-image: url(/img/default/icon/email\ 1.webp);
}

.info .one .text {
  color: var(--ThemeColor-);
  font-weight: bold;
  margin: 1.1vh 0;
  font-size: 1.9vh;
}

.info .two {
  color: white;
  margin-left: 2.2vh;
  font-size: 1.9vh;
  line-height: 2.5vh;
}

/* ── Map iframe ── */
.contactus iframe {
  width: 100%;
  border-radius: 2.2vh;
  margin-top: 7.6vh;
  height: 32.6vh;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .contactus form {
    height: 145vh;
    flex-direction: column;
  }

  .contactus .info {
    width: 90%;
    height: 71.7vh;
    backdrop-filter: blur(1.1vh);
  }

  .contactus .contactform {
    width: 80%;
    height: 65.2vh;
  }
}