@font-face {
    font-family: 'fajer_noori_nastaliqueregular';
    src: url('/css/fonts/fajer_noori_nastalique_15-12-2006-webfont.woff2') format('woff2'),
       url('/css/fonts/fajer_noori_nastalique_15-12-2006-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.bg-maincolor {
    background-color: #FEF9E3;
}

.bg-secondary {
    background-color: #D2994B;
}

.color-secondary {
    color: #D2994B;
}

.palette-grey {
    color: #4b4c4a;
}

.palette-brown {
    color: #a29784;
}

.palette-lightbrown {
    color: #bfb49d;
}
.bg-lightbrown {
  background-color: #bfb49d;
}

.darkblue {
  color: #1a202c;
}

.nav-border {
  border-bottom-width: 2px;
  border-color: #e4dcca;
  border-style: solid;
}

.swiper-container {
    width: 100%;
}
  

.swiper-slide {
    background-size: cover;
    background-position: 50%;
    padding: 40px 60px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.swiper-pagination-bullet {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #fff;
}

.swiper-button-container {
    background-color: rgba(0, 0, 0, 0.25);
}

.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-slide:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .4;
}

.swiper-slide h2 {
    pointer-events: none;
    opacity: 0;
    color: #ffffff;
    font-size: calc(5vw);
    letter-spacing: -1px;
    -webkit-transform: translateY(-5%) scale(0.8);
    transform: translateY(-5%) scale(0.8);
    -webkit-transition: 1s ease;
    transition: 1s ease;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
}

.swiper-slide p {
    color: white;
    background: #00000099;
    padding: 6px;
    max-width: 400px;
    position: relative;
    font-family: 'Merriweather Sans', sans-serif;
}

.swiper-slide-active h2 {
    opacity: 1;
    -webkit-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
    -webkit-transition: 1s ease;
    transition: 1s ease;
}

@media only screen and (max-width: 417px) {
  .khalifatwo {
    margin-bottom: 110%;
  }
}

@media only screen and (max-width: 640px) and (min-width: 418px) {
  .khalifatwo {
    margin-bottom: 64%;
  }

}

@media only screen and (max-width: 640px) {
  .swiper-slide {
      height: 393px !important;
  }

  .swiper-slide p {
      color: white;
      background: #00000099;
      padding: 4px;
      max-width: 400px;
      position: relative;
      font-size: 12px;
  }

  .batala {
    margin-bottom: 38%;
  }

}

@media only screen and (min-width: 641px) {
  .swiper-slide {
      min-height: 800px;
  }
  .khalifatwo {
    margin-bottom: 87%;
  }
}

@media only screen and (min-width: 1024px) {
  .khalifatwo {
  margin-bottom: 45%;
}
} 

@media only screen and (min-width: 1024px) {
  .ohio {
  margin-bottom: 5%;
}
} 

.mobile-nav-btn {
    border-radius: Md;
    border-width: 2;
    border-color: #d2994b;
}
.mobile-nav-btn:hover {
  border-radius: Md;
  border-width: 2;
  border-color: #d2994b;
  background-color: #d2994b;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

#menu-toggle:checked + #menu {
  display:block;
}

.gradient-main {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#FEF9E3), to(hsla(0, 0%, 100%, 0.90))), url(images/242.jpg);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#FEF9E3), to(rgba(255, 255, 255, 0.9))), url(images/242.jpg);
    background-image: -o-linear-gradient(bottom, #FEF9E3, hsla(0, 0%, 100%, 0.90)), url(images/242.jpg);
    background-image: linear-gradient(360deg, #FEF9E3, hsla(0, 0%, 100%, 0.90)), url(images/242.jpg);
    background-image: -o-linear-gradient(bottom, #FEF9E3, rgba(255, 255, 255, 0.90)), url(images/242.jpg);
    background-image: linear-gradient(360deg, #FEF9E3, rgba(255, 255, 255, 0.90)), url(images/242.jpg);
    background-size: 20%;
}

.gradient-secondary {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FEF9E3), to(hsla(0, 0%, 100%, 0.90))), url(images/242.jpg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FEF9E3), to(rgba(255, 255, 255, 0.90))), url(images/242.jpg);
    background-image: -o-linear-gradient(top, #FEF9E3, hsla(0, 0%, 100%, 0.90)), url(images/242.jpg);
    background-image: linear-gradient(180deg, #FEF9E3, hsla(0, 0%, 100%, 0.90)), url(images/242.jpg);
    background-image: -o-linear-gradient(top, #FEF9E3, rgba(255, 255, 255, 0.90)), url(images/242.jpg);
    background-image: linear-gradient(180deg, #FEF9E3, rgba(255, 255, 255, 0.90)), url(images/242.jpg);
    background-size: 20%;
}

.gradient-banner {
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#FFFFFF));
    background: -o-linear-gradient(top, #f9f9f9, #FFFFFF);
    background: linear-gradient(180deg, #f9f9f9, #FFFFFF);
}

@media only screen and (max-width: 1367px) {
  .gradient-main, .gradient-secondary {
    background-size: 100% 100%, contain;
  }
}
