/* Home page specific styles extracted from home.blade.php */

/* Teaching Staff Styles */
.teacher-card { transition: all 0.3s ease; overflow: hidden; }
.teacher-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; }
.teacher-image-container { position: relative; overflow: hidden; height: 200px; }
.teacher-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px dashed #dee2e6; }
.teacher-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.teacher-card:hover .teacher-image { transform: scale(1.05); }
.teacher-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(1, 88, 98, 0.8), rgba(62, 184, 80, 0.8)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; }
.teacher-card:hover .teacher-overlay { opacity: 1; }
.teacher-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.teacher-social a:hover { transform: scale(1.1); background: white !important; color: var(--primary-color) !important; }
.teacher-card .badge { font-size: 0.7rem; padding: 0.3rem 0.6rem; border: 1px solid #dee2e6; }

/* Gallery Slider Styles */
.gallery-slider { overflow: hidden; position: relative; }
.slider-container { display: flex; transition: transform 0.5s ease; gap: 20px; }
.slider-item { flex: 0 0 300px; height: 250px; cursor: pointer; }
.slider-card { height: 100%; border-radius: 15px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; }
.slider-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); }
.slider-image-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slider-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.slider-card:hover .slider-image { transform: scale(1.1); }
.slider-level-badge { position: absolute; top: 10px; left: 10px; z-index: 3; }
.slider-level-badge .badge { font-size: 0.8rem; padding: 6px 10px; border-radius: 15px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.slider-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(1, 88, 98, 0.8), rgba(62, 184, 80, 0.8)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: end; padding: 1.5rem; z-index: 2; }
.slider-card:hover .slider-overlay { opacity: 1; }
.slider-content { transform: translateY(20px); transition: transform 0.3s ease; width: 100%; }
.slider-card:hover .slider-content { transform: translateY(0); }
.slider-click-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; z-index: 4; pointer-events: auto; cursor: pointer; }
.slider-card:hover .slider-click-overlay { opacity: 1; }

/* Slider Navigation */
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(1, 88, 98, 0.8); border: none; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 5; cursor: pointer; }
.slider-nav:hover { background: var(--primary-color); transform: translateY(-50%) scale(1.1); color: white; }
.slider-prev { left: -25px; }
.slider-next { right: -25px; }

/* Gallery Modal Styles */
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); border: none; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; cursor: pointer; }
.gallery-nav:hover { background: rgba(0, 0, 0, 0.8); transform: translateY(-50%) scale(1.1); color: white; }
.gallery-prev { left: 20px; }
.gallery-next { right: 20px; }
.gallery-counter { position: absolute; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; z-index: 10; }

/* Responsive Design */
@media (max-width: 768px) {
  .teacher-image-container { height: 150px; }
  .slider-item { flex: 0 0 250px; height: 200px; }
  .slider-overlay { padding: 1rem; }
  .slider-nav { width: 40px; height: 40px; }
  .slider-prev { left: -20px; }
  .slider-next { right: -20px; }
  .gallery-nav { width: 50px; height: 50px; }
  .teacher-card .card-body { padding: 1.5rem !important; }
}

@media (max-width: 576px) {
  .slider-item { flex: 0 0 200px; height: 180px; }
  .slider-container { gap: 15px; }
  .gallery-nav { width: 45px; height: 45px; }
  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
}

/* Animation for scroll */
.teacher-card, .slider-item { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; }
.teacher-card:nth-child(1), .slider-item:nth-child(1) { animation-delay: 0.1s; }
.teacher-card:nth-child(2), .slider-item:nth-child(2) { animation-delay: 0.2s; }
.teacher-card:nth-child(3), .slider-item:nth-child(3) { animation-delay: 0.3s; }
.teacher-card:nth-child(4), .slider-item:nth-child(4) { animation-delay: 0.4s; }
.teacher-card:nth-child(5), .slider-item:nth-child(5) { animation-delay: 0.5s; }
.teacher-card:nth-child(6), .slider-item:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ========== Additional Home Styles (extracted) ========== */
/* Clean Registration Section */
.registration-section { background: #f8f9fa; position: relative; }
.offers-header h3 { color: #2c3e50; }
.offer-card { background: #fff; padding: 1.5rem; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.offer-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.offer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #015862, #3EB850); }
.offer-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #015862, #3EB850); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.offer-icon i { font-size: 20px; color: #fff; }
.offer-card h5 { margin-bottom: 0.8rem; font-size: 1.1rem; }
.offer-card p { line-height: 1.5; margin-bottom: 1rem; font-size: 0.9rem; }
.offer-badge { margin-top: 0.5rem; }
.offer-badge .badge { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
.urgency-notice { animation: pulse-border 2s ease-in-out infinite; }
@keyframes pulse-border { 0%,100%{ border-color:#ffc107;} 50%{ border-color:#ff8c00;} }

/* Registration Form Card */
.registration-form-card { background: linear-gradient(135deg, #015862, #3EB850); padding: 2.5rem; border-radius: 20px; box-shadow: 0 15px 35px rgba(1,88,98,0.3); position: relative; overflow: hidden; }
.registration-form-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%); pointer-events: none; }
.form-header { position: relative; z-index: 2; }
.form-icon { width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.3); }
.form-icon i { font-size: 32px; color: #fff; }
.consultation-form { position: relative; z-index: 2; }
.consultation-form .form-control, .consultation-form .form-select { border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.95); border-radius: 10px; padding: 0.75rem 1rem; font-size: 16px; height: auto; transition: all 0.3s ease; backdrop-filter: blur(10px); }

/* ========== Full Screen Image Section ========== */
.fullscreen-image-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.fullscreen-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fullscreen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.fullscreen-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(1, 88, 98, 0.8) 0%,
        rgba(62, 184, 80, 0.7) 50%,
        rgba(245, 127, 37, 0.6) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.fullscreen-image-overlay .container {
    position: relative;
    z-index: 2;
}

.fullscreen-image-overlay h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.fullscreen-image-overlay .lead {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    font-size: 1.2rem;
    line-height: 1.6;
}

.stat-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 120px;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive adjustments for fullscreen image */
@media (max-width: 768px) {
    .fullscreen-image-section {
        height: 70vh;
        min-height: 500px;
    }
    
    .fullscreen-image-overlay h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .fullscreen-image-overlay .lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .stat-item {
        padding: 1rem 1.5rem;
        min-width: 100px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .fullscreen-image-section {
        height: 205px;
        min-height: 204px;
    }
    
    .fullscreen-image-overlay h2 {
        font-size: 1.5rem;
    }
    
    .fullscreen-image-overlay .lead {
        font-size: 0.9rem;
    }
    
    .stat-item {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    .fullscreen-image-overlay .d-flex {
        gap: 0.5rem !important;
    }
}
.consultation-form .form-control:focus, .consultation-form .form-select:focus { border-color: rgba(255,255,255,0.5); background: #fff; box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25); transform: translateY(-2px); }
.consultation-form .form-control::placeholder { color: #6c757d; }
.consultation-form .btn-warning { background: linear-gradient(135deg, #ffc107, #ff8c00); border: none; border-radius: 10px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255,193,7,0.4); }
.consultation-form .btn-warning:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255,193,7,0.6); background: linear-gradient(135deg, #ff8c00, #ffc107); }

@media (max-width: 991px) {
  .offer-card { padding: 1.25rem; margin-bottom: 1rem; }
  .registration-form-card { padding: 2rem; margin-top: 2rem; }
  .offer-icon { width: 45px; height: 45px; margin-bottom: 0.8rem; }
  .offer-icon i { font-size: 18px; }
  .form-icon { width: 60px; height: 60px; }
  .form-icon i { font-size: 24px; }
  .offers-header h3 { font-size: 1.3rem; }
  .urgency-notice { margin-top: 2rem !important; }
}

/* Courses Section - Slider Layout */
.courses-slider-container .course-card { transition: all 0.3s ease; border-radius: 0.5rem; height: 100%; }
.courses-slider-container .course-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; }
.course-icon-wrapper { margin-bottom: 1rem; }
.course-info .info-item { padding: 0.5rem; background: rgba(0,123,255,0.05); border-radius: 0.375rem; margin-bottom: 0.5rem; }
.course-info .info-item i { font-size: 1.2rem; }
.courses-slider-container .carousel-control-prev, .courses-slider-container .carousel-control-next { width: 50px; height: 50px; top: 50%; transform: translateY(-50%); opacity: 0.8; }
.courses-slider-container .carousel-control-prev { left: -25px; }
.courses-slider-container .carousel-control-next { right: -25px; }
.slider-nav-btn { background: rgba(0,123,255,0.9); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.slider-nav-btn:hover { background: rgba(0,123,255,1); transform: scale(1.1); }
.slider-nav-btn i { font-size: 18px; }
@media (max-width: 991.98px) { .courses-slider-container .carousel-control-prev, .courses-slider-container .carousel-control-next { display: none; } }
@media (max-width: 767.98px) { .courses-slider-container .col-sm-6 { flex: 0 0 auto; width: 50%; } .courses-slider-container .course-card-image { height: 160px !important; } .courses-slider-container .course-title { font-size: 0.75rem !important; line-height: 1.1 !important; } }
.carousel-indicators { margin-bottom: 0; }
.carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; margin: 0 4px; background-color: rgba(0,123,255,0.5); border: none; }
.carousel-indicators .active { background-color: #007bff; }
.course-card .card-body { position: relative; }
.course-card .card-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #007bff, #6610f2); border-radius: 0.5rem 0.5rem 0 0; }
.badge { font-size: 0.75rem; padding: 0.5rem 0.75rem; }
.badge.bg-light { border: 1px solid #dee2e6; }
.btn-primary { border-radius: 0.375rem; padding: 0.5rem 1rem; font-weight: 500; transition: all 0.3s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0.25rem 0.5rem rgba(1,88,98,0.3); }
.text-warning i { font-size: 0.875rem; margin: 0 1px; }
.course-card .badge.bg-light { font-size: 0.7rem; padding: 0.25rem 0.5rem; margin: 0.125rem; }
@media (max-width: 768px) { .carousel-control-prev, .carousel-control-next { display: none; } .course-info .row { margin: 0; } .course-info .col-6 { padding: 0.25rem; } .course-card .badge.bg-light { font-size: 0.65rem; padding: 0.2rem 0.4rem; } }
.course-card { animation: fadeInUp 0.6s ease forwards; opacity: 0; transform: translateY(20px); }
.carousel-item.active .course-card:nth-child(1){animation-delay:0.1s;} .carousel-item.active .course-card:nth-child(2){animation-delay:0.2s;} .carousel-item.active .course-card:nth-child(3){animation-delay:0.3s;}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Enhanced Teachers Section, Achievements, Video/About, Teacher Modal, Teachers Slider, Typography */
/* Due to length, these sections were extracted wholesale from home.blade.php and consolidated here. */
/* Teachers section base */
.teachers-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 100vh; overflow: visible !important; }
.teachers-section .container { position: relative; z-index: 1; }
.teachers-bg-decoration, .floating-shapes { z-index: 0; }
.teachers-bg-decoration { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(0,123,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(102,16,242,0.1) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(255,193,7,0.05) 0%, transparent 50%); pointer-events: none; }
.floating-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; background: linear-gradient(45deg, rgba(0,123,255,0.1), rgba(102,16,242,0.1)); animation: float 6s ease-in-out infinite; }
.shape-1 { width: 100px; height: 100px; top: 10%; left: 10%; animation-delay: 0s; }
.shape-2 { width: 150px; height: 150px; top: 60%; right: 10%; animation-delay: 2s; }
.shape-3 { width: 80px; height: 80px; bottom: 20%; left: 20%; animation-delay: 4s; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-20px) rotate(180deg);} }
.section-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, #007bff, #6610f2); color: #fff; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; box-shadow: 0 4px 15px rgba(0,123,255,0.3); animation: pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow:0 4px 15px rgba(0,123,255,0.3);} 50%{ box-shadow:0 6px 20px rgba(0,123,255,0.4);} 100%{ box-shadow:0 4px 15px rgba(0,123,255,0.3);} }
.text-gradient { background: linear-gradient(135deg, #007bff, #6610f2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.teachers-grid { position: relative; }
.teacher-card-enhanced { transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); border-radius: 1.5rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); opacity: 0; transform: translateY(30px); overflow: hidden; }
.teacher-card-enhanced.animate-on-scroll { animation: fadeInUp 0.8s ease forwards; }
.teacher-card-enhanced:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.card-bg-gradient { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #007bff, #6610f2, #ffc107, #28a745); background-size: 300% 100%; animation: gradientShift 3s ease infinite; }
@keyframes gradientShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.teacher-floating-icon { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; background: linear-gradient(135deg, #007bff, #6610f2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 12px rgba(0,123,255,0.3); z-index: 2; animation: bounce 2s infinite; }
@keyframes bounce { 0%,20%,50%,80%,100%{ transform: translateY(0);} 40%{ transform: translateY(-5px);} 60%{ transform: translateY(-3px);} }
.teacher-avatar-container { position: relative; display: inline-block; }
.avatar-ring { position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 3px solid transparent; border-radius: 50%; background: linear-gradient(45deg, #007bff, #6610f2, #ffc107) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: rotate 3s linear infinite; }
@keyframes rotate { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.teacher-avatar-enhanced, .teacher-avatar-placeholder-enhanced { width: 120px; height: 120px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: all 0.3s ease; }
.teacher-avatar-placeholder-enhanced { background: linear-gradient(135deg, #007bff, #6610f2); }
.teacher-card-enhanced:hover .teacher-avatar-enhanced, .teacher-card-enhanced:hover .teacher-avatar-placeholder-enhanced { transform: scale(1.1); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.teacher-status-badge { position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px; background: #28a745; border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; box-shadow: 0 2px 8px rgba(40,167,69,0.3); }
.teacher-info-enhanced { position: relative; z-index: 1; }
.teacher-name { color: #2c3e50; font-size: 1.3rem; margin-bottom: 0.5rem; transition: color 0.3s ease; }
.teacher-card-enhanced:hover .teacher-name { color: #007bff; }
.teacher-specialization { font-size: 0.95rem; margin-bottom: 1rem; }
.certification-badge { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: 1px solid #dee2e6; border-radius: 25px; padding: 0.5rem 1rem; font-size: 0.85rem; color: #495057; font-weight: 600; display: inline-flex; align-items: center; transition: all 0.3s ease; }
.teacher-card-enhanced:hover .certification-badge { background: linear-gradient(135deg, #007bff, #6610f2); color: #fff; transform: scale(1.05); }
.teacher-rating { margin: 1rem 0; }
.stars { margin-bottom: 0.25rem; }
.stars i { font-size: 0.9rem; margin-right: 2px; }
.btn-teacher-primary { background: linear-gradient(135deg, #007bff, #6610f2); border: none; color: #fff; padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,123,255,0.3); position: relative; overflow: hidden; }
.btn-teacher-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
.btn-teacher-primary:hover::before { left: 100%; }
.btn-teacher-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,123,255,0.4); color: #fff; }
.teacher-hover-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,123,255,0.05), rgba(102,16,242,0.05)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.teacher-card-enhanced:hover .teacher-hover-overlay { opacity: 1; }
.btn-view-all-teachers { background: linear-gradient(135deg, #28a745, #20c997); border: none; color: #fff; padding: 1rem 2rem; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(40,167,69,0.3); position: relative; overflow: hidden; }
.btn-view-all-teachers::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
.btn-view-all-teachers:hover::before { left: 100%; }
.btn-view-all-teachers:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(40,167,69,0.4); color: #fff; }
@media (max-width: 768px) { .teacher-avatar-enhanced, .teacher-avatar-placeholder-enhanced { width: 100px !important; height: 100px !important; } .teacher-floating-icon { width: 30px; height: 30px; font-size: 0.8rem; } .teacher-name { font-size: 1.1rem; } .certification-badge { font-size: 0.75rem; padding: 0.4rem 0.8rem; } .btn-teacher-primary { padding: 0.6rem 1.2rem; font-size: 0.8rem; } }
@media (max-width: 576px) { .teacher-card-enhanced { margin-bottom: 1.5rem; } .teacher-name { font-size: 1rem; } .teacher-specialization { font-size: 0.85rem; } .btn-view-all-teachers { padding: 0.8rem 1.5rem; font-size: 1rem; } }

/* Achievement Board */
.bg-gradient-primary { background: var(--bg-primary) !important; }
.achievement-tabs .nav-link { background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); color: #fff; margin: 0 0.5rem; border-radius: 2rem; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.achievement-tabs .nav-link:hover { background: rgba(255,255,255,0.2); border-color: var(--secondary-color); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.achievement-tabs .nav-link.active { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249,210,0,0.4); }
.achievement-card { background: #fff; border-radius: 1.5rem; overflow: hidden; transition: all 0.4s ease; position: relative; border: 3px solid transparent; }
.achievement-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.2); border-color: var(--secondary-color); }
.achievement-rank { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; font-size: 1.5rem; font-weight: bold; color: #fff; margin: 0 auto; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.achievement-rank i { position: absolute; top: -5px; font-size: 1.8rem; animation: float 3s ease-in-out infinite; }
.achievement-rank .rank-number { font-size: 2rem; font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.rank-1 { background: linear-gradient(135deg,#FFD700,#FFA500); border: 4px solid #FFD700; }
.rank-2 { background: linear-gradient(135deg,#C0C0C0,#A0A0A0); border: 4px solid #C0C0C0; }
.rank-3 { background: linear-gradient(135deg,#CD7F32,#B8860B); border: 4px solid #CD7F32; }
.achievement-avatar { border: 4px solid var(--secondary-color); box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: all 0.3s ease; }
.achievement-card:hover .achievement-avatar { transform: scale(1.1); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.achievement-details { background: rgba(1,88,98,0.05); border-radius: 1rem; padding: 1rem; margin: 1rem 0; }
.detail-item { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.detail-item:last-child { margin-bottom: 0; }
.detail-item i { width: 20px; flex-shrink: 0; }
.achievement-card .badge { font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.achievement-card .badge.bg-warning { background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)) !important; color: var(--primary-color) !important; box-shadow: 0 4px 15px rgba(249,210,0,0.4); }
@keyframes sparkle { 0%,100%{ opacity: 0; transform: scale(0.8) rotate(0deg);} 50%{ opacity: 1; transform: scale(1.2) rotate(180deg);} }
.rank-1::before { content: '✨'; position: absolute; top: -10px; right: -10px; font-size: 1.2rem; animation: sparkle 2s ease-in-out infinite; }
.tab-pane { animation: fadeInUp 0.6s ease-out; }
@keyframes fadeInUp { from{ opacity: 0; transform: translateY(30px);} to{ opacity: 1; transform: translateY(0);} }
@media (max-width: 768px) { .achievement-tabs .nav-link { margin: 0.25rem; padding: 0.5rem 1rem; font-size: 0.85rem; } .achievement-rank { width: 60px; height: 60px; font-size: 1.2rem; } .achievement-rank .rank-number { font-size: 1.5rem; } .achievement-rank i { font-size: 1.4rem; } .achievement-avatar { width: 60px !important; height: 60px !important; } .achievement-details { padding: 0.75rem; margin: 0.75rem 0; } .detail-item { font-size: 0.8rem; } .achievement-card .badge { font-size: 0.75rem; padding: 0.4rem 0.8rem; } }

/* Typography scale and mobile improvements (abbrev.) */
:root { --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 0.8rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; }
h1,.h1{font-size:var(--font-size-5xl)!important;line-height:var(--line-height-tight)!important;} h2,.h2{font-size:var(--font-size-4xl)!important;line-height:var(--line-height-tight)!important;} h3,.h3{font-size:var(--font-size-3xl)!important;line-height:var(--line-height-snug)!important;} h4,.h4{font-size:var(--font-size-2xl)!important;line-height:var(--line-height-snug)!important;} h5,.h5{font-size:var(--font-size-xl)!important;line-height:var(--line-height-normal)!important;} h6,.h6{font-size:var(--font-size-lg)!important;line-height:var(--line-height-normal)!important;} p,.lead{font-size:var(--font-size-base)!important;line-height:var(--line-height-relaxed)!important;} small,.small{font-size:var(--font-size-sm)!important;line-height:var(--line-height-normal)!important;}

/* Video & About */
.video-container{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1);} .video-wrapper{background:#000;border-radius:10px;} .video-wrapper iframe{border-radius:10px;} .about-content{padding:2rem;background:#fff;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,0.08);height:100%;} .section-title{color:#2c3e50;font-size:1.8rem;font-weight:700;line-height:1.3;margin-bottom:1.5rem;} .about-text p{color:#495057;line-height:1.6;font-size:1rem;margin-bottom:1rem;} .about-text strong{color:#2c3e50;font-weight:700;} .about-text .fas.fa-bolt{color:#ffc107;font-size:1.1rem;} .action-buttons{margin-top:2rem;} .action-buttons .btn{border-radius:8px;font-weight:600;transition:all 0.3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;} .action-buttons .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);} .action-buttons .btn-secondary{background:#6c757d;border-color:#6c757d;color:#fff;} .action-buttons .btn-secondary:hover{background:#5a6268;border-color:#5a6268;color:#fff;} .action-buttons .btn-success{background:#28a745;border-color:#28a745;color:#fff;} .action-buttons .btn-success:hover{background:#218838;border-color:#218838;color:#fff;} .action-buttons .btn-primary{background:#007bff;border-color:#007bff;color:#fff;} .action-buttons .btn-primary:hover{background:#0056b3;border-color:#0056b3;color:#fff;}
@media (max-width:991px){ .about-content{padding:1.5rem;margin-top:1rem;} .section-title{font-size:1.5rem;} .about-text p{font-size:0.95rem;} }
@media (max-width:768px){ .about-content{padding:1rem;} .section-title{font-size:1.3rem;text-align:center;} .about-text p{font-size:0.9rem;} .action-buttons{text-align:center;} .action-buttons .btn{width:100%;justify-content:center;margin-bottom:0.5rem;} }
@media (max-width:576px){ .video-container,.video-wrapper,.video-wrapper iframe{border-radius:8px;} .about-content{border-radius:10px;} .section-title{font-size:1.2rem;} .about-text p{font-size:0.85rem;} }

/* Teachers Slider */
#teachersSlider{position:relative;overflow:visible;} #teachersSlider .carousel-indicators{bottom:10px;} #teachersSlider .carousel-indicators [data-bs-target]{width:12px;height:12px;border-radius:50%;background-color:rgba(249,210,0,0.5);border:2px solid #F9D200;margin:0 5px;transition:all 0.3s ease;} #teachersSlider .carousel-indicators [data-bs-target].active{background-color:#F9D200;transform:scale(1.2);} #teachersSlider .carousel-control-prev,#teachersSlider .carousel-control-next{width:50px;height:50px;background:rgba(249,210,0,0.9);border-radius:50%;top:50%;transform:translateY(-50%);border:2px solid #F9D200;opacity:0.8;transition:all 0.3s ease; z-index:5;} #teachersSlider .carousel-control-prev:hover,#teachersSlider .carousel-control-next:hover{background:#F9D200;opacity:1;transform:translateY(-50%) scale(1.1);} #teachersSlider .carousel-control-icon{color:#015862;font-size:1.2rem;font-weight:bold;} #teachersSlider .carousel-control-prev:hover .carousel-control-icon,#teachersSlider .carousel-control-next:hover .carousel-control-icon{color:#fff;} #teachersSlider .carousel-item{transition:transform 0.6s ease-in-out; padding-bottom: 48px;} #teachersSlider .carousel-item.active{animation:slideInRight 0.6s ease-out;} @keyframes slideInRight{from{opacity:0;transform:translateX(100%);} to{opacity:1;transform:translateX(0);}}
@media (max-width:768px){ .teacher-card-new{padding:1.2rem;} .teacher-img,.teacher-img-placeholder{width:110px;height:110px;} .teacher-img-placeholder{font-size:2.5rem;} .teacher-name-new{font-size:var(--font-size-lg);} .teacher-role-new{font-size:var(--font-size-xs);} .teacher-achievement-new{font-size:var(--font-size-xs);padding:0.3rem 0.6rem;} .btn-view-all{padding:0.8rem 1.5rem;font-size:var(--font-size-base);} #teachersSlider .carousel-control-prev,#teachersSlider .carousel-control-next{width:40px;height:40px;} #teachersSlider .carousel-indicators{bottom:10px;} #teachersSlider .carousel-indicators [data-bs-target]{width:10px;height:10px;} }
@media (max-width:576px){ .teacher-card-new{padding:1rem;} .teacher-img,.teacher-img-placeholder{width:100px;height:100px;} .teacher-img-placeholder{font-size:2rem;} .teacher-name-new{font-size:var(--font-size-base);margin-bottom:0.3rem;} .teacher-role-new{font-size:var(--font-size-xs);margin-bottom:0.8rem;} .teacher-social-new{gap:0.3rem;margin-bottom:0.8rem;} .social-icon{width:28px;height:28px;font-size:var(--font-size-xs);} .teacher-achievement-new{font-size:var(--font-size-xs);padding:0.25rem 0.5rem;} #teachersSlider .col-lg-3.col-md-6.mb-4{flex:0 0 50%;max-width:50%;} #teachersSlider .carousel-control-prev,#teachersSlider .carousel-control-next{width:35px;height:35px;} #teachersSlider .carousel-control-icon{font-size:var(--font-size-base);} #teachersSlider .carousel-indicators{bottom:-35px;} #teachersSlider .carousel-indicators [data-bs-target]{width:8px;height:8px;margin:0 3px;} }