/* Modern About Page Styles */

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.achievement-item:hover {
    transform: translateX(10px) !important;
    box-shadow: 0 10px 30px rgba(45, 95, 46, 0.15) !important;
}

.program-card {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 991px) {
    .about-hero-content {
        padding-left: 0 !important;
        margin-top: 30px;
    }
    
    .about-hero-section h3 {
        font-size: 22px !important;
    }
    
    .section-title h2 {
        font-size: 36px !important;
    }
    
    .about-content {
        padding: 30px !important;
    }
}

@media (max-width: 767px) {
    .about-hero-section {
        padding: 60px 0 !important;
    }
    
    .about-hero-logo img {
        max-width: 250px !important;
    }
    
    .about-hero-content > div {
        padding: 25px !important;
    }
    
    .about-hero-section h3 {
        font-size: 18px !important;
    }
    
    .section-title h2 {
        font-size: 28px !important;
    }
    
    .about-content p {
        font-size: 16px !important;
    }
    
    .achievement-item {
        padding: 20px !important;
    }
    
    .achievement-item p {
        font-size: 15px !important;
    }
    
    .program-content h3 {
        font-size: 22px !important;
    }
    
    .program-content p {
        font-size: 15px !important;
    }
}

@media (max-width: 575px) {
    .about-hero-section {
        padding: 40px 0 !important;
    }
    
    .main-about-section,
    .counseling-programs {
        padding: 60px 0 !important;
    }
    
    .section-title span {
        font-size: 14px !important;
        letter-spacing: 2px !important;
    }
    
    .section-title h2 {
        font-size: 24px !important;
    }
    
    .about-content {
        padding: 20px !important;
    }
}