/* ========================= ABOUT SECTION ========================= */ .about-section { background: #f8f9fa; } .section-subtitle { color: #114B70; font-size: 13px; font-weight: 700; letter-spacing: 2px; } .about-image-wrapper { padding: 20px; } .about-image { width: 100%; min-height: 480px; object-fit: cover; transition: .5s ease; } .about-image-wrapper:hover .about-image { transform: translateY(-8px); } /* Badge expérience */ .experience-card { position: absolute; bottom: 0; right: 0; background: #fff; padding: 22px 28px; border-radius: 20px; text-align: center; color: #114B70; z-index: 2; } .experience-card small { color: #6c757d; font-weight: 600; } /* Décoration */ .about-decoration { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 20px; background: rgba(13, 110, 253, .12); z-index: 0; transform: translate(-5px, -5px); } /* Features */ .feature-item { display: flex; align-items: center; gap: 12px; } .feature-icon { min-width: 42px; height: 42px; border-radius: 50%; background: rgba(13, 110, 253, .1); color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: .3s; } .feature-item:hover .feature-icon { background: #0d6efd; color: #fff; transform: rotate(10deg) scale(1.1); } /* Stats */ .stat-box { transition: .3s ease; } .stat-box:hover { transform: translateY(-5px); } .stat-box h3 { color: #0d6efd; font-size: 32px; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 991px) { .about-image { min-height: 380px; } .about-image-wrapper { padding: 10px; } } @media (max-width: 576px) { .about-image { min-height: 300px; } .experience-card { padding: 15px 20px; } .experience-card .display-5 { font-size: 30px; } }