/* Programs Page Specific Styles */ /* Hero Section */ .hero-section { position: relative; padding: 8rem 0; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; opacity: 0.15; z-index: -1; } /* Program Cards */ .program-card { height: 100%; } .program-card-inner { background-color: white; border-radius: 0.75rem; box-shadow: var(--shadow); padding: 2rem; height: 100%; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .program-card-inner:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .program-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; } .program-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-dark); } .program-description { color: var(--gray-600); margin-bottom: 1.5rem; flex-grow: 1; } .program-details { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .program-detail { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-500); font-size: 0.875rem; } .program-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); font-weight: 500; text-decoration: none; transition: gap 0.3s ease; } .program-link:hover { gap: 0.75rem; } /* Curriculum Section */ .curriculum-image { height: 100%; min-height: 400px; } .curriculum-item { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .curriculum-icon { width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } /* Testimonials */ .testimonials-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .testimonial-card { background-color: white; border-radius: 0.75rem; box-shadow: var(--shadow); overflow: hidden; height: 100%; } .testimonial-content { padding: 2rem; } .testimonial-text { color: var(--gray-700); font-style: italic; margin-bottom: 1.5rem; position: relative; } .testimonial-text::before { content: '"'; font-size: 3rem; color: var(--gray-200); position: absolute; top: -1.5rem; left: -0.5rem; z-index: 0; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-name { font-weight: 600; color: var(--text-dark); margin-bottom: 0.25rem; } .testimonial-role { color: var(--gray-500); font-size: 0.875rem; } /* FAQ Section */ .faq-item { border-bottom: 1px solid var(--gray-200); } .faq-question { width: 100%; text-align: left; padding: 1.5rem 0; background: none; border: none; font-size: 1.125rem; font-weight: 500; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .faq-icon { transition: transform 0.3s ease; } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-answer { padding: 0 0 1.5rem; color: var(--gray-600); display: none; } .faq-answer.active { display: block; animation: fadeIn 0.5s ease; } /* Responsive Adjustments */ @media (max-width: 768px) { .hero-section { padding: 6rem 0; } .curriculum-image { min-height: 300px; } .curriculum-item { gap: 1rem; } .curriculum-icon { width: 40px; height: 40px; font-size: 1rem; } } @media (max-width: 640px) { .testimonials-slider { grid-template-columns: 1fr; } }