@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400&display=swap');







html[dir="rtl"] body, html[dir="rtl"] {
  font-family: "Noto Kufi Arabic", sans-serif!important;
  font-weight: 300!important;
}
p{
  font-family:"Noto Kufi Arabic", sans-serif!important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:"Noto Kufi Arabic", sans-serif!important;

}
.small-heading,.small-heading-left{
  font-family: "Noto Kufi Arabic", sans-serif!important;
  letter-spacing: 1px!important;
}
.badge-language-dev,.badge-language-1-dev{
  font-size: 12px;
}
.main-heading{
  font-size: 53px;
}
.main-heading, .team-heading,.process-heading,.about-heading{
  font-family: 'Noto Kufi Arabic', sans-serif!important;
  line-height: 1.118;
  font-weight: bold;
  
  color: black;
  }
  .hire-list h6{
    font-size: 18px;
  }

.first-badge-dev {
  position: absolute;
  top: 49%;
  transform: translate(50%, -50%);
  background-color: rgb(70, 90, 181);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  width: 198px;
  height: 45px;
  z-index: 24;
  left: 341px;
  border-radius: 8px;
  padding: 12px;
}
.upload-button{
  bottom: 24px;
}

.first-badge-about {
  position: absolute;
  top: 49%;
  transform: translate(50%, -50%);
  background-color: rgb(70, 90, 181);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  width: 198px;
  height: 45px;
  z-index: 24;
  left: 341px;
  border-radius: 8px;
  padding: 12px;
}
.badge-about {
  position: absolute;
    top: 379px;
  transform: translate(-50%, -50%);
 
    z-index: 16;
    left: 152px;
}
.icons-blue{
  margin-left: 12px;
  }


#first-abt-badge, #first-dev-badge {
  font-size: 9px;
  position: absolute;
 font-weight: bold;
  color:var(--white);
}
#first-about-badge {
  font-size: 9px;
  position: absolute;
 font-weight: bold;
  color:var(--white);
}
#first-dev-badge{
  margin-top: -7px;
}


.second-badge-about {
  

  position: absolute;
  top: 416px;
  transform: translate(-50%, -50%);
  background-color: rgb(235, 86, 123);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  width: 175px;
  height: 52px;
  z-index: 16;
  left: 238px;
  padding: 11px;
  border-radius: 8px;
}
#second-about-badge {
  color: white;
  font-size: 9px;
  font-weight: 600;
}

.step-text{
  font-size: 19px;
 }

.second-badge-about p{

  font-weight: bold;
  line-height: 1.375;
  font-size: 15px;
  color: white;
  text-align: left;
  font-size: 10px;
}

.second-about-badge p{
  position: absolute;
  top: 416px;
  transform: translate(-50%, -50%);
  background-color: rgb(235, 86, 123);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  width: 175px;
  height: 52px;
  z-index: 16;
  left: 238px;
  padding: 11px;
  border-radius: 8px;
}


@media (max-width: 768px) {
  #header{
    z-index: 10;
  }
  .about-tech{
    font-size: 14px;
  }
  .upload-button{
    padding: 5px 13px;
  }

  .hire-form a {
    font-size: 16px;
   
  }
  .form-label{
    font-size: 16px;
  }
  .hire-list h6{
    font-size: 15px;
  }
.second-badge-about{
  top: 302px !important;
  width: 123px!important;
  height: 37px!important;
  left: 99px!important;
z-index: 1;

}
  .first-badge-dev {
    top: 28% !important;
    width: 125px !important;
    left: -16px !important;
    height: 34px;
    z-index: 1;
  
  }


  #first-abt-badge, #second-abt-badge, #first-dev-badge,#secound-about-badge {
    font-size: 6px !important;
    margin-top: -4px;
  }
  .dev-banner-ar p{
font-size:10px;
  }
  .small-heading-left{
text-align: center;
  }
 
}
  


.info-badge::before{
  right: 9px;
}
.info-badge img{
  right: 4px;
}
.info-badge img {
  
  margin-left: 0px;
  margin-right: 0px;
  left: 24px;
  right: -8px;
}
.info-badge p{
  text-align: right;
  font-size: 14px!important;
}

.step-icon-box img {
  margin-left: 15px;
}
.small-heading-right {
  text-align: right;
}
.image-box-home .description {
  margin-right: 15px;
}
.info-badge {
  border-radius: 60px;
  padding: 10px 20px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: white;
  position: relative; 
}

.info-badge img {
  
  margin-right: 0px;
  position: relative; 
  border-radius: 0px!important;
  object-fit: contain!important;
  margin-left: -6px;
  margin-right: 6px;
  left: 4px;
}

.info-badge::before {
  content: '';
  position: absolute;
  left: 9px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 55px;
  height: 55px;
  background-color: rgb(255, 255, 255); 
  border-radius: 50%; 
  z-index: 0; 
}
  .info-badge p {
    margin: 15px;
    padding-right: 8px;
    font-weight: bold;
    line-height: 1.375;
    font-size: 15px;
    color: white;
  text-align: right;
  }


.badge-1 {
  position: absolute;
    top: 379px;
  transform: translate(-50%, -50%);
  background-color: rgb(63, 188, 248);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    width: 322px;
    height: 74px;
    z-index: 16;
    left: 152px;
}

.badge-2 {
  position: absolute;
  top: 40%; /* On the right side */
  transform: translate(50%, -50%);
  background-color: rgb(235, 86, 123);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  width: 273px;
  height: 70px;
  z-index: 24;
  left: 255px;
}

.badge-3 {
  position: absolute;
  transform: translate(50%, 50%);
  background-color: rgb(70, 90, 181);
  top: 455px;
  width: 300px;
  height: 74px;
  z-index: 20;
  left: 178px

}


.chose-section::after {
  content: '';
  position: absolute;
  bottom: 196px;
  right: 43%;
  transform: translateX(-50%);
  width: 247.83px;
  height: 3.83px;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22276.83px%22%20height%3D%223.83px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke%3D%22rgb%2874%2C%2046%2C%20131%29%22%20stroke-width%3D%221.22px%22%20stroke-dasharray%3D%224.88%2C%206.1%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20opacity%3D%220.502%22%20fill%3D%22none%22%20d%3D%22M0.610%2C0.610%20L275.610%2C0.610%20%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
}


.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group h6 {
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
  font-weight: 700;
}


.input-field {
  width: 100%;
  padding: 10px 40px 10px 10px;
  border: 0px;
  border-bottom: 1px solid #ddd;
  border-radius: 0px;
  font-size: 14px;
  color: #555;
  box-shadow: none;
}

.input-field:focus {
  outline: none;
  border-color: #546de5;
}

.icon {
  position: absolute;
  right: 425px;
}

.contact-left-icon {
  position: absolute;
  left: 10px;
  top: -2px;
  color: #546de5;
  font-size: 18px;
  pointer-events: none;
  opacity: 0.5; 
  transition: opacity 0.3s ease; }

.form-group:focus-within .icon {
  opacity: 1;
}


.submit-btn {
  background: rgb(69, 89, 178);
  color: #fff;
  font-size: 16px;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  float: right;
}

.submit-btn:hover {
  background: #4056c8;
}


#footer-links{
  float:left!important; 
  text-align: left!important;}

  .btn.btn-outline-primary.col-6 {
    width: 54%!important;
  }

  .accordion-button::after {
    margin-left: auto !important; 
    margin-right: 0 !important;
    transform: rotate(180deg) !important; 
}

.accordion-button:not(.collapsed)::after {
    margin-left: auto !important; 
    margin-right: 0 !important;
}
html[dir="rtl"] .accordion-button {
  text-align: right; 
  direction: rtl; 
  justify-content: right; 
  font-size: 17px;
}



html[dir="rtl"] .accordion-button::after {
  right: auto;
  left: 1rem;
}
.icon {
  right: auto; 
  left: 10px; 
}
.contact-left-icon {
  left: auto; 
  right: 10px; 
}
.dev-all-text::after {
  left: auto; 
  right: 0; }
  .dev-banner-ar{
 
    background-image: url('/assets/images-team/DEVELOPER-banner-clean.png') ;
    background-size: cover; 
              background-position: center; 
              display: flex; 
              align-items: center; 
              color: white; 
              padding: 52px; 
              min-height: 60vh;
  }
  .dev-about-ar{
    background-image: url('/assets/images-team/About-ar.png'); 
  background-size: cover; 
  background-position: center; 
  display: flex; 
  align-items: center; 
  color: white; 
  padding: 52px; 
  min-height: 60vh;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .badge-2 {
      left: 120px;
      width: 239px;
    }
    .badge-3{
      width: 271px;
      left: 50px;
    }
  }
  
  

  @media (min-width: 768px) and (max-width: 1024px){
    .dev-banner-ar {
      min-height: 21vh; 
      background-size: contain; 
      background-color:#f4f4f4cc;
      background-repeat: no-repeat;

    }
    
    .second-badge-about {
      top: 215px;
      left: 283px;
      width: 129px;
      height: 38px;
    }
  
    .second-badge-about p{
      font-size: 7px;
    }
    .second-about-badge p{
      top: 255px;
      width: 127px;
  height: 45px;
  padding: 6px;
    }
    #second-about-badge{
      font-size: 7px;
    }
    .first-badge-dev {
      top: 243px;
      left: -5px;
      width: 120px;
      height: 36px;
    }
  
    #first-dev-badge {
      font-size: 6px;
      margin-top:-5px;
    
    }
    .first-badge-about {
  
      font-size: 10px;
    top: 22%;
    right: auto;
    margin-right: auto;
    margin-top: auto;
    width: 121px;
    height: 48px;
    left: 274px;
    }
    .dev-about-ar{
      background-size: cover; 
      min-height:21vh!important;
    }
    
  
    }
    
  @media (max-width: 767px) {
    .dev-banner-ar {
      background-image: url('/assets/images-team/DEVELOPER-banner-clean-576.png') ;
        min-height: 24vh; 
        padding: 40px; 
        background-size: cover; 
        background-color:#faf7f7cc ;
        background-repeat: no-repeat;
    }
    .second-badge-about {
      top: 173px !important;
  
    width: 79px !important;
    height: 43px !important;
    left: 157px !important;
    }
    .dev-about-ar{

      min-height: 24vh;
      padding: 30px;
      background-size: c;
      background-color: #faf7f7cc;
      background-repeat: no-repeat;
    }
    .second-about-badge p{
      width: 117px;
  height: 40px;
  left: 58px !important;
      top: 198px !important;
      width: 60px !important;
      height: 40px !important;
     padding: 6px;
      z-index: 1;
      left: 97px;
      top: 207px;

    }
    #second-about-badge{
      font-size: 5px;
    }
    .first-badge-about{
      top: 25%;
      width: 101px;
  height: 45px;
  left: 89px;
    }
    #first-about-badge {
      font-size: 6px;}
  
    .first-badge-dev {
      top: 24% !important;
      width: 105px !important;
      left: -8px !important;
      height: 34px;
}
#first-dev-badge {
  font-size: 6px !important;
  margin-top: -7px;}

  .first-badge-dev {
    top: 24% !important;
    width: 79px !important;
    left: -8px !important;
    height: 42px;
  }
  html[dir="rtl"] .accordion-button {
  
    font-size: 14px;
  }
  .first-badge-about {
    top: 25%;
    width: 77px;
    height: 36px;
    left: 55px;
    padding: 10px;
    z-index: 2;
  }
  .dev-about-ar p{
    font-size: 15px;
    width: 300px;
    max-width: 100%;
  }


}


  @media (min-width: 1000px) and (max-width: 1399px) {
   
    .badge-3 {
      
      top: 420px!important;
      left: -25px!important;
    }
    
    .badge-2 {
     
      left: 117px!important;
    }
  }
  
  
    @media only screen and (max-width: 767px) {
      .badge-2 {
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 60px;
      }
      .badge-1 {
        top: 320px;
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
        height: 60px;
      }
      .badge-3 {
        top: 400px;
        left: 50%;
        transform: translateX(-50%);
        width: 270px;
        height: 60px;
      }
      .info-badge p {
        text-align: right;
        font-size: 12px !important;
      }
      .info-badge::before {
        width: 50px;
        height: 50px;
        left: 8px;
      }
     
      
    }
    @media only screen and (max-width: 478px) {
      .info-badge img {
        width: 25px;
        height: 25px;
        margin-left: 0;
        margin-right: 5px;
      }
      .info-badge::before {
        width: 40px;
        height: 40px;
        left: 6px;
      }
      .dev-image{
        right: 169px;
      }
    
    }
    @media (min-width: 360px) and (max-width: 420px) {
      .badge-2 {
        top: 40%;
      }
      .badge-1 {
        top: 221px;
      }

      .badge-3 {
        top: 300px;
      }
      .price-text{
        font-size: 12px!important;
       }
    }
   
    @media screen and (min-width: 1200px) and (max-width: 1389px) {
      .chose-section::after {
        width: 202.83px!important;
        .first-badge-about {
          left: 192px!important;
       
          width: 183px;
        }
        
        
      }
     
    
    
    }
    @media screen and (max-width: 1200px){
    .navbar-nav .nav-link, html[dir="rtl"] #header .right-nav .dropdown-toggle span {
      font-size: 12px;
    }
  }
    @media screen and (max-width: 1196px) {
      .chose-section::after {
        display: none!important;
      }
    }
    @media screen and (min-width: 1000px) and (max-width: 1330px) {
      .first-badge-about {
        left: 192px!important;
     
        width: 183px;
      }
  }