/* ==================== Call the fonts ==================== */

/* Light */
@font-face {
  font-family: "Gotham-light";
  src: url("../../vendor/fonts/Gotham-Light.otf") format("opentype");
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Gotham-medium";
  src: url("../../vendor/fonts/Gotham-Medium.otf") format("opentype");
  font-display: swap;
}

/* Book */
@font-face {
  font-family: "Gotham-book";
  src: url("../../vendor/fonts/Gotham-Book.otf") format("opentype");
  font-display: swap;
}

/* Book */
@font-face {
  font-family: "Gotham-bold";
  src: url("../../vendor/fonts/Gotham-Bold.otf") format("opentype");
  font-display: swap;
}

/* font-family: 'Hind', sans-serif; */
/* font-family: 'Roboto', sans-serif; */

/* ==================== Call the fonts ==================== */

/* ==================== Color Variables  ==================== */
:root {
  /* Colors  */
   --brand-primary-color: #401531;
  --brand-primary-light-color: #e5d7dc;
  --brand-logo-pink-color: #eb078c;
  --brand-logo-yellow-color: #f3b300;
  --black-color: #393a4e;
  --border-color: #e6e7e7;
  --grey-background-color: #f3f4f4;
  --brand-light-background-color: #e6d8dd;

  /* font size  */
  --heding-font-size: 3.053em;
  --sub-heading-font-size: 14px;
  --sub-heading-black: 21.5px;
  --h1-font-size: 52px;
  --h2-font-size: 36px;
  --h3-font-size: 2.368em;
  --h4-font-size: 20px;
  --h5-font-size: 16px;
  --h6-font-size: 26px;

  /* font-weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;

  /* box shadow  */
  --box-shadow-custom: 0px 0px 5px rgba(0, 0, 0, 0.15);
}

/* ==================== Color Variables  ==================== */

/* common css  */
.main__menu {
  position: fixed;
  top: 3%;
  z-index: 99;
  width: 100%;
  /* transition: all 1s; */
}
.bg-scrolling .main__menu {
  position: sticky;
  top: 3%;
  z-index: 99;
  width: 100%;
  /* transition: all 1s; */
  /* animation:slide-down 0.7s; */
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

/* common css  */

/* ============ contact area ==========  */
.contact__area {
  background: var(--brand-primary-light-color);
}
.form__title {
  font-size: 34px;
  color: var(--brand-primary-color);
}

.form__subtitle {
  font-size: 16px;
  padding-bottom: 40px;
}

.contact__form__box label.form-label {
  font-size: 16px;
  font-family: gotham-book;
  color: var(--brand-primary-color);
}

.contact__form__box input.form-control,
.contact__form__box textarea {
  padding: 10px;
  border: 0;
  border-radius: 0;
  width: 100%;
  box-shadow: none;
}

.custom__submit__btn {
  border-radius: 0;
  background: var(--brand-primary-color);
  border: 0;
  padding: 8px 15px;
  opacity: 0.9;
}

.custom__submit__btn:hover {
  background: var(--brand-primary-color);
  opacity: 1;
}

.map__box {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 56.25%;
}

.map__box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ============ contact area ==========  */

/* =============== contact details area ============ */

.contact__dtl__inner__main {
  background: var(--brand-primary-color);
  padding: 40px 0;
}

.cont__desc__area p,
.cont__desc__area a {
  color: #fff;
}

.cont__dtl__inner {
  display: flex;
  align-items: center;
  gap: 25px;
  justify-content: center;
}



/* client logo slider  */
.client__logo__slider {
  padding: 70px 0 50px 0;
}
.client__logo__slides img {
  width: 100%;
  padding: 10px;
  box-shadow: 0 2px 15px 0 rgba(2, 2, 2, .1);
  border-radius: 4px;
  margin: 20px;
  height: 20vh;
  object-fit: contain;
}

.cont__slide__prev {
  left: -3vw;
  z-index: 9;
}

.cont__slide__next {
  right: -3vw;
  z-index: 9;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important;
  color: var(--brand-primary-color) !important;
  font-weight: 800 !important;
}

.cont__dtl__ic img {
  width: 75%;
}
/* client logo slider  */

/* =============== contact details area ============ */


@media (min-width: 992px) and (max-width: 1280px) {


  .map__box {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
}
  
  .map__box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .form__title {
    font-size: 24px;
    color: var(--brand-primary-color);
}
.contact__form__box input.form-control, .contact__form__box textarea {
  padding: 5px;
  border: 0;
  border-radius: 0;
  width: 100%;
  box-shadow: none;
}
  


}