/* You can add global styles to this file, and also import other style files */
// -FONT SIZE SYSTEM (px):
// 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 /98
$dangerButton: #f00400;
$btnColor: #e9a05c;
html {
  // direction: rtl;
  // height: 5000px;
  font-size: 62.5%;
  // overflow-x: hidden;
}

body {
  font-family: "Cairo", sans-serif !important;
  background: url("../../assets/images/background.webp");
  background-position: center;
  background-size: cover;
  // overflow-x: hidden;
}

.accordion-button::after { margin-right:  auto; margin-left: inherit !important;}
.mr-top {
  margin-top: 4.8rem;
}

.grid {
  display: grid;
}
h2{
  font-size: 2.8rem;
  @media (max-width:767px) {
    font-size: 2rem;
  }
}

.grid--template--2 {
  grid-template-columns: repeat(2, 1fr);
}

.btn--full:link,
.btn--full:visited {
  display: inline-block;
  background-color: #978241;
  font-family: 'Roboto', sans-serif !important;
  color: #fff;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 400;
  padding: 1.1rem 3.2rem;
  // padding: 1.2rem 0 ;
  border-radius: 9px;

  transition: all 1s;
}

.btn--full:hover,
.btn--full:active {
  // opacity: 0.8;
  background-color: #fff;
  color: #000;
  // border: 1px solid #fff;
}

 ul {
   padding: 0;
   list-style: none;
 }

.bottom-border {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: -15px;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }
}

@media (max-width: 48em) {
  .btn--full:link,
  .btn--full:visited {
    font-size: 1.7rem;
    padding: 1.2rem 1rem;
  }

  .virtual-reality-container-image {
    align-self: center;
  }
}

@media (max-width: 33em) {
  .btn--full:link,
  .btn--full:visited {
    font-size: 1.7rem;
    // padding: 1rem 2rem;
  }
}

@media screen and (max-width: 425px) {
  /* Hide horizontal scrollbar on the body or container */
  body {
    overflow-x: hidden;
  }
}

.main-btn {
  // width: 195px;

  color: #2a2824;
  padding: 12px 4.8rem;
  background-color: $btnColor;
  font-size: 2.2rem;

  border: none;
  border-radius: 0.5rem;
  transition: all 0.5s ease-in-out;

  &:hover {
    background-color: #fff !important;
  }
}

.modal {
  z-index: 99999999 !important;
}

.about-us-list-item {
  padding-right: 3rem !important;
  padding-left:  inherit;


}


.external-navbar .navbar-nav {
   padding-right: 0 !important;
}

.request-offer img {
  max-width: 100%;
  height: 380px !important;
  width: 100%;
}


@media (max-width: 800px) {
  .request-offer {
    width: 80% !important;
  }
  h1 {
    font-size: 2rem !important;

  }
  .request-offer img{
    height: 250px !important;

  }
}