/* About Section Modern Styles */
.about-section-modern {
    position: relative;
}

.about-image-container:hover img {
    transform: scale(1.08);
}

.about-image-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12) !important;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 123, 255, 0.15) !important;
}

.experience-badge:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 123, 255, 0.5) !important;
}

.feature-icon {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

@keyframes float-shape {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* RTL Support */
html[dir="rtl"] .about-section-modern,
[dir="rtl"] .about-section-modern {
    direction: rtl;
}

html[dir="rtl"] .title-underline,
[dir="rtl"] .title-underline {
    right: 0;
    left: auto;
}

/* Responsive Design */
@media (max-width: 991px) {
    .about-section-modern {
        padding: 80px 0 !important;
    }
    
    .about-main-title {
        font-size: 38px !important;
    }
    
    .about-description {
        font-size: 16px !important;
    }
    
    .about-features-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .about-image-wrapper {
        padding: 25px !important;
    }
}

@media (max-width: 576px) {
    .about-section-modern {
        padding: 60px 0 !important;
    }
    
    .about-main-title {
        font-size: 28px !important;
    }
    
    .about-label {
        font-size: 12px !important;
        padding: 8px 20px !important;
    }
    
    .about-description {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }
    
    .feature-card {
        padding: 25px !important;
    }
    
    .feature-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }
    
    .experience-badge div[style*="font-size: 42px"] {
        font-size: 36px !important;
    }
}