.company-info-box { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 2rem; border-radius: 15px; margin: 2rem 0; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .info-item { display: flex; align-items: flex-start; gap: 1rem; background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .info-item i { font-size: 2rem; color: #ff6b00; margin-top: 0.5rem; } .info-item strong { display: block; color: #333; margin-bottom: 0.5rem; font-size: 1.1rem; } .info-item p { color: #666; margin: 0; } .timeline { position: relative; padding: 2rem 0; margin: 2rem 0; } .timeline::before { content: ''; position: absolute; right: 50%; transform: translateX(50%); width: 4px; height: 100%; background: linear-gradient(to bottom, #ff6b00, #ff8c00); } .timeline-item { display: flex; gap: 2rem; margin-bottom: 3rem; position: relative; } .timeline-item:nth-child(odd) { flex-direction: row-reverse; } .timeline-year { flex: 0 0 100px; text-align: center; font-size: 1.5rem; font-weight: bold; color: #ff6b00; background: white; padding: 1rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(255, 107, 0, 0.2); } .timeline-content { flex: 1; background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .timeline-content h3 { color: #333; margin-bottom: 0.5rem; } .mission-vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; } .mission-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 15px; text-align: center; } .mission-box .icon { font-size: 3rem; margin-bottom: 1rem; } .mission-box h3 { color: white; margin-bottom: 1rem; } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .value-card { background: white; padding: 2rem; border-radius: 10px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .value-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); } .value-icon { font-size: 3rem; margin-bottom: 1rem; } .value-card h3 { color: #333; margin-bottom: 0.5rem; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .service-item { background: white; padding: 2rem; border-radius: 10px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .service-item i { font-size: 3rem; color: #ff6b00; margin-bottom: 1rem; } .service-item h3 { color: #333; margin-bottom: 0.5rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .stat-box { background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); color: white; padding: 2rem; border-radius: 10px; text-align: center; } .stat-number { font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem; } .stat-label { font-size: 1rem; opacity: 0.9; } .why-choose-list { display: grid; gap: 1rem; margin: 2rem 0; } .why-item { display: flex; gap: 1rem; background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .why-item i { font-size: 1.5rem; color: #28a745; margin-top: 0.5rem; } .why-item h3 { color: #333; margin-bottom: 0.5rem; } .contact-cta-box { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 2rem; border-radius: 15px; margin: 2rem 0; } .contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .contact-method { display: flex; align-items: center; gap: 1rem; background: white; padding: 1.5rem; border-radius: 10px; } .contact-method i { font-size: 2rem; color: #ff6b00; } .contact-method strong { display: block; color: #333; margin-bottom: 0.3rem; } .contact-method a { color: #ff6b00; text-decoration: none; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 1rem 2rem; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .btn-primary { background: #ff6b00; color: white; } .btn-primary:hover { background: #ff8c00; } .btn-secondary { background: #667eea; color: white; } .btn-secondary:hover { background: #764ba2; } @media (max-width: 768px) { .timeline::before { right: 20px; } .timeline-item { flex-direction: column !important; padding-right: 40px; } .info-grid, .mission-vision-grid, .values-grid, .services-grid, .stats-grid { grid-template-columns: 1fr; } }