@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/Neo Sans Arabic Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/NeoSansArabicBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/NeoSansArabicLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/Neo_Sans_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/NeoSansArabicBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/neo-sans-arabic/NeoSansArabicUltra.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

.main-color{
  color: #83A1D6;
}
.flex-1{
  flex: 1;
}

body,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Neo Sans Arabic', sans-serif;
}



.cursor-pointer{
  cursor: pointer;
}
/*colors and fonts*/
.font-weight-400{
  font-weight: 400;
}
.font-weight-500{
  font-weight: 500;
}
.font-weight-600{
  font-weight: 600;
}
.font-weight-700{
  font-weight: 700;
}
.font-10{
  font-size: 10px;
}
.font-12{
  font-size: 12px;
}
.font-14{
  font-size: 14px;
}
.font-16{
  font-size: 16px;
}
.font-18{
  font-size: 18px;
}
.font-20{
  font-size: 20px;
}
.font-22{
  font-size: 22px;
}
.font-24{
  font-size: 24px;
}
.font-30{
  font-size: 30px;
}
.font-32{
  font-size: 32px;
}
.font-36{
  font-size: 40px;
}
.font-40{
  font-size: 40px;
}
.font-48{
  font-size: 48px;
}
.font-75{
  font-size: 75px;
}
.text-dark{
  color: #000;
}
.text-gray{
  color: #8A8AA3;
}
.text-gray-100{
  color: #3F3F50;
}
.text-gray-200{
  color: #5A5A5A;
}
.font-gray-300{
  color: #8E8E8E;
}
.text-gray-400{
  color: #A9A9BC;
}
.text-gray-500{
  color: #667085;
}
.text-gray-600{
  color: #9D857C;
}
.text-gray-700{
  color: #888888;
}
.text-gray-800{
  color: #1D2939;
}
.text-gray-900{
  color: #787878;
}
.text-gray-950{
  color: #676767;
}
.color-text-secondry{
  color: #6C6C89;
}
.color-gray{
  color: #D9D9D9;
}
.carousel-indicators{
  bottom: 5rem;
}
.box-shadow{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.bg-gray{
  background-color: #F5F5F5 !important;
}
.bg-gray-100{
  background-color: #f3f3f3;
}
.bg-gray-200{
  background: #f6f6f6;
}
.bg-brown{
  background-color: #9D857C !important;
}
.bg-pending{
  background-color: #E0912A;
}
.custom-badge{
    padding: 10px 30px;
    border-radius: 28px;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
}
.brown-badge{
  background-color: rgba(224, 145, 42, 0.3);
}
.red-badge{
  background-color: rgba(245, 62, 62, 0.3);
}
.green-badge{
  background-color: rgba(38, 185, 77, 0.3);
}

#topnav .navigation-menu>li>a.active{
  color:#9D857C;
}
.carousel-indicators [data-bs-target]:not(.active){
  width: 7px ;
  height: 7px;
  border-radius: 50%;
  background-color: #fff !important;
}
.carousel-indicators .active{
  background-color: #83A1D6;
  transform: rotate(0deg);
  width: 20px ;
  height: 6px;
}
[lang="ar"] .direction{
  direction: rtl;
}
[lang="ar"] .form-check .form-check-input{
  float: right;
  margin-right: -1.5em;
  margin-left: unset;
}
.text-muted {
  color: #888 !important;
}
.custom-feauture{
  padding: 4rem 3rem;
}
[lang="ar"] .tns-controls button[data-controls=next]{
  left: unset;
  right: -3rem;
}
[lang="ar"] .tns-controls button[data-controls=prev]{
  right: unset;
  left: -3rem;
}
.tns-controls button[data-controls=next], .tns-controls button[data-controls=prev]{
  background: transparent;
  box-shadow: none;
}
.tns-controls button[data-controls=next]:hover, .tns-controls button[data-controls=prev]:hover{
  background: transparent;
}
@media (min-width: 992px) {
  #topnav .navigation-menu {
      justify-content: initial;
  }
}
#topnav .navigation-menu>li>a{
  font-size: 16px;
}
.btn-primary{
  background: #83A1D6;
}
.btn-outline-primary:hover{
  --bs-btn-color: #83A1D6;
  --bs-btn-border-color: #83A1D6;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #83A1D6;
  --bs-btn-hover-border-color: #83A1D6;
  --bs-btn-focus-shadow-rgb: 47, 85, 212;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #83A1D6;
  --bs-btn-active-border-color: #83A1D6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #83A1D6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #83A1D6;
  --bs-gradient: none;
  color: #fff;
}
.footer{
  background: url("../images/wady/footer-bg.png");
  background-size: cover;
}
.language{
  border-radius: 29px;
  border: 1px solid #83A1D6;
  padding: 5px 25px;
}
.search-container{
  flex: 1
}
.search-input{
  border-radius: 49px;
  border: none;
  height: 37px;
  width: 100%;
}
.search-img{
  top: 50%;
  transform: translateY(-50%);
  left: 1rem;
}
[lang="en"] .search-img{
  left: auto;
  right: 1rem;
}
#topnav{
  position: initial;
}
.privacy{
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  padding: 3rem 2rem;
}
.form-check-input{
  border: 1px solid #83A1D6;
  width: 1.2em;
  height: 1.2em;
}
.form-check-label, .form-label {
  font-weight: 400;
  font-size: 14px;
  margin: 0 5px;
}
.faq{
  border: 1px solid #D9D9D9;
  padding: 1rem 1rem;
  border-radius: 5px;
  position: relative;

}
.faq.active{
  background-color: #EFEFEF;
}
[lang="ar"] .faq-toggle{
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
[lang="ar"] .modal-header{
  direction: ltr;
}
.collapsed-arrow{
   transform: rotate(180deg) !important; 
}
.faq-p{
  color: #5A5A5A
}
.form-control:not(textarea){
  padding: .5rem 3rem;
}
.form-control.datepicker{
  padding: .5rem 1rem;
}
.text-decoration{
  text-decoration: underline !important;
}
.modal-rounded{
  border-radius: 17px;
}
.otp-input {
  width: 70px;
  height: 70px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  border-radius: 8px;
}
.input-corner{
  right: 2rem;
  transform: translateY(-50%);
}
[lang="ar"] .phone{
  direction: rtl;
}
[lang="ar"] .input-corner{
  left: 2rem;
  right: unset;
}

.custom-file-input {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e9ecef;
  font-size: 14px;
  border-radius: 6px;
  color: #212529 !important;
  
}

.custom-file-input label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
}

.custom-file-input .text {
  flex-grow: 1;
  text-align: end;
}

.custom-file-input .formats {
  color: #888;
  font-size: 12px;
}

.custom-file-input input[type="file"] {
  display: none;
}

[lang="ar"] .custom-date-input img{
  left: 2rem;
  transform: translateY(-50%);
  top: 50%;

}
.custom-date-input{
  padding: .5rem;
}

.custom-select-container{
    
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
.custom-select-container{
  right: 1rem;
}
[lang="ar"] .custom-select-container{
  left: 1rem;
  right: unset;
}

.custom-select-wrapper {
  position: relative;
  width: fit-content;
}

.custom-select {
  position: relative;
  cursor: pointer;
}

.selected-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 4px;
  background-color: #fff;
}

.options-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 10;
}

.options-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
  justify-content: center;
}

.options-list li:hover {
  background-color: #f0f0f0;
}

.installment{
  right: 1rem;
  bottom: 1rem;
  background: rgba(255, 255, 255, .9);
  padding: 10px;
  border-radius: 5px;
}

[dir=rtl] .installment {
  right: unset;
  left: 1rem;
}
.card{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.card-img-container img{
  height: 205px;
}
.pagination .page-item .page-link{
  margin: 0 5px;
  border-radius: 4px;
  padding: 6px 13px;
}

.pagination .page-item.active .page-link{
  background: #000000 !important;
  border-color: #000000;
}

/*
.main-img{
  max-height: 390px;
}
*/

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background: transparent;
  color: #83A1D6 !important;
  border-bottom: 1px solid #83A1D6;
  border-radius: 0;
}

.nav.nav-pills{
  border-bottom: 1px solid #ebebeb;
}

.upload-container {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.file-input, .preview-container .file-preview {
  width: 100px;
  height: 100px;
  border: 1px solid #e9ecef;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
}

.file-input:hover {
  border-color: #999;
}

.file-input span {
  font-size: 39px;
  color: #ccc;
}

.preview-container .file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.preview-container .file-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}


.form-control:disabled {
  background-color: #FAFAFA;
  border-color:#FAFAFA ;
}

@media (max-width: 991px) {
  .tns-controls,
  .tns-liveregion.tns-visually-hidden,
  .high-top-nav,
  .buy-button,
  .calculate-your-fund
  {
    display: none !important
  }
  
  #topnav #navigation
  {
    z-index: 3;
  }
  .mobile-item{
    display: block !important
  }
  .carousel-indicators {
    bottom: 5rem;
  }
  .carousel-item > div {
    background-size: cover !important;
    background-position: center !important;
  }
  #topnav #navigation {
      max-height: fit-content;
      padding-bottom: 1rem;
  }
  .mobile-button{
    width: 60%;
    margin: auto !important;
  }
  .mobile-button a{
    padding-left:5px !important;
    padding-right:5px !important;
  }
  
}



#topnav .navigation-menu>li>a{
  font-weight: 400;
  font-family: 'Neo Sans Arabic';
  letter-spacing: 0px;
}

.slider-content{
  justify-content: flex-start
}
.tiny-five-item-v2 .tns-item img {
  width: 97%;
}

[lang="en"] .home-slider .slider-content{

  text-align: left;
  justify-content: flex-end;

}

[lang="en"] #topnav .logo{
  float: left;
}

[lang="en"] #topnav .menu-extras,
[lang="en"] .buy-button {
  float: right !important;
}

@media (min-width: 992px) {
  [lang="en"] #topnav .buy-button {
      padding-right: 0;
      margin-right: 0;
  }
}

.dropzone {
  border: 2px dashed #C8E3D9 !important;
  border-radius: 5px;
  padding: 0;
  transition: all ease-out 0.3s;
}

.dropzone:hover {
  border: 2px dashed #83A1D6 !important;
}

.dropzone .dz-message {
  font-weight: 400;
}

.dropzone .dz-message .note {
  font-size: 0.8em;
  font-weight: 200;
  display: block;
  margin-top: 1.4rem;
}

.sub-title-upload {
  color: #83A1D6;
}


.bg-brown img, .installment img {
    /* width: 13px; */
    height: 14px !important;
}


.back-to-top {
    background: #83a1d6 !important;
}

@media (max-width: 40em) {
    
.font-75 {
    font-size: 40px;
}

.font-48 {
    font-size: 26px;
}

.font-40 {
    font-size: 24px;
}

.font-36 {
    font-size: 22px;
}

.font-24 {
    font-size: 16px;
}

.font-14 {
    font-size: 12px;
}

.mt-4 {
    margin-top: 1rem !important;
}

.mx-4 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.vh-100 {
    height: 45vh !important;
}

.custom-feauture {
    padding: 2rem 2rem;
    text-align: center;
}

.custom-feauture img {
    height: 100px;
}

#topnav .navigation-menu {
    text-align: center;
}

.footer .footer-py-60 {
    padding: 30px 0;
}

.section {
    padding: 40px 0;
}

.carousel-indicators {
    bottom: 5px;
}

div#carouselExampleIndicators p {
    display: none;
}

}