body {
        font-family: "Inter", sans-serif;
    }

    /* Mission, Vision, Aim Cards - Explicit styling to fix Chrome rendering */
    .mission-vision-aim-card {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    border-top-color 0.5s ease !important;
        will-change: transform, box-shadow, border-top-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .mission-vision-aim-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .gradient-bg {
        background: linear-gradient(135deg, #2b4794 0%, #1e40af 100%);
    }

    .service-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .counter {
        font-size: 3rem;
        font-weight: 800;
        color: white;
    }

    .btn-primary {
        background: #fbbf24;
        color: #1e293b;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: #f59e0b;
        transform: scale(1.05);
    }

    .nav-link {
        transition: color 0.3s ease;
    }

    .nav-link:hover {
        color: #fbbf24;
    }

    .value-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .value-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .feature-item {
        transition: transform 0.2s ease;
    }

    .feature-item:hover {
        transform: translateX(5px);
    }

    .info-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #fbbf24;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
    }

    /* services */

    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .animate-spin-slow {
        animation: spin-slow 20s linear infinite;
    }



    /* //scroll Down// */
    @keyframes scroll-down {
        0% {
            transform: translateY(0%);
        }

        100% {
            transform: translateY(-50%);
        }
    }

    /* Scroll Up */
    @keyframes scroll-up {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0%);
    }
}


.animate-scroll-down {
    display: flex;
    flex-direction: column;
    animation: scroll-down 5s linear infinite;
}

.animate-scroll-up {
    display: flex;
    flex-direction: column;
    animation: scroll-up 5s linear infinite;
}


.slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.8s forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    color: #1e293b;
    background: white;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.menu-item:hover {
    background: #eff6ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

#mobileMenu.show {
    opacity: 1 !important;
    scale: 1 !important;
}




    /* @keyframes scroll-down-infinite {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-50%);
        }
    }

    @keyframes scroll-up-infinite {
        0% {
            transform: translateY(-50%);
        }

        100% {
            transform: translateY(0);
        }
    } */

    .animate-scroll-down-infinite {
        animation: scroll-down-infinite 60s linear infinite;
    }

    .animate-scroll-up-infinite {
        animation: scroll-up-infinite 60s linear infinite;
    }

    /* Pause animation on hover */
    .group:hover .animate-scroll-down-infinite,
    .group:hover .animate-scroll-up-infinite {
        animation-play-state: paused;
    }

    /* Ensure images are clear and crisp */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Optimize for different screen sizes */
    @media (max-width: 768px) {

        .animate-scroll-down-infinite,
        .animate-scroll-up-infinite {
            animation-duration: 60s;
            /* Slower on mobile */
        }
    }


    /* gallary */


    @keyframes float {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-10px) rotate(1deg);
        }
    }

    @keyframes float-slow {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-5px) rotate(0.5deg);
        }
    }

    @keyframes pulse-slow {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.9;
        }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .animate-float-slow {
        animation: float-slow 6s ease-in-out infinite;
    }

    .animate-pulse-slow {
        animation: pulse-slow 2s ease-in-out infinite;
    }

    /* Glass effect */
    .backdrop-blur-sm {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Gradient text effects */
    .text-gradient {
        background: linear-gradient(to right, #1e3a8a, #3b82f6, #1e3a8a);
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 200% auto;
        animation: gradient 3s ease-in-out infinite;
    }

    @keyframes gradient {

        0%,
        100% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }
    }

    /* Unique border animations - Allow Tailwind classes to take precedence */
    /* Removed overly broad selectors that were overriding Tailwind hover states */


    /* //slider css// */



         @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOutDown {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(30px);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }

        .animate-fade-out-down {
            animation: fadeOutDown 1s ease-out forwards;
        }

        .slide {
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            pointer-events: none;
        }

        .slide.active {
            opacity: 1;
            pointer-events: all;
        }

        .slide.active h2 span,
        .slide.active h1 {
            animation: fadeInUp 1s ease-out forwards;
        }

        .slide:not(.active) h2 span,
        .slide:not(.active) h1 {
            animation: fadeOutDown 0.5s ease-out forwards;
        }

        .slider-nav.active {
            background-color: white;
            transform: scale(1.2);
        }

        .read-more-btn {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }

            50% {
                box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
            }
        }  


              /* Smooth image loading */
        img {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -webkit-user-drag: none;
            user-select: none;
        }

        /* Hover effects */
        .group:hover .group-hover\:scale-105 {
            transform: scale(1.05);
        }

        /* Modal animations */
        #certificateModal {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        #certificateModal.flex {
            opacity: 1;
            visibility: visible;
        }

        #certificateModal img {
            animation: zoomIn 0.3s ease-out;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            #certificateModal {
                padding: 8px;
            }

            #certificateModal img {
                max-height: 80vh;
            }

            #modalTitle {
                font-size: 12px;
                padding: 8px 12px;
            }
        }

        /* Large screens */
        @media (min-width: 1536px) {
            .grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        /* Print styles */
        @media print {
            #certificateModal {
                display: none !important;
            }
        }

        /* Performance optimizations */
        @media (prefers-reduced-motion: reduce) {

            .group,
            img,
            .transform,
            .transition-all,
            .transition-transform {
                transition: none !important;
                animation: none !important;
            }
        }

        /* Certificate image cursor */
        img[onclick] {
            cursor: pointer;
        }

        /* Loading skeleton */
        img:not([src]) {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }