/* =========================================
CONTACT HERO SECTION
========================================= */

.contact-hero-section {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: 180px 0 120px;

  background:
    linear-gradient(
      90deg,
      rgba(20, 28, 24, 0.68) 0%,
      rgba(20, 28, 24, 0.42) 38%,
      rgba(20, 28, 24, 0.12) 100%
    ),
    url('../img/bg/contact.webp');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* =========================================
OVERLAY
========================================= */

.contact-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.02) 100%
    );

  z-index: 1;
}

/* =========================================
CONTAINER
========================================= */

.contact-hero-section .container {
  position: relative;
  z-index: 5;
}

/* =========================================
CONTENT
========================================= */

.contact-hero-content {
  max-width: 720px;
}

/* =========================================
KICKER
========================================= */

.contact-hero-kicker {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding-left: 52px;

  margin-bottom: 22px;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,0.78);
}

.contact-hero-kicker::before {
  content: '';

  position: absolute;

  left: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 38px;
  height: 1px;

  background: #d7b37a;
}

/* =========================================
HEADING
========================================= */

.contact-hero-content h1 {
  margin: 0 0 26px;

  font-size: clamp(46px, 5vw, 82px);

  line-height: 1.02;

  font-weight: 700;

  letter-spacing: -2px;

  color: #ffffff;
}

.contact-hero-content h1 span {
  display: block;

  color: #d7b37a;
}

/* =========================================
PARAGRAPH
========================================= */

.contact-hero-content p {
  margin: 0;

  max-width: 640px;

  font-size: 16px;

  line-height: 1.9;

  font-weight: 400;

  color: rgba(255,255,255,0.84);
}

/* =========================================
BUTTONS
========================================= */

.contact-hero-buttons {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 42px;

  flex-wrap: wrap;
}

.contact-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 220px;
  height: 58px;

  padding: 0 30px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-decoration: none;

  transition: 0.35s ease;
}

/* PRIMARY */

.primary-btn {
  background: #d7b37a;

  color: #142018;
}

.primary-btn:hover {
  transform: translateY(-3px);

  background: #ffffff;

  color: #142018;
}

/* SECONDARY */

.secondary-btn {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgb(255 242 222 / 80%);
  backdrop-filter: blur(10px);
  color: #000000;
}

.secondary-btn:hover {
  transform: translateY(-3px);

  background: rgba(255,255,255,0.14);

  border-color: rgba(255,255,255,0.34);

  color: #ffffff;
}

/* =========================================
TABLET
========================================= */

@media (max-width: 991px) {

  .contact-hero-section {
    padding: 160px 0 100px;

    background-position: 65% center;
  }

  .contact-hero-content h1 {
    font-size: 64px;
  }

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 767px) {

  .contact-hero-section {
    align-items: flex-end;

    min-height: 780px;

    padding: 130px 0 70px;

    background:
      linear-gradient(
        to top,
        rgba(20, 28, 24, 0.78) 0%,
        rgba(20, 28, 24, 0.34) 42%,
        rgba(20, 28, 24, 0.08) 100%
      ),
      url('../img/bg/contact.webp');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .contact-hero-kicker {
    padding-left: 40px;

    margin-bottom: 18px;

    font-size: 10px;

    letter-spacing: 1.5px;
  }

  .contact-hero-kicker::before {
    width: 28px;
  }

  .contact-hero-content h1 {
    font-size: 42px;

    line-height: 1.08;

    letter-spacing: -1px;
  }

  .contact-hero-content p {
    font-size: 14px;

    line-height: 1.8;
  }

  .contact-hero-buttons {
    gap: 14px;

    margin-top: 34px;
  }

  .contact-btn {
    width: 100%;

    min-width: 100%;

    height: 54px;

    font-size: 12px;
  }

}

/* =========================================
CONTACT FORM + MAP SECTION
========================================= */

.eco-contact-section {
  position: relative;

  padding: 110px 0;

  background:
    linear-gradient(
      180deg,
      #f4e8db 0%,
      #ead8c7 100%
    );

  overflow: hidden;
}

/* =========================================
WRAPPER
========================================= */

.eco-contact-wrapper {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 24px;

  align-items: stretch;
}

/* =========================================
FORM BOX
========================================= */

.eco-contact-form-box {
  position: relative;

  padding: 42px;

  border-radius: 30px;

  background: rgba(255,255,255,0.55);

  border: 1px solid rgba(24,57,47,0.08);

  backdrop-filter: blur(12px);
}

/* =========================================
KICKER
========================================= */

.eco-contact-kicker {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding-left: 48px;

  margin-bottom: 16px;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #18392f;
}

.eco-contact-kicker::before {
  content: '';

  position: absolute;

  left: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 34px;
  height: 1px;

  background: #b9915f;
}

/* =========================================
HEADING
========================================= */

.eco-contact-form-box h2 {
  margin: 0 0 14px;

  font-size: clamp(38px,4vw,58px);

  line-height: 1.02;

  font-weight: 700;

  letter-spacing: -2px;

  color: #18392f;
}

.eco-contact-form-box h2 span {
  color: #b9915f;
}

/* =========================================
TEXT
========================================= */

.eco-contact-form-box p {
  margin: 0 0 28px;

  max-width: 500px;

  font-size: 14px;

  line-height: 1.8;

  color: rgba(24,57,47,0.74);
}

/* =========================================
FORM
========================================= */

.eco-contact-form {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

/* =========================================
INPUTS
========================================= */

.eco-contact-form input,
.eco-contact-form textarea {
  width: 100%;

  height: 56px;

  padding: 0 20px;

  border: 1px solid rgba(24,57,47,0.10);

  border-radius: 16px;

  background: rgba(255,255,255,0.86);

  font-size: 14px;

  color: #18392f;

  outline: none;

  transition: 0.3s ease;
}

/* TEXTAREA */

.eco-contact-form textarea {
  height: 120px;

  padding-top: 18px;

  resize: none;
}

/* PLACEHOLDER */

.eco-contact-form input::placeholder,
.eco-contact-form textarea::placeholder {
  color: rgba(24,57,47,0.48);

  font-size: 13px;
}

/* FOCUS */

.eco-contact-form input:focus,
.eco-contact-form textarea:focus {
  border-color: #b9915f;

  background: #ffffff;

  box-shadow: 0 0 0 4px rgba(185,145,95,0.08);
}

/* =========================================
BUTTON
========================================= */

.eco-contact-btn {
  margin-top: 4px;

  height: 56px;

  border: none;

  border-radius: 60px;

  background: #18392f;

  color: #ffffff;

  font-size: 13px;
  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  transition: 0.35s ease;
}

.eco-contact-btn:hover {
  transform: translateY(-3px);

  background: #10271f;
}

/* =========================================
MAP BOX
========================================= */

.eco-map-box {
  position: relative;

  overflow: hidden;

  border-radius: 30px;

  min-height: 100%;

  border: 1px solid rgba(24,57,47,0.08);
}

/* MAP */

.eco-map-box iframe {
  width: 100%;
  height: 100%;

  min-height: 620px;

  border: 0;

  filter:
    grayscale(10%)
    contrast(1.02)
    saturate(0.95);
}

/* =========================================
TABLET
========================================= */

@media (max-width: 991px) {

  .eco-contact-wrapper {
    grid-template-columns: 1fr;
  }

  .eco-map-box iframe {
    min-height: 500px;
  }

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 767px) {

  .eco-contact-section {
    padding: 80px 0;
  }

  .eco-contact-form-box {
    padding: 32px 22px;

    border-radius: 24px;
  }

  .eco-contact-kicker {
    padding-left: 38px;

    font-size: 10px;

    letter-spacing: 1.5px;
  }

  .eco-contact-kicker::before {
    width: 26px;
  }

  .eco-contact-form-box h2 {
    font-size: 36px;

    letter-spacing: -1px;
  }

  .eco-contact-form-box p {
    margin-bottom: 24px;

    font-size: 13px;
  }

  .eco-contact-form {
    gap: 12px;
  }

  .eco-contact-form input,
  .eco-contact-form textarea {
    height: 52px;

    padding: 0 16px;

    border-radius: 14px;

    font-size: 13px;
  }

  .eco-contact-form textarea {
    height: 110px;

    padding-top: 16px;
  }

  .eco-contact-btn {
    height: 52px;

    font-size: 12px;
  }

  .eco-map-box {
    border-radius: 24px;
  }

  .eco-map-box iframe {
    min-height: 420px;
  }

}