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

 body {
   font-family: 'Poppins', sans-serif;
   line-height: 1.6;
   overflow-x: hidden
 }

 html {
   scroll-behavior: smooth;
 }

 #about {
   background: transparent;
   color: white;
 }

 #about h2 {
   color: #56ff5e;
 }

 /* Clients Section */
 .clients-section {
   padding: 60px 20px;
   text-align: center;
   background: #fff;
   overflow: hidden;
   margin-bottom: 50px;
 }

 .clients-section h2 {
   font-size: 1.8rem;
   margin-bottom: 30px;
   color: #222;
   font-weight: 600;
 }

 .clients-carousel {
   width: 100%;
   overflow: hidden;
   position: relative;
 }

 .logos-slide {
   display: flex;
   gap: 40px;
   animation: scroll 25s linear infinite;
 }

 .logos-slide img {
   max-height: 60px;
   object-fit: contain;
   filter: grayscale(0%);
   opacity: 0.8;
   transition: all 0.3s ease;
 }

 .logos-slide img:hover {
   filter: grayscale(100%);
   opacity: 1;
   transform: scale(1.1);
 }

 /* Animation */
 @keyframes scroll {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 /* Responsive */
 @media (max-width: 768px) {
   .logos-slide {
     gap: 20px;
   }

   .logos-slide img {
     max-height: 50px;
   }
 }


 /* Sections */
 section {
   padding: 60px 20px;
   max-width: 1100px;
   margin: auto;
 }

 section h2 {
   text-align: center;
   font-size: 2rem;
   margin-bottom: 30px;
 }



 /* ================================
   RESPONSIVE HEADINGS
================================ */
 h1 {
   font-size: clamp(28px, 5vw, 65px);
 }

 h2 {
   font-size: clamp(24px, 4vw, 45px);
 }

 h3 {
   font-size: clamp(18px, 3vw, 28px);
 }

 p {
   font-size: clamp(14px, 2vw, 18px);
 }

 /* ================================
   RESPONSIVE GRID SYSTEM
================================ */
 .grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
 }

 .grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
 }

 /* Tablet */
 @media(max-width:992px) {
   .grid-3 {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 /* Mobile */
 @media(max-width:768px) {

   .grid-3,
   .grid-2 {
     grid-template-columns: 1fr;
   }
 }

 @media(max-width:768px){
    section{
        padding:60px 20px !important;
    }
    
}