/*=============== MEDIA QUERIES ===============*/
@media screen and (max-width: 1024px) {
  .main_list {
    width: 100%;
    top: 0;
    right: -100%;
    flex-direction: column;
    align-items:flex-end;
    justify-content:center;   
    position: fixed;
    background: linear-gradient(42.01deg, rgb(9, 53, 78) 0.244%,rgb(21, 122, 180) 125.065%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    z-index: 1;
    gap: 20px;
  }
 
  .nav__list {    
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    justify-content:flex-start; 
    gap: 10px;
    height: 50%;
    padding: 20px 50px;
  }

  .nav__item a:hover{
 color: rgb(71, 71, 71) !important;
  }
     
 .navbar-brand{  
  position: relative;
  z-index: 2;  
  width: 40px;
  height: 40px;  
 }
 .nav div.media_button{
  display: block;
} 
.show-menu {
  right: 0; 
}

.lang-dropdown {
 margin-right: 50px;  
  }

  .header{
    height: 60px;
  }

  .certification-card-outer {
     
    height: 250px; 
    width: 200px;
   
    }

    .staff-card{    
     margin-bottom: 80px !important;
      }

}

@media screen and (max-width: 420px) {
  .sp {
    padding: 30px 10px 30px 20px;
    }
    .spl {
    padding: 30px 20px 30px 20px;
    }
    
    .p {
    padding: 50px;
    }
    
    .m{
    margin: 50px auto;
    }
  
    
    .lang-dropdown {
   
    font-size: 22px;
    font-weight: 500;
   
    
    }
    
  
    
    .dropdown-list li { 

    font-size: 22px;
    font-weight: 500;
    
    }
   
   
    
    /*=============== HERO  BEGIN ===============*/
    
    
    .hero_text_box{  
  
    padding: 70px 10px 70px 20px; 
    
    }
    .hero_text_box h5{ 
    font-size: 20px;
    font-weight: 500;
    }
    
    .hero_text_box h1{ 
    font-size: 24px;
    font-weight: 500;
    padding-right: 100px; 
    }
    .hero_text_box p{  
    font-size: 18px;
    font-weight: 400;
    }
    .button-box{
    margin-top:45px ;
    }
    
    .green-button, .transient-button{  
    width: 230px;
    height: 70px;
    font-size: 18px;
    font-weight: 600;
    padding-left: 20px;
    }
    
    .green-button a, .transient-button a{    
    
    font-size: 18px;
    font-weight: 600;    
     }
   
    
    .transient-button{
    margin-left: 0;
    margin-top: 20px;
    }
    
    
    .green-button::before, .transient-button::before{  
    top: 50%;
    transform: translateY(-50%);
    }
    
    .title h2 {
    font-size: 22px;
    font-weight: 600;
    }
    
    
    .title h3{
    font-size: 34px;
    font-weight: 700;
    margin: 5px 0 20px 0;
    }
    
      
    .about_content{  
    padding: 230px 0 40px 0;
    gap: 20px;
    }
    
    .about_content h3{
   
    font-size: 24px;
    font-weight: 700; 
  
    }
    .about_content p,.about_content ul li{
  
    font-size: 20px;
    font-weight: 400;
    }
    .about_img {
    margin: 130px 0 100px 0;
    }
    
    .about_img img {
    top: 50%;
    left: 45%;
    transform: translateX(-50%, -50%) rotate(-20deg);
    width: 70%;
    opacity: 0.9;
    }
    
   
    .stat-number {
   
    font-size: 78px;
    font-weight: 700;
    
    }
    
    .stat-text {
  
    font-size: 22px;
    font-weight: 500;
    }
    
    .gradient-overlay {
  
    width: 551px;
    height: 551px;  
    }
    
    
    /*=============== Section statistics  END ===============*/
    
    /*=============== Section services  Begin ===============*/
    
    .title p {
   
    font-weight: 400;
    line-height: 22px;
    margin-left: 20%;
    }
    
    .workforce{
    justify-content: center;
    gap: 8px;
    row-gap: 30px;
    margin: 45px 0;
    }
    
    .contract{
      justify-content: center;
      gap: 8px;
      row-gap: 30px;
      margin: 45px 0;
    }
    .solution-card{
   height: 300px;
    padding: 50px 20px 60px 30px;
   
    }
    
    .solution-card:hover  p,.solution-card:hover  span {
    font-size: 22px;
    font-weight: 500;
    
    }
    
    
    
    .solution-card img {
    width: 60px;
    }
    
    .solution-card p {
    
    font-size: 22px;
    font-weight: 500;
    }
    .solution-card span {   
    font-size: 20px;
    font-weight: 500;
    }
  
  
    
    .sector-card {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    color: #fff;
    }
    
    .sector-card img {
    width: 60px;
    height: 60px;
    }
   
    
    .sector-text p {
    font-size: 24px;
    font-weight: 600;
    }
    
    .sector-text span {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 400;
    }
    
    .sector-card.special-card {  
    margin: 30px 0;
    }
    
    .sector-card.special-card::before {
    display: none;
    }
    
    .sector-card.special-card::after {
    display: none;
    }
    
    .sectors::before {
  
    top: -10%;
    right: -10%;
    width: 900px;
    height: 900px;
    opacity: 0.23;
    transform: rotate(5deg);
    }
    
   
    .certifications-box {
   
    gap: 15px; 
    row-gap: 50px;
    justify-content: center;
    }
    
   
    .certification-card {     
    padding: 40px 20px 30px 30px;
    }
    
    
    .certification-card p { 
    font-size: 22px;
    font-weight: 500;
    }
  
    
    .experience-text p{  
    font-size: 18px;
    font-weight: 400;
    
    }
  
    
    .experience-list h4{
  
    font-size: 20px;
    font-weight: 700;
    padding: 10px 10px 10px 50px;
    }
    
    .experience-list p{
    
    font-size: 16px;
    font-weight: 400;
    margin:0 10px 0 50px;
    }
    
   
    .experience-list li::before {
  
    width:42px;
    height: 52px;
    margin-right: 10px;
    }
    
    
  .experience-img{
  margin: 50px 0 300px 0;
    }
    
   
    
    .img-front{
    left: 50px;
   
    }
    
    .img-middle{ 
    left: 50px;
  
    }
    .img-back{  
    left: 0;
    } 
    
    
    
    /*=============== Section experiences  END ===============*/
    
    /*=============== Section advanteges  BEGIN ===============*/
    .advanteges-box{
   
    padding:0;
    gap: 30px;
    row-gap: 0;
    }
    
    .advanteges-text{
      flex: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    }
    .advanteges-list{
      flex: none;
      width: 100%;
    }
    .advanteges-text p{   
    font-size: 20px;
    font-weight: 400; 
    }
    
    .advanteges-list li{
   
    font-size: 18px;
    font-weight: 500;
    }
    .advanteges-list li {
    position: relative;
    padding: 0 0 30px 60px;
    
    }
    
    .advanteges-list li::before {  
    width:40px;
    height: 40px;
    top: 0;
    left: 0;
    }
    
    /*=============== Section advanteges  END ===============*/
    
    /*=============== Section team  BEGIN ===============*/
    .staff{ 
    gap:50px;
    width: 100%;
    padding: 0;  
    justify-content: center;
    }
    
    .staff-card{    
    flex: none;
    width: 60%;
    }
    
    .staff-img{
    width: 100%;
    height: 300px;
    }
    
    .staff-img img{
    width: 100%;
    border-radius: 15px;
    overflow: hidden; 
    
    }
    
    .staff-text{
    padding: 20px 16px 5px 16px;
    }
    
    .staff-text h4{    
    font-size: 20px;
    font-weight: 500;
    }
    
    .staff-text p{  
    font-size: 16px;
    font-weight: 400;
   
    }
    
    /*=============== Section team  END ===============*/
    
    /*=============== Section contact  BEGIN ===============*/
    
   
    .contact-line{
    padding: 30px;
    
    }
    
    .contact-line h2{
  
    font-size: 36px;
    font-weight: 700;
    }
    .contact-line p{
    
    font-size: 20px;
    font-weight: 500;
    margin:30px 0 60px 0;
    }
    /*=============== Section contact  END ===============*/
    
    
    /*=============== FOOTER BEGIN ===============*/
    
    footer{
    padding: 20px 0 20px 0;
    }
    
    .footer_logo{
    padding: 40px 0;
    }
    
    .footer_logo img{
    width: 80px;
    height: 97px;
    margin-bottom: 20px;
    }
    .footer_logo p{
   
    font-size: 12px;
    font-weight: 400;
  
    }
  .menu{
    padding: 20px 0;
  }
    .menu h4 {
   
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    }
    
    .menu ul li{
    padding: 10px 0;
   
    font-size: 18px;
    font-weight: 500;
    }
    
    .menu ul li a{
   
    font-size: 18px;
    font-weight: 500;
  
    }
    
    .sosial_div{
   
    display: flex;
    gap: 30px;
    
    }
    
    .footer-bottom span{
  
    font-size: 16px;
    font-weight: 400;
    }
    
    .footer-hr{
     
     margin: 50px 0 20px 0;
    }
    
    /*============== FOOTER END ===============*/
    
    
    
    
     
     .with-lines::before {
     
       background-position:
         15% 0,
         35% 0,
         60% 0,
         85% 0;
     }
      

    

}

@media screen and (min-width: 420px) and (max-width: 768px) {  
  .sp {
    padding: 30px 10px 30px 50px;
    }
    .spl {
    padding: 30px 20px 30px 50px;
    }
    
    .p {
    padding: 50px;
    }
    
    .m{
    margin: 50px auto;
    }
  
    
    .lang-dropdown {
   
    font-size: 22px;
    font-weight: 500;
   
    
    }
    
  
    
    .dropdown-list li { 

    font-size: 22px;
    font-weight: 500;
    
    }
   
  
    
    /*=============== HERO  BEGIN ===============*/
    
    
    .hero_text_box{  
  
    padding: 10px 10px 70px 40px; 
    
    }
    .hero_text_box h5{ 
    font-size: 20px;
    font-weight: 500;
    }
    
    .hero_text_box h1{ 
    font-size: 24px;
    font-weight: 500;
    padding-right: 100px; 
    }
    .hero_text_box p{  
    font-size: 18px;
    font-weight: 400;
    }
    .button-box{
    margin-top:45px ;
    }
    
    .green-button, .transient-button{  
    width: 230px;
    height: 70px;
    font-size: 18px;
    font-weight: 600;
    padding-left: 20px;
    }
    
    .green-button a, .transient-button a{    
    
    font-size: 18px;
    font-weight: 600;    
     }
   
    
    .transient-button{
    margin-left: 0;
    margin-top: 20px;
    }
    
    
    .green-button::before, .transient-button::before{  
    top: 50%;
    transform: translateY(-50%);
    }
    
    .title h2 {
    font-size: 22px;
    font-weight: 600;
    }
    
    
    .title h3{
    font-size: 34px;
    font-weight: 700;
    margin: 5px 0 20px 0;
    }
    
      
    .about_content{  
    padding: 230px 0 40px 0;
    gap: 20px;
    }
    
    .about_content h3{
   
    font-size: 24px;
    font-weight: 700; 
  
    }
    .about_content p,.about_content ul li{
  
    font-size: 20px;
    font-weight: 400;
    }
    .about_img {
    margin: 130px 0 100px 0;
    }
    
    .about_img img {
    top: 50%;
    left: 45%;
    transform: translateX(-50%, -50%) rotate(-20deg);
    width: 70%;
    opacity: 0.9;
    }
    
   
    .stat-number {
   
    font-size: 78px;
    font-weight: 700;
    
    }
    
    .stat-text {
  
    font-size: 22px;
    font-weight: 500;
    }
    
    .gradient-overlay {
  
    width: 551px;
    height: 551px;  
    }
    
    
    /*=============== Section statistics  END ===============*/
    
    /*=============== Section services  Begin ===============*/
    
    .title p {
   
    font-weight: 400;
    line-height: 22px;
    margin-left: 20%;
    }
    
    .workforce{
    justify-content: center;
    gap: 8px;
    row-gap: 30px;
    margin: 45px 0;
    }
    
    .contract{
      justify-content: center;
      gap: 8px;
      row-gap: 30px;
      margin: 45px 0;
    }
    .solution-card{
   height: 300px;
    padding: 50px 20px 60px 30px;
   
    }
    
    .solution-card:hover  p,.solution-card:hover  span {
    font-size: 22px;
    font-weight: 500;
    
    }
    
    
    
    .solution-card img {
    width: 60px;
    }
    
    .solution-card p {
    
    font-size: 22px;
    font-weight: 500;
    }
    .solution-card span {   
    font-size: 20px;
    font-weight: 500;
    }
  
  
    
    .sector-card {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    color: #fff;
    }
    
    .sector-card img {
    width: 60px;
    height: 60px;
    }
   
    
    .sector-text p {
    font-size: 24px;
    font-weight: 600;
    }
    
    .sector-text span {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 400;
    }
    
    .sector-card.special-card {  
    margin: 30px 0;
    }
    
    .sector-card.special-card::before {
    display: none;
    }
    
    .sector-card.special-card::after {
    display: none;
    }
    
    .sectors::before {
  
    top: -10%;
    right: -10%;
    width: 900px;
    height: 900px;
    opacity: 0.23;
    transform: rotate(5deg);
    }
    
   
    .certifications-box {
   
    gap: 15px; 
    row-gap: 50px;
    justify-content: center;
    }
    
   
    .certification-card {     
    padding: 40px 20px 30px 30px;
    }
    
    
    .certification-card p { 
    font-size: 22px;
    font-weight: 500;
    }
  
    
    .experience-text p{  
    font-size: 18px;
    font-weight: 400;
    
    }
  
    
    .experience-list h4{
  
    font-size: 20px;
    font-weight: 700;
    padding: 10px 10px 10px 50px;
    }
    
    .experience-list p{
    
    font-size: 16px;
    font-weight: 400;
    margin:0 10px 0 50px;
    }
    
   
    .experience-list li::before {
  
    width:42px;
    height: 52px;
    margin-right: 10px;
    }
    
    
  .experience-img{
  margin: 50px 0 300px 0;
    }
    
   
    
    .img-front{
    left: 50px;
   
    }
    
    .img-middle{ 
    left: 50px;
  
    }
    .img-back{  
    left: 0;
    } 
    
    
    
    /*=============== Section experiences  END ===============*/
    
    /*=============== Section advanteges  BEGIN ===============*/
    .advanteges-box{
   
    padding:0;
    gap: 30px;
    row-gap: 0;
    }
    
    .advanteges-text{
      flex: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    }
    .advanteges-list{
      flex: none;
      width: 100%;
    }
    .advanteges-text p{   
    font-size: 20px;
    font-weight: 400; 
    }
    
    .advanteges-list li{
   
    font-size: 18px;
    font-weight: 500;
    }
    .advanteges-list li {
    position: relative;
    padding: 0 0 30px 60px;
    
    }
    
    .advanteges-list li::before {  
    width:40px;
    height: 40px;
    top: 0;
    left: 0;
    }
    
    /*=============== Section advanteges  END ===============*/
    
    /*=============== Section team  BEGIN ===============*/
    .staff{ 
    gap:50px;
    width: 100%;
    padding: 0;  
    justify-content: center;
    }
    
    .staff-card{    
    flex: none;
    width: 60%;
    }
    
    .staff-img{
    width: 100%;
    height: 300px;
    }
    
    .staff-img img{
    width: 100%;
    border-radius: 15px;
    overflow: hidden; 
    
    }
    
    .staff-text{
    padding: 20px 16px 5px 16px;
    }
    
    .staff-text h4{    
    font-size: 20px;
    font-weight: 500;
    }
    
    .staff-text p{  
    font-size: 16px;
    font-weight: 400;
   
    }
    
    /*=============== Section team  END ===============*/
    
    /*=============== Section contact  BEGIN ===============*/
    
   
    .contact-line{
    padding: 30px;
    
    }
    
    .contact-line h2{
  
    font-size: 36px;
    font-weight: 700;
    }
    .contact-line p{
    
    font-size: 20px;
    font-weight: 500;
    margin:30px 0 60px 0;
    }
    /*=============== Section contact  END ===============*/
    
    
    /*=============== FOOTER BEGIN ===============*/
    
    footer{
    padding: 20px 0 20px 0;
    }
    
    .footer_logo{
    padding: 40px 0;
    }
    
    .footer_logo img{
    width: 80px;
    height: 97px;
    margin-bottom: 20px;
    }
    .footer_logo p{
   
    font-size: 12px;
    font-weight: 400;
  
    }
  .menu{
    padding: 20px 0;
  }
    .menu h4 {
   
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    }
    
    .menu ul li{
    padding: 10px 0;
   
    font-size: 18px;
    font-weight: 500;
    }
    
    .menu ul li a{
   
    font-size: 18px;
    font-weight: 500;
  
    }
    
    .sosial_div{
   
    display: flex;
    gap: 30px;
    
    }
    
    .footer-bottom span{
  
    font-size: 16px;
    font-weight: 400;
    }
    
    .footer-hr{
     
     margin: 50px 0 20px 0;
    }
    
    /*============== FOOTER END ===============*/
    
    
    
    
     
     .with-lines::before {
     
       background-position:
         15% 0,
         35% 0,
         60% 0,
         85% 0;
     }
     
     
    
}

@media screen and (min-width: 768px) and (max-width: 992px) {

  .sp {
  padding: 80px 10px 50px 45px;
  }
  .spl {
  padding: 90px 30px 100px 45px;
  }
  
  .p {
  padding: 50px;
  }
  
  .m{
  margin: 50px auto;
  }

  
  .lang-dropdown {
  position: relative;
  width: auto;
  font-family: Gilroy;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  user-select: none;
  padding-right: 30px;
  
  }
  
  .lang-dropdown .selected {
  border: none;
  }
  
  .lang-dropdown::after {
  content: url(../images/lang_arrow.svg);
  position: absolute;
  right: 0;
  top: -10%;
  pointer-events: none;
  }
  
  .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(9, 53, 78, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  display: none;
  z-index: 1;
  }
  
  .dropdown-list li { 
  padding: 6px 10px;
  font-family: Gilroy;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);  
  
  }
  
  .dropdown-list li:hover {
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  }
  

  
  
  /*=============== HERO  BEGIN ===============*/
  
  
  .hero_text_box{  

  padding: 100px 100px 170px 50px; 
  
  }
  .hero_text_box h5{ 
  font-size: 24px;
  font-weight: 600;
  }
  
  .hero_text_box h1{ 
  font-size: 36px;
  font-weight: 600;
  padding-right: 100px; 
  }
  .hero_text_box p{  
  font-size: 22px;
  font-weight: 400;
  }
  .button-box{
  margin-top:45px ;
  }
  
  .green-button, .transient-button{  
  width: 230px;
  height: 70px;
  font-size: 18px;
  font-weight: 600;
  padding-left: 20px;
  }
  
  .green-button a, .transient-button a{    
  
  font-size: 18px;
  font-weight: 600;    
   }
 
  
  .transient-button{
  margin-left: 30px;
  }
  
  
  .green-button::before, .transient-button::before{

  top: 50%;
  transform: translateY(-40%);
  }
  
  .title h2 {
  font-size: 24px;
  font-weight: 600;
  }
  
  
  .title h3{
  font-size: 48px;
  font-weight: 700;
  margin: 5px 0 20px 0;
  }
  
    
  .about_content{  
  padding: 280px 0 40px 0;
  gap: 20px;
  }
  
  .about_content h3{
 
  font-size: 24px;
  font-weight: 700; 

  }
  .about_content p,.about_content ul li{

  font-size: 20px;
  font-weight: 400;
  }
  .about_img {
  margin: 130px 0 100px 0;
  }
  
  .about_img img {
  top: 50%;
  left: 45%;
  transform: translateX(-50%, -50%) rotate(-20deg);
  width: 70%;
  opacity: 0.9;
  }
  
 
  .stat-number {
 
  font-size: 78px;
  font-weight: 700;
  
  }
  
  .stat-text {

  font-size: 22px;
  font-weight: 500;
  }
  
  .gradient-overlay {

  width: 551px;
  height: 551px;  
  }
  
  
  /*=============== Section statistics  END ===============*/
  
  /*=============== Section services  Begin ===============*/
  
  .title p {
 
  font-weight: 400;
  line-height: 24px;
  margin-left: 20%;
  }
  
  .workforce{
  gap: 8px;
  row-gap: 30px;
  margin: 45px 0;
  }
  
  .contract{
    gap: 8px;
    row-gap: 30px;
    margin: 45px 0;
  }
  .solution-card{
 
  padding: 50px 20px 60px 30px;
 
  }
  
  .solution-card:hover  p,.solution-card:hover  span {
  font-size: 24px;
  font-weight: 500;
  
  }
  
  
  
  .solution-card img {
  width: 60px;
  }
  
  .solution-card p {
  
  font-size: 24px;
  font-weight: 600;
  }
  .solution-card span {
 
  font-size: 20px;
  font-weight: 600;
  }


  
  .sector-card {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  color: #fff;
  }
  
  .sector-card img {
  width: 60px;
  height: 60px;
  }
 
  
  .sector-text p {
  font-size: 30px;
  font-weight: 500;
  }
  
  .sector-text span {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  }
  
  .sector-card.special-card {

  margin: 50px 0;
  }
  
  .sector-card.special-card::before {
  display: none;
  }
  
  .sector-card.special-card::after {
  display: none;
  }
  
  .sectors::before {

  top: -10%;
  right: -10%;
  width: 900px;
  height: 900px;
  opacity: 0.23;
  transform: rotate(5deg);
  }
  
 
  .certifications-box {
 
  gap: 15px; 
  row-gap: 50px;
  }
 
  .certification-card {     
  padding: 40px 20px 30px 30px;
  }
  
  
  .certification-card p { 
  font-size: 24px;
  font-weight: 600;
  }

  
  .experience-text p{

  font-size: 18px;
  font-weight: 400;
  
  }

  
  .experience-list h4{

  font-size: 20px;
  font-weight: 700;
  padding: 10px 150px 10px 50px;
  }
  
  .experience-list p{
  
  font-size: 16px;
  font-weight: 400;
  margin:0 150px 0 50px;
  }
  
 
  .experience-list li::before {

  width:42px;
  height: 52px;
  margin-right: 10px;
  }
  
  
.experience-img{
margin: 50px 0 550px 0;
  }
  
 
  
  .img-front{
  left: 50px;
 
  }
  
  .img-middle{ 
  left: 70px;

  }
  .img-back{  
  left: 0;
  } 
  
  
  
  /*=============== Section experiences  END ===============*/
  
  /*=============== Section advanteges  BEGIN ===============*/
  .advanteges-box{
 
  padding:0;
  gap: 30px;
  row-gap: 50px;
  }
  
  .advanteges-text{
    flex: none;
  width: 100%;
  margin-right: 0;
  }
  .advanteges-list{
    flex: none;
    width: 45%;
  }
  .advanteges-text p{
 
  font-size: 20px;
  font-weight: 400; 
  }
  
  .advanteges-list li{
 
  font-size: 20px;
  font-weight: 600;
  }
  .advanteges-list li {
  position: relative;
  padding: 0 0 30px 60px;
  
  }
  
  .advanteges-list li::before {  
  width:40px;
  height: 40px;
  top: 0;
  left: 0;
  }
  
  /*=============== Section advanteges  END ===============*/
  
  /*=============== Section team  BEGIN ===============*/
  .staff{ 
  gap:100px;
  width: 100%;
  padding: 20px 0;  
  }
  
  .staff-card{
  flex: none;
  width: 40%;
  }
  
  .staff-img{
  width: 100%;
  height: 300px;
  }
  
  .staff-img img{
  width: 100%;
  border-radius: 15px;
  overflow: hidden; 
  
  }
  
  .staff-text{
  padding: 25px 16px 5px 16px;
  }
  
  .staff-text h4{
  
  font-size: 24px;
  font-weight: 600;
  }
  
  .staff-text p{

  font-size: 16px;
  font-weight: 500;
 
  }
  
  /*=============== Section team  END ===============*/
  
  /*=============== Section contact  BEGIN ===============*/
  
  #contact{
  background: rgb(240, 240, 240);
  
  }
  .contact-line{
  padding: 30px;
  
  }
  
  .contact-line h2{

  font-size: 48px;
  font-weight: 700;
  }
  .contact-line p{
  
  font-size: 22px;
  font-weight: 500;
  margin:30px 0 60px 0;
  }
  /*=============== Section contact  END ===============*/
  
  
  /*=============== FOOTER BEGIN ===============*/
  
  footer{
  padding: 45px 0 43px 0;
  }
  
  .footer_logo{
  padding: 40px 0;
  }
  
  .footer_logo img{
  width: 80px;
  height: 97px;
  margin-bottom: 20px;
  }
  .footer_logo p{
 
  font-size: 12px;
  font-weight: 400;

  }
.menu{
  padding: 20px 0;
}
  .menu h4 {
 
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  }
  
  .menu ul li{
  padding: 10px 0;
 
  font-size: 18px;
  font-weight: 500;
  }
  
  .menu ul li a{
 
  font-size: 18px;
  font-weight: 500;

  }
  
  .sosial_div{
 
  display: flex;
  gap: 30px;
  
  }
  
  .footer-bottom span{

  font-size: 16px;
  font-weight: 400;
  }
  
  .footer-hr{
   
   margin: 50px 0 30px 0;
  }
  
  /*============== FOOTER END ===============*/
  
  
  
  
   
   .with-lines::before {
   
     background-position:
       15% 0,
       35% 0,
       60% 0,
       85% 0;
   }
   
   
  
  
  

}

@media screen and (min-width: 992px) and (max-width: 1023px) {
  
  .sp {
    padding: 70px 10px 40px 45px;
    }
    .spl {
    padding: 100px 10px 80px 45px;
    }
    
    .p {
    padding: 80px;
    }
    
    .m{
    margin: 80px auto;
    }
    
    
    /*=============== NAVBAR BEGIN ===============*/
    
    
    
    .nav__list {
    gap: 30px;
    }
    
    .main_list {
     gap: 8%;
     }
   
    .nav__item a{
    
    font-size: 18px;
    font-weight: 400;
    
    }
    
    
    /*=============== NAVBAR END ===============*/
    
    
    
    
    /*=============== HERO  BEGIN ===============*/
    
    
    
    .hero_text_box{   
    padding: 110px 120px 180px 45px; 
    
    }
    .hero_text_box h5{
    font-size: 20px;
    font-weight: 400;
    }
    
    .hero_text_box h1{
    
    font-size: 36px;
    font-weight: 600;
    padding-right: 200px; 
    }
    .hero_text_box p{
    
    font-size: 22px;
    font-weight: 400;
    }
    .button-box{
    margin-top:45px ;
    }
    
    .green-button, .transient-button{
    width: 250px;
    height: 75px;
    font-size: 22px;
    font-weight: 600;
    }
    
    .green-button a, .transient-button a{    
    
    font-size: 22px;
    font-weight: 600;    
     }
     
    
    
    .title h2 {
    font-size: 24px;
    font-weight: 700;
    }
    
    
    .title h3{
    
    font-size: 48px;
    font-weight: 700;
    }
    
    
    
    .about_content{  
    padding: 30px 0;
    }
    
    .about_content h3{
    
    font-size: 22px;
    font-weight: 600; 
    }
    .about_content p,.about_content ul li{
    font-size: 18px;
    font-weight: 400;
    
    }
    
    
    
    
    /*=============== Section about END ===============*/
    
    
    /*=============== Section statistics  BEGIN ===============*/
    
    
    .stat-number {
    
    font-size: 76px;
    font-weight: 700;
    
    }
    
    .stat-text {
    font-size: 22px;
    font-weight: 500;
    }
    
    .gradient-overlay {
    position: absolute;
    width: 751px;
    height: 751px;  
    }
    
    
    /*=============== Section statistics  END ===============*/
    
    /*=============== Section services  Begin ===============*/
    
    .title p {
    
    font-size: 20px;
    font-weight: 400;
    }
    
    .workforce{
    display: flex;
    flex-wrap: wrap;  
    justify-content: space-between;
    gap: 8px;
    row-gap: 30px;
    margin: 45px 0;
    }
    
    .contract{
    column-gap:150px;
    row-gap: 30px;
    }
    .solution-card{
    padding: 60px 40px;
    }
    
    
    
    .solution-card:hover  p,.solution-card:hover  span {
    
    font-size: 22px;
    font-weight: 600;
    
    }
    
    
    .solution-card p {
    font-size: 22px;
    }
    .solution-card span {
    font-size: 18px;
    }
    
    
    .sector-card img {
    width: 70px;
    height: 70px;
    }
    
    
    .sector-text p {
    
    font-size: 22px;
    font-weight: 500;
    }
    
    .sector-text span {
    
    font-size: 18px;
    font-weight: 400;
    }
    
    
    .sector-card.special-card::before {
    
    height:70px;
    }
    
    .sector-card.special-card::after {
    
    height: 70px;
    
    }
    
    
    
    .certifications-box {
     
    row-gap: 80px;
    }
    
    .certification-card p {
    
    font-size: 22px;
    font-weight: 500;
    }
    
    
    .staff{
    gap:70px;
    }
    
    .staff-card{
    flex: 3;
    }
    
    
    .footer_logo img{
    width: 100px;
    height: 117px;
    margin-bottom: 25px;
    }
    
    
    .menu h4 {
    margin-bottom: 40px;
    }
    
    .menu ul li{
    padding: 17px 0;
    font-size: 18px;
    font-weight: 500;
    }
    
    .menu ul li a{
    
    font-size: 18px;
    font-weight: 500;
    line-height: 24px
    }
    
    
    .show-scroll {
     bottom: 2rem;
    }
    
    
    
     .with-lines {
       position: relative;
     }
     
     .with-lines::before {
    
       background-position:
         20% 0,
         40% 0,
         60% 0,
         80% 0;
     }



}

@media screen and (min-width: 1023px) and (max-width: 1224px) {

.sp {
padding: 70px 10px 40px 75px;
}
.spl {
padding: 100px 10px 80px 75px;
}

.p {
padding: 80px;
}

.m{
margin: 80px auto;
}


/*=============== NAVBAR BEGIN ===============*/



.nav__list {
gap: 30px;
}

.main_list {
 gap: 8%;
 }


.nav__item a{

font-size: 18px;
font-weight: 400;

}


/*=============== NAVBAR END ===============*/




/*=============== HERO  BEGIN ===============*/



.hero_text_box{   
padding: 110px 120px 180px 65px; 

}
.hero_text_box h5{
font-size: 20px;
font-weight: 400;
}

.hero_text_box h1{

font-size: 36px;
font-weight: 600;
padding-right: 200px; 
}
.hero_text_box p{

font-size: 22px;
font-weight: 400;
}
.button-box{
margin-top:45px ;
}

.green-button, .transient-button{
width: 250px;
height: 75px;
font-size: 22px;
font-weight: 600;
}

.green-button a, .transient-button a{    

font-size: 22px;
font-weight: 600;    
 }
 


.title h2 {
font-size: 24px;
font-weight: 700;
}


.title h3{

font-size: 48px;
font-weight: 700;
}



.about_content{  
padding: 30px 0;
}

.about_content h3{

font-size: 22px;
font-weight: 600; 
}
.about_content p,.about_content ul li{
font-size: 18px;
font-weight: 400;

}




/*=============== Section about END ===============*/


/*=============== Section statistics  BEGIN ===============*/


.stat-number {

font-size: 76px;
font-weight: 700;

}

.stat-text {
font-size: 22px;
font-weight: 500;
}

.gradient-overlay {
position: absolute;
width: 751px;
height: 751px;  
}


/*=============== Section statistics  END ===============*/

/*=============== Section services  Begin ===============*/

.title p {

font-size: 20px;
font-weight: 400;
}

.workforce{
display: flex;
flex-wrap: wrap;  
justify-content: space-between;
gap: 8px;
row-gap: 30px;
margin: 45px 0;
}

.contract{
column-gap:150px;
row-gap: 30px;
}
.solution-card{
padding: 60px 40px;
}



.solution-card:hover  p,.solution-card:hover  span {

font-size: 22px;
font-weight: 600;

}


.solution-card p {
font-size: 22px;
}
.solution-card span {
font-size: 18px;
}


.sector-card img {
width: 70px;
height: 70px;
}


.sector-text p {

font-size: 22px;
font-weight: 500;
}

.sector-text span {

font-size: 18px;
font-weight: 400;
}


.sector-card.special-card::before {

height:70px;
}

.sector-card.special-card::after {

height: 70px;

}



.certifications-box {
 
row-gap: 80px;
}

.certification-card p {

font-size: 22px;
font-weight: 500;
}


.staff{
gap:70px;
}

.staff-card{
flex: 3;
}


.footer_logo img{
width: 100px;
height: 117px;
margin-bottom: 25px;
}


.menu h4 {
margin-bottom: 40px;
}

.menu ul li{
padding: 17px 0;
font-size: 18px;
font-weight: 500;
}

.menu ul li a{

font-size: 18px;
font-weight: 500;
line-height: 24px
}


.show-scroll {
 bottom: 2rem;
}



 .with-lines {
   position: relative;
 }
 
 .with-lines::before {

   background-position:
     20% 0,
     40% 0,
     60% 0,
     80% 0;
 }
 
}