.header {
  position: relative;
}

.header .nav-bar {
  max-height: unset;
  height: auto;
  z-index: 9;
}
.header .nav-overlay {
  z-index: 9;
}
.header .nav-overlay.open {
  z-index: 999999;
  position: fixed;
}

.header .nav-overlay.open .nav-bar {
  z-index: 9999999999;
}
.header .nav-overlay.open .open-menu {
  /* max-height: unset; */
}

.contact-us-hero-section {
  background: linear-gradient(148.4deg, #545454 -4.16%, #000000 100%);
  padding: 92px 57px 73px 52px;
  .headings {
    padding-inline: 114px;
    padding-right: 232px;
    .title {
      font-family: Outfit;
      font-size: 64px;
      font-weight: 500;
      line-height: 96px;
      color: var(--light-color);
      margin-bottom: 40px;
    }
    .subtitle {
      font-family: Outfit;
      font-size: 48px;
      font-weight: 500;
      line-height: 100px;

      color: #c4c4c4;
      margin-bottom: 32px;
    }
    .description {
      font-family: Outfit;
      font-size: 32px;
      font-weight: 400;
      line-height: 60px;

      color: var(--color-dim-gray);
      margin: 0px;
    }
  }

  .featued-img-wrapper {
    width: 100%;
    height: 593px;
    margin-top: 124px;
    position: relative;
    z-index: 99;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .three-line {
    position: absolute;
    top: -92px;
    left: -27.85px;
    height: 50vh;
    width: unset;
    max-height: 722.45px;
    /* transform: translateX(-100%); */
  }

  @media only screen and (max-width: 1440px) {
  }

  @media only screen and (max-width: 991px) {
    padding: 92px 40px 73px 40px;
    .headings {
      padding-inline: 114px;
      padding-right: 100px;
      .title {
        font-size: 52px;
        line-height: 70px;
        margin-bottom: 25px;
      }
      .subtitle {
        font-size: 32px;
        line-height: 52px;
        margin-bottom: 20px;
      }
      .description {
        font-size: 24px;
        line-height: 42px;
      }
    }
  }
  @media only screen and (max-width: 768px) {
    padding: 92px 40px 73px 40px;

    .headings {
      padding-inline: 80px;
      .title {
        font-size: 42px;
        line-height: 60px;
        margin-bottom: 20px;
      }
      .subtitle {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
      }
      .description {
        font-size: 18px;
        line-height: 28px;
      }
    }

    .featued-img-wrapper {
      margin-top: 80px;
    }
  }

  @media only screen and (max-width: 576px) {
    padding: 54px 20px;

    .three-line {
      left: 0px;
      max-height: 325px;
    }

    .headings {
      padding-inline: 70px;
      .title {
        font-size: 32px;
        line-height: 42px;
        margin-bottom: 15px;
      }
      .subtitle {
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 10px;
      }
      .description {
        font-size: 16px;
        line-height: 24px;
      }
    }
    .featued-img-wrapper {
      height: unset;
      margin-top: 60px;
    }
  }
}

/** Contact form section start from here */

.contact-from-section {
  padding: 81px 48px 194px 48px;
  background: var(--light-color);

  .contact-from-row {
    --bs-gutter-x: 49px;
  }

  .three-line {
    position: relative;
    left: -188px;
    bottom: -81px;
    width: 50vw;
    max-width: 749px;
    height: unset;
  }

  /* .map-col {
        width: calc(40% + var(--bs-gutter-x));
        max-width: calc(587px + var(--bs-gutter-x));
    } */
  .map-wrapper {
    width: 100%;
    height: 697px;

    box-shadow: 0px 4px 20px 0px #00000026;
    border-radius: 10px;
    overflow: clip;
    margin-top: 94px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media only screen and (max-width: 991px) {
    .three-line {
      bottom: -40px;
      min-width: 270px;
    }
  }
  @media only screen and (max-width: 768px) {
    padding: 60px 40px;
  }
  @media only screen and (max-width: 576px) {
    padding: 60px 20px;
    .map-wrapper {
      height: 350px;
    }
  }
}
/** Contact form section end here */