/* ============================================================
   REFRESH GLOBAL — INDEX PAGE CERTIFICATIONS SECTION
   ------------------------------------------------------------
   Location:
     /Views/Home/Index.cshtml

   Purpose:
     • Displays global certifications, approvals, and partners
     • Provides a premium infinite-scrolling logo carousel
     • Ensures all logos are perfectly uniform in size
     • Uses GPU-accelerated animations for smooth performance
     • Fully responsive across all devices

   Notes:
     • Logos stored under:
         ~/Content/hero/index/certifications/
     • This CSS is specific to the Index page only
     • Matches corporate UI language (radius, spacing, motion)
   ============================================================ */



/* ============================================================
   1️⃣ CERTIFICATION SLIDER WRAPPER
   ------------------------------------------------------------
   • Hides overflow to create a clean scrolling window
   • Centers content and maintains spacing
   ============================================================ */
.cert-slider {
    width: 100%;
    overflow: hidden; /* hides logos outside the frame */
    position: relative;
    padding: 10px 0;
}



/* ============================================================
   2️⃣ TRACK — INFINITE SCROLLING BELT
   ------------------------------------------------------------
   • Uses flexbox to align logos horizontally
   • Animation scrolls the entire belt leftwards
   • GPU-accelerated transform for ultra-smooth motion
   ============================================================ */
.cert-track {
    display: flex;
    align-items: center;
    gap: 60px; /* spacing between logos */
    animation: certScroll 35s linear infinite;
    will-change: transform; /* GPU acceleration */
}



/* ============================================================
   3️⃣ LOGO STYLING — UNIFORM SIZING
   ------------------------------------------------------------
   • Ensures all logos appear consistent
   • object-fit: contain prevents distortion
   • Subtle hover glow for premium feel
   ============================================================ */
.cert-logo {
    height: 70px; /* UNIFORM HEIGHT */
    width: auto; /* maintain aspect ratio */
    object-fit: contain;
    filter: grayscale(20%); /* slight desaturation for uniformity */
    opacity: 0.9;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

    /* Hover effect */
    .cert-logo:hover {
        transform: scale(1.12); /* subtle zoom */
        filter: grayscale(0%); /* restore full color */
        opacity: 1;
    }



/* ============================================================
   4️⃣ INFINITE SCROLL ANIMATION
   ------------------------------------------------------------
   • Moves the track from right → left
   • Seamless loop due to duplicated logos
   ============================================================ */
@keyframes certScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%); /* half track width for perfect loop */
    }
}



/* ============================================================
   5️⃣ SECTION TITLE
   ------------------------------------------------------------
   • Matches typography scale of other Index sections
   ============================================================ */
#certifications .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}



/* ============================================================
   6️⃣ RESPONSIVE BEHAVIOR
   ------------------------------------------------------------
   • Smaller logos on mobile
   • Slightly slower animation for readability
   ============================================================ */
@media (max-width: 768px) {
    .cert-logo {
        height: 55px;
        gap: 40px;
    }

    .cert-track {
        animation-duration: 45s; /* slower on mobile */
    }
}

<style >
/* ============================================================
   GLOBAL BODY TYPOGRAPHY — REFRESH GLOBAL STANDARD
   ------------------------------------------------------------
   PURPOSE:
     • Enforce Inter across the entire platform
     • Match navbar font size (1.35rem)
     • Use regular weight (400)
     • Override Bootstrap and all external CSS
   ============================================================ */
body {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
}

</style >