@layer base {
            body {
                font-family: 'montserrat', sans-serif;
            }
            
            
            .font-black {
                font-weight: 900;
            }
            
 
            .gradient-primary {
                background: linear-gradient(135deg, #F68C2A 0%, #F58B29 100%);
            }
            
            .mission-card {
                perspective: 1000px;
                cursor: pointer;
            }
            
            .mission-card:hover .mission-front {
                transform: rotateY(180deg);
            }
            
            .mission-card:hover .mission-back {
                transform: rotateY(0deg);
            }
            
            .mission-front, .mission-back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                transition: transform 0.6s ease-in-out;
            }
            
            .mission-back {
                transform: rotateY(-180deg);
            }
            
            .float-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            
            .float-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(246, 140, 42, 0.2);
            }
            
            .value-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            
            .value-card:hover {
                transform: translateY(-5px) scale(1.02);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            }
            
            .timeline-item {
                opacity: 0;
                transform: translateX(-50px);
                animation: slideIn 0.6s ease forwards;
            }
            
            @keyframes slideIn {
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            
            .stat-number {
                animation: countUp 2s ease-out;
            }
            
            @keyframes countUp {
                from {
                    opacity: 0;
                    transform: scale(0.5);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
            
            .parallax-bg {
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            
            .fade-in {
                animation: fadeIn 1s ease-in;
            }
            
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .team-card {
                transition: all 0.4s ease;
                overflow: hidden;
            }
            
            .team-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 40px rgba(246, 140, 42, 0.3);
            }
            
            .team-card img {
                transition: transform 0.4s ease;
            }
            
            .team-card:hover img {
                transform: scale(1.1);
            }
        }