:root {
    --primary-gold: #FFD700;
    --secondary-gold: #FFC000;
    --dark-gold: #B8860B;
    --light-yellow: #FFFACD;
    --border-color: #e9ecef;
    --border-radius-sm: 5px;
}

body {
    font-family: 'Inter', 'Work Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Navigation Styles */
.navbar {
    background: white;
    padding: 15px 0;
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-gold);
}

.nav-link {
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
    margin: 0 10px;
}

.nav-link:hover {
    color: var(--dark-gold);
}

.sub-header {
    background: linear-gradient(to right, #fff, var(--light-yellow));
    padding: 20px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.sub-header.sticky {
    top: 0;
    position: sticky;
    transform: translateY(0);
    opacity: 1;
}

.sticky-logo {
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sticky-logo.visible {
    transform: translateX(0);
    opacity: 1;
    width: auto;
    height: auto;
}

.logo-image {
    height: 60px;
    width: auto;
    margin-right: 30px;
}

.user-avatar-mobile,
.user-avatar-desktop {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.profile-picture-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 16px;
}

.profile-picture-guest {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin: 0 auto 16px auto;
}

.loading-spinner {
    padding: 40px;
    text-align: center;
    color: #666;
}

.loading-spinner i {
    font-size: 24px;
    margin-bottom: 10px;
}

.see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-gold);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.see-more-btn:hover {
    background: var(--dark-gold);
    color: white;
    transform: translateY(-2px);
}

.search-container {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: 15px 20px 15px 0;
    padding-left: 50px;
    border: 2px solid #eee;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.search-input:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    outline: none;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.filter-button {
    background: white;
    border: 2px solid #eee;
    padding: 8px 20px;
    border-radius: 20px;
    margin: 0 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
}

.filter-button:hover {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
}

.filter-button.active {
    background: var(--primary-gold);
    border-color: var(--primary-gold);
    color: black;
}

.user-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.user-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: translateX(-100%);
    transition: all 0.6s ease;
}

.user-icon:hover::after {
    transform: translateX(100%);
}

.dashboard-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow-y: auto;
}

.dashboard-menu.active {
    right: 0;
}

.menu-header {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    margin: 0 auto 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.menu-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: float 8s infinite linear;
}

.menu-close-button {
    display: none;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-300px) rotate(360deg); opacity: 0; }
}

.menu-items {
    padding: 20px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

.menu-item:hover {
    background: var(--light-yellow);
    transform: translateX(10px);
}

.menu-item i {
    width: 30px;
    height: 30px;
    background: var(--light-yellow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--dark-gold);
    transition: all 0.3s ease;
}

.menu-item:hover i {
    background: var(--primary-gold);
    color: black;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.logout-button {
    margin: 20px;
    padding: 12px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 10px;
    width: calc(100% - 40px);
    transition: all 0.3s ease;
}

.logout-button:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .dashboard-menu {
        width: 300px;
    }

    .filter-buttons {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        margin-top: 15px;
    }
}

/* Course Menu Styles */
.courses-menu {
    position: absolute;
    left: 5%;
    right: 5%;
    width: 90%;
    background: white;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 15px;
    padding: 30px;
    z-index: 1000;
}

.category-block {
    padding: 25px;
    border-radius: 15px;
    transition: all 0.3s ease;
    background: #f9f9f9;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    border-left: 4px solid var(--primary-gold);
}
  
.category-block:hover {
    background: var(--light-yellow);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.category-block:hover .category-icon {
    background: var(--primary-gold);
    color: white;
    transform: rotate(5deg);
}

.category-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid var(--light-yellow);
    padding-bottom: 10px;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.category-list li a {
    color: #555;
    text-decoration: none;
    display: block;
    padding: 8px 10px;
    font-weight: 500;
}

.category-list li span {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-top: 2px;
}

.category-list li:hover {
    background: rgba(255, 215, 0, 0.1);
}

.category-list li:hover a {
    color: var(--dark-gold);
    padding-left: 15px;
}

.category-list li::before {
    content: '›';
    position: absolute;
    left: 5px;
    top: 8px;
    color: var(--dark-gold);
    font-size: 18px;
    opacity: 0;
    transition: all 0.3s ease;
}

.category-list li:hover::before {
    opacity: 1;
    left: 5px;
}

/* Certification Menu Styles */
.certification-menu {
    position: absolute;
    left: 40%;
    transform: translateX(-40%);
    width: 100%;
    max-width: 700px;
    background: white;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 30px;
}

.cert-block {
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.cert-svg {
    height: 150px;
    margin-bottom: 20px;
}

.cert-svg img {
    width: 100%;
    height: 100%;
  }

.cert-actions {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 10px;
    background: var(--light-yellow);
    border-radius: 10px;
    color: var(--dark-gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-link:hover {
    background: var(--primary-gold);
    color: black;
}

.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.2rem;
    color: #333;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.avatar-initial:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.avatar-initial.avatar-sm {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
}

.avatar-initial.avatar-md {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
}

.avatar-initial.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.avatar-initial.avatar-xl {
    width: 120px;
    height: 120px;
    font-size: 3rem;
}

.author-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Careers Menu Styles */
.careers-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    background: white;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 30px;
}

.career-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
    gap: 20px;
    margin-top: 20px;
}

.career-card {
    padding: 20px;
    background: var(--light-yellow);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.career-card:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

.career-progress {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.career-progress .progress-bar {
    height: 100%;
    background: var(--primary-gold);
    border-radius: 2px;
}

.courses-menu.active, .certification-menu.active, .careers-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 10;
    height: 100%;
}

.menu-inner-wrapper {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    overflow-y: auto;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/home-banner.jpg') center/cover;
    min-height: 80vh;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Feature Cards */
.feature-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-top: -50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-size: 24px;
}

/* Course Cards */
.course-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    margin: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
}

.course-image {
    height: 200px;
    object-fit: cover;
}

.course-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 10px;
}

/* Statistics Section */
.home-stats-section {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 80px 0;
    color: black;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Testimonial Section */
.testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.testimonial-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* Call to Action */
.cta-section {
    background: var(--light-yellow);
    padding: 100px 0;
}

/* Newsletter Section */
.newsletter-section {
    background: white;
    padding: 60px 0;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.newsletter-input {
    width: 100%;
    padding: 15px;
    padding-right: 150px;
    border: 2px solid #eee;
    border-radius: 30px;
}

.newsletter-button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: var(--primary-gold);
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
}

/* Footer */
.footer {
    background: #333;
    color: white;
    padding: 60px 0 30px;
}

.footer-link {
    color: white;
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-gold);
    padding-left: 10px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--primary-gold);
    color: black;
}

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #eee;
    z-index: 1000;
}

.reading-progress-bar {
    height: 100%;
    background: var(--primary-gold);
    width: 0;
}

/* Section animation styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.competence-feature-section {
    padding: 60px 0;
    margin: 60px 0;
}

.competence-feature-section .competence-feature-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #eee;
}

.competence-feature-section .competence-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--primary-gold);
}

.competence-feature-section .competence-feature-content {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.competence-feature-section .feature-badge {
    display: inline-block;
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.competence-feature-section .feature-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.competence-feature-section .feature-description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

.competence-feature-section .feature-highlights {
    margin-bottom: 25px;
}

.competence-feature-section .highlight-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.competence-feature-section .highlight-item:last-child {
    margin-bottom: 0;
}

.competence-feature-section .highlight-item i {
    width: 36px;
    height: 36px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-gold);
    margin-right: 12px;
}

.competence-feature-section .feature-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gold);
    color: black;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    border: 2px solid var(--primary-gold);
}

.competence-feature-section .feature-cta-btn i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.competence-feature-section .feature-cta-btn:hover {
    background: var(--dark-gold);
    border-color: var(--dark-gold);
    color: black;
}

.competence-feature-section .feature-cta-btn:hover i {
    transform: translateX(5px);
}

.competence-feature-section .competence-feature-image {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.competence-feature-section .competence-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.competence-feature-section .competence-feature-card:hover .competence-feature-image img {
    transform: scale(1.05);
}

.competence-feature-section .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    display: flex;
    justify-content: space-around;
}

.competence-feature-section .image-stat-item {
    text-align: center;
    color: white;
}

.competence-feature-section .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.competence-feature-section .stat-symbol {
    font-size: 1.2rem;
}

.competence-feature-section .stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .competence-feature-section .competence-feature-content {
        padding: 30px;
    }
    
    .competence-feature-section .feature-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .competence-feature-section .competence-feature-image {
        height: 300px;
    }
    
    .competence-feature-section {
        padding: 40px 0;
        margin: 40px 0;
    }
}

/* Mentorship Feature Card Styles */
.mentorship-feature-section {
    padding: 60px 0;
    margin: 40px 0;
    position: relative;
}

.mentorship-feature-section .mentorship-feature-wrap {
    position: relative;
}

.mentorship-feature-section .mentorship-feature-wrap::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -40px;
    width: 120px;
    height: 120px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: var(--light-yellow);
    z-index: -1;
    opacity: 0.5;
    animation: morphBlob 8s ease-in-out infinite alternate;
}

.mentorship-feature-section .mentorship-feature-wrap::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50% 50% 30% 70% / 50% 50% 70% 30%;
    background: var(--primary-gold);
    z-index: -1;
    opacity: 0.3;
    animation: morphBlob 10s ease-in-out infinite;
}

@keyframes morphBlob {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

.mentorship-feature-section .mentorship-feature-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #eee;
    z-index: 1;
}

.mentorship-feature-section .mentorship-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.mentorship-feature-section .mentorship-feature-content {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mentorship-feature-section .mentorship-feature-header {
    margin-bottom: 30px;
}

.mentorship-feature-section .feature-badge {
    display: inline-block;
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.mentorship-feature-section .feature-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    to {
        left: 100%;
    }
}

.mentorship-feature-section .feature-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    background: linear-gradient(135deg, #333, var(--dark-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.mentorship-feature-section .feature-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

.mentorship-feature-section .feature-benefits {
    margin-bottom: 30px;
}

.mentorship-feature-section .benefit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.mentorship-feature-section .benefit-item {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #f9f9f9;
    border: 1px solid #eee;
}

.mentorship-feature-section .benefit-item:hover {
    background: var(--light-yellow);
    transform: translateY(-5px);
}

.mentorship-feature-section .benefit-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-gold);
    font-size: 22px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.mentorship-feature-section .benefit-item:hover .benefit-icon {
    transform: scale(1.1);
    color: var(--dark-gold);
}

.mentorship-feature-section .benefit-text {
    font-weight: 600;
    font-size: 0.95rem;
}

.mentorship-feature-section .feature-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;
}

.mentorship-feature-section .feature-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gold);
    color: black;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mentorship-feature-section .feature-cta-btn i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.mentorship-feature-section .feature-cta-btn:hover {
    background: var(--dark-gold);
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.mentorship-feature-section .feature-cta-btn:hover i {
    transform: translateX(5px);
}

.mentorship-feature-section .track-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mentorship-feature-section .track-indicator {
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 30px;
    background: white;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.mentorship-feature-section .track-indicator:hover {
    background: var(--light-yellow);
    color: var(--dark-gold);
    transform: translateY(-2px);
}

.mentorship-feature-section .mentorship-feature-image {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mentorship-feature-section .mentorship-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 8s ease;
}

.mentorship-feature-section .mentorship-feature-card:hover .mentorship-feature-image img {
    transform: scale(1.1);
}

.mentorship-feature-section .image-overlay-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
}

.mentorship-feature-section .feature-testimonial {
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(5px);
    transform: translateY(5px);
    opacity: 0;
    transition: all 0.5s ease;
}

.mentorship-feature-section .mentorship-feature-card:hover .feature-testimonial {
    transform: translateY(0);
    opacity: 1;
}

.mentorship-feature-section .testimonial-quote {
    font-style: italic;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #333;
    text-align: center;
}

.mentorship-feature-section .testimonial-quote i {
    color: var(--dark-gold);
    font-size: 0.8rem;
    margin: 0 5px;
}

.mentorship-feature-section .testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mentorship-feature-section .author-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid var(--primary-gold);
}

.mentorship-feature-section .author-info {
    display: flex;
    flex-direction: column;
}

.mentorship-feature-section .author-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.mentorship-feature-section .author-position {
    font-size: 0.8rem;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .mentorship-feature-section .mentorship-feature-content {
        padding: 30px;
    }
    
    .mentorship-feature-section .feature-title {
        font-size: 1.8rem;
    }
    
    .mentorship-feature-section .mentorship-feature-image {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .mentorship-feature-section {
        padding: 40px 0;
        margin: 30px 0;
    }
    
    .mentorship-feature-section .benefit-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .mentorship-feature-section .benefit-item {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
    }
    
    .mentorship-feature-section .benefit-icon {
        margin-bottom: 0;
        margin-right: 15px;
    }
    
    .mentorship-feature-section .feature-testimonial {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        opacity: 1;
        transform: none;
        margin-top: 20px;
        background: white;
    }
}

/* Course Categories Section */
.course-categories-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
}

.course-categories-section .category-card {
    background: white center/cover no-repeat;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    border: 1px solid #eee;
}

.course-categories-section .category-card.technology {
    background: #433e34 url('../images/icons/technology.jpg') center/contain no-repeat;
}
.course-categories-section .category-card.business {
    background: #21282d url('../images/icons/business.jpg') center/contain no-repeat;
}
.course-categories-section .category-card.design {
    background: #fef2eb url('../images/icons/design.jpg') center/contain no-repeat;
}
.course-categories-section .category-card.health {
    background: #264f4d url('../images/icons/health.jpg') center/contain no-repeat;
}
.course-categories-section .category-card.marketing {
    background: #1e252c url('../images/icons/marketing.jpg')  center/contain no-repeat;
}
.course-categories-section .category-card.personal-development {
    background: #232124 url('../images/icons/personal-development.jpg')  center/contain no-repeat;
}
.course-categories-section .category-card.languages {
    background: #fce19b url('../images/icons/languages.jpg') center/contain no-repeat;
}

.course-categories-section .category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.course-categories-section .category-icon {
    width: 60px;
    height: 60px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.course-categories-section .category-card:hover .category-icon {
    background: var(--primary-gold);
    color: black;
}

.course-categories-section .category-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.course-categories-section .category-meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #777;
}

.course-categories-section .category-meta.txt-white {
    color: #ccc;
}

.course-categories-section .category-card:hover .category-meta,
.course-categories-section .category-card:hover .category-meta.txt-white {
    color: var(--dark-gold) !important;
}

.course-categories-section .category-card.view-all {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
}

.course-categories-section .category-card.view-all:hover {
    background: var(--primary-gold);
}

.course-categories-section .category-card.view-all:hover h3,
.course-categories-section .category-card.view-all:hover .category-meta {
    color: black;
}

/* Career Direction Section */
.career-direction-section {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('../images/pages/career-direction-bg.jpg') center/cover !important;
    padding: 80px 0;
    background: white;
}

.career-direction-section .career-direction-wrapper {
    background: #0b0a0ab5;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.career-direction-section .direction-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.career-direction-section .direction-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.career-direction-section .direction-card:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-direction-section .direction-image {
    width: 80px;
    margin-right: 20px;
    flex-shrink: 0;
}

.career-direction-section .direction-image img {
    width: 100%;
    height: auto;
}

.career-direction-section .direction-content {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.career-direction-section .direction-content h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    flex-basis: 100%;
}

.career-direction-section .direction-content p {
    color: #666;
    margin-bottom: 0;
    flex-basis: 80%;
}

.career-direction-section .direction-arrow {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--dark-gold);
    font-size: 20px;
    flex-basis: 20%;
    opacity: 0;
    transition: all 0.3s ease;
}

.career-direction-section .direction-card:hover .direction-arrow {
    opacity: 1;
}

.career-direction-section .direction-features {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-left: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    border-left: 4px solid var(--primary-gold);
}

.career-direction-section .direction-feature {
    display: flex;
    align-items: flex-start;
}

.career-direction-section .feature-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
    flex-shrink: 0;
}

.career-direction-section .feature-content h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.career-direction-section .feature-content p {
    color: #666;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .career-direction-section .direction-features {
        margin-left: 0;
        margin-top: 30px;
    }
}

.about-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/about-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.mission-card {
    border: none;
    border-radius: 15px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-top: -80px;
    position: relative;
    z-index: 2;
}

.about-value-card {
    border: none;
    border-radius: 12px;
    padding: 25px;
    margin: 15px 0;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.about-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.about-value-icon {
    font-size: 2.5rem;
    color: var(--secondary-gold);
    margin-bottom: 20px;
}

.team-member {
    text-align: center;
    margin-bottom: 30px;
}

.team-member img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 5px solid var(--light-yellow);
}

.about-timeline {
    position: relative;
    padding: 40px 0;
}

.about-timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--secondary-gold);
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.about-timeline-item {
    margin-bottom: 50px;
    position: relative;
}

.about-timeline-content {
    width: 45%;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about-timeline-item:nth-child(odd) .about-timeline-content {
    margin-left: auto;
}

.about-timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--primary-gold);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
}

.partner-logo {
    height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.about-stats-section .stats-card {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    margin: 15px 0;
}

.about-stats-section .stats-card .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/contact-banner.jpg') center/cover;
    padding: 100px 0;
    color: white;
    text-align: center;
}

.contact-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-size: 24px;
}

.help-form-section {
    background: linear-gradient(135deg, white, var(--light-yellow));
    padding: 60px 0;
}

.contact-form {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-form .form-control {
    border: 2px solid #eee;
    padding: 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--primary-gold);
    box-shadow: none;
}

.contact-form .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 300px;
    display: none;
    z-index: 1000;
}

.chat-header {
    background: var(--primary-gold);
    color: black;
    padding: 15px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body {
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.chat-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 999;
}

.faq-item {
    margin-bottom: 20px;
    border: none;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.faq-question {
    padding: 20px;
    background: white;
    color: black;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--light-yellow);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 500px;
}

.contact-option {
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-option:hover {
    background: var(--light-yellow);
}

.contact-support-hours {
    background: var(--light-yellow);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.contact-time-zone {
    font-size: 0.9rem;
    color: #666;
}

.contact-status-indicator {
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.contact-floating-contact {
    position: fixed;
    right: 30px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 998;
}

.contact-floating-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-floating-button:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .contact-form {
        padding: 20px;
    }

    .contact-floating-contact {
        right: 20px;
        bottom: 80px;
    }

    .chat-widget {
        width: 280px;
        right: 20px;
        bottom: 20px;
    }
}

.help-container .help-hero {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 80px 0;
    color: black;
}

.help-container .help-search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.help-container .help-search-box {
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-size: 1.1rem;
    padding-left: 50px;
}

.help-container .help-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.help-container .help-quick-links {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-top: -50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

.help-container .help-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    height: 100%;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.help-container .help-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.help-container .help-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-size: 1.5rem;
}

.help-container .help-article-list {
    list-style: none;
    padding: 0;
}

.help-container .help-article-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.help-container .help-article-item:hover {
    background: var(--light-yellow);
    padding-left: 20px;
}

.help-container .help-article-views {
    font-size: 0.9rem;
    color: #666;
}

.help-container .help-support-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 320px;
    z-index: 1000;
    display: none;
}

.help-container .help-widget-header {
    background: var(--primary-gold);
    padding: 15px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-container .help-support-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: var(--primary-gold);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.help-container .help-breadcrumb-nav {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.help-container .help-featured-article {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
}

.help-container .help-feedback-section {
    background: var(--light-yellow);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.help-container .help-category-nav {
    position: sticky;
    top: 20px;
}

.help-container .help-category-item {
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-container .help-category-item:hover {
    background: var(--light-yellow);
}

.help-container .help-category-item.active {
    background: var(--primary-gold);
    color: black;
}

.help-container .help-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    background: white;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: none;
}

.help-container .help-suggestion-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.help-container .help-suggestion-item:hover {
    background: var(--light-yellow);
}
        
/* Call to Action */
.cta-section {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/cta-bg.jpg') center/cover;
    padding: 80px 0;
    color: white;
}

.cta-section .cta-card {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.cta-section .certificate-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.cta-section .stat-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    margin: 10px;
}

.cta-section .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 5px;
}

/* Animated Button */
.cta-section .animated-btn {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: black;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-section .animated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-gold), var(--primary-gold));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.cta-section .animated-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.cta-section .animated-btn:hover::before {
    opacity: 1;
}

@media (max-width: 768px) {
    .help-hero {
        padding: 40px 0;
    }

    .help-quick-links {
        margin-top: -30px;
        padding: 20px;
    }

    .help-support-widget {
        width: 300px;
        right: 20px;
        bottom: 20px;
    }

    .help-category-nav {
        position: static;
        margin-bottom: 30px;
    }
}

/* Responsive Styles */
@media (max-width: 991px) {
    .sub-header-top {
        flex-direction: column;
    }
    .search-container {
        width: 100%;
    }
    .sticky-logo {
        margin-bottom: 10px;
    }
    .logo-image {
        margin-right: 0;
    }
}
/* Mobile Menu Styles */
@media (max-width: 768px) {
    .courses-menu, .certification-menu, .careers-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        transform: none !important;
        margin: 0;
        padding: 20px;
        z-index: 1001;
        overflow-y: auto !important;
        border-radius: 0;
    }
    
    .courses-menu.active, .certification-menu.active, .careers-menu.active {
        z-index: 1021;
    }
    .menu-close-button {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background: var(--light-yellow);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1022;
    }
    
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        display: none;
    }
    
    .menu-overlay.active {
        display: block;
    }
}
@media (max-width: 768px) {
    .feature-card {
        margin-top: 20px;
    }

    .hero-section {
        min-height: 60vh;
    }

    .stat-number {
        font-size: 2rem;
    }
}

.auth-container {
    display: flex;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    background: white;
    margin: 50px auto;
}

.auth-visual {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/auth-bg.jpg') center/cover;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-visual-inner {
    position: relative;
    z-index: 2;
    padding: 40px;
    text-align: center;
    color: white;
}

.auth-logo {
    width: 120px;
    margin-bottom: 20px;
}

.auth-visual h2 {
    font-weight: 700;
    margin-bottom: 20px;
}

.auth-visual p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.auth-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.auth-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    animation: float 8s infinite linear;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-300px) rotate(360deg); opacity: 0.2; }
}

.auth-forms-container {
    width: 50%;
    position: relative;
    overflow: hidden;
}

.auth-forms {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.5s ease;
}

.auth-form {
    width: 100%;
    height: 100%;
    padding: 40px;
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-title {
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
}

.auth-social-signin {
    margin-bottom: 30px;
}

.auth-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #eee;
    border-radius: 50px;
    padding: 12px 20px;
    margin-bottom: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: #333;
}

.auth-social-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.auth-social-button i {
    margin-right: 10px;
    font-size: 18px;
}

.auth-social-button.google {
    border-color: #ea4335;
    color: #ea4335;
}

.auth-social-button.facebook {
    border-color: #3b5998;
    color: #3b5998;
}

.auth-social-button.apple {
    border-color: #000;
    color: #000;
}

.auth-divider {
    display: flex;
    align-items: center;
    color: #777;
    margin: 20px 0;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.auth-divider span {
    padding: 0 10px;
}

.auth-input-group {
    position: relative;
    margin-bottom: 20px;
}

.auth-input {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #eee;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.auth-input:focus {
    border-color: var(--primary-gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    color: #999;
}

.auth-input-icon ~ .auth-input {
    padding-left: 45px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    cursor: pointer;
    color: #999;
}

.auth-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: #333;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.auth-switch {
    margin-top: 20px;
    text-align: center;
}

.auth-link {
    color: var(--dark-gold);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.auth-link:hover {
    color: var(--primary-gold);
    text-decoration: underline;
}

.auth-floating-element {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: float-element 15s infinite linear;
}

@keyframes float-element {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, -30px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
        height: auto;
    }

    .auth-visual, .auth-forms-container {
        width: 100%;
    }

    .auth-visual {
        min-height: 200px;
    }

    .auth-forms-container {
        min-height: 450px;
    }

    .auth-form {
        position: relative;
        height: auto;
    }
}

/* Program Detail */
.program-detail-container .program-header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/diploma-programs-featured.jpg') center/cover;
    padding: 100px 0;
    color: white;
    position: relative;
}

.program-detail-container .header-badge {
    background: var(--primary-gold);
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
}

/* Overview Card */
.program-detail-container .overview-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-top: -80px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5;
}

.program-detail-container .overview-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.program-detail-container .overview-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--dark-gold);
    font-size: 20px;
    flex-shrink: 0;
}

/* Enrollment Card */
.program-detail-container .enrollment-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: sticky;
    top: 20px;
}

.program-detail-container .price-tag {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-gold);
    margin-bottom: 20px;
}

.program-detail-container .enroll-btn {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: black;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.program-detail-container .enroll-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.program-detail-container .guarantee {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    background: var(--light-yellow);
    border-radius: 10px;
}

.program-detail-container .guarantee-icon {
    color: var(--dark-gold);
    margin-right: 15px;
    font-size: 24px;
}

/* Learning Sections */
.program-detail-container .learning-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.program-detail-container .section-title {
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--light-yellow);
}

.program-detail-container .skill-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 8px 15px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

/* Course List */
.program-detail-container .course-list {
    list-style: none;
    padding: 0;
}

.program-detail-container .course-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.program-detail-container .course-item:hover {
    transform: translateX(10px);
    background: var(--light-yellow);
}

.program-detail-container .course-number {
    width: 30px;
    height: 30px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Instructor Section */
.program-detail-container .instructor-section {
    margin-bottom: 30px;
}

.program-detail-container .instructor-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

.program-detail-container .instructor-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 30px;
}

/* Reviews Section */
.program-detail-container .review-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.program-detail-container .review-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.program-detail-container .reviewer-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.program-detail-container .rating-stars {
    color: var(--primary-gold);
    margin-bottom: 5px;
}

/* FAQ Section */
.program-detail-container .faq-item {
    margin-bottom: 20px;
}

.program-detail-container .faq-question {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-detail-container .faq-question:hover {
    background: var(--light-yellow);
}

.program-detail-container .faq-answer {
    padding: 15px;
    display: none;
}

/* Related Programs */
.program-detail-container .related-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    height: 100%;
}

.program-detail-container .related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.program-detail-container .related-image {
    height: 150px;
    overflow: hidden;
}

.program-detail-container .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.program-detail-container .related-card:hover .related-image img {
    transform: scale(1.1);
}

.program-detail-container .related-content {
    padding: 20px;
}

/* Progress Bar Styles */
.program-detail-container .progress-container {
    background: #f1f1f1;
    border-radius: 10px;
    height: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.program-detail-container .progress-bar {
    background: var(--primary-gold);
    height: 10px;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .program-detail-container .enrollment-card {
        position: static;
        margin-bottom: 30px;
    }

    .program-detail-container .overview-card {
        margin-top: -40px;
    }
}

.blog-container .blog-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/blog.webp') center/cover;
    padding: 120px 0;
    color: white;
}

.blog-container .featured-post {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-top: -80px;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-container .featured-image {
    height: 400px;
    object-fit: cover;
}

.blog-container .featured-content {
    padding: 30px;
}

.blog-container .blog-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-container .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.blog-container .blog-image {
    height: 200px;
    object-fit: cover;
}

.blog-container .blog-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 10px;
}

.blog-container .author-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.blog-container .author-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.blog-container .sidebar-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-container .trending-post {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.blog-container .trending-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-right: 15px;
    object-fit: cover;
}

.blog-container .category-pill {
    display: inline-block;
    padding: 8px 20px;
    background: white;
    border: 2px solid var(--primary-gold);
    border-radius: 25px;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-container .category-pill:hover {
    background: var(--primary-gold);
    color: black;
}

.blog-container .newsletter-form {
    position: relative;
}

.blog-container .newsletter-input {
    width: 100%;
    padding: 12px;
    padding-right: 50px;
    border: 2px solid #eee;
    border-radius: 25px;
}

.blog-container .newsletter-button {
    position: absolute;
    right: 5px;
    top: 5px;
    background: var(--primary-gold);
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
}

.blog-container .social-share {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-container .share-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.blog-container .share-button:hover {
    transform: scale(1.1);
}

.blog-container .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

@media (max-width: 768px) {
    .blog-container .featured-post {
        margin-top: -40px;
    }

    .blog-container .featured-image {
        height: 250px;
    }

    .blog-container .social-share {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin: 20px 0;
    }
}

.blog-container .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #eee;
    z-index: 1000;
}

.blog-container .progress-bar {
    height: 100%;
    background: var(--primary-gold);
    width: 0;
}

.blog-container .post-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../images/pages/blog-post.webp') center/cover;
    display: flex;
    align-items: center;
    color: white;
}

.blog-container .post-meta {
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-top: -50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-container .post-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.blog-container .post-content p {
    margin-bottom: 1.5rem;
}

.blog-container .post-content h2 {
    margin: 2rem 0 1rem;
}

.blog-container .post-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 2rem 0;
}

.blog-container .quote-block {
    background: var(--light-yellow);
    border-left: 5px solid var(--primary-gold);
    padding: 20px;
    margin: 2rem 0;
    border-radius: 0 10px 10px 0;
}

.blog-container .table-of-contents {
    background: white;
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-container .toc-link {
    display: block;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-container .toc-link:hover {
    color: var(--dark-gold);
    padding-left: 10px;
}

.blog-container .toc-link.active {
    color: var(--dark-gold);
    font-weight: 600;
}

.blog-container .social-share {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-container .share-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.blog-container .share-button:hover {
    transform: scale(1.1);
}

.blog-container .comment-box {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.blog-container .comment-input {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
}

.blog-container .related-post {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.blog-container .related-post:hover {
    transform: translateY(-5px);
}

.blog-container .related-image {
    height: 200px;
    object-fit: cover;
}

.blog-container .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.blog-container .tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.blog-container .highlight-box {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    border-radius: 10px;
    padding: 20px;
    margin: 2rem 0;
    border: 2px solid var(--primary-gold);
}

@media (max-width: 768px) {
    .blog-container .social-share {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin: 20px 0;
    }

    .blog-container .table-of-contents {
        position: static;
        margin-bottom: 20px;
    }

    .blog-container .post-hero {
        height: 40vh;
    }
}

.terms-hero {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 60px 0;
    color: black;
}

.terms-container {
    background: white;
    border-radius: 15px;
    padding: 40px;
    margin-top: -50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.terms-container .section-title {
    color: var(--dark-gold);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-yellow);
}

.terms-container .terms-nav {
    position: sticky;
    top: 20px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.terms-container .terms-link {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.terms-container .terms-link:hover {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding-left: 20px;
}

.terms-container .terms-link.active {
    background: var(--primary-gold);
    color: black;
}

.terms-container .important-notice {
    background: var(--light-yellow);
    border-left: 4px solid var(--primary-gold);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 10px 10px 0;
}

.terms-container .definition-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
}

.terms-container .print-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary-gold);
    color: black;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-container .print-button:hover {
    transform: scale(1.1);
}

.terms-container .last-updated {
    font-style: italic;
    color: #666;
    margin-bottom: 30px;
}

.terms-container .contact-support {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .terms-container {
        padding: 20px;
        margin-top: -30px;
    }

    .terms-container .terms-nav {
        position: static;
        margin-bottom: 30px;
    }

    .terms-container .print-button {
        bottom: 20px;
        right: 20px;
    }
}

.terms-container .knowledge-section {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.terms-container .subsection {
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 10px;
    border-left: 4px solid var(--primary-gold);
}

.terms-container .expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.terms-container .expanded {
    max-height: 2000px;
}

.terms-container .expand-button {
    background: none;
    border: none;
    color: var(--dark-gold);
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terms-container .key-point {
    background: #f8f9fa;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-gold);
}

.terms-container .example-box {
    background: var(--light-yellow);
    padding: 20px;
    margin: 15px 0;
    border-radius: 10px;
}

.terms-container .resource-link {
    display: block;
    padding: 15px;
    margin: 10px 0;
    background: white;
    border-radius: 8px;
    color: var(--dark-gold);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--light-yellow);
}

.terms-container .resource-link:hover {
    background: var(--light-yellow);
    transform: translateX(10px);
}

.terms-container .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.terms-container .info-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.terms-section-navigator {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 25px;
    padding: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    display: none;
}

.terms-section-navigator .nav-dot {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-section-navigator .nav-dot.active {
    background: var(--primary-gold);
    transform: scale(1.3);
}

@media (min-width: 1200px) {
    .terms-section-navigator {
        display: block;
    }
}

.glossary-term {
    border-bottom: 2px dotted var(--secondary-gold);
    cursor: help;
    position: relative;
}

.glossary-term:hover::after {
    content: attr(data-definition);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    width: 200px;
    z-index: 1000;
}

.privacy-hero {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 60px 0;
    color: black;
}

.privacy-container {
    background: white;
    border-radius: 15px;
    padding: 40px;
    margin-top: -50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.privacy-container .table-of-contents {
    background: white;
    padding: 20px;
    border-radius: 10px;
    position: sticky;
    top: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.privacy-container .privacy-section {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.privacy-container .data-category {
    background: var(--light-yellow);
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
}

.privacy-container .highlight-box {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--primary-gold);
}

.privacy-container .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.privacy-container .info-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.privacy-container .privacy-link {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.privacy-container .privacy-link:hover {
    background: var(--light-yellow);
    padding-left: 15px;
}

.privacy-container .privacy-link.active {
    background: var(--primary-gold);
    color: black;
}

.privacy-container .example-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
}

.privacy-container .quick-action {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    border: 1px solid var(--light-yellow);
    transition: all 0.3s ease;
    cursor: pointer;
}

.privacy-container .quick-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .privacy-container {
        padding: 20px;
        margin-top: -30px;
    }

    .privacy-container .table-of-contents {
        position: static;
        margin-bottom: 30px;
    }
}



/* Career Assessment Page */
.assessment-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/career-assessment-banner.jpg') center/cover;
    min-height: 300px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.assessment-container {
    padding: 60px 0;
    background: #f9f9f9;
    min-height: 600px;
}

.assessment-container .assessment-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    position: relative;
}

/* Progress Bar */
.assessment-container .progress-container {
    margin-bottom: 30px;
}

.assessment-container .progress-bar-custom {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.assessment-container .progress-bar-fill {
    height: 100%;
    background: var(--primary-gold);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.assessment-container .progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #777;
}

/* Question Steps */
.assessment-container .assessment-step {
    display: none;
}

.assessment-container .assessment-step.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.assessment-container .step-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

.assessment-container .step-description {
    color: #666;
    margin-bottom: 30px;
}

/* Form Elements */
.assessment-container .form-group {
    margin-bottom: 25px;
}

.assessment-container .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #555;
}

.assessment-container .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.assessment-container .form-control:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.assessment-container .form-text {
    margin-top: 5px;
    font-size: 14px;
    color: #777;
}

/* Options Grid */
.assessment-container .options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.assessment-container .option-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.assessment-container .option-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--primary-gold);
}

.assessment-container .option-card.selected {
    border: 2px solid var(--primary-gold);
    background: var(--light-yellow);
}

.assessment-container .option-card .option-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--primary-gold);
    display: none;
}

.assessment-container .option-card.selected .option-check {
    display: block;
}

.assessment-container .option-card .option-icon {
    margin-bottom: 15px;
    color: var(--dark-gold);
    font-size: 24px;
}

.assessment-container .option-card .option-label {
    font-weight: 600;
    margin-bottom: 5px;
}

.assessment-container .option-card .option-description {
    font-size: 14px;
    color: #666;
}

/* Skill Level Slider */
.assessment-container .skill-slider-container {
    margin-bottom: 30px;
}

.assessment-container .skill-name {
    font-weight: 600;
    margin-bottom: 10px;
}

.assessment-container .skill-slider {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.assessment-container .skill-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-gold);
    transition: width 0.3s ease;
}

.assessment-container .skill-slider-handle {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid var(--primary-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
}

.assessment-container .skill-level-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.assessment-container .skill-level-label {
    font-size: 12px;
    color: #777;
    text-align: center;
    width: 20%;
}

/* Toggle Switches */
.assessment-container .toggle-group {
    margin-bottom: 15px;
}

.assessment-container .toggle-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.assessment-container .toggle-label-text {
    font-weight: 600;
}

.assessment-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.assessment-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.assessment-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.assessment-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-gold);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Navigation Buttons */
.assessment-container .btn-nav {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.assessment-container .btn-next {
    background: var(--primary-gold);
    color: black;
    border: none;
}

.assessment-container .btn-next:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.assessment-container .btn-prev {
    background: transparent;
    color: #777;
    border: 1px solid #ddd;
}

.assessment-container .btn-prev:hover {
    border-color: #999;
    color: #555;
}

.assessment-container .nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

/* Results Section */
.assessment-container .results-container {
    display: none;
}

.assessment-container .results-container.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.assessment-container .results-header {
    text-align: center;
    margin-bottom: 40px;
}

.assessment-container .results-icon {
    font-size: 60px;
    color: var(--primary-gold);
    margin-bottom: 20px;
}

.assessment-container .matched-paths {
    margin-top: 30px;
}

.assessment-container .path-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.assessment-container .path-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.assessment-container .path-header {
    background: var(--primary-gold);
    color: black;
    padding: 15px 20px;
    position: relative;
}

.assessment-container .path-match {
    position: absolute;
    top: 15px;
    right: 20px;
    background: black;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.assessment-container .path-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.assessment-container .path-content {
    padding: 20px;
}

.assessment-container .path-description {
    color: #555;
    margin-bottom: 20px;
}

.assessment-container .path-stats {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.assessment-container .path-stat {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid #eee;
    margin-bottom: 10px;
}

.assessment-container .path-stat:last-child {
    border-right: none;
}

.assessment-container .path-stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.assessment-container .path-stat-label {
    font-size: 0.9rem;
    color: #777;
}

.assessment-container .path-btn {
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.assessment-container .path-btn:hover {
    background: var(--primary-gold);
    color: black;
}

/* Custom Checkboxes */
.assessment-container .custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.assessment-container .custom-checkbox {
    display: inline-block;
    position: relative;
}

.assessment-container .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.assessment-container .checkbox-label {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.assessment-container .custom-checkbox input:checked + .checkbox-label {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
    color: var(--dark-gold);
}

/* Email Capture Form */
.assessment-container .email-capture {
    background: var(--light-yellow);
    border-radius: 12px;
    padding: 25px;
    margin-top: 40px;
    border: 1px solid var(--primary-gold);
}

.assessment-container .email-capture h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.assessment-container .email-form {
    display: flex;
    gap: 10px;
}

.assessment-container .email-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.assessment-container .email-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .assessment-container .assessment-card {
        padding: 25px;
    }
    
    .assessment-container .options-grid {
        grid-template-columns: 1fr;
    }
    
    .assessment-container .path-stat {
        flex-basis: 50%;
        border-right: none;
    }
    
    .assessment-container .email-form {
        flex-direction: column;
    }
    
    .assessment-container .nav-buttons {
        flex-direction: column-reverse;
        gap: 15px;
    }
    
    .assessment-container .btn-nav {
        width: 100%;
    }
}



/* Career Path Page */
.career-paths-container .career-paths-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/career-paths-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Introduction Section */
.career-paths-container .intro-section {
    padding: 80px 0;
    background: #fff;
}

.career-paths-container .intro-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    border: 1px solid #eee;
    padding: 30px;
    transition: all 0.3s ease;
}

.career-paths-container .intro-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.career-paths-container .intro-icon {
    width: 70px;
    height: 70px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Career Paths Section */
.career-paths-container .career-paths-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.career-paths-container .career-path-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.career-paths-container .career-path-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-paths-container .career-header {
    position: relative;
}

.career-paths-container .career-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.career-paths-container .career-icon-wrapper {
    position: absolute;
    bottom: -25px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.career-paths-container .career-content {
    padding: 30px 20px 20px;
}

.career-paths-container .career-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.career-paths-container .career-description {
    color: #555;
    margin-bottom: 20px;
}

.career-paths-container .career-stats {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.career-paths-container .stat-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 14px;
    color: #555;
}

.career-paths-container .stat-item i {
    color: var(--dark-gold);
    margin-right: 5px;
}

.career-paths-container .career-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.career-paths-container .career-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
}

.career-paths-container .career-path-btn {
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.career-paths-container .career-path-btn:hover {
    background: var(--primary-gold);
    color: black;
}

/* Career Path Filters */
.career-paths-container .filters-container {
    margin-bottom: 30px;
}

.career-paths-container .filter-title {
    font-weight: 600;
    margin-bottom: 15px;
}

.career-paths-container .filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.career-paths-container .filter-tag {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.career-paths-container .filter-tag:hover, .filter-tag.active {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
    color: var(--dark-gold);
}

/* Steps Section */
.career-paths-container .steps-section {
    padding: 80px 0;
    background: white;
}

.career-paths-container .step-card {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.career-paths-container .step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-paths-container .step-number {
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 20px;
}

.career-paths-container .step-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.career-paths-container .step-description {
    color: #555;
}

/* Testimonials Carousel */
.career-paths-container .testimonials-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.career-paths-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 15px;
    height: 100%;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.career-paths-container .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-paths-container .testimonial-text {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    position: relative;
}

.career-paths-container .testimonial-text::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -10px;
    left: -15px;
    color: var(--light-yellow);
    font-size: 24px;
    opacity: 0.5;
}

.career-paths-container .testimonial-author {
    display: flex;
    align-items: center;
}

.career-paths-container .author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid var(--primary-gold);
}

.career-paths-container .author-details {
    display: flex;
    flex-direction: column;
}

.career-paths-container .author-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.career-paths-container .author-role {
    font-size: 14px;
    color: #777;
}

.career-paths-container .career-achieved {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-gold);
    margin-top: 5px;
}

/* CTA Section */
.career-paths-container .cta-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/career-paths-cta.jpg') center/cover;
    color: white;
    text-align: center;
}

.career-paths-container .cta-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.career-paths-container .cta-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.career-paths-container .cta-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
}

.career-paths-container .cta-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* FAQ Section */
.career-paths-container .faq-section {
    padding: 80px 0;
    background: white;
}

.career-paths-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.career-paths-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.career-paths-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.career-paths-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.career-paths-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media (max-width: 768px) {
    .career-paths-container .filter-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .career-paths-container .filter-tags::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .career-paths-container .filter-tag {
        white-space: nowrap;
    }
}



/* Careers Page */
.careers-container .careers-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/careers-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Why Join Section */
.careers-container .why-join-section {
    padding: 80px 0;
    background: #fff;
}

.careers-container .why-join-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
}

.careers-container .why-join-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.careers-container .why-join-icon {
    width: 70px;
    height: 70px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.careers-container .why-join-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-align: center;
}

.careers-container .why-join-text {
    text-align: center;
    color: #555;
}

/* Values Section */
.careers-container .values-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.careers-container .value-item {
    text-align: center;
    margin-bottom: 40px;
}

.careers-container .value-icon {
    width: 80px;
    height: 80px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.careers-container .value-item:hover .value-icon {
    transform: rotate(0deg);
    background: var(--primary-gold);
    color: black;
}

.careers-container .value-icon i {
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

.careers-container .value-item:hover .value-icon i {
    transform: rotate(0deg);
}

.careers-container .value-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Benefits Section */
.careers-container .benefits-section {
    padding: 80px 0;
    background: #fff;
}

.careers-container .benefit-card {
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.careers-container .benefit-card:hover {
    transform: translateY(-5px);
    border-bottom: 3px solid var(--primary-gold);
}

.careers-container .benefit-icon {
    color: var(--dark-gold);
    font-size: 24px;
    margin-bottom: 15px;
}

.careers-container .benefit-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Team Section */
.careers-container .team-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.careers-container .team-slider {
    padding: 20px 0;
}

.careers-container .team-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 10px;
    transition: all 0.3s ease;
}

.careers-container .team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.careers-container .team-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.careers-container .team-info {
    padding: 20px;
    text-align: center;
}

.careers-container .team-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.careers-container .team-position {
    color: #777;
    font-style: italic;
    margin-bottom: 15px;
}

.careers-container .team-quote {
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
    position: relative;
    padding: 0 15px;
}

.careers-container .team-quote:before, .team-quote:after {
    content: '"';
    font-size: 1.5rem;
    color: var(--primary-gold);
    position: absolute;
}

.careers-container .team-quote:before {
    left: 0;
    top: -5px;
}

.careers-container .team-quote:after {
    right: 0;
    bottom: -15px;
}

/* Jobs Section */
.careers-container .jobs-section {
    padding: 80px 0;
    background: #fff;
}

.careers-container .filter-bar {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.careers-container .filter-tabs {
    display: flex;
    flex-wrap: wrap;
}

.careers-container .filter-tab {
    padding: 10px 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f5f5f5;
    color: #555;
}

.careers-container .filter-tab:hover, .filter-tab.active {
    background: var(--primary-gold);
    color: black;
}

.careers-container .job-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.careers-container .job-card:hover {
    transform: translateX(10px);
    border-left: 5px solid var(--primary-gold);
}

.careers-container .job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.careers-container .job-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.careers-container .job-department {
    color: #777;
    font-style: italic;
}

.careers-container .job-type {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.careers-container .job-remote {
    background: #e6f7ff;
    color: #0080ff;
}

.careers-container .job-hybrid {
    background: #e6f0ff;
    color: #0055ff;
}

.careers-container .job-onsite {
    background: #fff5e6;
    color: #ff8c00;
}

.careers-container .job-details {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.careers-container .job-detail {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #555;
}

.careers-container .job-detail i {
    margin-right: 5px;
    color: var(--dark-gold);
}

.careers-container .job-description {
    margin-bottom: 20px;
    color: #555;
}

.careers-container .apply-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.careers-container .apply-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Application Process */
.careers-container .process-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.careers-container .process-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 40px;
}

.careers-container .process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--light-yellow);
    transform: translateX(-50%);
}

.careers-container .timeline-item {
    position: relative;
    margin-bottom: 60px;
}

.careers-container .timeline-item:last-child {
    margin-bottom: 0;
}

.careers-container .timeline-content {
    width: calc(50% - 40px);
    padding: 25px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    border: 1px solid #eee;
}

.careers-container .timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
    border-left: 3px solid var(--primary-gold);
}

.careers-container .timeline-item:nth-child(even) .timeline-content {
    margin-right: auto;
    border-right: 3px solid var(--primary-gold);
}

.careers-container .timeline-dot {
    position: absolute;
    top: 25px;
    width: 30px;
    height: 30px;
    background: var(--primary-gold);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: 700;
    border: 4px solid white;
}

.careers-container .timeline-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-gold);
}

/* FAQ Section */
.careers-container .faq-section {
    padding: 80px 0;
    background: #fff;
}

.careers-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.careers-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.careers-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.careers-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.careers-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Contact CTA */
.careers-container .cta-section {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/careers-cta-bg.jpg') center/cover;
    padding: 80px 0;
    color: white;
    text-align: center;
}

.careers-container .cta-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.careers-container .cta-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
}

.careers-container .cta-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.careers-container .no-jobs-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--admin-text-secondary);
}

.careers-container .no-jobs-message i {
    font-size: 4rem;
    color: var(--admin-text-muted);
    margin-bottom: 20px;
    opacity: 0.5;
}

.careers-container .no-jobs-message h3 {
    color: var(--admin-text-primary);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.careers-container .no-jobs-message p {
    color: var(--admin-text-secondary);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 992px) {
    .careers-container .process-timeline::before {
        left: 20px;
    }
    
    .careers-container .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
    }
    
    .careers-container .timeline-dot {
        left: 20px;
    }
    
    .careers-container .timeline-item:nth-child(even) .timeline-content,
    .careers-container .timeline-item:nth-child(odd) .timeline-content {
        border-left: 3px solid var(--primary-gold);
        border-right: none;
    }
}



/* Certifications Page */
.credentials-container .certifications-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/certifications-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Credentials Section */
.credentials-container .credentials-section {
    padding: 80px 0;
    background: #fff;
}

.credentials-container .credentials-tabs {
    display: flex;
    border-bottom: 3px solid #f5f5f5;
    margin-bottom: 40px;
}

.credentials-container .credential-tab {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    color: #777;
}

.credentials-container .credential-tab.active {
    color: var(--dark-gold);
}

.credentials-container .credential-tab::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.credentials-container .credential-tab.active::after {
    transform: scaleX(1);
}

.credentials-container .credential-content {
    display: none;
}

.credentials-container .credential-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Info Cards */
.credentials-container .info-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.credentials-container .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.credentials-container .info-card-header {
    background: linear-gradient(135deg, var(--light-yellow), #fff);
    padding: 25px;
    border-bottom: 1px solid #f5f5f5;
}

.credentials-container .info-card-body {
    padding: 25px;
}

.credentials-container .info-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 20px;
    color: black;
    font-size: 24px;
}

/* Comparison Table */
.credentials-container .comparison-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.credentials-container .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.credentials-container .comparison-table th {
    padding: 20px;
    background: var(--primary-gold);
    color: black;
    text-align: center;
    font-weight: 600;
}

.credentials-container .comparison-table th:first-child {
    text-align: left;
    background: var(--dark-gold);
    color: white;
}

.credentials-container .comparison-table td {
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
    background: white;
}

.credentials-container .comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    background: #f9f9f9;
}

.credentials-container .comparison-table tr:last-child td {
    border-bottom: none;
}

.credentials-container .check-icon {
    color: green;
}

.credentials-container .times-icon {
    color: red;
}

/* Pathway Section */
.credentials-container .pathway-section {
    padding: 80px 0;
    background: white;
}

.credentials-container .pathway-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.credentials-container .pathway-connector {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 4px;
    height: calc(100% - 80px);
    background: var(--light-yellow);
    transform: translateX(-50%);
    z-index: 1;
}

.credentials-container .pathway-step {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.credentials-container .pathway-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: black;
    font-size: 24px;
    flex-shrink: 0;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.credentials-container .pathway-content {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 4px solid var(--primary-gold);
}

/* FAQ Section */
.credentials-container .faq-section {
    background: var(--light-yellow);
    padding: 80px 0;
}

.credentials-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.credentials-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.credentials-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.credentials-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.credentials-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Industry Partners */
.credentials-container .partners-section {
    padding: 80px 0;
    background: white;
}

.credentials-container .partner-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.credentials-container .partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.credentials-container .partner-logo img {
    max-height: 100%;
    max-width: 100%;
}

/* Call to Action */
.credentials-container .cta-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/certifications-action-bg.jpg') center/cover;
    color: white;
    text-align: center;
}

.credentials-container .credential-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    margin: 0 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.credentials-container .certificate-btn {
    background: linear-gradient(135deg, var(--primary-gold), var(--dark-gold));
    color: black;
}

.credentials-container .diploma-btn {
    background: white;
    color: var(--dark-gold);
}

.credentials-container .credential-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Education Path */
.credentials-container .education-path {
    padding: 80px 0;
    background: #f9f9f9;
}

.credentials-container .path-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.credentials-container .path-header {
    padding: 25px;
    background: var(--light-yellow);
    border-bottom: 1px solid #eee;
}

.credentials-container .path-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.credentials-container .path-body {
    padding: 25px;
    flex-grow: 1;
}

.credentials-container .path-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credentials-container .path-item {
    display: flex;
    align-items: start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
}

.credentials-container .path-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.credentials-container .path-item-icon {
    width: 40px;
    height: 40px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--dark-gold);
    font-size: 16px;
    flex-shrink: 0;
}

.credentials-container .path-item-content {
    flex-grow: 1;
}

.credentials-container .path-step {
    font-weight: 600;
    margin-bottom: 5px;
}

/* Testimonials */
.credentials-container .testimonials-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #fff, var(--light-yellow));
}

.credentials-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.credentials-container .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.credentials-container .testimonial-text {
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
    padding-left: 25px;
}

.credentials-container .testimonial-text:before {
    content: '"';
    font-size: 50px;
    position: absolute;
    left: 0;
    top: -15px;
    color: var(--primary-gold);
    opacity: 0.5;
}

.credentials-container .testimonial-author {
    display: flex;
    align-items: center;
}

.credentials-container .author-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.credentials-container .author-info h5 {
    margin-bottom: 0;
}

.credentials-container .author-info p {
    margin-bottom: 0;
    color: #777;
    font-size: 14px;
}

/* Stats Section */
.credentials-container .cert-stats-section {
    padding: 60px 0;
    background: white;
}

.credentials-container .stat-item {
    text-align: center;
    padding: 20px;
}

.credentials-container .stat-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 10px;
    line-height: 1;
}

.credentials-container .stat-label {
    font-size: 18px;
    color: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .credentials-container .credentials-tabs {
        flex-direction: column;
    }
    
    .credentials-container .credential-tab {
        text-align: center;
        padding: 10px;
    }
    
    .credentials-container .comparison-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .credentials-container .pathway-connector {
        left: 30px;
    }
    
    .credentials-container .pathway-step {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 30px;
    }
    
    .credentials-container .pathway-icon {
        margin-bottom: 15px;
    }
    
    .credentials-container .pathway-content {
        width: 100%;
    }
}



/* Courses Page */
.courses-container .courses-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/courses-banner.jpg') center/cover;
    min-height: 350px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.courses-container .course-container {
    padding: 60px 0;
    background: #f9f9f9;
}

.courses-container .search-bar-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-top: -50px;
    position: relative;
    z-index: 5;
    padding: 20px;
    margin-bottom: 40px;
}

.courses-container .search-bar {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

.courses-container .search-input {
    flex-grow: 1;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    outline: none;
}

.courses-container .search-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.courses-container .search-btn:hover {
    background: var(--dark-gold);
}

/* Filters Sidebar */
.courses-container .filters-sidebar {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 25px;
    position: sticky;
    top: 30px;
}

.courses-container .filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.courses-container .filter-heading h4 {
    margin-bottom: 0;
}

.courses-container .reset-filters {
    color: var(--dark-gold);
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.courses-container .filter-block {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.courses-container .filter-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.courses-container .filter-title {
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.courses-container .filter-search {
    position: relative;
    margin-bottom: 15px;
}

.courses-container .filter-search input {
    width: 100%;
    padding: 10px 15px;
    padding-left: 35px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.courses-container .filter-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
}

.courses-container .checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.courses-container .checkbox-item:last-child {
    margin-bottom: 0;
}

.courses-container .custom-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.courses-container .custom-checkbox.checked {
    background: var(--primary-gold);
    border-color: var(--primary-gold);
}

.courses-container .custom-checkbox.checked:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: black;
    font-size: 10px;
}

.courses-container .checkbox-label {
    cursor: pointer;
    user-select: none;
    flex-grow: 1;
}

.courses-container .count-badge {
    background: #f5f5f5;
    color: #777;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* Price Range Slider */
.courses-container .price-slider-container {
    padding: 0 10px;
    margin-top: 25px;
}

.courses-container .price-range {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.courses-container .range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    margin: 15px 0;
}

.courses-container .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-gold);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.courses-container .range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-gold);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: none;
}

.courses-container .price-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.courses-container .price-input {
    width: 70px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
}

.courses-container .price-separator {
    margin: 0 10px;
    color: #777;
}

/* Star Ratings Filter */
.courses-container .stars-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.courses-container .star-row {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 0;
}

.courses-container .star-row:hover {
    background: #f9f9f9;
}

.courses-container .star-row .stars {
    color: var(--primary-gold);
    margin-right: 10px;
}

.courses-container .star-row .count {
    color: #777;
    margin-left: auto;
    font-size: 14px;
}

/* Duration Filter */
.courses-container .duration-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.courses-container .duration-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.courses-container .duration-option:hover, 
.courses-container .duration-option.active {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
    color: var(--dark-gold);
}

/* Mobile Filter Toggle */
.courses-container .mobile-filter-toggle {
    display: none;
    width: 100%;
    padding: 15px;
    background: var(--primary-gold);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
    color: black;
    cursor: pointer;
}

.courses-container .close-filters {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #777;
}

/* Courses List */
.courses-container .courses-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.courses-container .results-count {
    font-weight: 600;
}

.courses-container .sort-dropdown {
    position: relative;
}

.courses-container .sort-button {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 200px;
    justify-content: space-between;
}

.courses-container .sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 5;
    margin-top: 5px;
    display: none;
}

.courses-container .sort-menu.open {
    display: block;
}

.courses-container .sort-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.courses-container .sort-option:hover {
    background: #f5f5f5;
}

.courses-container .sort-option.active {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-weight: 600;
}

/* Course Card */
.courses-container .course-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.courses-container .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.courses-container .course-image {
    height: 180px;
    overflow: hidden;
    position: relative;
}

.courses-container .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.courses-container .course-card:hover .course-image img {
    transform: scale(1.1);
}

.courses-container .course-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-gold);
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
}

.courses-container .course-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.courses-container .course-instructor {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.courses-container .instructor-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.courses-container .instructor-name {
    font-size: 14px;
    color: #555;
}

.courses-container .course-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.courses-container .course-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    flex-grow: 1;
}

.courses-container .meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.courses-container .meta-value {
    font-weight: 700;
    color: var(--dark-gold);
}

.courses-container .meta-label {
    font-size: 12px;
    color: #777;
}

.courses-container .course-rating {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.courses-container .stars {
    color: var(--primary-gold);
    margin-right: 10px;
}

.courses-container .rating-count {
    font-size: 14px;
    color: #777;
}

.courses-container .course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.courses-container .course-price {
    font-weight: 700;
    font-size: 1.2rem;
}

.courses-container .price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
    margin-right: 5px;
}

.courses-container .enroll-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.courses-container .enroll-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Pagination */
.courses-container .pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.courses-container .page-item {
    margin: 0 5px;
}

.courses-container .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    text-decoration: none;
}

.courses-container .page-link:hover, .page-link.active {
    background: var(--primary-gold);
    color: black;
    border-color: var(--primary-gold);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .courses-container .filters-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
        transition: all 0.3s ease;
        border-radius: 0;
    }
    
    .courses-container .filters-sidebar.open {
        left: 0;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
    
    .courses-container .mobile-filter-toggle, .close-filters {
        display: block;
    }
    
    .courses-container .courses-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
    }
    
    .courses-container .courses-backdrop.active {
        display: block;
    }
}

@media (max-width: 768px) {
    .courses-container .search-bar {
        flex-direction: column;
        border-radius: 10px;
    }
    
    .courses-container .search-input {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .courses-container .search-btn {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }
    
    .courses-container .course-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .courses-container .enroll-btn {
        width: 100%;
        text-align: center;
    }
}



/* Diploma programs Page */
.diploma-programs-container .programs-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/diploma-programs-banner.jpg') center/cover;
    padding: 80px 0;
    color: white;
    position: relative;
}

.diploma-programs-container .search-bar {
    background: white;
    border-radius: 50px;
    padding: 8px 8px 8px 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    max-width: 600px;
    margin: 30px auto 0;
}

.diploma-programs-container .search-input {
    border: none;
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
    background: transparent;
}

.diploma-programs-container .search-button {
    background: var(--primary-gold);
    color: black;
    border: none;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.diploma-programs-container .search-button:hover {
    background: var(--dark-gold);
}

/* Catalog Layout */
.diploma-programs-container .catalog-section {
    padding: 60px 0;
}

/* Sidebar Filters */
.diploma-programs-container .filters-sidebar {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 25px;
    position: sticky;
    top: 30px;
}

.diploma-programs-container .filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.diploma-programs-container .filter-heading h4 {
    margin-bottom: 0;
}

.diploma-programs-container .reset-filters {
    color: var(--dark-gold);
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.diploma-programs-container .filter-block {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.diploma-programs-container .filter-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.diploma-programs-container .filter-title {
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.diploma-programs-container .checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.diploma-programs-container .checkbox-item:last-child {
    margin-bottom: 0;
}

.diploma-programs-container .custom-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.diploma-programs-container .custom-checkbox.checked {
    background: var(--primary-gold);
    border-color: var(--primary-gold);
}

.diploma-programs-container .custom-checkbox.checked:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: black;
    font-size: 10px;
}

.diploma-programs-container .checkbox-label {
    cursor: pointer;
    user-select: none;
    flex-grow: 1;
}

.diploma-programs-container .count-badge {
    background: #f5f5f5;
    color: #777;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* Price Range Slider */
.diploma-programs-container .price-slider-container {
    padding: 0 10px;
    margin-top: 25px;
}

.diploma-programs-container .price-range {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.diploma-programs-container .range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    margin: 15px 0;
}

.diploma-programs-container .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-gold);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.diploma-programs-container .range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-gold);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: none;
}

.diploma-programs-container .price-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diploma-programs-container .price-input {
    width: 80px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
}

.diploma-programs-container .price-separator {
    margin: 0 10px;
    color: #777;
}

/* Programs Grid */
.diploma-programs-container .program-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.diploma-programs-container .program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.diploma-programs-container .program-header {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.diploma-programs-container .program-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.diploma-programs-container .program-card:hover .program-header img {
    transform: scale(1.1);
}

.diploma-programs-container .program-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-gold);
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.diploma-programs-container .program-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.diploma-programs-container .program-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.diploma-programs-container .program-description {
    color: #555;
    margin-bottom: 20px;
    flex-grow: 1;
}

.diploma-programs-container .program-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.diploma-programs-container .meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.diploma-programs-container .meta-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-gold);
}

.diploma-programs-container .meta-label {
    font-size: 0.9rem;
    color: #777;
}

.diploma-programs-container .program-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diploma-programs-container .program-price {
    font-weight: 700;
    font-size: 1.2rem;
}

.diploma-programs-container .view-button {
    background: white;
    color: var(--dark-gold);
    border: 2px solid var(--primary-gold);
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.diploma-programs-container .view-button:hover {
    background: var(--primary-gold);
    color: black;
}

/* Featured Program */
.diploma-programs-container .featured-section {
    background: var(--light-yellow);
    padding: 60px 0;
    margin-bottom: 60px;
}

.diploma-programs-container .featured-program {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    border: 3px solid var(--primary-gold);
}

.diploma-programs-container .featured-badge {
    position: absolute;
    top: 25px;
    left: -5px;
    background: var(--primary-gold);
    color: black;
    padding: 8px 20px;
    font-weight: 600;
    z-index: 5;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.diploma-programs-container .featured-badge::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    border-left: 5px solid transparent;
    border-top: 10px solid var(--dark-gold);
}

.diploma-programs-container .featured-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.diploma-programs-container .featured-header {
    padding: 30px;
    background: linear-gradient(135deg, var(--light-yellow), #fff);
}

.diploma-programs-container .featured-body {
    padding: 30px;
    flex-grow: 1;
}

.diploma-programs-container .featured-footer {
    background: #f9f9f9;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diploma-programs-container .featured-cta {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.diploma-programs-container .featured-cta:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.diploma-programs-container .stats-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.diploma-programs-container .stat-item {
    flex-basis: 50%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.diploma-programs-container .stat-icon {
    width: 40px;
    height: 40px;
    background: var(--light-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--dark-gold);
}

/* Sorting Options */
.diploma-programs-container .sorting-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.diploma-programs-container .programs-count {
    font-weight: 500;
}

.diploma-programs-container .sort-dropdown {
    position: relative;
}

.diploma-programs-container .sort-button {
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.diploma-programs-container .sort-button i {
    margin-left: 10px;
}

.diploma-programs-container .sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 5;
    margin-top: 5px;
    display: none;
}

.diploma-programs-container .sort-menu.open {
    display: block;
}

.diploma-programs-container .sort-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.diploma-programs-container .sort-option:hover {
    background: #f5f5f5;
}

.diploma-programs-container .sort-option.active {
    background: var(--light-yellow);
    color: var(--dark-gold);
}

/* Pagination */
.diploma-programs-container .pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.diploma-programs-container .page-item {
    margin: 0 5px;
}

.diploma-programs-container .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    text-decoration: none;
}

.diploma-programs-container .page-link:hover, .page-link.active {
    background: var(--primary-gold);
    color: black;
    border-color: var(--primary-gold);
}

/* Mobile Filters Sidebar */
.diploma-programs-container .mobile-filter-toggle {
    display: none;
    width: 100%;
    padding: 15px;
    background: var(--primary-gold);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
    color: black;
    cursor: pointer;
}

.diploma-programs-container .close-filters {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #777;
}

/* Responsive */
@media (max-width: 992px) {
    .diploma-programs-container .filters-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
        transition: all 0.3s ease;
        border-radius: 0;
    }
    
    .diploma-programs-container .filters-sidebar.open {
        left: 0;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
    
    .diploma-programs-container .mobile-filter-toggle, .close-filters {
        display: block;
    }
    
    .diploma-programs-container .catalog-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
    }
    
    .diploma-programs-container .catalog-backdrop.active {
        display: block;
    }
}

@media (max-width: 768px) {
    .diploma-programs-container .programs-hero {
        padding: 60px 0;
    }
    
    .diploma-programs-container .featured-content {
        flex-direction: column;
    }
    
    .diploma-programs-container .featured-image {
        height: 200px;
    }
    
    .diploma-programs-container .stat-item {
        flex-basis: 100%;
    }
}



/* Instructors Page */
.instructors-container .instructors-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/instructor-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.instructors-container .filter-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-top: -70px;
    position: relative;
    z-index: 5;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.instructors-container .search-bar {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

.instructors-container .search-input {
    flex-grow: 1;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    outline: none;
}

.instructors-container .search-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instructors-container .search-btn:hover {
    background: var(--dark-gold);
}

.instructors-container .filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.instructors-container .filter-tag {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instructors-container .filter-tag:hover, .filter-tag.active {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
    color: var(--dark-gold);
}

/* Featured Instructors */
.instructors-container .featured-instructors {
    padding: 80px 0;
    background: #fff;
}

.instructors-container .section-title {
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 20px;
}

.instructors-container .section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--primary-gold);
}

.instructors-container .instructor-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
}

.instructors-container .instructor-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.instructors-container .instructor-header {
    position: relative;
}

.instructors-container .instructor-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.instructors-container .featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--primary-gold);
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.instructors-container .instructor-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.instructors-container .instructor-name {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.instructors-container .instructor-title {
    color: #777;
    margin-bottom: 15px;
}

.instructors-container .instructor-rating {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.instructors-container .stars {
    color: var(--primary-gold);
    margin-right: 10px;
}

.instructors-container .instructor-stats {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.instructors-container .stat-item {
    flex: 1;
    text-align: center;
    padding: 0 10px;
}

.instructors-container .stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.instructors-container .stat-label {
    font-size: 0.9rem;
    color: #777;
}

.instructors-container .instructor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    flex-grow: 1;
}

.instructors-container .instructor-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
}

.instructors-container .instructor-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.instructors-container .social-links {
    display: flex;
    gap: 10px;
}

.instructors-container .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.3s ease;
}

.instructors-container .social-link:hover {
    background: var(--primary-gold);
    color: black;
}

.instructors-container .view-profile {
    background: transparent;
    color: var(--dark-gold);
    border: 2px solid var(--primary-gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.instructors-container .view-profile:hover {
    background: var(--primary-gold);
    color: black;
}

/* All Instructors */
.instructors-container .all-instructors {
    padding: 80px 0;
    background: #f9f9f9;
}

.instructors-container .instructor-grid-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
}

.instructors-container .instructor-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.instructors-container .grid-instructor-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.instructors-container .grid-instructor-info {
    padding: 20px;
    text-align: center;
}

.instructors-container .grid-instructor-name {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.instructors-container .grid-instructor-title {
    color: #777;
    margin-bottom: 15px;
    font-size: 14px;
}

.instructors-container .grid-instructor-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}

.instructors-container .grid-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
}

.instructors-container .grid-stats {
    display: flex;
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 15px;
}

.instructors-container .grid-stat {
    flex: 1;
    text-align: center;
}

.instructors-container .grid-stat-value {
    font-weight: 700;
    color: var(--dark-gold);
}

.instructors-container .grid-stat-label {
    font-size: 12px;
    color: #777;
}

/* Become Instructor */
.instructors-container .become-instructor {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/instructor-cta-bg.jpg') center/cover;
    padding: 80px 0;
    color: white;
    text-align: center;
}

.instructors-container .become-instructor-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.instructors-container .steps-container {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
}

.instructors-container .step-item {
    flex: 1;
    padding: 0 15px;
    position: relative;
}

.instructors-container .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 0;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.2);
    z-index: 1;
}

.instructors-container .step-number {
    width: 60px;
    height: 60px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

.instructors-container .step-text {
    font-weight: 600;
}

.instructors-container .apply-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.instructors-container .apply-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Testimonials */
.instructors-container .testimonials {
    padding: 80px 0;
    background: #fff;
}

.instructors-container .testimonial-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    margin-top: 40px;
}

.instructors-container .testimonial-card::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 16px;
}

.instructors-container .testimonial-text {
    margin-bottom: 20px;
}

.instructors-container .student-info {
    display: flex;
    align-items: center;
}

.instructors-container .student-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--primary-gold);
}

.instructors-container .student-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.instructors-container .course-title {
    font-size: 14px;
    color: #777;
}

/* Pagination */
.instructors-container .pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.instructors-container .page-item {
    margin: 0 5px;
}

.instructors-container .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    text-decoration: none;
}

.instructors-container .page-link:hover, .page-link.active {
    background: var(--primary-gold);
    color: black;
    border-color: var(--primary-gold);
}

/* Responsive */
@media (max-width: 992px) {
    .instructors-container .steps-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .instructors-container .step-item:not(:last-child)::after {
        width: 2px;
        height: 100%;
        top: 60px;
        right: 50%;
    }
}

@media (max-width: 768px) {
    .instructors-container .filter-section {
        margin-top: -50px;
        padding: 20px;
    }
    
    .instructors-container .search-bar {
        flex-direction: column;
        border-radius: 10px;
    }
    
    .instructors-container .search-input {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .instructors-container .search-btn {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }
    
    .instructors-container .instructor-stats {
        flex-wrap: wrap;
    }
    
    .instructors-container .stat-item {
        flex-basis: 50%;
        margin-bottom: 10px;
    }
}

/* Instructor profile */
#instructorProfileModal .modal-dialog {
    max-width: 90%;
}

#instructorProfileModal .modal-content {
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

#instructorProfileModal .modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

#instructorProfileModal .modal-close-btn:hover {
    background: #f5f5f5;
    transform: rotate(90deg);
}

/* Instructor Profile Sidebar */
#instructorProfileModal .instructor-profile-sidebar {
    background: linear-gradient(to bottom, var(--primary-gold), var(--dark-gold));
    color: black;
    min-height: 100%;
}

#instructorProfileModal .instructor-profile-content {
    padding: 30px;
}

#instructorProfileModal .instructor-profile-img-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#instructorProfileModal .instructor-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#instructorProfileModal .instructor-profile-name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
}

#instructorProfileModal .instructor-profile-title {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 15px;
}

#instructorProfileModal .instructor-rating .stars {
    color: white;
    margin-bottom: 5px;
}

/* Stats Grid */
#instructorProfileModal .instructor-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

#instructorProfileModal .stat-box {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

#instructorProfileModal .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

#instructorProfileModal .stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Contact Button */
#instructorProfileModal .contact-instructor-btn {
    display: block;
    background: black;
    color: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

#instructorProfileModal .contact-instructor-btn:hover {
    background: #222;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: white;
}

/* Social Links */
#instructorProfileModal .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

#instructorProfileModal .social-link {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#instructorProfileModal .social-link:hover {
    background: white;
    color: var(--dark-gold);
    transform: translateY(-3px);
}

/* Expertise Tags */
#instructorProfileModal .expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#instructorProfileModal .expertise-tag {
    background: rgba(255,255,255,0.2);
    color: black;
    font-size: 0.85rem;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
}

#instructorProfileModal .instructor-profile-main {
    background: white;
}

/* Tabs */
#instructorProfileModal .instructor-tabs .nav-tabs {
    border-bottom: 1px solid #eee;
    padding: 0 20px;
}

#instructorProfileModal .instructor-tabs .nav-link {
    border: none;
    font-weight: 600;
    color: #777;
    padding: 15px 20px;
    position: relative;
}

#instructorProfileModal .instructor-tabs .nav-link.active {
    color: var(--dark-gold);
    background: transparent;
}

#instructorProfileModal .instructor-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-gold);
}

#instructorProfileModal .tab-content {
    max-height: 700px;
    overflow-y: auto;
}

/* About Tab */
#instructorProfileModal .experience-item, .education-item {
    margin-bottom: 20px;
}

#instructorProfileModal .experience-years, .company-name {
    color: #777;
}

#instructorProfileModal .company-name {
    font-weight: 500;
    margin-bottom: 5px;
}

/* Courses Tab */
#instructorProfileModal .course-item {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#instructorProfileModal .course-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--primary-gold);
}

#instructorProfileModal .course-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
}

#instructorProfileModal .course-details {
    position: relative;
    padding-top: 5px;
}

#instructorProfileModal .bestseller-badge, .new-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    transform: translateY(-50%);
}

#instructorProfileModal .bestseller-badge {
    background: #ffd700;
    color: black;
}

#instructorProfileModal .new-badge {
    background: #28a745;
    color: white;
}

#instructorProfileModal .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
    font-size: 14px;
    color: #777;
}

#instructorProfileModal .course-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

#instructorProfileModal .view-course-btn {
    display: inline-block;
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

#instructorProfileModal .view-course-btn:hover {
    background: var(--primary-gold);
    color: black;
}

#instructorProfileModal .view-all-courses-btn {
    display: inline-block;
    background: var(--primary-gold);
    color: black;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

#instructorProfileModal .view-all-courses-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Reviews Tab */
#instructorProfileModal .overall-rating {
    font-size: 4rem;
    font-weight: 700;
    color: var(--dark-gold);
    line-height: 1;
}

#instructorProfileModal .total-reviews {
    font-size: 14px;
    color: #777;
}

#instructorProfileModal .rating-bars {
    padding-left: 20px;
}

#instructorProfileModal .rating-bar-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#instructorProfileModal .rating-label {
    width: 60px;
    font-size: 14px;
    text-align: right;
    padding-right: 10px;
}

#instructorProfileModal .progress {
    flex-grow: 1;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    margin: 0 10px;
}

#instructorProfileModal .progress-bar {
    background-color: var(--primary-gold);
}

#instructorProfileModal .rating-percent {
    width: 40px;
    font-size: 14px;
}

#instructorProfileModal .review-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#instructorProfileModal .review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#instructorProfileModal .review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

#instructorProfileModal .reviewer-info {
    display: flex;
    align-items: center;
}

#instructorProfileModal .reviewer-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

#instructorProfileModal .reviewer-name {
    font-weight: 600;
}

#instructorProfileModal .review-date {
    font-size: 12px;
    color: #777;
}

#instructorProfileModal .review-course {
    font-size: 14px;
    color: #555;
    font-style: italic;
    margin-bottom: 10px;
}

#instructorProfileModal .review-helpful {
    margin-top: 15px;
    font-size: 14px;
    color: #777;
}

#instructorProfileModal .helpful-btn {
    background: #f5f5f5;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#instructorProfileModal .helpful-btn:hover {
    background: #eee;
}

#instructorProfileModal .view-more-reviews-btn {
    display: inline-block;
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

#instructorProfileModal .view-more-reviews-btn:hover {
    background: var(--primary-gold);
    color: black;
}

/* Responsive Styles */
@media (max-width: 992px) {
    #instructorProfileModal .modal-dialog {
        max-width: 95%;
    }
    
    #instructorProfileModal .instructor-profile-sidebar, .instructor-profile-main {
        max-height: 500px;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    #instructorProfileModal .instructor-profile-sidebar {
        border-radius: 15px 15px 0 0;
    }
    
    #instructorProfileModal .instructor-profile-img-container {
        width: 120px;
        height: 120px;
    }
    
    #instructorProfileModal .instructor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #instructorProfileModal .course-item .row {
        flex-direction: column;
    }
    
    #instructorProfileModal .course-thumbnail {
        margin-bottom: 15px;
    }
    
    #instructorProfileModal .reviews-summary .row {
        flex-direction: column;
    }
    
    #instructorProfileModal .overall-rating {
        font-size: 3rem;
    }
    
    #instructorProfileModal .rating-bars {
        padding-left: 0;
        margin-top: 20px;
    }
}



/* Job Application Page */
.application-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/job-application-banner.jpg') center/cover;
    min-height: 300px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Main Content */
.application-container {
    padding: 60px 0;
    background: #f9f9f9;
}

/* Job Details Card */
.application-container .job-details-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-top: 5px solid var(--primary-gold);
    position: sticky;
    top: 30px;
}

.application-container .job-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.application-container .job-badge.remote {
    background: #e6f7ff;
    color: #0080ff;
}

.application-container .job-badge.hybrid {
    background: #e6f0ff;
    color: #0055ff;
}

.application-container .job-badge.onsite {
    background: #fff5e6;
    color: #ff8c00;
}

.application-container .job-meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.application-container .job-meta-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #555;
}

.application-container .job-meta-item i {
    color: var(--primary-gold);
    margin-right: 5px;
}

.application-container .job-description {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.application-container .responsibilities-list, 
.application-container .qualifications-list {
    padding-left: 20px;
}

.application-container .responsibilities-list li, 
.application-container .qualifications-list li {
    margin-bottom: 10px;
    position: relative;
}

/* Application Form */
.application-container .application-form-container {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.application-container .form-section {
    margin-bottom: 30px;
}

.application-container .form-section-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: var(--dark-gold);
}

.application-container .form-group {
    margin-bottom: 20px;
}

.application-container .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.application-container .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.application-container .form-control:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.application-container .form-text {
    margin-top: 5px;
    font-size: 14px;
    color: #777;
}

.application-container .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.application-container .form-check-input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.application-container .form-check-label {
    font-size: 16px;
}

.application-container .dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .dropzone:hover {
    border-color: var(--primary-gold);
    background: var(--light-yellow);
}

.application-container .dropzone-icon {
    font-size: 40px;
    color: #999;
    margin-bottom: 15px;
}

.application-container .file-upload-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.application-container .file-upload-btn {
    background: var(--light-yellow);
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.application-container .file-upload-btn:hover {
    background: var(--primary-gold);
    color: black;
}

.application-container .file-upload-input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.application-container .uploaded-file {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 15px;
}

.application-container .uploaded-file-icon {
    color: var(--dark-gold);
    font-size: 20px;
    margin-right: 10px;
}

.application-container .uploaded-file-name {
    flex-grow: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.application-container .uploaded-file-remove {
    color: #ff4d4f;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.application-container .uploaded-file-remove:hover {
    color: #ff7875;
}

.application-container .progress {
    height: 6px;
    margin-top: 5px;
    border-radius: 3px;
    background-color: #f0f0f0;
    overflow: hidden;
}

.application-container .progress-bar {
    height: 100%;
    background-color: var(--primary-gold);
    width: 0;
    transition: width 0.3s ease;
}

.application-container .btn-submit {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .btn-submit:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.application-container .btn-outline {
    background: transparent;
    color: #777;
    border: 1px solid #ddd;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .btn-outline:hover {
    border-color: #999;
    color: #555;
}

.application-container .form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.application-container .required-text {
    text-align: right;
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.application-container .required-field::after {
    content: '*';
    color: #ff4d4f;
    margin-left: 4px;
}

/* Privacy Notice */
.application-container .privacy-notice {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin-top: 30px;
    font-size: 14px;
    color: #555;
}

.application-container .privacy-notice p {
    margin-bottom: 10px;
}

/* Application Steps */
.application-container .application-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.application-container .application-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.application-container .application-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25px;
    left: 60%;
    width: 80%;
    height: 2px;
    background-color: #eee;
    z-index: 1;
}

.application-container .application-step.active:not(:last-child)::after,
.application-container .application-step.completed:not(:last-child)::after {
    background-color: var(--primary-gold);
}

.application-container .step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.application-container .application-step.active .step-number {
    background-color: var(--primary-gold);
    color: black;
}

.application-container .application-step.completed .step-number {
    background-color: var(--dark-gold);
    color: white;
}

.application-container .step-title {
    font-size: 14px;
    text-align: center;
    color: #777;
}

.application-container .application-step.active .step-title {
    color: var(--dark-gold);
    font-weight: 600;
}

/* Form Step Container */
.application-container .form-step {
    display: none;
}

.application-container .form-step.active {
    display: block;
}

/* Skills Rating */
.application-container .skills-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.application-container .skill-rating-item {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.application-container .skill-rating-item.selected {
    background: var(--light-yellow);
    border: 1px solid var(--primary-gold);
}

.application-container .skill-name {
    margin-right: 10px;
    font-weight: 600;
}

.application-container .skill-level {
    display: flex;
}

.application-container .skill-level-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    margin: 0 3px;
    cursor: pointer;
}

.application-container .skill-level-dot.filled {
    background: var(--primary-gold);
}

/* Portfolio Items */
.application-container .portfolio-items {
    margin-top: 15px;
}

.application-container .portfolio-item {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.application-container .portfolio-item-title {
    font-weight: 600;
}

.application-container .portfolio-item-url {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

.application-container .portfolio-item-remove {
    color: #ff4d4f;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.application-container .portfolio-item-remove:hover {
    color: #ff7875;
}

/* Code Sample */
.application-container .code-sample-container {
    margin-top: 15px;
}

.application-container .code-editor {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.application-container .code-editor-header {
    background: #f5f5f5;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.application-container .code-editor-language {
    font-weight: 600;
    color: #555;
}

.application-container .code-editor-actions {
    display: flex;
    gap: 10px;
}

.application-container .code-editor-btn {
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .code-editor-btn:hover {
    color: var(--dark-gold);
}

.application-container .code-editor-content {
    padding: 15px;
    background: #f9f9f9;
    min-height: 200px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Availability Calendar */
.application-container .availability-calendar {
    margin-top: 15px;
}

.application-container .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.application-container .calendar-title {
    font-weight: 600;
    font-size: 18px;
}

.application-container .calendar-nav {
    display: flex;
    gap: 10px;
}

.application-container .calendar-nav-btn {
    background: #f5f5f5;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .calendar-nav-btn:hover {
    background: var(--light-yellow);
    color: var(--dark-gold);
}

.application-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.application-container .calendar-day-header {
    text-align: center;
    font-weight: 600;
    color: #555;
    padding-bottom: 10px;
}

.application-container .calendar-day {
    aspect-ratio: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-container .calendar-day:hover {
    border-color: var(--primary-gold);
    background: var(--light-yellow);
}

.application-container .calendar-day.selected {
    background: var(--primary-gold);
    color: black;
    border-color: var(--primary-gold);
}

.application-container .calendar-day.disabled {
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

/* Review Section */
.application-container .review-section {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.application-container .review-section-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--dark-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.application-container .edit-section-btn {
    font-size: 14px;
    color: var(--dark-gold);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.application-container .review-item {
    display: flex;
    margin-bottom: 10px;
}

.application-container .review-label {
    width: 200px;
    min-width: 200px;
    font-weight: 600;
    color: #555;
}

.application-container .review-value {
    flex-grow: 1;
}

.application-container .review-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.application-container .review-file {
    display: flex;
    align-items: center;
    background: #eee;
    padding: 8px 15px;
    border-radius: 20px;
}

.application-container .review-file-icon {
    margin-right: 8px;
    color: var(--dark-gold);
}

/* Success Message */
.application-container .success-message {
    text-align: center;
    padding: 40px;
}

.application-container .success-icon {
    font-size: 80px;
    color: var(--primary-gold);
    margin-bottom: 30px;
}

.application-container .success-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.application-container .success-text {
    font-size: 18px;
    margin-bottom: 30px;
    color: #555;
}

/* Responsive styles */
@media (max-width: 768px) {
    .application-container .form-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .application-container .btn-submit, .btn-outline {
        width: 100%;
    }
    
    .application-container .application-steps {
        overflow-x: auto;
        padding-bottom: 15px;
    }
    
    .application-container .application-step {
        min-width: 100px;
    }
    
    .application-container .review-item {
        flex-direction: column;
    }
    
    .application-container .review-label {
        width: 100%;
        margin-bottom: 5px;
    }
}



/* Pricing Page */
.pricing-container .pricing-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/pricing-banner.jpg') center/cover;
    min-height: 350px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.pricing-container .pricing-tabs-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-top: -50px;
    position: relative;
    z-index: 5;
    padding: 0;
    overflow: hidden;
}

.pricing-container .pricing-tabs {
    display: flex;
    background: #f5f5f5;
}

.pricing-container .pricing-tab {
    flex: 1;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    color: #555;
}

.pricing-container .pricing-tab.active {
    background: white;
    color: var(--dark-gold);
}

.pricing-container .pricing-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pricing-container .pricing-tab.active::after {
    transform: scaleX(1);
}

.pricing-container .pricing-content {
    display: none;
    padding: 40px;
}

.pricing-container .pricing-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pricing Cards Section */
.pricing-container .pricing-cards-section {
    padding: 60px 0;
    background: #f9f9f9;
}

.pricing-container .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.pricing-container .section-title h2 {
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.pricing-container .section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--primary-gold);
}

.pricing-container .pricing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.pricing-container .toggle-label {
    font-weight: 600;
    padding: 0 15px;
}

.pricing-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.pricing-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pricing-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.pricing-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-gold);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.pricing-container .save-badge {
    background: var(--primary-gold);
    color: black;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
}

/* Plan Cards */
.pricing-container .plan-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    border: 1px solid #eee;
}

.pricing-container .plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.pricing-container .plan-card.featured {
    border: 2px solid var(--primary-gold);
    transform: scale(1.02);
}

.pricing-container .plan-card.featured:hover {
    transform: translateY(-5px) scale(1.02);
}

.pricing-container .featured-tag {
    position: absolute;
    top: 15px;
    right: 0;
    background: var(--primary-gold);
    color: black;
    padding: 5px 15px;
    font-weight: 600;
    font-size: 14px;
    z-index: 1;
    transform: translateX(30%) rotate(45deg);
    width: 150px;
    text-align: center;
    transform-origin: center;
}

.pricing-container .plan-header {
    padding: 25px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.pricing-container .plan-name {
    margin-bottom: 5px;
}

.pricing-container .plan-for {
    color: #777;
    margin-bottom: 0;
}

.pricing-container .plan-price {
    padding: 20px 25px;
    background: #f9f9f9;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.pricing-container .price {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.pricing-container .currency {
    font-size: 1.2rem;
    vertical-align: top;
    position: relative;
    top: 5px;
}

.pricing-container .amount {
    font-weight: 700;
}

.pricing-container .period {
    font-size: 1rem;
    color: #777;
}

.pricing-container .original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

.pricing-container .plan-features {
    padding: 25px;
    list-style: none;
    margin: 0;
}

.pricing-container .plan-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.pricing-container .plan-features li:last-child {
    margin-bottom: 0;
}

.pricing-container .plan-features li .item small {
    font-size: 11px;
    width: 100%;
}

.pricing-container .plan-features i {
    color: var(--primary-gold);
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 4px;
}

.pricing-container .select-plan-btn {
    display: block;
    width: calc(100% - 50px);
    margin: 0 auto 25px;
    padding: 12px;
    background: transparent;
    color: var(--dark-gold);
    border: 2px solid var(--primary-gold);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-container .select-plan-btn:hover {
    background: var(--primary-gold);
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pricing-container .featured-btn {
    background: var(--primary-gold);
    color: black;
}

.pricing-container .featured-btn:hover {
    background: var(--dark-gold);
    color: white;
}

.pricing-container .free-plan-cta {
    text-align: center;
    padding: 20px;
}

.pricing-container .start-free-btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--primary-gold);
    color: black;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pricing-container .start-free-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Comparison Table */
.pricing-container .comparison-section {
    padding: 80px 0;
    background: white;
}

.pricing-container .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.pricing-container .comparison-table th {
    padding: 20px;
    background: var(--primary-gold);
    color: black;
    text-align: center;
    font-weight: 600;
}

.pricing-container .comparison-table th:first-child {
    text-align: left;
    background: var(--dark-gold);
    color: white;
}

.pricing-container .comparison-table td {
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
    background: white;
}

.pricing-container .comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    background: #f9f9f9;
}

.pricing-container .comparison-table tr:last-child td {
    border-bottom: none;
}

.pricing-container .check-icon {
    color: green;
}

.pricing-container .times-icon {
    color: red;
}

.pricing-container .limited-icon {
    color: orange;
}

/* Course Pricing Cards */
.pricing-container .course-pricing-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-container .course-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.pricing-container .course-pricing-header {
    padding: 25px;
    border-bottom: 1px solid #eee;
}

.pricing-container .course-pricing-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.pricing-container .course-pricing-description {
    color: #777;
    margin-bottom: 0;
}

.pricing-container .course-pricing-content {
    padding: 25px;
    flex-grow: 1;
}

.pricing-container .pricing-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-container .pricing-option:hover {
    background: #f9f9f9;
    border-color: #ddd;
}

.pricing-container .pricing-option.selected {
    background: var(--light-yellow);
    border-color: var(--primary-gold);
}

.pricing-container .option-name {
    font-weight: 600;
}

.pricing-container .option-description {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

.pricing-container .option-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.pricing-container .certificate-pricing-footer {
    border-top: 1px solid #eee;
    padding: 25px;
    text-align: center;
}

.pricing-container .certificate-purchase-btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--primary-gold);
    color: black;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pricing-container .certificate-purchase-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* FAQ Section */
.pricing-container .faq-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.pricing-container .faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.pricing-container .faq-item {
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.pricing-container .faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-container .faq-question h5 {
    margin: 0;
    font-weight: 600;
}

.pricing-container .faq-icon i {
    transition: transform 0.3s ease;
}

.pricing-container .faq-item.active .faq-icon i {
    transform: rotate(180deg);
}

.pricing-container .faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pricing-container .faq-item.active .faq-answer {
    padding: 0 20px 20px;
    max-height: 1000px;
}

/* Enterprise Section */
.pricing-container .enterprise-section {
    padding: 80px 0;
    background: white;
}

.pricing-container .enterprise-card {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/pricing-enterprise.jpg') center/cover;
    border-radius: 15px;
    overflow: hidden;
    color: white;
    padding: 40px;
    position: relative;
}

.pricing-container .enterprise-content {
    max-width: 600px;
}

.pricing-container .enterprise-title {
    margin-bottom: 20px;
    font-size: 2rem;
}

.pricing-container .enterprise-description {
    margin-bottom: 30px;
    font-size: 18px;
}

.pricing-container .enterprise-features {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 20px;
}

.pricing-container .enterprise-feature {
    display: flex;
    align-items: center;
    width: calc(50% - 10px);
}

.pricing-container .enterprise-feature i {
    color: var(--primary-gold);
    margin-right: 10px;
    font-size: 20px;
}

.pricing-container .contact-sales-btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--primary-gold);
    color: black;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pricing-container .contact-sales-btn:hover {
    background: white;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Testimonials */
.pricing-container .testimonials-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f9f9f9, #fff);
}

.pricing-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    margin-top: 40px;
    height: calc(100% - 40px);
}

.pricing-container .testimonial-quote {
    position: absolute;
    top: -20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 20px;
}

.pricing-container .testimonial-text {
    margin-bottom: 20px;
}

.pricing-container .testimonial-author {
    display: flex;
    align-items: center;
}

.pricing-container .author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-container .avatar-placeholder {
    font-weight: 600;
    color: var(--dark-gold);
}

.pricing-container .author-info h5 {
    margin-bottom: 0;
}

.pricing-container .author-occupation {
    color: #777;
    margin-bottom: 0;
    font-size: 14px;
}

.pricing-container ul {
    padding-left: 1rem;
}

.pricing-container ul li {
    list-style: none;
}

/* Responsive */
@media (max-width: 992px) {
    .pricing-container .pricing-tab {
        padding: 15px 10px;
        font-size: 14px;
    }
    
    .pricing-container .plan-features li {
        font-size: 14px;
    }
    
    .pricing-container .enterprise-feature {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .pricing-container .pricing-tabs {
        flex-direction: column;
    }
    
    .pricing-container .pricing-tab {
        text-align: left;
        padding: 15px 20px;
    }
    
    .pricing-container .pricing-tab::after {
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        transform: scaleY(0);
    }
    
    .pricing-container .pricing-tab.active::after {
        transform: scaleY(1);
    }
    
    .pricing-container .comparison-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .pricing-container .comparison-table th,
    .pricing-container .comparison-table td {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .pricing-container .enterprise-card {
        padding: 30px 20px;
    }
}



/* Professional Certificates Page */
.professional-certificates-container .certificates-hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/pages/professional-certificates-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.professional-certificates-container .certificate-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    font-size: 32px;
}

/* Benefits Section */
.professional-certificates-container .benefits-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-top: -80px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5;
    border-top: 5px solid var(--primary-gold);
}

.professional-certificates-container .benefit-item {
    display: flex;
    margin-bottom: 20px;
}

.professional-certificates-container .benefit-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--dark-gold);
    font-size: 24px;
    flex-shrink: 0;
}

/* Certificate Categories */
.professional-certificates-container .certificate-category {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%;
    border: 1px solid #eee;
}

.professional-certificates-container .certificate-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-color: var(--primary-gold);
}

.professional-certificates-container .category-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.professional-certificates-container .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.professional-certificates-container .certificate-category:hover .category-image img {
    transform: scale(1.1);
}

.professional-certificates-container .category-content {
    padding: 25px;
}

.professional-certificates-container .category-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

/* FAQ Section */
.professional-certificates-container .faq-section {
    background: var(--light-yellow);
    padding: 60px 0;
}

.professional-certificates-container .faq-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.professional-certificates-container .faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.professional-certificates-container .faq-question {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.professional-certificates-container .faq-answer {
    margin-top: 15px;
    display: none;
    color: #666;
}

/* Testimonials */
.professional-certificates-container .testimonial-section {
    background: linear-gradient(135deg, #fff, var(--light-yellow));
    padding: 60px 0;
}

.professional-certificates-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.professional-certificates-container .testimonial-card:hover {
    transform: translateY(-5px);
}

.professional-certificates-container .testimonial-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

/* Call to Action */
.professional-certificates-container .cta-section {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/professional-certificates-cta.jpg') center/cover;
    padding: 80px 0;
    color: white;
}

.professional-certificates-container .cta-card {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.professional-certificates-container .certificate-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.professional-certificates-container .stat-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    margin: 10px;
}

.professional-certificates-container .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 5px;
}

/* Animated Button */
.professional-certificates-container .animated-btn {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: black;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.professional-certificates-container .animated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-gold), var(--primary-gold));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.professional-certificates-container .animated-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.professional-certificates-container .animated-btn:hover::before {
    opacity: 1;
}

/* Steps Section */
.professional-certificates-container .step-card {
    padding: 30px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    height: 100%;
    transition: all 0.3s ease;
}

.professional-certificates-container .step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.professional-certificates-container .step-number {
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: black;
}

.professional-certificates-container .steps-container {
    position: relative;
}

.professional-certificates-container .steps-line {
    position: absolute;
    top: 25px;
    left: 25px;
    width: calc(100% - 50px);
    height: 2px;
    background: var(--light-yellow);
    z-index: 0;
}

@media (max-width: 768px) {
    .professional-certificates-container .steps-line {
        display: none;
    }
    
    .professional-certificates-container .benefits-card {
        margin-top: -40px;
    }
}



/* Professional Diplomas Page */
.professional-diplomas-container .diplomas-hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/pages/professional-diplomas-banner.jpg') center/cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.professional-diplomas-container .diploma-icon {
    width: 90px;
    height: 90px;
    background: var(--primary-gold);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: white;
    font-size: 36px;
    transform: rotate(5deg);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Overview Section */
.professional-diplomas-container .overview-section {
    background: white;
    padding: 80px 0 40px;
}

.professional-diplomas-container .overview-card {
    background: linear-gradient(135deg, #f9f9f9, #ffffff);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-left: 5px solid var(--primary-gold);
    margin-top: -100px;
    position: relative;
    z-index: 5;
}

/* Feature Box */
.professional-diplomas-container .feature-box {
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-bottom: 3px solid transparent;
    height: 100%;
}

.professional-diplomas-container .feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 3px solid var(--primary-gold);
}

.professional-diplomas-container .feature-icon {
    width: 60px;
    height: 60px;
    background: var(--light-yellow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-size: 24px;
}

/* Diploma Programs */
.professional-diplomas-container .diploma-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f9f9f9, #ffffff);
}

.professional-diplomas-container .diploma-program {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    height: 100%;
    transition: all 0.4s ease;
}

.professional-diplomas-container .diploma-program:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.professional-diplomas-container .diploma-header {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.professional-diplomas-container .diploma-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s ease;
}

.professional-diplomas-container .diploma-program:hover .diploma-header img {
    transform: scale(1.1);
}

.professional-diplomas-container .diploma-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.professional-diplomas-container .diploma-category {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary-gold);
    color: black;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
}

.professional-diplomas-container .diploma-content {
    background: white;
    padding: 25px;
}

.professional-diplomas-container .diploma-stats {
    display: flex;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.professional-diplomas-container .diploma-stat {
    flex: 1;
    text-align: center;
    padding: 0 5px;
}

.professional-diplomas-container .stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

/* Comparison Section */
.professional-diplomas-container .comparison-section {
    padding: 60px 0;
    background: var(--light-yellow);
}

.professional-diplomas-container .comparison-table {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.professional-diplomas-container .comparison-header {
    background: var(--primary-gold);
    color: black;
    padding: 20px;
    text-align: center;
    font-weight: 600;
}

.professional-diplomas-container .comparison-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.professional-diplomas-container .comparison-row:last-child {
    border-bottom: none;
}

.professional-diplomas-container .comparison-feature {
    flex: 2;
    padding: 15px 20px;
    font-weight: 500;
    background: #f9f9f9;
}

.professional-diplomas-container .comparison-certificate, .professional-diplomas-container .comparison-diploma {
    flex: 1;
    padding: 15px 20px;
    text-align: center;
}

.professional-diplomas-container .comparison-certificate {
    background: #f5f5f5;
}

.professional-diplomas-container .check-icon {
    color: green;
}

.professional-diplomas-container .times-icon {
    color: red;
}

/* Testimonial Section */
.professional-diplomas-container .testimonial-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/api/placeholder/1920/600') center/cover;
    color: white;
}

.professional-diplomas-container .testimonial-slider {
    position: relative;
    padding: 30px 0;
}

.professional-diplomas-container .testimonial-item {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    margin: 0 15px;
}

.professional-diplomas-container .testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
    padding-left: 30px;
}

.professional-diplomas-container .testimonial-quote::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    left: 0;
    top: -20px;
    color: var(--primary-gold);
    opacity: 0.6;
}

.professional-diplomas-container .testimonial-author {
    display: flex;
    align-items: center;
}

.professional-diplomas-container .author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid var(--primary-gold);
}

/* Process Section */
.professional-diplomas-container .process-section {
    padding: 80px 0;
    background: #fff;
}

.professional-diplomas-container .process-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.professional-diplomas-container .process-timeline::before {
    content: '';
    position: absolute;
    width: 6px;
    background: var(--light-yellow);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    border-radius: 10px;
}

.professional-diplomas-container .timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

.professional-diplomas-container .timeline-item:nth-child(odd) {
    left: 0;
}

.professional-diplomas-container .timeline-item:nth-child(even) {
    left: 50%;
}

.professional-diplomas-container .timeline-content {
    padding: 20px 30px;
    background: white;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.professional-diplomas-container .timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.professional-diplomas-container .timeline-item:nth-child(odd) .timeline-content {
    border-left: 5px solid var(--primary-gold);
}

.professional-diplomas-container .timeline-item:nth-child(even) .timeline-content {
    border-right: 5px solid var(--primary-gold);
}

.professional-diplomas-container .timeline-item::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--primary-gold);
    border-radius: 50%;
    top: 50%;
    margin-top: -12px;
    z-index: 1;
}

.professional-diplomas-container .timeline-item:nth-child(odd)::after {
    right: -12px;
}

.professional-diplomas-container .timeline-item:nth-child(even)::after {
    left: -13px;
}

.professional-diplomas-container .timeline-item::before {
    content: '';
    position: absolute;
    height: 1px;
    background: var(--light-yellow);
    top: 50%;
    width: 40px;
}

.professional-diplomas-container .timeline-item:nth-child(odd)::before {
    right: 0;
}

.professional-diplomas-container .timeline-item:nth-child(even)::before {
    left: 0;
}

.professional-diplomas-container .timeline-step {
    display: inline-block;
    padding: 5px 15px;
    background: var(--light-yellow);
    border-radius: 20px;
    color: var(--dark-gold);
    font-weight: 600;
    margin-bottom: 10px;
}

/* FAQ Section */
.professional-diplomas-container .faq-section {
    padding: 60px 0;
    background: #f9f9f9;
}

.professional-diplomas-container .faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.professional-diplomas-container .faq-item {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

.professional-diplomas-container .faq-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.professional-diplomas-container .faq-body {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.professional-diplomas-container .faq-body.active {
    max-height: 200px;
    padding-bottom: 20px;
}

/* CTA Section */
.professional-diplomas-container .cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-gold), var(--primary-gold));
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
    margin-top: -60px;
}

.professional-diplomas-container .cta-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: black;
}

.professional-diplomas-container .cta-btn {
    background: white;
    color: var(--dark-gold);
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.professional-diplomas-container .cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Stats Counter */
.professional-diplomas-container .counter-section {
    padding: 60px 0;
    background: white;
}

.professional-diplomas-container .counter-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.professional-diplomas-container .counter-item {
    text-align: center;
    padding: 20px;
    min-width: 200px;
}

.professional-diplomas-container .counter-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.professional-diplomas-container .counter-label {
    font-size: 1.1rem;
    color: #555;
}

/* Responsive */
@media (max-width: 992px) {
    .professional-diplomas-container .process-timeline::before {
        left: 31px;
    }
    
    .professional-diplomas-container .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .professional-diplomas-container .timeline-item:nth-child(even) {
        left: 0;
    }
    
    .professional-diplomas-container .timeline-item::after {
        left: 18px;
        margin-top: -12px;
    }
    
    .professional-diplomas-container .timeline-item:nth-child(odd)::after {
        right: auto;
    }
    
    .professional-diplomas-container .timeline-item::before {
        left: 30px;
        width: 40px;
    }
    
    .professional-diplomas-container .timeline-item:nth-child(odd)::before {
        right: auto;
    }
    
    .professional-diplomas-container .timeline-item:nth-child(even) .timeline-content,
    .professional-diplomas-container .timeline-item:nth-child(odd) .timeline-content {
        border-left: 5px solid var(--primary-gold);
        border-right: none;
    }
}

@media (max-width: 768px) {
    .professional-diplomas-container .overview-card {
        margin-top: -50px;
    }
    
    .professional-diplomas-container .diplomas-hero {
        min-height: 350px;
    }
}



/* Verification Page */
.verification-container .verify-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/verification-banner.jpg') center/cover;
    min-height: 300px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.verification-container .verification-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.verification-container .verification-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-top: -100px;
    position: relative;
    z-index: 5;
}

.verification-container .verification-tabs {
    display: flex;
    background: #f5f5f5;
}

.verification-container .verification-tab {
    flex: 1;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    color: #777;
}

.verification-container .verification-tab.active {
    background: white;
    color: var(--dark-gold);
}

.verification-container .verification-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.verification-container .verification-tab.active::after {
    transform: scaleX(1);
}

.verification-container .verification-body {
    padding: 40px;
}

.verification-container .verification-form {
    max-width: 600px;
    margin: 0 auto;
}

.verification-container .form-group {
    margin-bottom: 25px;
}

.verification-container .form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #555;
}

.verification-container .form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.verification-container .form-control:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.verification-container .serial-input {
    letter-spacing: 2px;
    font-family: monospace;
    font-size: 18px;
    text-align: center;
}

.verification-container .verify-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--primary-gold);
    color: black;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verification-container .verify-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* How to Find Section */
.verification-container .how-to-find {
    padding: 80px 0;
    background: white;
}

.verification-container .find-card {
    background: #f9f9f9;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.verification-container .find-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.verification-container .find-header {
    padding: 20px;
    background: var(--light-yellow);
    border-bottom: 1px solid #eee;
}

.verification-container .find-body {
    padding: 25px;
}

.verification-container .find-body ul {
    padding-left: 0;
}

.verification-container .find-body ul li {
    list-style: none;
}

.verification-container .step-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 600;
    margin-right: 10px;
}

/* FAQ Section */
.verification-container .faq-section {
    padding: 80px 0;
    background: var(--light-yellow);
}

.verification-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.verification-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.verification-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.verification-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.verification-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Validation Modal */
.verification-container .validation-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.verification-container .validation-modal.show {
    display: flex;
}

.verification-container .modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.verification-container .modal-header {
    padding: 25px;
    background: var(--primary-gold);
    color: black;
    position: relative;
}

.verification-container .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verification-container .modal-close:hover {
    transform: rotate(90deg);
}

.verification-container .modal-body {
    padding: 30px;
}

.verification-container .certificate-info {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.verification-container .info-row {
    display: flex;
    margin-bottom: 15px;
}

.verification-container .info-label {
    width: 150px;
    font-weight: 600;
    color: #777;
}

.verification-container .info-value {
    flex: 1;
    font-weight: 500;
}

.verification-container .credential-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.verification-container .certificate-badge {
    background: var(--light-yellow);
    color: var(--dark-gold);
}

.verification-container .diploma-badge {
    background: #e1f5fe;
    color: #0288d1;
}

.verification-container .verification-status {
    text-align: center;
    padding: 20px;
    background: #e8f5e9;
    border-radius: 10px;
    color: #388e3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-container .verification-status i {
    font-size: 24px;
    margin-right: 10px;
}

.verification-container .modal-footer {
    padding: 20px 30px;
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
}

.verification-container .footer-btn {
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verification-container .download-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
}

.verification-container .download-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.verification-container .share-btn {
    background: white;
    color: #555;
    border: 1px solid #ddd;
}

.verification-container .share-btn:hover {
    border-color: #bbb;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Example Certificate Display */
.verification-container .certificate-example {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 20px;
    margin-top: 40px;
    text-align: center;
}

.verification-container .certificate-example img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .verification-container .verification-tabs {
        flex-direction: column;
    }
    
    .verification-container .verification-tab {
        padding: 15px;
    }
    
    .verification-container .verification-body {
        padding: 25px;
    }
    
    .verification-container .info-row {
        flex-direction: column;
    }
    
    .verification-container .info-label, .info-value {
        width: 100%;
    }
    
    .verification-container .info-label {
        margin-bottom: 5px;
    }
    
    .verification-container .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .verification-container .footer-btn {
        width: 100%;
    }
}



/* Instructors Application Page */
.instructors-process-container .instructor-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/professional-diplomas-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Benefits Section */
.instructors-process-container .benefits-section {
    padding: 80px 0;
    background: #fff;
}

.instructors-process-container .benefit-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
}

.instructors-process-container .benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.instructors-process-container .benefit-icon {
    width: 70px;
    height: 70px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.instructors-process-container .benefit-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-align: center;
}

.instructors-process-container .benefit-text {
    text-align: center;
    color: #555;
}

/* Stats Section */
.instructors-process-container .stats-section {
    padding: 60px 0;
    background: var(--light-yellow);
}

.instructors-process-container .stat-item {
    text-align: center;
    padding: 20px;
}

.instructors-process-container .stat-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 10px;
    line-height: 1;
}

.instructors-process-container .stat-label {
    font-size: 18px;
    color: #555;
}

/* Process Section */
.instructors-process-container .process-section {
    padding: 80px 0;
    background: #fff;
}

.instructors-process-container .process-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 40px;
}

.instructors-process-container .process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--light-yellow);
    transform: translateX(-50%);
}

.instructors-process-container .timeline-item {
    position: relative;
    margin-bottom: 60px;
}

.instructors-process-container .timeline-item:last-child {
    margin-bottom: 0;
}

.instructors-process-container .timeline-content {
    width: calc(50% - 40px);
    padding: 25px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    border: 1px solid #eee;
}

.instructors-process-container .timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
    border-left: 3px solid var(--primary-gold);
}

.instructors-process-container .timeline-item:nth-child(even) .timeline-content {
    margin-right: auto;
    border-right: 3px solid var(--primary-gold);
}

.instructors-process-container .timeline-dot {
    position: absolute;
    top: 25px;
    width: 30px;
    height: 30px;
    background: var(--primary-gold);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: 700;
    border: 4px solid white;
}

.instructors-process-container .timeline-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-gold);
}

/* Requirements Section */
.instructors-process-container .requirements-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.instructors-process-container .requirements-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.instructors-process-container .requirement-item {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.instructors-process-container .requirement-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.instructors-process-container .requirement-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0;
}

.instructors-process-container .requirement-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

/* Application Form */
.instructors-process-container .application-section {
    padding: 80px 0;
    background: white;
}

.instructors-process-container .form-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1);
    border-top: 5px solid var(--primary-gold);
}

.instructors-process-container .form-title {
    text-align: center;
    margin-bottom: 30px;
}

.instructors-process-container .form-group {
    margin-bottom: 25px;
}

.instructors-process-container .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.instructors-process-container .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.instructors-process-container .form-control:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.instructors-process-container .form-text {
    margin-top: 5px;
    font-size: 14px;
    color: #777;
}

.instructors-process-container .form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 12px;
}

.instructors-process-container .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.instructors-process-container .form-check-input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.instructors-process-container .form-check-label {
    font-size: 16px;
}

.instructors-process-container .form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.instructors-process-container .btn-submit {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instructors-process-container .btn-submit:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.instructors-process-container .btn-outline {
    background: transparent;
    color: #777;
    border: 1px solid #ddd;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instructors-process-container .btn-outline:hover {
    border-color: #999;
    color: #555;
}

.instructors-process-container .form-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

.instructors-process-container .divider-line {
    flex-grow: 1;
    height: 1px;
    background: #eee;
}

.instructors-process-container .divider-text {
    padding: 0 15px;
    color: #777;
    font-weight: 600;
}

.instructors-process-container .dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instructors-process-container .dropzone:hover {
    border-color: var(--primary-gold);
    background: var(--light-yellow);
}

.instructors-process-container .dropzone-icon {
    font-size: 40px;
    color: #999;
    margin-bottom: 15px;
}

/* FAQ Section */
.instructors-process-container .faq-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.instructors-process-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.instructors-process-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.instructors-process-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.instructors-process-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.instructors-process-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Testimonials */
.instructors-process-container .testimonials-section {
    padding: 80px 0;
    background: white;
}

.instructors-process-container .testimonial-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    margin-top: 40px;
}

.instructors-process-container .testimonial-card::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 16px;
}

.instructors-process-container .testimonial-text {
    margin-bottom: 20px;
    font-style: italic;
}

.instructors-process-container .instructor-info {
    display: flex;
    align-items: center;
}

.instructors-process-container .instructor-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--primary-gold);
}

.instructors-process-container .instructor-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.instructors-process-container .instructor-title {
    font-size: 14px;
    color: #777;
}

.instructors-process-container .earnings {
    color: var(--dark-gold);
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 992px) {
    .instructors-process-container .process-timeline::before {
        left: 20px;
    }
    
    .instructors-process-container .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
    }
    
    .instructors-process-container .timeline-dot {
        left: 20px;
    }
    
    .instructors-process-container .timeline-item:nth-child(even) .timeline-content,
    .instructors-process-container .timeline-item:nth-child(odd) .timeline-content {
        border-left: 3px solid var(--primary-gold);
        border-right: none;
    }
}

@media (max-width: 768px) {
    .instructors-process-container .form-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .instructors-process-container .btn-submit, .btn-outline {
        width: 100%;
    }
}



/* Career Detail Page */
.career-detail-container .career-detail-hero {
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Career Overview */
.career-detail-container .career-overview {
    padding: 80px 0;
    background: #fff;
}

.career-detail-container .career-icon-large {
    width: 100px;
    height: 100px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 30px;
}

.career-detail-container .career-stats-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.career-detail-container .stat-row {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.career-detail-container .stat-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.career-detail-container .stat-label {
    width: 150px;
    min-width: 150px;
    font-weight: 600;
    color: #555;
}

.career-detail-container .stat-value {
    flex-grow: 1;
}

.career-detail-container .salary-highlight {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-gold);
}

.career-detail-container .growth-highlight {
    color: #28a745;
    font-weight: 600;
}

/* Skills Section */
.career-detail-container .skills-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.career-detail-container .skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.career-detail-container .skill-pill {
    background: white;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 12px 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.career-detail-container .skill-pill:hover {
    border-color: var(--primary-gold);
    background: var(--light-yellow);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.career-detail-container .skill-pill i {
    color: var(--dark-gold);
    margin-right: 10px;
}

.career-detail-container .career-paths-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.career-detail-container .career-path-pill {
    background: var(--light-yellow);
    border: 1px solid var(--primary-gold);
    border-radius: 50px;
    padding: 12px 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: var(--dark-gold);
    transition: all 0.3s ease;
}

.career-detail-container .career-path-pill:hover {
    background: var(--primary-gold);
    color: black;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.career-detail-container .career-path-pill i {
    margin-right: 10px;
}

/* Learning Paths */
.career-detail-container .learning-paths-section {
    padding: 80px 0;
    background: #fff;
}

.career-detail-container .path-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

.career-detail-container .path-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-detail-container .path-header {
    background: var(--primary-gold);
    color: black;
    padding: 20px;
    position: relative;
}

.career-detail-container .path-level {
    position: absolute;
    top: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.career-detail-container .path-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.career-detail-container .path-content {
    padding: 25px;
}

.career-detail-container .path-stats {
    display: flex;
    margin-bottom: 20px;
}

.career-detail-container .path-stat {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid #eee;
}

.career-detail-container .path-stat:last-child {
    border-right: none;
}

.career-detail-container .path-stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.career-detail-container .path-stat-label {
    font-size: 0.9rem;
    color: #777;
}

.career-detail-container .path-description {
    margin-bottom: 20px;
    color: #555;
}

.career-detail-container .path-btn {
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.career-detail-container .path-btn:hover {
    background: var(--primary-gold);
    color: black;
}

/* Career Opportunities */
.career-detail-container .opportunities-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.career-detail-container .company-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.career-detail-container .company-logo {
    width: 150px;
    height: 80px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.career-detail-container .company-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.career-detail-container .company-logo img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.career-detail-container .company-name {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}

/* Testimonials */
.career-detail-container .testimonials-section {
    padding: 80px 0;
    background: #fff;
}

.career-detail-container .testimonial-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    position: relative;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.career-detail-container .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.career-detail-container .testimonial-card::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 16px;
}

.career-detail-container .testimonial-text {
    margin-bottom: 20px;
    font-style: italic;
}

.career-detail-container .testimonial-author {
    display: flex;
    align-items: center;
}

.career-detail-container .author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid var(--primary-gold);
}

.career-detail-container .author-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.career-detail-container .career-transition {
    font-size: 14px;
    color: #555;
}

.career-detail-container .career-transition i {
    color: var(--dark-gold);
    margin: 0 5px;
}

/* FAQ Section */
.career-detail-container .faq-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.career-detail-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.career-detail-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.career-detail-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.career-detail-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.career-detail-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* CTA Section */
.career-detail-container .cta-section {
    padding: 80px 0;
    color: white;
    text-align: center;
}

.career-detail-container .cta-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.career-detail-container .cta-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.career-detail-container .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.career-detail-container .cta-btn-primary {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.career-detail-container .cta-btn-primary:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.career-detail-container .cta-btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.career-detail-container .cta-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .career-detail-container .stat-row {
        flex-direction: column;
    }
    
    .career-detail-container .stat-label {
        margin-bottom: 5px;
    }
    
    .career-detail-container .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .career-detail-container .company-logo {
        width: 120px;
    }
}



/* Instructor Guidelines Page */
.guidelines-hero {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: 60px 0;
    color: black;
}

/* Main Content */
.guidelines-container {
    padding: 60px 0;
}

/* Sidebar Navigation */
.guidelines-container .sidebar-nav {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 25px;
    position: sticky;
    top: 30px;
}

.guidelines-container .nav-title {
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.guidelines-container .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guidelines-container .nav-item {
    margin-bottom: 5px;
}

.guidelines-container .nav-link {
    display: block;
    padding: 10px 15px;
    border-radius: 8px;
    color: #555;
    text-decoration: none;
    transition: all 0.3s ease;
}

.guidelines-container .nav-link:hover, .nav-link.active {
    background: var(--light-yellow);
    color: var(--dark-gold);
}

.guidelines-container .nav-link.active {
    font-weight: 600;
}

.guidelines-container .nav-section {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #777;
    padding-left: 15px;
}

/* Content Section */
.guidelines-container .content-section {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 30px;
    margin-bottom: 30px;
}

.guidelines-container .section-title {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.guidelines-container .section-title:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--primary-gold);
}

.guidelines-container .content-section p {
    line-height: 1.6;
}

/* Custom List Styles */
.guidelines-container .guideline-list {
    padding-left: 20px;
}

.guidelines-container .guideline-list li {
    margin-bottom: 15px;
    position: relative;
}

.guidelines-container .tip-card {
    background: var(--light-yellow);
    border-left: 4px solid var(--primary-gold);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.guidelines-container .tip-card h5 {
    color: var(--dark-gold);
    margin-bottom: 10px;
}

.guidelines-container .tip-card p {
    margin-bottom: 0;
}

/* Steps Section */
.guidelines-container .step-container {
    margin-bottom: 30px;
}

.guidelines-container .step-item {
    display: flex;
    margin-bottom: 30px;
}

.guidelines-container .step-number {
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 20px;
    flex-shrink: 0;
}

.guidelines-container .step-content {
    flex-grow: 1;
}

.guidelines-container .step-title {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Info Cards */
.guidelines-container .info-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.guidelines-container .info-card-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.guidelines-container .info-card-icon {
    width: 40px;
    height: 40px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}

/* Technical Guidelines */
.guidelines-container .tech-guideline {
    margin-bottom: 30px;
}

.guidelines-container .tech-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.guidelines-container .tech-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

/* Table Styles */
.guidelines-container .guideline-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.guidelines-container .guideline-table th, 
.guidelines-container .guideline-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
}

.guidelines-container .guideline-table th {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-weight: 600;
    text-align: left;
}

.guidelines-container .guideline-table tr:nth-child(even) {
    background: #f9f9f9;
}

/* Checklist */
.guidelines-container .checklist {
    padding-left: 0;
    list-style: none;
}

.guidelines-container .checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.guidelines-container .checklist li:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary-gold);
    position: absolute;
    left: 0;
    top: 2px;
}

/* Code Examples */
.guidelines-container .code-example {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    border-left: 4px solid var(--primary-gold);
    font-family: monospace;
    overflow-x: auto;
}

/* Download Resources */
.guidelines-container .resources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.guidelines-container .resource-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.guidelines-container .resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--primary-gold);
}

.guidelines-container .resource-icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--dark-gold);
    font-size: 24px;
    flex-shrink: 0;
}

.guidelines-container .resource-info {
    flex-grow: 1;
}

.guidelines-container .resource-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.guidelines-container .resource-size {
    font-size: 14px;
    color: #777;
}

.guidelines-container .download-btn {
    background: transparent;
    color: var(--dark-gold);
    border: 1px solid var(--primary-gold);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    text-decoration: none;
}

.guidelines-container .download-btn:hover {
    background: var(--primary-gold);
    color: black;
}

/* Responsive */
@media (max-width: 992px) {
    .guidelines-container .sidebar-nav {
        position: static;
        margin-bottom: 30px;
    }
    
    .guidelines-container .resources-grid {
        grid-template-columns: 1fr;
    }
}



/* Competence Assessment Page */
.competence-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/competence-assessment-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.competence-container .first-level {
    padding: 80px 0;
    background: #fff;
}

.competence-container .overview-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    height: 100%;
}

.competence-container .overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.competence-container .overview-icon {
    width: 70px;
    height: 70px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.competence-container .overview-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

/* Process Steps */
.competence-container .process-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.competence-container .process-steps {
    counter-reset: step-counter;
    position: relative;
}

.competence-container .process-step {
    counter-increment: step-counter;
    position: relative;
    padding: 0 0 40px 70px;
}

.competence-container .process-step:last-child {
    padding-bottom: 0;
}

.competence-container .process-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    z-index: 2;
}

.competence-container .process-step::after {
    content: '';
    position: absolute;
    left: 25px;
    top: 50px;
    width: 2px;
    height: calc(100% - 50px);
    background: var(--light-yellow);
    z-index: 1;
}

.competence-container .process-step:last-child::after {
    display: none;
}

.competence-container .process-content {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.competence-container .process-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-gold);
}

/* Available Assessments */
.competence-container .assessments-section {
    padding: 80px 0;
    background: #fff;
}

.competence-container .assessment-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

.competence-container .assessment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.competence-container .assessment-header {
    background: var(--primary-gold);
    color: black;
    padding: 20px;
    position: relative;
}

.competence-container .assessment-difficulty {
    position: absolute;
    top: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.competence-container .assessment-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.competence-container .assessment-content {
    padding: 25px;
}

.competence-container .assessment-stats {
    display: flex;
    margin-bottom: 20px;
}

.competence-container .assessment-stat {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid #eee;
}

.competence-container .assessment-stat:last-child {
    border-right: none;
}

.competence-container .assessment-stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.competence-container .assessment-stat-label {
    font-size: 0.9rem;
    color: #777;
}

.competence-container .assessment-description {
    margin-bottom: 20px;
    color: #555;
}

.competence-container .assessment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.competence-container .assessment-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
}

.competence-container .assessment-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.competence-container .price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-gold);
}

.competence-container .price-note {
    font-size: 14px;
    color: #777;
    display: block;
}

.competence-container .assessment-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.competence-container .assessment-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Pricing Section */
.competence-container .pricing-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.competence-container .subscription-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

.competence-container .subscription-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.competence-container .subscription-header {
    background: var(--primary-gold);
    color: black;
    padding: 30px 20px;
    text-align: center;
}

.competence-container .subscription-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.competence-container .subscription-price {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 15px 0;
}

.competence-container .subscription-period {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.8;
}

.competence-container .subscription-features {
    padding: 30px;
}

.competence-container .subscription-feature {
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
}

.competence-container .subscription-feature:last-child {
    margin-bottom: 0;
}

.competence-container .subscription-feature::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dark-gold);
}

.competence-container .subscription-limit {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    text-align: center;
    font-size: 14px;
    color: #777;
}

.competence-container .subscription-footer {
    padding: 0 30px 30px;
    text-align: center;
}

.competence-container .pricing-note {
    margin-top: 50px;
    background: var(--light-yellow);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--primary-gold);
}

.competence-container .pricing-note h4 {
    color: var(--dark-gold);
}

/* FAQ Section */
.competence-container .faq-section {
    padding: 80px 0;
    background: #fff;
}

.competence-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.competence-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.competence-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.competence-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.competence-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Testimonials */
.competence-container .testimonials-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.competence-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    position: relative;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.competence-container .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.competence-container .testimonial-card::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 16px;
}

.competence-container .testimonial-text {
    margin-bottom: 20px;
    font-style: italic;
}

.competence-container .testimonial-author {
    display: flex;
    align-items: center;
}

.competence-container .author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid var(--primary-gold);
}

.competence-container .author-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.competence-container .author-role {
    font-size: 14px;
    color: #777;
}

.competence-container .author-assessment {
    display: block;
    font-weight: 600;
    color: var(--dark-gold);
    margin-top: 5px;
}

/* CTA Section */
.competence-container .cta-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/competence-assessment-cta.jpg') center/cover;
    color: white;
    text-align: center;
}

.competence-container .cta-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.competence-container .cta-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.competence-container .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.competence-container .cta-btn-primary {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.competence-container .cta-btn-primary:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.competence-container .cta-btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.competence-container .cta-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Modal Styling */
.competence-container .modal-header {
    background: var(--primary-gold);
    color: black;
}

.competence-container .modal-title {
    font-weight: 600;
}

.competence-container .modal-body {
    padding: 30px;
}

.competence-container .assessment-form {
    margin-top: 20px;
}

.competence-container .form-group {
    margin-bottom: 20px;
}

.competence-container .form-label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.competence-container .form-control {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    font-size: 16px;
}

.competence-container .form-control:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.competence-container .form-text {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

.competence-container .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.competence-container .form-check-input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.competence-container .form-check-label {
    font-size: 16px;
}

.competence-container .modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #eee;
}

.competence-container .submit-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.competence-container .submit-btn:hover {
    background: var(--dark-gold);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .competence-container .assessment-stat {
        flex-basis: 50%;
        border-right: none;
        margin-bottom: 15px;
    }
    
    .competence-container .assessment-stats {
        flex-wrap: wrap;
    }
    
    .competence-container .assessment-price {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .competence-container .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
}



/* Mentorship Page */
.mentorship-container .mentorship-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/mentorship-banner.jpg') center/cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

/* Overview Section */
.mentorship-container .overview-section {
    padding: 80px 0;
    background: white;
}

.mentorship-container .overview-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    height: 100%;
}

.mentorship-container .overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.mentorship-container .overview-icon {
    width: 70px;
    height: 70px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Process Section */
.mentorship-container .process-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.mentorship-container .process-steps {
    counter-reset: step-counter;
    position: relative;
}

.mentorship-container .process-step {
    counter-increment: step-counter;
    position: relative;
    padding: 0 0 40px 70px;
}

.mentorship-container .process-step:last-child {
    padding-bottom: 0;
}

.mentorship-container .process-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    z-index: 2;
}

.mentorship-container .process-step::after {
    content: '';
    position: absolute;
    left: 25px;
    top: 50px;
    width: 2px;
    height: calc(100% - 50px);
    background: var(--light-yellow);
    z-index: 1;
}

.mentorship-container .process-step:last-child::after {
    display: none;
}

.mentorship-container .process-content {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.mentorship-container .process-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-gold);
}

/* Tracks Section */
.mentorship-container .tracks-section {
    padding: 80px 0;
    background: white;
}

.mentorship-container .track-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mentorship-container .track-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.mentorship-container .track-header {
    background: var(--primary-gold);
    color: black;
    padding: 25px;
    text-align: center;
}

.mentorship-container .track-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-gold);
    font-size: 24px;
    margin: 0 auto 15px;
}

.mentorship-container .track-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

.mentorship-container .track-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mentorship-container .track-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex-grow: 1;
}

.mentorship-container .track-features li {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
}

.mentorship-container .track-features li:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.mentorship-container .track-features li i {
    color: var(--dark-gold);
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 5px;
}

.mentorship-container .track-duration {
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: auto;
}

.mentorship-container .track-duration span {
    font-weight: 600;
    color: var(--dark-gold);
}

.mentorship-container .track-footer {
    padding: 0 25px 25px;
    text-align: center;
}

.mentorship-container .track-btn {
    display: inline-block;
    background: var(--primary-gold);
    color: black;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mentorship-container .track-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Benefits Section */
.mentorship-container .benefits-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.mentorship-container .benefit-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.mentorship-container .benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.mentorship-container .benefit-icon {
    width: 60px;
    height: 60px;
    background: var(--light-yellow);
    color: var(--dark-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.mentorship-container .benefit-content h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.mentorship-container .benefit-content p {
    color: #555;
    margin-bottom: 0;
}

/* Success Stories Section */
.mentorship-container .success-stories-section {
    padding: 80px 0;
    background: white;
}

.mentorship-container .testimonial-slider {
    position: relative;
}

.mentorship-container .testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    border: 1px solid #eee;
    overflow: hidden;
}

.mentorship-container .testimonial-content {
    display: flex;
    flex-wrap: wrap;
}

.mentorship-container .testimonial-image {
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
}

.mentorship-container .testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mentorship-container .testimonial-text {
    flex-grow: 1;
    padding: 25px;
}

.mentorship-container .testimonial-text p {
    font-style: italic;
    margin-bottom: 20px;
}

.mentorship-container .testimonial-author h5 {
    margin-bottom: 5px;
}

.mentorship-container .testimonial-author p {
    margin-bottom: 5px;
    font-style: normal;
    color: #555;
}

.mentorship-container .author-program {
    display: inline-block;
    background: var(--light-yellow);
    color: var(--dark-gold);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.mentorship-container .testimonial-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.mentorship-container .nav-prev, .nav-next {
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.mentorship-container .nav-prev:hover, .nav-next:hover {
    background: var(--primary-gold);
    color: black;
}

.mentorship-container .nav-indicators {
    display: flex;
    gap: 8px;
    margin: 0 20px;
}

.mentorship-container .indicator {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mentorship-container .indicator.active {
    background: var(--primary-gold);
    transform: scale(1.2);
}

/* Mentorship Form Section */
.mentorship-container .mentorship-form-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.mentorship-container .form-container {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.mentorship-container .form-header {
    text-align: center;
    margin-bottom: 40px;
}

.mentorship-container .mentorship-application-form {
    max-width: 100%;
}

.mentorship-container .form-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.mentorship-container .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mentorship-container .section-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--dark-gold);
    font-weight: 600;
}

.mentorship-container .form-label {
    font-weight: 500;
    margin-bottom: 8px;
}

.mentorship-container .required {
    color: #dc3545;
}

.mentorship-container .form-control, .form-select {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mentorship-container .form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.mentorship-container .form-text {
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
}

.mentorship-container .form-check-input {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.mentorship-container .form-actions {
    text-align: center;
    margin-top: 30px;
}

.mentorship-container .submit-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mentorship-container .submit-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* FAQ Section */
.mentorship-container .faq-section {
    padding: 80px 0;
    background: white;
}

.mentorship-container .accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: none;
}

.mentorship-container .accordion-button {
    padding: 20px;
    font-weight: 600;
    font-size: 17px;
}

.mentorship-container .accordion-button:not(.collapsed) {
    background: var(--light-yellow);
    color: var(--dark-gold);
    box-shadow: none;
}

.mentorship-container .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.125);
}

.mentorship-container .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5C32E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* CTA Section */
.mentorship-container .cta-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/pages/mentorship-cta.jpg') center/cover;
    color: white;
    text-align: center;
}

.mentorship-container .cta-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}

.mentorship-container .cta-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.mentorship-container .cta-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin: 30px 0;
}

.mentorship-container .cta-stats .stat-item {
    text-align: center;
}

.mentorship-container .cta-stats .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-gold);
}

.mentorship-container .cta-stats .stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

.mentorship-container .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.mentorship-container .cta-btn-primary {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.mentorship-container .cta-btn-primary:hover {
    background: var(--dark-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.mentorship-container .cta-btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.mentorship-container .cta-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .mentorship-container .testimonial-content {
        flex-direction: column;
    }
    
    .mentorship-container .testimonial-image {
        max-width: 100%;
        height: 250px;
    }
    
    .mentorship-container .form-container {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .mentorship-container .mentorship-hero {
        min-height: 350px;
    }
    
    .mentorship-container .process-step {
        padding-left: 60px;
    }
    
    .mentorship-container .benefit-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .mentorship-container .benefit-icon {
        margin-bottom: 15px;
    }
    
    .mentorship-container .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .mentorship-container .cta-stats {
        flex-direction: column;
        gap: 20px;
    }
}



/* Assessment Catalog Page */
.catalog-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/pages/assessments-catalog-banner.jpg') center/cover;
    min-height: 300px;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.catalog-container {
    padding: 60px 0;
    background: #f9f9f9;
}

.catalog-container .filter-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.catalog-container .filter-title {
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.catalog-container .search-container {
    position: relative;
    margin-bottom: 20px;
}

.catalog-container .search-input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 16px;
}

.catalog-container .search-input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(245, 195, 46, 0.2);
}

.catalog-container .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
}

.catalog-container .filter-group {
    margin-bottom: 20px;
}

.catalog-container .filter-group-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: #555;
}

.catalog-container .filter-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.catalog-container .filter-checkbox input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.catalog-container .filter-checkbox label {
    font-size: 15px;
    color: #444;
    cursor: pointer;
}

.catalog-container .filter-checkbox .count {
    margin-left: auto;
    font-size: 13px;
    color: #777;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 10px;
}

.catalog-container .filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.catalog-container .clear-filters {
    background: transparent;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: #777;
    cursor: pointer;
    transition: all 0.3s ease;
}

.catalog-container .clear-filters:hover {
    border-color: var(--primary-gold);
    color: var(--dark-gold);
}

.catalog-container .apply-filters {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.catalog-container .apply-filters:hover {
    background: var(--dark-gold);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* Additional filters for mobile */
.catalog-container .mobile-filters-toggle {
    width: 100%;
    background: var(--primary-gold);
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: left;
    font-weight: 600;
    color: black;
    position: relative;
    margin-bottom: 20px;
    display: none;
}

.catalog-container .mobile-filters-toggle i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 991px) {
    .catalog-container .filter-section {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        overflow-y: auto;
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .catalog-container .filter-section.active {
        display: block;
    }
    
    .catalog-container .mobile-filters-toggle {
        display: block;
    }
    
    .catalog-container .close-filters {
        position: absolute;
        top: 15px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #777;
    }
}

/* Results Section */
.catalog-container .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.catalog-container .results-count {
    font-weight: 600;
    color: #555;
}

.catalog-container .sort-dropdown {
    position: relative;
}

.catalog-container .sort-button {
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.catalog-container .sort-button i {
    margin-left: 10px;
}

.catalog-container .sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 10;
    margin-top: 5px;
    display: none;
}

.catalog-container .sort-menu.show {
    display: block;
}

.catalog-container .sort-option {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.catalog-container .sort-option:hover {
    background: var(--light-yellow);
}

.catalog-container .sort-option.active {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-weight: 600;
}

/* Assessment Card */
.catalog-container .assessment-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

.catalog-container .assessment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary-gold);
}

.catalog-container .assessment-header {
    background: var(--primary-gold);
    color: black;
    padding: 20px;
    position: relative;
}

.catalog-container .assessment-difficulty {
    position: absolute;
    top: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.catalog-container .assessment-type {
    font-size: 0.9rem;
    opacity: 0.8;
}

.catalog-container .assessment-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.catalog-container .assessment-content {
    padding: 25px;
}

.catalog-container .assessment-stats {
    display: flex;
    margin-bottom: 20px;
}

.catalog-container .assessment-stat {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid #eee;
}

.catalog-container .assessment-stat:last-child {
    border-right: none;
}

.catalog-container .assessment-stat-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-gold);
}

.catalog-container .assessment-stat-label {
    font-size: 0.9rem;
    color: #777;
}

.catalog-container .assessment-description {
    margin-bottom: 20px;
    color: #555;
}

.catalog-container .assessment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.catalog-container .assessment-tag {
    background: var(--light-yellow);
    color: var(--dark-gold);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
}

.catalog-container .assessment-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.catalog-container .price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-gold);
}

.catalog-container .price-note {
    font-size: 14px;
    color: #777;
    display: block;
}

.catalog-container .assessment-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.catalog-container .assessment-btn:hover {
    background: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .catalog-container .assessment-stat {
        flex-basis: 50%;
        border-right: none;
        margin-bottom: 15px;
    }
    
    .catalog-container .assessment-stats {
        flex-wrap: wrap;
    }
    
    .catalog-container .assessment-price {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .catalog-container .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* Pagination */
.catalog-container .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.catalog-container .pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.catalog-container .page-item {
    margin: 0 5px;
}

.catalog-container .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    text-decoration: none;
}

.catalog-container .page-link:hover, .page-link.active {
    background: var(--primary-gold);
    color: black;
    border-color: var(--primary-gold);
}

/* No Results */
.catalog-container .no-results {
    text-align: center;
    padding: 50px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.catalog-container .no-results-icon {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
}

.catalog-container .submit-btn {
    background: var(--primary-gold);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.catalog-container .submit-btn:hover {
    background: var(--dark-gold);
}