/* Media Query for Mobile Screens */
@media (max-width: 768px) {


  
}
  
  /* Media Query for Tablet Screens */
@media (max-width: 1024px) {
 
  
    .button-container {
      flex-direction: column;
      align-items: center;
    }
    .banner .cnt{
      margin: 0px 20px;
    }
    .loop .cnts{
      margin: 0px 20px;
    }
    .loop .cnts h2 {
      font-size: 18px;
    }
    .loop .cnts .loop-title{
      font-size: 10px;
    }
.banner .cnt h1{
  font-size: 22px;
}
.banner .cnt p{
  font-size: 10px;
}

.banner .cnt .hashim{
  font-size: 10px;
}
.button-container a{
  font-size: 12px;
}
.banner .cnt .nav ul li img {
  width: 150%;
}
.button-container a{
  padding: 10px 10px;
}
.banner .cnt .nav ul{
  gap: 30px;
  margin-left: -20px;
}
.loop .slide2{
  width: -126%;
  background: none;
}
.loop .slide{
  margin-left: -60px;
  transform: rotate(0deg);
}
.loop2 .education-card{
  margin: 30px;
}
.contact-section .button-container{
  right: -263px;
}
.contact-section h1 {
  font-size: 70px;
}
.footer h5{
  display: flex;
  justify-content: flex-start;
  margin-bottom: -64px;
}
.contact .slide3{
  width: 125.9%;
}
header .shadow{
  right: -58px;
}
    .banner .image{
      width: 39%;
      left: 221px;
    }
    .button {
      margin-top: 10px;
    }
    .work .button-container{
      margin: 0;
      display: none;
    }
    .work h5{
      margin-bottom: 30px;
    }
  }
  
  /* Media Query for Mobile Screens */
  @media (max-width: 768px) {
 
   
  
    /* Footer Section */
    .footer .column-100 {
      text-align: center;
    }
  
    .footer .column-40,
    .footer .column-20 {
      width: 100%;
      margin-bottom: 20px;
    }
  }


  /* Media Query for Small Mobile Screens (e.g., Phones in Portrait Mode) */
  @media (max-width: 768px) {
    .column-50{
      width: 100%;
    }
    .column-100{
      width: 100%;
    }
    .column-60{
      width: 100%;
  }
  .column-70{
      width: 100%;
  }
  .col-20{
    width: 20%;
  }
  .col-60{
    width: 60%;
  }
  .column-20{
    width: 20%;
  }
 .secbg{
  display: none;
 }
 .social-sidebar{
  display: none;
 }
    .banner .image {
        left: 180px;
        top: 269px;
    }
    .banner .image img {
      width: 270px;
    }
    .banner .cnt {
      margin-top: 70px;
    }
    .banner .cnt .nav ul{
     
    }
    .loop{
      width: 100%;
    }
    .loop{
      padding: 0;
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
    .loop .slide {
      padding: 30px 0px;
      margin-left: -30px;
      margin-top: 250px;
  }
  .loop .slide2{
   padding: 44px 44px;
  }
  .loop .slide ul li a{
    font-size: 15px;
  }
 
  .handwash-img{
    padding: 0;
    margin: 20px;
  }
  
    .button-container {
      flex-direction: column;
      align-items: center;
    }
    .banner{
      padding-top: 1px;
      padding-bottom: 29px;
    }
    
    .contact .slide3 {
      width: 117.9%;
  }

    .footer .column-100 {
      text-align: center;
    }
  
    .copy p {
      font-size: 7px;
    }
    .copy2 p {
      font-size: 7px;
    }
    .loop2 .cnt ul li {
      margin: 0px;
  }
    .loop2 .cnt ul li h5{
      font-size: 30px;
      text-align: center;
      margin-right: -82px;
    }
    .loop2 .education-card{
      padding: 10px;
      margin: 16px;
    }
    .loop2 .course-title{
      font-size: 15px;
    }
    .loop2 .university {
      font-size: 10px;
    }
    .loop2 .slide3{
      margin-left: -45px;
    }
    .loop2 .slide3 ul {
      animation: slideAnimation 10s linear infinite;
    }
    .contact .slide3{
      margin-top: 0;
      padding: 13px 0;
      margin-left: -29px;
      margin-bottom: -21px;
    }
    .contact-section h1{
      font-size: 40px;
      text-align: center;
    }
    .contact-section .button-container {
      right: -90px;
  }
  .contact-section p{
    font-size: 12px;
  }
  .footer h5 {
    font-size: 20px;
    margin-bottom: -75px;
    margin-left: 62px
}
.footer .button a {
  padding: 10px 89px;
  margin-bottom: 20px;
  margin-top: 79px;
}
.loop .slide ul{
  animation: slideAnimation 10s linear infinite;
}

.work .button .arrow {
  height: 30px;
  width: 43px;
}
.work .button a {
  margin-left: 340px;
}
.work .button a{
  margin-top: 13px;
}





.contact .slide3 ul{
  animation: slideAnimation 10s linear infinite;
}

 .product-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 8px;
}
.platform-text h1 {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 20px;
}
.platform-content {
  padding: 30px 30px;
}
.platform-logo {
  padding: 20px 20px;
}
.platforms-row{
  gap: 10px;
}

  }