
        .section {
        padding: 4rem 0.6rem;
        }

        /* Mission Section */
        .mission-container {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: center;
        }

        @media (max-width: 768px) {
            .mission-container {
                gap: 3rem;
            }
        }

        .mission-text h2 {
        margin-bottom: 1.5rem;
        }

        .mission-image {
        width: 100%;
        height: 100%;
        }

        .image-container .image {
        border-radius: 15px;
        border: var(--border-main);
        box-shadow: 0 4px 12px var(--primary-200);
        }

        /* Achievements Section */
        .achievements-section {
        background-color: var(--bg-oxford-blue-2);
        }

        .achievement-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 2rem;
        }

        .achievement-card {
        background: var(--bg-oxford-blue);
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
        }

        .achievement-card:hover {
        transform: translateY(-5px);
        }

        .achievement-icon {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        }

        .achievement-icon svg {
            width: 50px;
            height: 50px; 
            fill: var(--primary-190);
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border-radius: 50% !important;
        }


        .achievement-card h3 {
        font-size: 2.2rem;
        color: var(--primary-190);
        font-family: 'inter', sans-serif !important;
        font-weight: 600;
        margin-bottom: 0.5rem;
        }

        .achievement-card p {
        font-size: 1rem;
        color: var(--surface-100);
        margin-bottom: 0;
        }

        /* Values Section */

        .values-section {
           background-color: hsla(273, 43%, 52%, 0.197);
        }

        .values-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
        }

        .value-card {
        background-color: var(--bg-oxford-blue);
        border-left: 4px solid var(--primary-190);
        padding: 1.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
        }

        .value-card:hover {
        transform: translateY(-5px);
        }

        .value-card h3 {
        color: var(--primary-190);
        margin-bottom: 0.5rem;
        }

        .value-card p {
        margin-bottom: 0;
        color: var(--surface-100);
        }

        /* Responsive Styles */
        @media (min-width: 768px) {
        .section {
            padding: 8rem 2rem;
        }
        
        .mission-container {
            grid-template-columns: 1fr 1fr;
        }
        
        .team-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        
        .achievement-cards {
            grid-template-columns: repeat(4, 1fr);
        }
        
        .values-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        }

        /* Animation Styles */
        @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
        }

        .animate-fade-in-up {
        animation: fadeInUp 0.8s ease forwards;
        }

        .animate-delay-100 {
        animation-delay: 0.1s;
        }

        .animate-delay-200 {
        animation-delay: 0.2s;
        }

        .animate-delay-300 {
        animation-delay: 0.3s;
        }

        .animate-delay-400 {
        animation-delay: 0.4s;
        }
