@font-face {
  font-family: 'Almarai Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Almarai Regular'), url('../fonts/Almarai-Regular.woff') format('woff');
}
  

@font-face {
  font-family: 'Almarai Light';
  font-style: normal;
  font-weight: normal;
  src: local('Almarai Light'), url('../fonts/Almarai-Light.woff') format('woff');
}


@font-face {
  font-family: 'Almarai Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Almarai Bold'), url('../fonts/Almarai-Bold.woff') format('woff');
}


@font-face {
  font-family: 'Almarai ExtraBold';
  font-style: normal;
  font-weight: normal;
  src: local('Almarai ExtraBold'), url('../fonts/Almarai-ExtraBold.woff') format('woff');
}

*{
  font-family: 'Almarai Regular' !important;
}


.gradient-custom-2 {
  /* fallback for old browsers */
  background: #ee7724;
  
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #832e38, #7c2b36);
  
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #ee7724, #d8363a, #832e38, #7c2b36);
  }
  
  @media (min-width: 768px) {
  .gradient-form {
  min-height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  }
  @media (min-width: 769px) {
  .gradient-custom-2 {
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
  }
  }

  .direction-rtl{
    direction: rtl;
    text-align: right;
  }

  .min-height{
    min-height: 500px;
  }


  .text-right{
    text-align: right;
  }


  .numbers-container{
    display: grid;
    place-items: center;
    width: 80%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin: auto;
    margin-bottom: 50px;
    direction: ltr;
  }

  .numbers-container form{
    display: inline-flex;
  }
  .numbers{
    display: inline;
    width: 50px;
    height: 70px;
    margin: 5px;
    text-align: left;
    padding: 20px;
  }

  a{
    color: rgb(126 43 54);
    text-decoration: none;
  }


  .top-menu{
    background-color: white !important;
    border-bottom: 1px solid #eee;
    box-shadow: 2px 5px 5px #373737;
    padding: 5px;
    direction: rtl;
  }

  .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
    font-weight: 600;
}

.small-container{
  max-width: 1320px !important;
}

.block-profile{
  background-color :#7c2b36;
  height: 25rem;
    width: 100%;
    padding: 0;
    margin: 0;
}

.position-relative{
  position: relative;
}


.hover-container{
  position: absolute;
  top: -10rem;
  width: 100%;
}

.text-puple{
  color :#7c2b36;
}

body{
  background-color: #eee;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .hover-container{
    max-width: 1320px;
    top: -2rem;
  }

  .numbers {
      display: inline;
      width: 40px;
      height: 50px;
      margin: 5px;
      text-align: left;
      padding: 15px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .hover-container{
    max-width: 540px;
    top: -2rem;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .hover-container{
    max-width: 720px;
    top: -5rem;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .hover-container{
    max-width: 960px;
    top: -5rem;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .hover-container{
    max-width: 1140px;
    top: -10rem;
  }
}

@media only screen and (min-width: 1400px){
  .hover-container{
    max-width: 1320px;
    top: -10rem;
  }
}