body {  
    font-family: 'Poppins', sans-serif; 
    background-color: #f4f6f9;  color: #333; 
}
 .vgs-excellence-section {  
     overflow: hidden;
 }
.vgs-image-wrapper {  
    text-align: center;
}
.vgs-image {  max-width: 100%;  height: auto; border-radius: 20px;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  transition: transform 0.3s ease;}
.vgs-image:hover {transform: scale(1.05);}
.vgs-title {font-weight: 700; font-size: 2rem;}
.vgs-paragraph {  font-size: 1.1rem;  color: #555;  line-height: 1.6;}
@media (max-width: 768px) { .vgs-title {  font-size: 1.6rem;  }}
 .vgs-why-section {   background-color: #f9f9fb;}
.vgs-why-title {  font-weight: 700; font-size: 2rem;}
.vgs-why-card {  background: #fff;  border-radius: 20px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);  transition: all 0.3s ease;}
.vgs-why-card:hover {  transform: translateY(-10px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);}
.vgs-why-icon i {   font-size: 2.5rem;  color: #007bff;}
.vgs-why-image { border-radius: 15px; width: 100%;  height: auto;}
.vgs-why-heading {  font-weight: 600;margin-top: 15px;  margin-bottom: 10px;}
@media (max-width: 768px) {  .vgs-why-title {  font-size: 1.7rem; }}      
.vgs2-it-services { background: #f7f9fb;}
    .vgs2-it-title {  font-weight: 700;  font-size: 2rem;}
.vgs2-it-card { background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;   height: 100%;  display: flex;  flex-direction: column;}
.vgs2-it-card:hover {   transform: translateY(-8px);  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);}
.vgs2-it-img {width: 100%;height: 200px; object-fit: cover;}
.vgs2-it-content {  padding: 20px;}
.vgs2-it-content h5 { font-weight: 600; margin-bottom: 10px;}
.vgs2-it-content p {  color: #555;font-size: 1rem;}
@media (max-width: 768px) { .vgs2-it-title {   font-size: 1.7rem;  }
 .vgs2-it-img {    height: 180px;  }}
.vgs3-manpower-section {background-color: #f8f9fa;}
.vgs3-manpower-title {  font-weight: 700;  font-size: 2rem;}
.vgs3-manpower-card { background: #ffffff;  border-radius: 20px; overflow: hidden; transition: all 0.3s ease;height: 100%;}
.vgs3-manpower-card:hover {  transform: translateY(-6px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);}
.vgs3-manpower-img {  width: 100%;  height: 220px; object-fit: cover;}
.vgs3-manpower-content {  padding: 20px;}
.vgs3-manpower-content h5 {  font-weight: 600;  margin-bottom: 10px;}
.vgs3-manpower-content p {  color: #555;  font-size: 1rem;}
@media (max-width: 768px) { .vgs3-manpower-title {  font-size: 1.7rem;  } .vgs3-manpower-img { height: 180px; }}
.vgs-portfolio-section {  background: #f8f9fa;}
.vgs-portfolio-title {font-weight: 700; font-size: 2rem;}
.vgs-portfolio-card {  background: #fff;  border-radius: 15px;  padding: 20px;  text-align: center;  box-shadow: 0 4px 15px rgba(0,0,0,0.1);  transition: transform 0.3s ease;  height: 100%;}
.vgs-portfolio-card:hover {  transform: translateY(-10px);}
.vgs-portfolio-img {  max-height: 80px; object-fit: contain; margin-bottom: 15px;}
.vgs-portfolio-card h5 { margin-bottom: 10px;font-weight: 600;}
.vgs-portfolio-card a {  text-decoration: none;  color: #007bff;  font-weight: 500;}
.vgs7-quality-section { background: #f5f8fd;}
.vgs7-title {  font-weight: 700; font-size: 2rem;}
.vgs7-description { font-size: 1.1rem; color: #555;  max-width: 800px;margin: 0 auto;}
.vgs7-image-wrapper { text-align: center;}
.vgs7-image { border-radius: 20px;  max-height: 450px; object-fit: cover;}
.vgs7-list-group {  display: flex;  flex-direction: column;  gap: 20px;}
.vgs7-list-item { background: #ffffff; border: 1px solid #ddd; padding: 15px 25px;  border-radius: 12px; display: flex;  align-items: center; gap: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease;}
.vgs7-list-item:hover { background: #eef5ff; transform: translateY(-5px);}
.vgs7-icon { font-size: 1.8rem; color: #007bff;}
@media (max-width: 768px) {.vgs7-title {  font-size: 1.7rem; }.vgs7-description {    font-size: 1rem; }}

.container {
    max-width: 1200px;
    margin: 0 auto;
}
.align-items-center {
    align-items: center !important;
    margin-top: 10% !important;
}
.cl-logo-showcase {
  background: #f9f9f9;
  padding: 50px 20px;
  text-align: center;
}

.cl-logo-title {
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #333;
}

.cl-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 25px;
  align-items: center;
  justify-items: center;
}

.cl-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.cl-logo-item img {
  max-width: 120px;   /* fix all logos same width */
  max-height: 60px;   /* fix all logos same height */
  width: auto;
  height: auto;
  object-fit: contain; /* keeps aspect ratio without stretching */
  transition: transform 0.3s ease;
}

.cl-logo-item img:hover {
  transform: scale(1.1);
}

/* Section Styling */
.logo-showcase {
    padding: 5rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards 0.5s;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards 0.8s;
}

/* Logo Container */
.logos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    perspective: 1000px;
}

/* Logo Item */
.logo-item {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(50px) rotateY(20deg);
    animation: logoAppear 0.8s ease forwards;
}

.logo-item:nth-child(1) { animation-delay: 0.2s; }
.logo-item:nth-child(2) { animation-delay: 0.4s; }
.logo-item:nth-child(3) { animation-delay: 0.6s; }
.logo-item:nth-child(4) { animation-delay: 0.8s; }
.logo-item:nth-child(5) { animation-delay: 1.0s; }
.logo-item:nth-child(6) { animation-delay: 1.2s; }
.logo-item:nth-child(7) { animation-delay: 1.4s; }
.logo-item:nth-child(8) { animation-delay: 1.6s; }

.logo-item:hover {
    transform: translateY(-10px) scale(1.05) rotateY(0deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.logo-item img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Glow effect on hover */
.logo-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #ff6b6b);
    background-size: 400%;
    border-radius: 17px;
    opacity: 0;
    transition: opacity 0.5s ease, background-position 0.5s ease;
}

.logo-item:hover::before {
    opacity: 1;
    animation: glowing 1.5s ease infinite;
}

/* Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoAppear {
    to {
        opacity: 1;
        transform: translateY(0) rotateY(0deg);
    }
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Infinite scroll animation for mobile */
@media (max-width: 768px) {
    .logos-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 1rem;
    }
    
    .logos-container::-webkit-scrollbar {
        display: none;
    }
    
    .logo-item {
        min-width: 250px;
        scroll-snap-align: center;
    }
}

/* Continuous horizontal scroll for desktop */
@media (min-width: 769px) {
    .logos-container {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        position: relative;
    }
    
    .logo-item {
        flex: 0 0 auto;
    }
}