* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:  DIN;
}

@font-face {
    font-family: DINb;
    src: url('../fonts/DIN-Next-LT-Arabic-Bold.ttf');
}

@font-face {
  font-family: DIN;
    src: url('../fonts/DINNextLTArabic-Medium-2.ttf');
}

@font-face {
  font-family: DINr;
  src: url('../fonts/DINNextLTArabic-Regular-2.ttf');
}
h1 ,h2,h3{
  font-family: DINb;
}

body {
   
    position: relative;
    overflow-x: clip;
}

 p {
    font-family: DINr ;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-thumb {
    background-color: #282828;
    border-radius: 30px;
}

html::-webkit-scrollbar-track {
    background-color: #f5d77d;
}

p {
    margin: 0;
}

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

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: none;
    color: black;
}

.bg-light {
    background-color: transparent;
}

i#nav_bar {
    transform: scale(1.5);
}

/*start navbar*/
/* Remove border from toggler */
.navbar {
  background-color: #FE9E45;
    padding-top: 1rem;
  }
  .navbar-toggler {
    border: 0 !important;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:active,
  .navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  a.nav-link {
    display: flex;
    gap: 12px;
    background: transparent;
    border: none;
  }
  /* Lines of the Toggler */
  .toggler-icon{
    width: 30px;
    height: 3px;
    background-color: #ffffff;;
    display: block;
    transition: all 0.2s;
  }
  
  /* Adds Space between the lines */
  .middle-bar{
    margin: 5px auto;
  }
  
  /* State when navbar is opened (START) */
  .navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  
  .navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  
  .navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
  /* State when navbar is opened (END) */
  
  /* State when navbar is collapsed (START) */
  .navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
  }
  
  .navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  
  .navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
  }
  /* State when navbar is collapsed (END) */
  
  /* Color of Toggler when collapsed */
  .navbar-toggler.collapsed .toggler-icon {
    background-color: #ffffff;
  }
  .navbar-collapse {
    flex-grow: 0.5; 
    justify-content: space-between;
  }
  
  .navbar-nav{
    margin: 0 !important;
    gap: 22px;
  }
 
  .navbar-brand{
    font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--main_color);
  }
  .navbar-nav .nav-link{
    font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  
  font-family: DIN;
  color: white;
  }
  .btn_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border-radius: 18px;
    font-size: 20px;
    line-height: 120%;
    text-align: right;
    color: #FE9E45;
    height: 68px;
 
    padding: 0px 30px;
    transition: 0.3s;
}
.btn_nav:hover{
    background-color: #FE9E45;
    color: white;
    border: 1px solid white;
    transform: scale(0.95);
}
  @media (min-width: 992px){
  .navbar-expand-lg {
      flex-wrap: nowrap;
      justify-content: space-between; 
  }
  
  }
  @media (max-width: 992px){
    .btn_nav{
        margin: 0px auto 40px;


    }
    .navbar-collapse {
        background-color: #fe9e45;
        border-radius: 10px;
        border: 2px solid white;
    }
    .navbar-nav {
      align-items: center;
      padding: 20px;
  }
    }
    @media (min-width: 1440px){
 
    }
  /*end navbar*/
  /*head*/
  header{
    position: relative;
  }
  header .content{
    padding-top: 62px;
color: white;
display: flex;
gap: 56px;
align-items: center;

  }
  header::before {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100% - 16px);
    top: 0;
    left: 0;
    background-color: #fe9e45;
    z-index: -2;
}
  header img{
max-width: 100%;
  }
  header .head_info{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 60px;
  }
  header .head_info h1 {
    font-size: 60px;
    line-height: 112px;
    max-width: 594px;
}
  header .head_info p{
    font-size: 18px;
    line-height: 120%;
    max-width: 570px;
  }
  header .head_info .head_app{
    
  }
  header .head_info .head_app p{
   
  }
  header .head_info .head_app .img_app{
    display: flex;
    gap: 20px;
margin-top: 16px;
  }
  header .head_info .head_app .img_app img{
    max-width: 100%;
  }
  @media (max-width: 992px){
    header::before{
        height: 106%;
    }
.phone_head{
    display: none;
}
header .head_info .head_app .img_app img {
    max-width: 94%;
}
  }
  /*about*/
  .about{
    position: relative;
margin-top: 144px;
margin-bottom: 170px;
  }
  .man_fresh1{
    position: absolute;
    top: 50%;
  
    transform: translateY(-50%);
    z-index: -1;
  }
  html[dir=rtl] .man_fresh1{
    left: 0;
  }
  html[dir=ltr] .man_fresh1{
    right:  0;
    transform: translateY(-50%) rotateY(180deg);
  }
  .backimg {
    position: absolute;
    max-width: 100%;
    z-index: -2;
    top: -144px;
    left: 50%;
    transform: translateX(-50%);
}
  .about  h2{
    font-size: 20px;
line-height: 120%;
margin-bottom: 0;
color: #FE9E45;
font-family: DIN;
  } 
  .about  h3{
    font-size: 50px;
line-height: 120%;
color: #1B1B4E;
margin-bottom: 34px;
  }
  .about  p{
    font-size: 27px;
line-height: 149%;
color: #9F9F9F;
margin-bottom: 16px;
max-width: 820px;
  }
  .about  .steps{
     display: flex;
     flex-direction: column;
     gap: 18px;
     margin-top: 36px;
  }
  .about  .steps a{
     max-width: 744px;
     width: 100%;
     background: #FFFFFF;
     border: 1px solid rgba(254, 158, 69, 0.36);
     box-shadow: 0px 4px 11px 6px rgba(0, 0, 0, 0.02);
     border-radius: 16px;
    height: 86px;
display: flex;
gap: 26px;
align-items: center;
padding: 0px 16px;
  }
  .about .steps a h4 {
    min-width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #FE9E45;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-family: 'DINb';
}
  .about  .steps a h5{
    font-size: 24px;
    line-height: 120%;
    color: #FE9E45;
    font-family: 'DINb';
  }
  .about img{
    
  }
  @media (max-width: 1200px){
    .man_fresh1 {
       
    
        opacity: 0.3;
    }
  }
  @media (max-width: 530px){
    .about .steps a h5 {
        font-size: 16px;
      
    }
    .about h2 {
        font-size: 18px;
       
    }
    .about p {
        font-size: 20px;
      
        margin-bottom: 10px;
       
    }
    .about .steps a h4 {
        min-width: 30px; 
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    }
    .about h3 {
        font-size: 36px;
       
        margin-bottom: 26px;
    }
    
    header .head_info h1 {
        font-size: 44px;
        line-height: 89px;
      
    }
    header .head_info {
       
        gap: 26px;
    }
  }
 
  /*contact*/
  
.contact{
margin-bottom: 180px;
position: relative;

}
.man_fresh2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -120px;
    max-width: 100%;
    z-index: -1;
    animation: 3s linear 1s infinite alternate slidein;
}
 @keyframes slidein {
    0% {
       right: -70px;

    }
    100% {
        right: -122px;

    }
}  
.contact .content {
    max-width: 560px;
    margin-right: auto;
}
.contact .content h2,.modal  .content h2{
    font-size: 50px;
line-height: 120%;
color: #1B1B4E;
margin-bottom: 64px;
}
.contact .content p , .modal .content p {
    font-size: 18px;
line-height: 120%;
color: #7D7D7D;
margin-bottom: 32px;
font-family: 'DIN';
}
.contact .content form  , .modal  .content form{
    gap: 16px;
}
.contact .content form input  , .modal  .content form input{
    background: #F1F1F1;
    border-radius: 8px;
    border: navajowhite;
    height: 58px;
}

.contact .content form textarea , .modal   .content form textarea{
    height: 260px;
    background: #F1F1F1;
    border-radius: 8px;
    border: none;
    padding: 16px 20px;
    outline: none;
}
.contact .content form button , .send{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #FE9E45;
border-radius: 18px;
height: 66px;
color: white;
font-size: 18px;
line-height: 120%;
border: none;
}
@media (min-width: 768px){
    .col-md-6 {
      padding: 0;
        width: 48%;
    }
}
@media (max-width: 992px){
    .man_fresh2 {
    
        opacity: 0.4;
    }
}
/*help*/
.help{
    background: #F3F3F3;
    padding: 50px 0px;
    margin-top: 72px;
    
}
.help .contant{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
.help h2{
    font-size: 34px;
    line-height: 22px;
    margin-bottom: 26px;
}
.help p{
    font-size: 18px;
    line-height: 22px;
    color: #8B8B8B;
    font-family: 'DIN';
}
.help .input_help{
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 22px;
    min-height: 84px;
    max-width: 430px;
    width: 100%;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}
.help .input_help input{
    width: 100%;
    direction: inherit;
    flex-grow: 1;
    border: none;
    outline: none;
    font-family: 'DINr';

}

.help .input_help button{
    min-Width:108px;
    font-family: 'DINr';
Height:56px;
display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
line-height: 22px;
border: none;
background: #FE9E45;
border-radius: 22px;
}
@media (max-width: 768px){
    .help .contant{
        display: flex;
        justify-content:center;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
    }
    .help h2 {
        font-size: 28px;
       
        margin-bottom: 22px;
    }
}
/*footer*/
footer {
    background: #FE9E45;
    padding-top: 30px;
    padding-bottom: 30px;
}
footer .container{
    display: flex;
    align-items:center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}
footer .container .part1{

}
footer .container .part1 img{

}
footer .container .part1 p{
  font-family: 'DIN';
    font-size: 16px;
    line-height: 29px;
    color: #FFFFFF;
    max-width: 530px;
    margin-top: 16px;
}
footer .container .part2 {
    display: flex;
    gap: 20px;
    flex-direction: column;
    color: #FFFFFF;

}
footer .container .part2 h2,footer .container .part2 h3{
  font-size: 18px;
line-height: 120%;

font-family: DINr;
}
footer .container .part2 img{
    max-width: 100%;
}
footer .container .part2 .links{
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
footer .container .part2 .links a{
  background: #D9D9D9;
border: 1px solid #101010;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;

}
footer .container .part2 .links a img{
  
}
 .copy h3{
    font-size: 14px;
line-height: 21px;
color: #FFFFFF;
text-align: center;
margin: 0;
font-family: 'DINr';
}
@media (max-width: 768px){
    footer .container .part2 img{
        max-width: 90%;
    } 
}
[type=email], [type=number], [type=tel], [type=url] {
    direction:ltr;
   
}
.iti__country-list {
   
    text-align: inherit;
   
    max-width: 100%;
    
    font-size: 14px;
}

[type=number]::placeholder{
    text-align: end;
}
.iti__flag-container{
    right: 0 !important;
}
.iti__arrow{
    width: 20px;
    height: 20px;
    border: none;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    background-position: center;
}
.iti  input{
    padding: 0px  50px !important;
    text-align: end;
}
.iti {
   
    width: 100%;
}
.profile{
    position: relative;
}
.profile img {
    position: absolute;
   
    top: 50%;
    transform: translateY(-50%);
}
html[dir=rtl] .profile img  {
    right: 20px;
}
html[dir=ltr] .profile img  {
    left: 20px;
}
html[dir=rtl] .contact form input[type="text"] ,.modal .content input[type="text"]{
    padding-right: 52px;
}
html[dir=ltr] .contact form input[type="text"] ,.modal .content input[type="text"]{
    padding-left: 52px;
}
/*modal*/
.modal {
  padding: 0px   20px;
}
.modal.show .modal-dialog {
 max-width: 780px;
}
.modal .close{
    background-color: transparent;
    border: none;
    border-radius: 30px;
}
.modal .send {

}
.modal-header{
    border: none;
}

.modal .content {
  text-align: center;
}
.modal-body{
  padding: 0px 86px 80px;
}
@media (max-width: 660px){
  .modal-body {
    padding: 0px 19px 40px;
}
 .modal .content h2 {
  font-size: 36px;
  line-height: 46%;
  
  margin-bottom: 40px;
}
 .modal .content p {
  font-size: 16px;
 
}
.modal {
  padding: 0px 4px;
}
}
/*view*/
.view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.view .part {
  flex-grow: 1;
  min-width: 366px;
  min-height: 152px;
  padding: 0px 16px;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 10px;
  transition: 0.1s;
}
.view .part .title{
  
}
.view .part .title img{
  
}
.view .part .title h2{
  font-size: 40px;
line-height: 120%;
color: #1B1B4E;
}
.view .part a{
  font-size: 19px;
line-height: 149%;
color: #FE9E45;
font-family: DINb;
}
.view .part:hover{
  outline: 3px solid #FE9E45;
}
.rulse_copy {
  padding:  18px 0px;
  background-color: #fe9e45;
}
/*rulse*/
.rulse{
  background: #FE9E45;
  padding-top: 40px;
  color: white;
  padding-bottom: 120px;
}
.rulse h2{
  font-size: 50px;
line-height: 120%;
margin-bottom: 30px;
}
.rulse p{
  font-size: 27px;
line-height: 149%;

}
.rulse_view {
  min-height: 330px;
  padding: 30px 18px;
}
.open_view{
  outline: 3px solid #FE9E45;
}
@media (max-width: 768px){
  .view .part .title h2 {
    font-size: 30px;
   
}
.view .part a {
  font-size: 18px;
 
}
  .rulse h2 {
    font-size: 32px;
   
    margin-bottom: 18px;
}
.rulse p {
  font-size: 20px;
  line-height: 149%;
}
}
@media (max-width: 450px){
  .view .part{
   
    min-height: 110px;
      min-width: 100%;
}
.view .part .title h2 {
  font-size: 20px;
}
}