/**
 * Bright Infosystem Website
 *
 * @file service-android.css
 * @description Styles for the comprehensive Android App Development single service page.
 * @version 3.0 (Simplified Layout)
 */

/* --- Common Section Styles --- */
.section-header { text-align: center; margin-bottom: 50px; }
.section-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid var(--dark-divider-color); border-radius: 50px; color: var(--primary-color); font-size: 16px; font-weight: 500; margin-bottom: 20px; }
.section-badge i { color: var(--accent-color); }
.section-header h2 { font-size: 36px; color: var(--primary-color); font-weight: 800; }

/* --- Service Intro Section --- */
.service-intro-section { padding: 100px 20px; }
.service-intro-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.service-intro-content h2 { font-size: 40px; color: var(--primary-color); line-height: 1.4; margin-bottom: 25px; }
.service-intro-content p { font-size: 18px; color: var(--text-color); line-height: 1.8; }
.service-intro-image img { max-width: 100%; height: auto; border-radius: 20px; }

/* --- Comprehensive Services Section --- */
.comprehensive-services-section { padding: 80px 20px; }
.comprehensive-container { max-width: 1200px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-item { background-color: var(--secondary-color); border: 1px solid var(--divider-color); padding: 30px; border-radius: 15px; color: var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; transition: all 0.3s ease; }
.service-item:hover { transform: translateY(-5px); border-color: var(--accent-secondary-color); }
.service-item i { font-size: 32px; color: var(--accent-secondary-color); }
.service-item h4 { font-size: 18px; margin: 10px 0 5px 0; flex-grow: 1; }
.service-item p { font-size: 14px; color: var(--text-color); line-height: 1.6; margin: 0; }

/* --- Animation --- */
.fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-element.is-visible { opacity: 1; transform: translateY(0); }

/* --- Responsive --- */
@media (max-width: 900px) {
    .service-intro-container { grid-template-columns: 1fr; text-align: center; }
    .service-intro-image { order: -1; margin-bottom: 40px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
}