/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Prevent Font Flash (FOUT) - Force font-display: swap
--------------------------------------------------------------*/
@font-face {
    font-family: 'bb-icons';
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    font-display: swap;
}

/*--------------------------------------------------------------
Prevent Layout Shift - Ensure shapes render immediately
--------------------------------------------------------------*/
.elementor-shape-top svg,
.elementor-shape-bottom svg {
    display: block;
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
Section Header Widget Styles - Professional Typography for Sinjab Academy
--------------------------------------------------------------*/

.section-header {
    margin-bottom: 50px;
}

.section-header-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #333333;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
    position: relative;
}

.section-header-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #e2b830;
    border-radius: 0;
}

/* Hide line when switcher is off */
.elementor-widget-section_header[class*="show_line-"] .section-header-title:after {
    display: none;
}

.elementor-widget-section_header .section-header-title:after {
    display: block;
}

/* Left aligned title - line on left */
.section-header[style*="text-align: left"] .section-header-title:after,
.section-header[style*="text-align:left"] .section-header-title:after {
    left: 0;
    transform: none;
}

/* Right aligned title - line on right */
.section-header[style*="text-align: right"] .section-header-title:after,
.section-header[style*="text-align:right"] .section-header-title:after {
    left: auto;
    right: 0;
    transform: none;
}

.section-header-description {
    font-size: 18px;
    line-height: 1.6;
    color: #666666;
    margin: 0 0 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .section-header-title {
        font-size: 32px;
    }

    .section-header-description {
        font-size: 16px;
    }
}

/*--------------------------------------------------------------
Stats Counter Widget Styles - Modern Minimalist Design for Sinjab Academy
Clean design with Sinjab Academy brand colors (#e2b830)
--------------------------------------------------------------*/

.stats-counter-wrapper {
    display: grid;
    width: 100%;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 40px 30px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(226, 184, 48, 0.12) 0%, rgba(184, 148, 31, 0.08) 100%);
    position: relative;
}

.stat-icon i,
.stat-icon svg {
    font-size: 36px;
    color: #e2b830;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 25%,
        #f5d563 50%,
        #e2b830 75%,
        #b8941f 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-wave 2.5s ease-in-out infinite;
    display: inline-block;
}

/* Force gradient rendering on page load */
.stat-icon i::before,
.stat-icon svg {
    display: inline-block;
}

/* SVG specific styles */
.stat-icon svg {
    fill: currentColor;
}

.stat-icon svg path {
    fill: currentColor;
}

.stat-number {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #333;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    font-family: var(--bb-heading-font-family, -apple-system, BlinkMacSystemFont, "SF UI Display", "Segoe UI", Roboto, sans-serif);
}

.stat-prefix,
.stat-suffix {
    font-size: 0.55em;
    font-weight: 600;
    opacity: 0.7;
    color: #666;
}

.stat-value {
    display: inline-block;
    min-width: 1ch;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 25%,
        #f5d563 50%,
        #e2b830 75%,
        #b8941f 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #e2b830;
}

.stat-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin: 0;
    font-family: var(--bb-body-font-family, -apple-system, BlinkMacSystemFont, "SF UI Text", "Segoe UI", Roboto, sans-serif);
}

/* Loading state with elegant gradient wave */
.stat-item:not(.counter-animated) .stat-value {
    animation: gradient-wave 2.5s ease-in-out infinite;
}

@keyframes gradient-wave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Diagonal gradient wave animation for SARSA */
@keyframes diagonal-gradient-wave {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Responsive Design - Mobile First */
@media (max-width: 768px) {
    .stat-item {
        padding: 35px 25px;
    }

    .stat-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .stat-icon i,
    .stat-icon svg {
        font-size: 32px;
    }

    .stat-number {
        font-size: 44px;
        margin-bottom: 10px;
    }

    .stat-title {
        font-size: 13px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 480px) {
    .stat-item {
        padding: 30px 20px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
    }

    .stat-icon i,
    .stat-icon svg {
        font-size: 28px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-title {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .stat-item:not(.counter-animated) .stat-value {
        animation: none;
    }
}

/*--------------------------------------------------------------
Masterclass Card Grid Widget Styles - Modern Design for Sinjab Academy
Clean, professional card layout with hover effects
--------------------------------------------------------------*/

.masterclass-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
}

.masterclass-card {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.masterclass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #e2b830;
}

.masterclass-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Image Container */
.masterclass-image {
    position: relative;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    flex-shrink: 0;
}

.masterclass-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.masterclass-card:hover .masterclass-image::before {
    opacity: 1;
}

/* Badge */
.masterclass-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #e2b830;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Content Container */
.masterclass-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Subtitle (Category) */
.masterclass-subtitle {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #e2b830;
    margin-bottom: 8px;
}

/* Title */
.masterclass-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
    margin: 0 0 12px 0;
    transition: color 0.3s ease;
}

.masterclass-card:hover .masterclass-title {
    color: #e2b830;
}

/* Description */
.masterclass-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 20px 0;
}

/* Meta Info (Modules count & Arrow) */
.masterclass-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
}

.masterclass-modules {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

.masterclass-modules svg {
    color: #e2b830;
}

.masterclass-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f8f8f8;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.masterclass-arrow svg {
    transform: rotate(-90deg);
    transition: all 0.3s ease;
    color: #666;
    position: relative;
}

.masterclass-card:hover .masterclass-arrow {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 50%, #f5d563 100%);
}

.masterclass-card:hover .masterclass-arrow svg {
    color: #fff;
    transform: rotate(-90deg);
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .masterclass-image {
        height: 200px;
    }
}

/* Responsive Design - Mobile (hide images) */
@media (max-width: 768px) {
    .masterclass-image {
        display: none;
    }

    .masterclass-content {
        padding: 25px 20px;
    }

    .masterclass-title {
        font-size: 18px;
    }

    .masterclass-description {
        font-size: 14px;
    }

    .masterclass-card {
        min-height: auto;
    }
}

/*--------------------------------------------------------------
Sinjab Academy Icon Widget Styles
Animated icons with gradient wave effect
--------------------------------------------------------------*/

.sinjab-icon-wrapper {
    display: inline-block;
    width: 100%;
}

.sinjab-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(226, 184, 48, 0.12) 0%, rgba(184, 148, 31, 0.08) 100%);
    transition: all 0.3s ease;
    text-decoration: none;
}

.sinjab-icon-container.no-background {
    background: transparent;
}

.sinjab-icon-container:hover {
    transform: translateY(-5px);
}

.sinjab-icon-container a {
    text-decoration: none;
}

.sinjab-icon i,
.sinjab-icon svg {
    font-size: 48px;
    color: #e2b830;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 25%,
        #f5d563 50%,
        #e2b830 75%,
        #b8941f 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Animated icons */
.sinjab-icon-container.animated .sinjab-icon i,
.sinjab-icon-container.animated .sinjab-icon svg {
    animation: gradient-wave 2.5s ease-in-out infinite;
}

/* Force gradient rendering */
.sinjab-icon i::before {
    display: inline-block;
}

/* SVG support */
.sinjab-icon svg {
    fill: currentColor;
}

.sinjab-icon svg path {
    fill: currentColor;
}

/*--------------------------------------------------------------
Academia Split Screen Widget Styles
Interactive split-screen with hover expansion
--------------------------------------------------------------*/

.academia-split-container {
    display: flex;
    width: 100%;
    height: 600px; /* Fixed height in pixels */
    overflow: hidden;
    position: relative;
}

.academia-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000; /* Black background for letterboxing */
    background-size: auto 100%; /* Full height, auto width - shows full height with black sides if needed */
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); */ /* Disabled for no hover effect */
    text-decoration: none;
    overflow: hidden;
}

/* Dark overlay */
.academia-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0.6;
    /* transition: opacity 0.6s ease; */ /* Disabled for no hover effect */
    z-index: 1;
}

/* Hover effects disabled */
/*
.academia-section:hover::before {
    opacity: 0.4;
}
*/

/* Content */
.academia-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    padding: 40px;
    max-width: 600px;
    transform: translateX(0);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.academia-subtitle {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e2b830;
    margin-bottom: 15px;
    opacity: 0.9;
}

.academia-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.academia-description {
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0 0 25px 0;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.academia-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background-color: #e2b830;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.3);
}

.academia-button svg {
    transition: transform 0.3s ease;
}

/* Hover Effects - DISABLED */
/*
.academia-section:hover {
    flex: 1.5;
}

.academia-section:not(:hover) {
    flex: 0.5;
}
*/

/* Text scaling on non-hovered section using CSS transform - only when hovering sections - DISABLED */
/*
.academia-section:hover ~ .academia-section .academia-content,
.academia-split-container:has(.academia-section:hover) .academia-section:not(:hover) .academia-content {
    transform: scale(var(--text-scale, 0.85)) translateX(0);
    transform-origin: center center;
    padding: calc(40px * var(--text-scale, 0.85));
    max-width: calc(600px / var(--text-scale, 0.85));
}
*/

/* Ensure hovered section stays at normal scale - DISABLED */
/*
.academia-section:hover .academia-content {
    transform: scale(1) translateX(0);
    max-width: 600px;
    padding: 40px;
}
*/

/* Reset when no hover on container */
.academia-content {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Additional: Ensure text elements don't wrap unnecessarily - only when section is hovered - DISABLED */
/*
.academia-split-container:has(.academia-section:hover) .academia-section:not(:hover) .academia-title {
    white-space: normal;
    word-break: keep-all;
    hyphens: none;
}

.academia-split-container:has(.academia-section:hover) .academia-section:not(:hover) .academia-description {
    white-space: normal;
}
*/

/* Button hover effects - DISABLED */
/*
.academia-button:hover {
    background-color: #f5d563;
    box-shadow: 0 6px 16px rgba(226, 184, 48, 0.4);
    transform: translateY(-2px);
}

.academia-button:hover svg {
    transform: translateX(4px);
}
*/

/* Title scale is handled by content scale now, removed to prevent conflict */

/* Divider line */
.academia-split-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 10%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #e2b830, transparent);
    transform: translateX(-50%);
    z-index: 3;
    transition: opacity 0.6s ease;
}

/* Divider line hover - DISABLED */
/*
.academia-split-container:hover::after {
    opacity: 0;
}
*/

/* Academia Logo Overlay */
.academia-logo {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none; /* Prevent logo from blocking hover on sections */
}

.academia-logo img {
    width: 250px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Video Background Styles */
.academia-video-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    object-fit: cover; /* Maintains aspect ratio, fills height, crops width */
    object-position: center center;
    min-width: 100%; /* Ensure it at least covers the width */
    z-index: 0;
}

/* Ensure overlay is above video but below content */
.academia-section::before {
    z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .academia-split-container {
        flex-direction: column;
        height: auto;
        padding-top: 120px;
        position: relative;
    }

    .academia-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 15;
        background-color: #333333;
        padding: 20px 30px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .academia-logo img {
        width: 160px;
        filter: brightness(1.1);
    }

    .academia-section {
        min-height: 350px;
        flex: 1 !important;
        position: relative;
    }

    .academia-section:hover {
        flex: 1 !important;
    }

    .academia-title {
        font-size: 32px;
    }

    .academia-description {
        opacity: 1;
        transform: translateY(0);
        font-size: 15px;
    }

    .academia-button {
        opacity: 1;
        transform: translateY(0);
    }

    .academia-split-container::after {
        display: none;
    }
}

/*--------------------------------------------------------------
Masterclass Hero Widget - Sinjab Academy
Hero section for individual masterclass pages
--------------------------------------------------------------*/

.mc-hero {
    background: transparent;
    padding: 80px 20px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Gradient background (when enabled) */
.mc-hero.mc-hero-gradient {
    background: linear-gradient(135deg, #262626 0%, #3a3a3a 50%, #292929 100%);
}

.mc-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Title with animated gradient */
.mc-hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 6s ease-in-out infinite;
    text-shadow: none;
}

.mc-hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 25px 0;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.mc-hero-logo {
    margin: 0 0 25px 0;
    line-height: 0;
}

.mc-hero-logo img {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
}

.mc-hero-description {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 30px 0;
}

/* Accreditation with animated gradient */
.mc-hero-accreditation {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    font-style: italic;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .mc-hero {
        padding: 70px 30px;
    }

    .mc-hero-title {
        font-size: 46px;
    }

    .mc-hero-subtitle {
        font-size: 18px;
    }

    .mc-hero-description {
        font-size: 20px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .mc-hero {
        padding: 60px 20px;
    }

    .mc-hero-title {
        font-size: 36px;
    }

    .mc-hero-subtitle {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .mc-hero-description {
        font-size: 18px;
    }

    .mc-hero-accreditation {
        font-size: 14px;
    }
}

/*--------------------------------------------------------------
Speakers Grid Widget - Sinjab Academy
Grid of speaker images with hover name and click modal
--------------------------------------------------------------*/

.speakers-grid-wrapper {
    width: 100%;
}

/* Header Styles */
.speakers-header {
    text-align: center;
    margin-bottom: 40px;
}

.speakers-header-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
    margin: 0 0 15px 0;
}

.speakers-header-title.has-divider {
    padding-bottom: 20px;
    position: relative;
}

.speakers-header-title.has-divider:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

/* Left aligned title - line on left */
.speakers-header[style*="text-align: left"] .speakers-header-title.has-divider:after,
.speakers-header[style*="text-align:left"] .speakers-header-title.has-divider:after {
    left: 0;
    transform: none;
}

/* Right aligned title - line on right */
.speakers-header[style*="text-align: right"] .speakers-header-title.has-divider:after,
.speakers-header[style*="text-align:right"] .speakers-header-title.has-divider:after {
    left: auto;
    right: 0;
    transform: none;
}

.speakers-header-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid Styles */
.speakers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.speaker-item {
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 3px;
    background: transparent;
}

/* Animated gold gradient border on hover */
.speaker-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.speaker-item:hover {
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.25);
    transform: translateY(-8px);
}

.speaker-item:hover::before {
    opacity: 1;
}

.speaker-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    aspect-ratio: 1;
    background: #ffffff;
}

.speaker-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 13px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.speaker-item:hover .speaker-image-wrapper img {
    transform: scale(1.08);
}

.speaker-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(184, 148, 31, 0.92) 0%,
        rgba(226, 184, 48, 0.92) 50%,
        rgba(184, 148, 31, 0.92) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 13px;
    backdrop-filter: blur(2px);
}

.speaker-item:hover .speaker-name-overlay {
    opacity: 1;
}

.speaker-name-overlay span {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    display: block;
    text-align: center;
    padding: 20px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.speaker-item:hover .speaker-name-overlay span {
    transform: translateY(-5px);
}

/* Modal Styles */
.speaker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.speaker-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.speaker-modal-content {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 100000;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.speaker-modal-close {
    position: sticky;
    top: 15px;
    align-self: flex-end;
    margin: 15px 15px 0 0;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 45px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.3);
}

.speaker-modal-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 16px rgba(226, 184, 48, 0.5);
}

.speaker-modal-inner {
    display: flex;
    flex-direction: column;
    padding: 0 40px 40px;
    flex: 1;
}

.speaker-modal-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
    border-radius: 16px;
}

.speaker-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 16px;
    display: block;
}

.speaker-modal-details {
    text-align: center;
}

.speaker-modal-name {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 15px 0;
}

.speaker-modal-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.speaker-modal-bio {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    text-align: left;
}

/* Layout: Below Image Style */
.speakers-layout-below.speakers-grid {
    align-items: stretch;
}

.speakers-layout-below .speaker-item {
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.speakers-layout-below .speaker-image-wrapper {
    margin-bottom: 0;
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
}

.speakers-layout-below .speaker-image-wrapper img {
    border-radius: 16px 16px 0 0;
}

.speaker-info-below {
    padding: 18px 15px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0 0 16px 16px;
    border: none;
    margin-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}

.speaker-name-below {
    font-size: 17px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    line-height: 1.3;
}

.speaker-title-below {
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Hide overlay when using below layout */
.speakers-layout-below .speaker-name-overlay {
    display: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .speaker-modal-content {
        margin: 30px 20px;
        max-height: calc(100vh - 60px);
    }

    .speaker-modal-inner {
        padding: 30px 25px;
    }
}

@media (max-width: 768px) {
    .speaker-modal-content {
        margin: 20px 15px;
    }

    .speaker-modal-inner {
        padding: 30px 20px;
    }

    .speaker-modal-image {
        width: 150px;
        height: 150px;
    }

    .speaker-modal-name {
        font-size: 26px;
    }

    .speaker-modal-title {
        font-size: 16px;
    }

    .speaker-modal-bio {
        font-size: 15px;
    }

    .speaker-name-overlay span {
        font-size: 14px;
    }

    /* Below layout responsive adjustments */
    .speakers-layout-below .speaker-name-below {
        font-size: 14px;
    }

    .speakers-layout-below .speaker-title-below {
        font-size: 12px;
    }
}

/*--------------------------------------------------------------
MC Module Cards Widget - Sinjab Academy
Comprehensive module cards with detailed course information
--------------------------------------------------------------*/

/* Grid Container */
.mc-modules-grid-advanced {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

/* When there's an odd number of cards (last card alone in row), center it */
.mc-module-card-advanced:last-child:nth-child(odd) {
    grid-column: 1 / 3;
    justify-self: center;
    width: calc(50% - 15px) !important;
}

/* Tablet - single column */
@media (max-width: 1024px) {
    .mc-modules-grid-advanced {
        grid-template-columns: 1fr !important;
    }

    .mc-module-card-advanced:last-child:nth-child(odd) {
        grid-column: 1;
        width: 100% !important;
        max-width: 100%;
    }
}

/* Mobile - single column */
@media (max-width: 768px) {
    .mc-modules-grid-advanced {
        grid-template-columns: 1fr !important;
    }
}

/* Card Container */
.mc-module-card-advanced {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box;
    position: relative;
}

/* Animated gold gradient border on hover */
.mc-module-card-advanced::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.mc-module-card-advanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15);
}

.mc-module-card-advanced:hover::before {
    opacity: 1;
}

/* Header Section (CPD Points & Status) */
.mc-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-bottom: 2px solid #e2b830;
    min-height: 50px;
    border-radius: 16px 16px 0 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* When only right side exists, still keep it on the right */
.mc-module-header:not(:has(.mc-header-left)) {
    justify-content: flex-end;
}

.mc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
}

.mc-header-left i {
    color: #e2b830;
    font-size: 16px;
    flex-shrink: 0;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure FontAwesome icon renders */
.mc-header-left i.fas,
.mc-header-left i.fa {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mc-header-right {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 4px;
}

/* Status: Live (Gold) - Animated Gradient */
.mc-header-right.mc-status-live {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.3);
}

/* Status: Upcoming (Blue) */
.mc-header-right.mc-status-upcoming {
    background: linear-gradient(135deg, #4A90E2 0%, #5BA3F5 100%);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* Status: Ended (Gray) */
.mc-header-right.mc-status-ended {
    background: linear-gradient(135deg, #757575 0%, #9E9E9E 100%);
    box-shadow: 0 2px 8px rgba(117, 117, 117, 0.3);
}

/* Content Section */
.mc-module-content {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 30px;
    flex: 1 1 auto;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    justify-content: space-between;
}

/* Content Row - Left and Right Columns */
.mc-content-row {
    display: flex !important;
    gap: 30px;
    width: 100%;
    flex: 1 1 auto;
}

/* Left Column - Module Details (Wider - 70% width) */
.mc-content-left {
    flex: 0 0 calc(70% - 15px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    justify-content: space-between;
}

/* Main content group - keeps number, title, description together */
.mc-main-content-group {
    flex: 0 0 auto;
}

/* Bottom content wrapper - grows to create space */
.mc-bottom-content-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Module Header (Number Only) */
.mc-module-header-section {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.mc-module-number {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 0 5px 0;
}

/* CPD Info Icon with Tooltip */
.cpd-info-icon {
    position: relative;
    cursor: help;
    transition: color 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
}

.cpd-info-icon:hover {
    color: #f5d563;
}

/* Tooltip box that appears on hover */
.cpd-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333333;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Show tooltip on hover */
.cpd-info-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Module Title */
.mc-module-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
    margin: 0 0 8px 0;
}

/* Module Description */
.mc-module-description {
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

.mc-module-description p {
    margin: 0 0 10px 0;
}

.mc-module-description p:last-child {
    margin-bottom: 0;
}

/* Additional Info Section */
.mc-additional-info {
    background-color: #fff9ed;
    border-left: 3px solid #e2b830;
    padding: 15px 18px;
    border-radius: 6px;
    margin-top: 0;
    flex-shrink: 0;
}

.mc-additional-info-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 8px 0;
}

.mc-additional-info-content {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* Right Column - Course Info & Speakers (30% width) */
.mc-content-right {
    flex: 0 0 calc(30% - 15px);
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    justify-content: flex-start;
}

/* Info List */
.mc-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666666;
    padding: 10px 12px;
    background-color: #fafafa;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mc-info-item:hover {
    background-color: #fff9ed;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.1);
}

.mc-info-item i {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Old Speakers Section - Keep for backward compatibility */
.mc-speakers-section {
    background-color: #fafafa;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-speakers-section:hover {
    border-color: #e2b830;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.1);
}

/* New Full-Width Speakers Section */
.mc-speakers-section-full {
    width: 100%;
    background-color: #fafafa;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
    flex-shrink: 0;
}

.mc-speakers-section-full:hover {
    border-color: #e2b830;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.1);
}

.mc-speakers-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5f5f5;
}

.mc-speakers-title i {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    font-size: 15px;
    flex-shrink: 0;
}

.mc-speakers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom scrollbar styling for speakers list */
.mc-speakers-list::-webkit-scrollbar {
    width: 6px;
}

.mc-speakers-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.mc-speakers-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 100%);
    border-radius: 10px;
}

.mc-speakers-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #e2b830 0%, #f5d563 100%);
}

/* New 2-Column Speakers Grid - Full Width and Scrollable */
.mc-speakers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    height: 130px;
    min-height: 130px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom scrollbar styling for speakers grid */
.mc-speakers-grid::-webkit-scrollbar {
    width: 6px;
}

.mc-speakers-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.mc-speakers-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 100%);
    border-radius: 10px;
}

.mc-speakers-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #e2b830 0%, #f5d563 100%);
}

.mc-speaker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #333333;
    padding: 8px 0;
    transition: transform 0.2s ease;
}

/* Speaker Avatar Image */
.mc-speaker-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    object-position: center center;
    border: 2px solid #e2b830;
    flex-shrink: 0;
    transition: all 0.3s ease;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.mc-speaker-item:hover .mc-speaker-avatar {
    border-color: #f5d563;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.3);
    transform: scale(1.05);
}

/* Speaker Avatar Placeholder (when no image) */
.mc-speaker-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2b830;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mc-speaker-item:hover .mc-speaker-avatar-placeholder {
    border-color: #f5d563;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}

.mc-speaker-avatar-placeholder i {
    font-size: 18px;
    color: #999999;
}

/* Speaker Name */
.mc-speaker-name {
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
}

.mc-speaker-item:hover {
    transform: translateX(3px);
}

.mc-speaker-item i {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    font-size: 12px;
}

/* Footer Section (Buttons) */
.mc-module-footer {
    padding: 25px 30px 35px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 15px;
    align-items: center;
    min-height: 120px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* When only one button - center it */
.mc-module-footer.mc-footer-buttons-1 {
    justify-content: center;
}

/* When two buttons - center them with gap */
.mc-module-footer.mc-footer-buttons-2 {
    justify-content: center;
    gap: 20px;
}

.mc-module-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 auto;
    min-width: 200px;
    position: relative;
}

/* Primary Button (View Curriculum) - Animated Gradient */
.mc-button-primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    box-shadow: 0 4px 16px rgba(226, 184, 48, 0.25);
    border: none;
}

.mc-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(226, 184, 48, 0.35);
    color: #ffffff;
}

/* Secondary Button (Register) - Outline with Gradient Border */
.mc-button-secondary {
    color: #333333;
    background: #ffffff;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    position: relative;
}

.mc-button-secondary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    pointer-events: none;
}

.mc-button-secondary:hover {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(226, 184, 48, 0.35);
}

.mc-button-secondary:hover::before {
    opacity: 0;
}

.mc-module-button i {
    font-size: 14px;
}

/* Single button sizing */
.mc-module-footer.mc-footer-buttons-1 .mc-module-button {
    min-width: 240px;
    flex: 0 0 auto;
}

/* Responsive - Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet uses same layout as desktop - no overrides needed */
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .mc-modules-grid-advanced {
        gap: 20px;
        padding: 0 10px;
    }

    .mc-module-card-advanced {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        height: auto !important;
    }

    .mc-content-left {
        justify-content: flex-start !important;
    }

    .mc-additional-info {
        margin-top: 20px !important;
    }

    .mc-module-header {
        padding: 12px 15px;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    .mc-header-left {
        font-size: 12px;
        width: auto;
        flex: 1 1 auto;
    }

    .mc-header-right {
        font-size: 11px;
        padding: 5px 12px;
        align-self: flex-start;
    }

    .mc-module-content {
        padding: 20px 15px;
        gap: 20px;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }

    .mc-content-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }

    .mc-content-left {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mc-content-right {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mc-module-number {
        font-size: 16px;
    }

    .mc-module-title {
        font-size: 20px;
    }

    .mc-module-description {
        font-size: 14px;
    }

    .mc-additional-info {
        padding: 12px 15px;
    }

    .mc-additional-info-title {
        font-size: 13px;
    }

    .mc-additional-info-content {
        font-size: 13px;
    }

    .mc-content-right {
        gap: 20px;
    }

    .mc-info-item {
        font-size: 13px;
        padding: 8px 10px;
    }

    .mc-speakers-section {
        padding: 15px;
    }

    .mc-speakers-section-full {
        padding: 15px;
    }

    .mc-speakers-title {
        font-size: 13px;
    }

    .mc-speaker-item {
        font-size: 12px;
    }

    /* Single column speakers grid on mobile */
    .mc-speakers-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        height: 150px;
        min-height: 150px;
    }

    .mc-speaker-item {
        font-size: 14px;
        padding: 6px 0;
    }

    .mc-speaker-avatar,
    .mc-speaker-avatar-placeholder {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .mc-speaker-avatar-placeholder i {
        font-size: 16px;
    }

    .mc-module-footer {
        padding: 20px 20px 25px;
        flex-direction: column;
        gap: 12px;
        min-height: auto;
    }

    /* Stack buttons vertically on mobile */
    .mc-module-footer.mc-footer-buttons-2 {
        justify-content: center;
    }

    .mc-module-button {
        font-size: 14px;
        padding: 12px 20px;
        width: 100%;
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
Info Card Widget Styles - Two Column Layout for Sinjab Academy
Modern card with image and content side by side
--------------------------------------------------------------*/

.info-card {
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin: 60px 0;
}

/* Hide read more/less button and disable collapse functionality in SARSA card */
.elementor-widget-sarsa_info_card .kng-collapse-expand-button,
.elementor-widget-sarsa_info_card .kng-collapse-expand-button-wrapper {
    display: none !important;
}

.elementor-widget-sarsa_info_card .kng-collapse-expand-content {
    max-height: none !important;
    overflow: visible !important;
}

.elementor-widget-sarsa_info_card .kng-collapse-expand-content.expanded {
    max-height: none !important;
}

/* Image Position */
.info-card-image-right {
    flex-direction: row-reverse;
}

/* Image */
.info-card-image {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e2b830 0%, #f5d563 100%);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    mix-blend-mode: multiply;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Content */
.info-card-content {
    flex: 1;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card-subtitle {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #e2b830;
    margin-bottom: 12px;
}

.info-card-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 15px 0;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.info-card-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666666;
    margin: 0 0 25px 0;
    max-width: 100%;
}

/* Features */
.info-card-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.info-card-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 18px;
    background-color: #fafafa;
    border-left: 3px solid #e2b830;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.info-card-feature:hover {
    background-color: #fff9ed;
    transform: translateX(5px);
}

.info-card-feature-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    color: #ffffff;
    border-radius: 6px;
    font-size: 16px;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

/* Offset animations for each icon */
.info-card-feature:nth-child(1) .info-card-feature-icon {
    animation-delay: 0s;
}

.info-card-feature:nth-child(2) .info-card-feature-icon {
    animation-delay: 1.3s;
}

.info-card-feature:nth-child(3) .info-card-feature-icon {
    animation-delay: 2.6s;
}

.info-card-feature:nth-child(4) .info-card-feature-icon {
    animation-delay: 0.8s;
}

.info-card-feature-icon i,
.info-card-feature-icon svg {
    width: 16px;
    height: 16px;
}

.info-card-feature-content {
    flex: 1;
}

.info-card-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.info-card-feature-description {
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

.info-card-button {
    display: inline-block;
    align-self: flex-start;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: #e2b830;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.3);
}

.info-card-button:hover {
    background-color: #b8941f;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(226, 184, 48, 0.4);
}

/* Placeholder pattern when no image */
.info-card-image:not(:has(img)) {
    background: linear-gradient(135deg, #e2b830 0%, #f5d563 50%, #e2b830 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-image:not(:has(img))::before {
    content: 'SARSA';
    font-size: 72px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 8px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .info-card {
        flex-direction: column !important;
        margin: 40px 0;
    }

    .info-card-image-right {
        flex-direction: column !important;
    }

    .info-card-image {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 300px;
        max-height: 350px;
        order: 1;
    }

    .info-card-content {
        padding: 40px 35px;
        order: 2;
        width: 100%;
    }

    .info-card-title {
        font-size: 32px;
    }

    .info-card-subtitle {
        font-size: 12px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .info-card {
        flex-direction: column !important;
        margin: 30px 0;
        border-radius: 12px;
    }

    .info-card-image-right {
        flex-direction: column !important;
    }

    .info-card-image {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 200px;
        max-height: 250px;
        order: 1;
    }

    .info-card-content {
        padding: 35px 25px;
        order: 2;
        width: 100%;
    }

    .info-card-subtitle {
        font-size: 11px;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .info-card-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .info-card-description {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .info-card-features {
        gap: 10px;
        margin-bottom: 25px;
    }

    .info-card-feature {
        padding: 12px 14px;
        gap: 12px;
    }

    .info-card-feature-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .info-card-feature-icon i,
    .info-card-feature-icon svg {
        width: 14px;
        height: 14px;
    }

    .info-card-feature-title {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .info-card-feature-description {
        font-size: 13px;
        line-height: 1.5;
    }

    .info-card-button {
        padding: 12px 28px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .info-card-image:not(:has(img))::before {
        font-size: 48px;
        letter-spacing: 4px;
    }
}

/* Loading State */
.masterclass-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .masterclass-card,
    .masterclass-link,
    .masterclass-image::before,
    .masterclass-arrow,
    .masterclass-arrow svg,
    .masterclass-title {
        transition: none;
    }

    .masterclass-card:hover {
        transform: none;
    }
}

/*--------------------------------------------------------------
LearnDash Course Speakers - Sinjab Academy
Display speakers in course sidebar matching BuddyBoss design
--------------------------------------------------------------*/

.ld-course-speakers-section {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
}

.ld-course-speakers-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2b830;
}

.ld-course-speakers-heading i {
    color: #e2b830;
    font-size: 18px;
}

.ld-course-speakers-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ld-speaker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #fafafa;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.ld-speaker-item:hover {
    background-color: #fff9ed;
    transform: translateX(3px);
}

.ld-speaker-photo {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e2b830;
}

.ld-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ld-speaker-info {
    flex: 1;
    min-width: 0;
}

.ld-speaker-name {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.ld-speaker-title {
    font-size: 12px;
    font-weight: 500;
    color: #e2b830;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Responsive */
@media (max-width: 768px) {
    .ld-course-speakers-section {
        padding: 20px;
        margin-top: 20px;
    }

    .ld-course-speakers-heading {
        font-size: 15px;
        margin-bottom: 15px;
        padding-bottom: 12px;
    }

    .ld-speaker-item {
        padding: 10px;
        gap: 10px;
    }

    .ld-speaker-photo {
        width: 45px;
        height: 45px;
    }

    .ld-speaker-name {
        font-size: 13px;
    }

    .ld-speaker-title {
        font-size: 11px;
    }
}
/* =====================================================
   Academia Landing Page - Full Height (100vh)
   ===================================================== */

.academia-landing-container {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 160px); /* Account for header (~80px) and footer (~80px) */
    height: calc(100vh - 160px);
    overflow: hidden;
    position: relative;
}

.academia-landing-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); */ /* Disabled for no hover effect */
    text-decoration: none;
    overflow: hidden;
}

/* Dark overlay */
.academia-landing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0.6;
    /* transition: opacity 0.6s ease; */ /* Disabled for no hover effect */
    z-index: 1;
}

/* Hover effects disabled */
/*
.academia-landing-section:hover::before {
    opacity: 0.4;
}
*/

/* Content */
.academia-landing-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    padding: 60px 40px;
    max-width: 700px;
    transform: translateX(0);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.academia-landing-subtitle {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #e2b830;
    margin-bottom: 20px;
    opacity: 0.9;
}

.academia-landing-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 30px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.academia-landing-description {
    font-size: 18px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0 0 35px 0;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.academia-landing-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    background-color: #e2b830;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(226, 184, 48, 0.4);
}

.academia-landing-button svg {
    transition: transform 0.3s ease;
}

/* Button hover effects - DISABLED */
/*
.academia-landing-section:hover .academia-landing-button {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.academia-landing-section:hover .academia-landing-button svg {
    transform: translateX(5px);
}
*/

/* Hover Effects - DISABLED */
/*
.academia-landing-section:hover {
    flex: 1.2;
}

.academia-landing-section:not(:hover) {
    flex: 0.8;
}
*/

/* Divider line */
.academia-landing-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 5%;
    bottom: 5%;
    width: 3px;
    background: linear-gradient(to bottom, transparent, #e2b830, transparent);
    transform: translateX(-50%);
    z-index: 3;
    transition: opacity 0.6s ease;
}

/* Divider line hover - DISABLED */
/*
.academia-landing-container:hover::after {
    opacity: 0;
}
*/

/* Academia Logo Overlay */
.academia-landing-logo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    transition: all 0.3s ease;
}

.academia-landing-logo img {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.academia-landing-logo img:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1200px) {
    .academia-landing-container {
        min-height: calc(100vh - 140px);
        height: calc(100vh - 140px);
    }

    .academia-landing-title {
        font-size: 52px;
    }

    .academia-landing-content {
        padding: 50px 30px;
        max-width: 600px;
    }

    .academia-landing-logo img {
        width: 250px;
    }
}

@media (max-width: 1024px) {
    .academia-landing-title {
        font-size: 48px;
    }

    .academia-landing-subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .academia-landing-description {
        font-size: 16px;
    }

    .academia-landing-button {
        padding: 16px 32px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .academia-landing-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 120px);
    }

    .academia-landing-section {
        min-height: calc(45vh - 60px);
    }

    .academia-landing-content {
        padding: 40px 25px;
    }

    .academia-landing-logo {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        background: #000000;
        padding: 25px 20px;
        text-align: center;
        order: -1; /* Place logo first */
    }

    .academia-landing-logo img {
        width: 180px;
        filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.1));
    }

    .academia-landing-title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .academia-landing-subtitle {
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-bottom: 15px;
    }

    .academia-landing-description {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .academia-landing-button {
        padding: 14px 28px;
        font-size: 14px;
    }

    .academia-landing-section:hover {
        flex: 1;
    }

    .academia-landing-container::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .academia-landing-container {
        min-height: calc(100vh - 100px);
    }

    .academia-landing-section {
        min-height: calc(45vh - 50px);
    }

    .academia-landing-content {
        padding: 30px 20px;
    }

    .academia-landing-logo {
        padding: 20px 15px;
    }

    .academia-landing-logo img {
        width: 140px;
    }

    .academia-landing-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .academia-landing-subtitle {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .academia-landing-description {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .academia-landing-button {
        padding: 12px 24px;
        font-size: 13px;
        gap: 8px;
    }
}

/* Tablet Landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .academia-landing-container {
        min-height: calc(100vh - 100px);
        height: calc(100vh - 100px);
    }

    .academia-landing-content {
        padding: 30px 25px;
    }

    .academia-landing-title {
        font-size: 40px;
    }

    .academia-landing-logo {
        top: 25px;
    }
}

/* =====================================================
   Academia Syria Hero Section - Specific Styles
   ===================================================== */

.syria-hero-container {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.syria-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0.7;
    z-index: 1;
}

.syria-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    text-align: center;
    color: #ffffff;
}

/* Logos Section */
.syria-logos-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
}

/* Top Row: Two Logos */
.syria-top-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

/* Middle Row: Left + Main + Right */
.syria-middle-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.syria-main-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.syria-main-logo img {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.syria-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.syria-sponsor-logo img {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.syria-sponsor-logo:hover img {
    transform: scale(1.1);
}

/* Text Content */
.syria-text-content {
    margin-bottom: 50px;
}

.syria-main-text {
    margin-bottom: 20px;
}

.syria-main-text p {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
}

.syria-main-text p:last-child {
    margin-bottom: 0;
}

.syria-main-text strong {
    font-weight: 600;
    color: #ffffff;
}

.syria-event-title {
    font-size: 48px;
    font-weight: 800;
    color: #e2b830;
    margin: 40px 0 0;
    text-shadow: 0 4px 20px rgba(226, 184, 48, 0.5);
}

/* Buttons Container - Side by Side */
.syria-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* CTA Button Base Styles */
.syria-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 50%, #f5d563 100%);
    background-size: 200% 200%;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(226, 184, 48, 0.4);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.3px;
    max-width: fit-content;
}

.syria-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.syria-cta-button:hover::before {
    left: 100%;
}

.syria-cta-button:hover {
    background-position: right center;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(226, 184, 48, 0.6);
    text-decoration: none;
    border-color: #f5d563;
    color: #ffffff !important;
}

/* Primary Button (Recordings) */
.syria-button-primary {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 50%, #f5d563 100%);
}

/* Secondary Button (Photo Gallery) */
.syria-button-secondary {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%);
    border-color: #e2b830;
}

.syria-button-secondary:hover {
    background: linear-gradient(135deg, #2d2d2d 0%, #404040 50%, #525252 100%);
    border-color: #f5d563;
}

.syria-cta-button svg,
.syria-cta-button i {
    transition: transform 0.3s ease;
    font-size: 18px;
}

.syria-cta-button:hover svg,
.syria-cta-button:hover i {
    transform: rotate(10deg) scale(1.1);
}

/* Button Icon Container */
.syria-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.syria-button-icon i,
.syria-button-icon svg,
.syria-button-icon svg path {
    width: 18px;
    height: 18px;
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .syria-buttons-container {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 0 20px;
    }

    .syria-cta-button {
        width: 100%;
        max-width: 350px;
        justify-content: center;
        font-size: 15px;
        padding: 14px 28px;
    }
}

/* Leadership Section */
.syria-leadership-section {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}

/* Centered Leadership (Single Profile) */
.syria-leadership-centered {
    justify-content: center;
}

.syria-profile {
    text-align: center;
    max-width: 300px;
}

.syria-profile-label {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.syria-profile-photo {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #e2b830;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.syria-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.syria-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.syria-profile-title {
    font-size: 14px;
    font-weight: 400;
    color: #cccccc;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
    .syria-logos-section {
        max-width: 600px;
    }

    .syria-main-logo img {
        width: 250px;
    }

    .syria-sponsor-logo img {
        width: 80px;
    }

    .syria-event-title {
        font-size: 40px;
    }

    .syria-leadership-section {
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .syria-hero-container {
        padding: 40px 15px;
    }

    .syria-logos-section {
        max-width: 500px;
    }

    .syria-main-logo img {
        width: 200px;
    }

    .syria-sponsor-logo img {
        width: 60px;
    }

    .syria-text-content {
        margin-bottom: 50px;
    }

    .syria-text-content p {
        font-size: 14px;
    }

    .syria-patronage {
        font-size: 16px;
    }

    .syria-event-title {
        font-size: 32px;
        margin-top: 30px;
    }

    .syria-leadership-section {
        gap: 40px;
    }

    .syria-profile-photo {
        width: 160px;
        height: 160px;
    }

    .syria-profile-name {
        font-size: 18px;
    }

    .syria-profile-title {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .syria-logos-section {
        max-width: 350px;
    }

    .syria-main-logo img {
        width: 150px;
    }

    .syria-sponsor-logo img {
        width: 50px;
    }

    .syria-text-content p {
        font-size: 13px;
    }

    .syria-patronage {
        font-size: 14px;
    }

    .syria-event-title {
        font-size: 26px;
    }

    .syria-leadership-section {
        gap: 30px;
    }

    .syria-profile-photo {
        width: 140px;
        height: 140px;
    }

    .syria-profile-label {
        font-size: 14px;
    }

    .syria-profile-name {
        font-size: 16px;
    }

    .syria-profile-title {
        font-size: 12px;
    }
}

/* =====================================================
   Sponsors Grid Widget Styles - Simplified
   ===================================================== */

.sponsors-grid-wrapper {
    width: 100%;
}

.sponsors-header {
    margin-bottom: 40px;
}

.sponsors-header-title {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    position: relative;
    display: inline-block;
}

.sponsors-header-title.has-divider {
    padding-bottom: 15px;
}

.sponsors-header-title.has-divider:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #e2b830;
}

.sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sponsor-item {
    flex: 0 0 auto;
    position: relative;
}

.sponsor-item + .sponsor-item:before {
    content: '';
    position: absolute;
    left: calc(-1 * (var(--sponsors-gap) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background-color: #ddd;
    display: block;
}

.sponsor-item a {
    display: block;
    text-decoration: none;
}

.sponsor-item img {
    display: block;
    width: 200px;
    height: 80px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    border: none;
}

.sponsor-item a:hover img {
    opacity: 0.8;
}

.sponsors-grid-empty {
    padding: 40px;
    text-align: center;
    color: #999;
    border: 2px dashed #ddd;
    border-radius: 8px;
    width: 100%;
}

.sponsors-grid-empty p {
    margin: 0;
}

/* Sponsors Grid - Mobile Responsive */
@media (max-width: 768px) {
    .sponsors-grid {
        padding: 30px 20px;
        gap: 30px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .sponsors-header-title {
        font-size: 28px;
    }

    .sponsor-item img {
        width: 150px;
        height: 60px;
    }
}

/*--------------------------------------------------------------
SA iTeach Widget - Modern Minimalist Design
3-step process for teaching opportunities
--------------------------------------------------------------*/

.iteach-widget {
    background-color: #2b2b2b;
    padding: 60px 20px;
    width: 100%;
}

/* Header Section */
.iteach-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
}

.iteach-title {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.iteach-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.iteach-reward {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    margin: 0;
    line-height: 1.6;
}

/* Steps Grid */
.iteach-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual Step Card */
.iteach-step {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 43px 30px 40px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* Animated gold gradient border on hover */
.iteach-step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 3px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.iteach-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.2);
}

.iteach-step:hover::before {
    opacity: 1;
}

/* Step Icon - Animated Gradient */
.iteach-step-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    border-radius: 12px;
    color: #ffffff;
    font-size: 36px;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.iteach-step:hover .iteach-step-icon {
    transform: scale(1.1);
}

.iteach-step-icon i,
.iteach-step-icon svg {
    width: 36px;
    height: 36px;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.iteach-step-icon svg path {
    fill: #ffffff !important;
}

/* Stagger animation delays for each step */
.iteach-step-1 .iteach-step-icon {
    animation-delay: 0s;
}

.iteach-step-2 .iteach-step-icon {
    animation-delay: 1.5s;
}

.iteach-step-3 .iteach-step-icon {
    animation-delay: 3s;
}

/* Step Title */
.iteach-step-title {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Step Description */
.iteach-step-description {
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .iteach-steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 600px;
    }

    .iteach-step {
        padding: 30px 25px;
    }

    .iteach-title {
        font-size: 32px;
    }

    .iteach-subtitle {
        font-size: 17px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .iteach-widget {
        padding: 40px 15px;
    }

    .iteach-header {
        margin-bottom: 40px;
    }

    .iteach-title {
        font-size: 28px;
    }

    .iteach-subtitle {
        font-size: 16px;
    }

    .iteach-reward {
        font-size: 15px;
    }

    .iteach-steps-grid {
        gap: 15px;
    }

    .iteach-step {
        padding: 25px 20px;
    }

    .iteach-step-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }

    .iteach-step-icon i,
    .iteach-step-icon svg {
        width: 30px;
        height: 30px;
    }

    .iteach-step-title {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .iteach-step-description {
        font-size: 14px;
    }
}

/*--------------------------------------------------------------
SA iTeach Deadline Widget - Modern Minimalist Design
Competition deadline and categories display
--------------------------------------------------------------*/

.iteach-deadline-widget {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 60px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.iteach-deadline-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Header Section */
.iteach-deadline-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f5f5f5;
    position: relative;
}

.iteach-deadline-header:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background-color: #e2b830;
}

.iteach-deadline-main-title {
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    margin: 0 0 15px 0;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.iteach-deadline-competition {
    font-size: 42px;
    font-weight: 800;
    color: #e2b830;
    margin: 0 0 20px 0;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.iteach-deadline-date {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    margin: 0;
    line-height: 1.4;
}

/* Categories List */
.iteach-categories-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 700px;
    margin: 0 auto;
}

.iteach-category-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background-color: #fafafa;
    border-radius: 10px;
    border-left: 3px solid #e2b830;
    transition: all 0.3s ease;
}

.iteach-category-item:hover {
    background-color: #fff9ed;
    transform: translateX(8px);
    box-shadow: 0 2px 10px rgba(226, 184, 48, 0.15);
}

/* Category Icon - Animated Gradient */
.iteach-category-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin-top: 2px;
}

.iteach-category-icon i,
.iteach-category-icon svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

/* Stagger animation delays for each category */
.iteach-category-item:nth-child(1) .iteach-category-icon {
    animation-delay: 0s;
}

.iteach-category-item:nth-child(2) .iteach-category-icon {
    animation-delay: 0.8s;
}

.iteach-category-item:nth-child(3) .iteach-category-icon {
    animation-delay: 1.6s;
}

.iteach-category-item:nth-child(4) .iteach-category-icon {
    animation-delay: 2.4s;
}

.iteach-category-item:nth-child(5) .iteach-category-icon {
    animation-delay: 3.2s;
}

.iteach-category-text {
    font-size: 17px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
    flex: 1;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .iteach-deadline-widget {
        padding: 50px 30px;
    }

    .iteach-deadline-header {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }

    .iteach-deadline-main-title {
        font-size: 22px;
    }

    .iteach-deadline-competition {
        font-size: 36px;
    }

    .iteach-deadline-date {
        font-size: 24px;
    }

    .iteach-category-text {
        font-size: 16px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .iteach-deadline-widget {
        padding: 40px 20px;
        border-radius: 12px;
    }

    .iteach-deadline-header {
        margin-bottom: 30px;
        padding-bottom: 25px;
    }

    .iteach-deadline-main-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .iteach-deadline-competition {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .iteach-deadline-date {
        font-size: 20px;
    }

    .iteach-categories-list {
        gap: 12px;
    }

    .iteach-category-item {
        padding: 14px 16px;
        gap: 12px;
    }

    .iteach-category-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .iteach-category-icon i,
    .iteach-category-icon svg {
        width: 14px;
        height: 14px;
    }

    .iteach-category-text {
        font-size: 15px;
    }
}

/*--------------------------------------------------------------
SA YOGA Widget - SARSA-Inspired Session Design
Young Ophthalmologists Gathering Academy sessions with speaker cards
--------------------------------------------------------------*/

.yoga-session-widget {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Enrollment Call-to-Action Section */
.yoga-enrollment-section {
    text-align: center;
    margin-bottom: 70px;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(226, 184, 48, 0.05) 0%, rgba(226, 184, 48, 0.02) 100%);
    border-radius: 20px;
    border: 2px solid rgba(226, 184, 48, 0.15);
}

.yoga-enrollment-heading {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.3;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.yoga-enrollment-intro {
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    margin: 0 0 40px 0;
    line-height: 1.7;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.yoga-enrollment-text {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 35px 0;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.yoga-enrollment-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.yoga-enroll-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 280px;
}

.yoga-enroll-button-primary {
    background-color: #e2b830;
    color: #ffffff;
    border: 2px solid #e2b830;
}

.yoga-enroll-button-primary:hover {
    background-color: #d4a82a;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(226, 184, 48, 0.4);
}

.yoga-enroll-button-secondary {
    background-color: #ffffff;
    color: #1877f2;
    border: 2px solid #1877f2;
}

.yoga-enroll-button-secondary:hover {
    background-color: #1877f2;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.3);
}

.yoga-enroll-button-secondary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Session Header */
.yoga-session-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 50px 30px;
    background: linear-gradient(180deg, rgba(226, 184, 48, 0.03) 0%, rgba(226, 184, 48, 0) 100%);
    border-radius: 16px;
}

.yoga-session-number {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #999999;
    margin: 0 0 15px 0;
}

.yoga-session-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.3;
    position: relative;
    display: inline-block;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.yoga-session-title.has-divider {
    padding-bottom: 20px;
}

.yoga-session-title.has-divider:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.yoga-session-date {
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.yoga-session-button {
    display: inline-block;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: #e2b830;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.2);
}

.yoga-session-button:hover {
    background-color: #d4a82a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 184, 48, 0.4);
}

/* Speakers Grid */
.yoga-speakers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 60px;
}

/* Speaker Card */
.yoga-speaker-card {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Only add pointer and hover effects when modal is enabled */
.yoga-speaker-card.has-modal {
    cursor: pointer;
}

.yoga-speaker-card.has-modal:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 32px rgba(226, 184, 48, 0.3);
    border-color: #e2b830;
}

.yoga-speaker-card.has-modal:hover .yoga-speaker-photo {
    border-color: #e2b830;
}

.yoga-speaker-card.has-modal:hover .yoga-speaker-name {
    -webkit-text-fill-color: transparent;
}

/* Topic Header (Gold gradient bar) */
.yoga-topic-header {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    color: #ffffff;
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

/* Speaker Content */
.yoga-speaker-content {
    padding: 35px 25px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Speaker Photo - Circular with animated border */
.yoga-speaker-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f5f5f5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    transition: all 0.4s ease;
    position: relative;
}

.yoga-speaker-photo::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    z-index: -1;
}

.yoga-speaker-card:hover .yoga-speaker-photo::before {
    opacity: 1;
}

.yoga-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Speaker Info */
.yoga-speaker-info {
    width: 100%;
}

.yoga-speaker-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #d87532;
    transition: all 0.4s ease;
}

.yoga-speaker-credentials {
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    margin: 0 0 8px 0;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.yoga-speaker-institution {
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.6;
}

/* Modal Styles */
.yoga-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.yoga-modal-content {
    background-color: #ffffff;
    border-radius: 16px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: yogaModalSlideIn 0.3s ease;
}

@keyframes yogaModalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.yoga-modal-close {
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    font-size: 32px;
    font-weight: 300;
    color: #999999;
    cursor: pointer;
    padding: 15px 20px;
    line-height: 1;
    background-color: #ffffff;
    z-index: 10;
    transition: color 0.3s ease;
}

.yoga-modal-close:hover {
    color: #e2b830;
}

.yoga-modal-header {
    padding: 30px 30px 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    border-bottom: 2px solid #f5f5f5;
}

.yoga-modal-header img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e2b830;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(226, 184, 48, 0.2);
}

.yoga-modal-header h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.yoga-modal-header .modal-credentials {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    margin: 0 0 8px 0;
}

.yoga-modal-header .modal-institution {
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    margin: 0;
}

.yoga-modal-body {
    padding: 30px;
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.yoga-modal-body p {
    margin-bottom: 15px;
}

.yoga-modal-body p:last-child {
    margin-bottom: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .yoga-enrollment-section {
        padding: 50px 30px;
    }

    .yoga-enrollment-heading {
        font-size: 36px;
    }

    .yoga-enrollment-intro {
        font-size: 17px;
    }

    .yoga-enrollment-text {
        font-size: 18px;
    }

    .yoga-speakers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .yoga-session-title {
        font-size: 28px;
    }

    .yoga-session-header {
        padding: 35px 20px;
    }

    .yoga-speaker-photo {
        width: 180px;
        height: 180px;
    }

    .yoga-speaker-name {
        font-size: 20px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .yoga-enrollment-section {
        padding: 40px 20px;
        margin-bottom: 50px;
    }

    .yoga-enrollment-heading {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .yoga-enrollment-intro {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .yoga-enrollment-text {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .yoga-enrollment-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .yoga-enroll-button {
        width: 100%;
        justify-content: center;
        padding: 16px 30px;
        font-size: 14px;
        min-width: auto;
    }

    .yoga-speakers-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yoga-session-header {
        margin-bottom: 40px;
        padding: 30px 15px;
    }

    .yoga-session-number {
        font-size: 14px;
    }

    .yoga-session-title {
        font-size: 24px;
    }

    .yoga-session-date {
        font-size: 16px;
    }

    .yoga-session-button {
        padding: 12px 24px;
        font-size: 15px;
    }

    .yoga-topic-header {
        font-size: 14px;
        padding: 12px 18px;
    }

    .yoga-speaker-content {
        padding: 25px 18px;
    }

    .yoga-speaker-photo {
        width: 160px;
        height: 160px;
    }

    .yoga-speaker-name {
        font-size: 20px;
    }

    .yoga-speaker-credentials {
        font-size: 13px;
    }

    .yoga-speaker-institution {
        font-size: 13px;
    }

    /* Modal mobile adjustments */
    .yoga-modal-content {
        max-width: 100%;
        border-radius: 12px;
    }

    .yoga-modal-header {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px 20px;
    }

    .yoga-modal-header img {
        width: 100px;
        height: 100px;
    }

    .yoga-modal-header h3 {
        font-size: 24px;
    }

    .yoga-modal-body {
        padding: 20px;
        font-size: 15px;
    }
}


/*--------------------------------------------------------------
SA About Us Widget - Minimalist & Modern Design
Beautiful about us page with hero, mission, and values sections
--------------------------------------------------------------*/

.sa-about-us-widget {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Section */
.sa-about-hero {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(226, 184, 48, 0.03) 0%, rgba(226, 184, 48, 0) 100%);
    border-radius: 20px;
    margin-bottom: 80px;
}

.sa-about-hero-title {
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: 1.2;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.sa-about-hero-description {
    font-size: 19px;
    font-weight: 400;
    color: #666666;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

/* Mission & Vision Section */
.sa-about-mission {
    margin-bottom: 80px;
}

.sa-about-mission-card {
    background: #ffffff;
    padding: 60px 50px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    text-align: center;
    transition: all 0.4s ease;
}

.sa-about-mission-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(226, 184, 48, 0.2);
    border-color: #e2b830;
}

.sa-about-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999999;
    margin: 0 0 20px 0;
}

.sa-about-mission-tagline {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 25px 0;
    line-height: 1.3;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.sa-about-mission-description {
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    line-height: 1.8;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

/* Core Values Section */
.sa-about-values {
    text-align: center;
    margin-bottom: 60px;
}

.sa-about-values .sa-about-section-title {
    margin-bottom: 60px;
}

.sa-about-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.sa-about-value-card {
    background: #ffffff;
    padding: 40px 35px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f5f5f5;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.sa-about-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(226, 184, 48, 0.25);
    border-color: #e2b830;
}

.sa-about-value-card:hover .sa-about-value-icon {
    background-size: 100% 100%;
}

.sa-about-value-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    color: #ffffff;
    border-radius: 12px;
    font-size: 26px;
    margin-bottom: 25px;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    transition: all 0.4s ease;
}

.sa-about-value-icon i,
.sa-about-value-icon svg {
    width: 26px;
    height: 26px;
}

.sa-about-value-title {
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.sa-about-value-description {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sa-about-hero {
        padding: 60px 30px;
        margin-bottom: 60px;
    }

    .sa-about-hero-title {
        font-size: 42px;
    }

    .sa-about-hero-description {
        font-size: 18px;
    }

    .sa-about-mission-card {
        padding: 50px 40px;
    }

    .sa-about-mission-tagline {
        font-size: 32px;
    }

    .sa-about-values-grid {
        gap: 25px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sa-about-hero {
        padding: 50px 20px;
        margin-bottom: 50px;
    }

    .sa-about-hero-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .sa-about-hero-description {
        font-size: 17px;
    }

    .sa-about-mission {
        margin-bottom: 50px;
    }

    .sa-about-mission-card {
        padding: 40px 25px;
    }

    .sa-about-mission-tagline {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .sa-about-mission-description {
        font-size: 17px;
    }

    .sa-about-values .sa-about-section-title {
        margin-bottom: 40px;
    }

    .sa-about-values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sa-about-value-card {
        padding: 30px 25px;
    }

    .sa-about-value-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
        margin-bottom: 20px;
    }

    .sa-about-value-icon i,
    .sa-about-value-icon svg {
        width: 22px;
        height: 22px;
    }

    .sa-about-value-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .sa-about-value-description {
        font-size: 15px;
    }
}

/* ========================================
   SA About Us Widget - Founder Section
   ======================================== */

.sa-about-founder {
    margin-bottom: 80px;
}

.sa-about-founder .sa-about-section-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #1a1a1a;
}

.sa-about-founder-card {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-about-founder-card:hover {
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15);
    transform: translateY(-5px);
}

.sa-about-founder-image {
    flex-shrink: 0;
    width: 280px;
    position: relative;
}

.sa-about-founder-image::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    padding: 6px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.sa-about-founder-card:hover .sa-about-founder-image::before {
    opacity: 1;
}

.sa-about-founder-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sa-about-founder-content {
    flex: 1;
    min-width: 0;
}

.sa-about-founder-name {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.2;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.sa-about-founder-credentials {
    font-size: 16px;
    color: #666666;
    margin: 0 0 8px 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.sa-about-founder-position {
    font-size: 18px;
    color: #333333;
    margin: 0 0 25px 0;
    font-weight: 600;
    line-height: 1.4;
}

.sa-about-founder-bio {
    font-size: 17px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

.sa-about-founder-bio p {
    margin: 0 0 18px 0;
}

.sa-about-founder-bio p:last-child {
    margin-bottom: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sa-about-founder {
        margin-bottom: 60px;
    }

    .sa-about-founder .sa-about-section-title {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .sa-about-founder-card {
        gap: 40px;
        padding: 50px 40px;
    }

    .sa-about-founder-image {
        width: 240px;
    }

    .sa-about-founder-name {
        font-size: 28px;
    }

    .sa-about-founder-position {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .sa-about-founder-bio {
        font-size: 16px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sa-about-founder {
        margin-bottom: 50px;
    }

    .sa-about-founder .sa-about-section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .sa-about-founder-card {
        flex-direction: column;
        gap: 30px;
        padding: 40px 25px;
    }

    .sa-about-founder-image {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .sa-about-founder-name {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .sa-about-founder-credentials {
        font-size: 15px;
    }

    .sa-about-founder-position {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .sa-about-founder-bio {
        font-size: 16px;
    }

    .sa-about-founder-bio p {
        margin-bottom: 15px;
    }
}

/* ========================================
   SA Contact Us Widget
   ======================================== */

.sa-contact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.sa-contact-hero {
    text-align: center;
    padding: 80px 20px;
    margin-bottom: 60px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
}

.sa-contact-hero-title {
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 25px 0;
    line-height: 1.2;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.sa-contact-hero-description {
    font-size: 20px;
    color: #555555;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Contact Cards */
.sa-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.sa-contact-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sa-contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.sa-contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15);
}

.sa-contact-card:hover::before {
    opacity: 1;
}

.sa-contact-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
}

.sa-contact-card-icon svg {
    width: 32px;
    height: 32px;
}

.sa-contact-card-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #1a1a1a;
}

.sa-contact-card-link {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: #e2b830;
    text-decoration: none;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.sa-contact-card-link:hover {
    color: #b8941f;
    transform: translateX(3px);
}

.sa-contact-card-description {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* Social Links */
.sa-contact-social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.sa-contact-social-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f9fa;
    color: #333333;
    transition: all 0.3s ease;
    text-decoration: none;
}

.sa-contact-social-icon svg {
    width: 22px;
    height: 22px;
}

.sa-contact-social-icon:hover {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.3);
}

/* Form Header Section */
.sa-contact-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.sa-contact-form-heading {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #1a1a1a;
}

.sa-contact-form-description {
    font-size: 18px;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sa-contact-hero {
        padding: 60px 30px;
        margin-bottom: 50px;
    }

    .sa-contact-hero-title {
        font-size: 42px;
    }

    .sa-contact-hero-description {
        font-size: 18px;
    }

    .sa-contact-cards {
        gap: 25px;
        margin-bottom: 60px;
    }

    .sa-contact-card {
        padding: 35px 25px;
    }

    .sa-contact-card-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .sa-contact-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .sa-contact-card-heading {
        font-size: 22px;
    }

    .sa-contact-form-heading {
        font-size: 34px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sa-contact-hero {
        padding: 50px 20px;
        margin-bottom: 40px;
    }

    .sa-contact-hero-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .sa-contact-hero-description {
        font-size: 17px;
    }

    .sa-contact-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 50px;
    }

    .sa-contact-card {
        padding: 30px 25px;
    }

    .sa-contact-card-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 18px;
    }

    .sa-contact-card-icon svg {
        width: 26px;
        height: 26px;
    }

    .sa-contact-card-heading {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .sa-contact-card-link {
        font-size: 17px;
    }

    .sa-contact-card-description {
        font-size: 15px;
    }

    .sa-contact-social-icon {
        width: 42px;
        height: 42px;
    }

    .sa-contact-social-icon svg {
        width: 20px;
        height: 20px;
    }

    .sa-contact-form-header {
        margin-bottom: 30px;
    }

    .sa-contact-form-heading {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .sa-contact-form-description {
        font-size: 16px;
    }
}

/* ========================================
   SA Hero Landing Widget
   ======================================== */

.sa-hero-landing {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 80px 20px;
    overflow: hidden;
    background: transparent;
}

/* Content container */
.sa-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: left;
    animation: heroFadeInUp 1s ease-out;
}

/* Top label */
.sa-hero-top-label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin-bottom: 20px;
    opacity: 0;
    animation: heroFadeInUp 1s ease-out 0.2s forwards, diagonal-gradient-wave 6s ease-in-out infinite;
}

/* Main title */
.sa-hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 25px 0;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: heroFadeInUp 0.5s ease-out 0.2s forwards;
}
ul.bb-sub-menu {
    max-width: 400px !important;
}
/* Regular text in title */
.sa-hero-title-regular {
    color: #ffffff;
}

/* Highlighted text with animated gradient */
.sa-hero-title-highlight {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 6s ease-in-out infinite;
    position: relative;
    display: inline-block;
}

/* Subtitle */
.sa-hero-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 40px 0;
    line-height: 1.6;
    opacity: 0;
    animation: heroFadeInUp 0.5s ease-out 0.3s forwards;
}

/* Buttons container */
.sa-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    opacity: 0;
    animation: heroFadeInUp 0.5s ease-out 0.4s forwards;
}

/* Base button styles */
.sa-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Primary button - Gold gradient */
.sa-hero-button-primary {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 50%,
        #f5d563 100%
    );
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(226, 184, 48, 0.3);
}

.sa-hero-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(226, 184, 48, 0.5);
    background: linear-gradient(
        135deg,
        #c9a424 0%,
        #f5d563 50%,
        #fff9a8 100%
    );
}

/* Secondary button - Outline with hover fill */
.sa-hero-button-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sa-hero-button-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.sa-hero-button-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.sa-hero-button-secondary:hover::before {
    opacity: 1;
}

/* Fade in up animation */
@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sa-hero-landing {
        min-height: 70vh;
        padding: 60px 30px;
    }

    .sa-hero-content {
        max-width: 700px;
    }

    .sa-hero-top-label {
        font-size: 16px;
    }

    .sa-hero-title {
        font-size: 46px;
        margin-bottom: 20px;
    }

    .sa-hero-subtitle {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .sa-hero-button {
        padding: 14px 28px;
        font-size: 15px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sa-hero-landing {
        min-height: 60vh;
        padding: 50px 20px;
    }

    .sa-hero-content {
        text-align: center;
    }

    .sa-hero-top-label {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .sa-hero-title {
        font-size: 36px;
        margin-bottom: 18px;
    }

    .sa-hero-subtitle {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .sa-hero-buttons {
        justify-content: center;
        gap: 15px;
    }

    .sa-hero-button {
        padding: 12px 24px;
        font-size: 14px;
        flex: 1;
        min-width: 140px;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .sa-hero-title {
        font-size: 28px;
    }

    .sa-hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .sa-hero-button {
        width: 100%;
    }
}

/* ========================================
   SA Features Grid Widget
   ======================================== */

.sa-features-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.sa-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sa-feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Animated gold gradient border on hover */
.sa-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.sa-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15);
}

.sa-feature-card:hover::before {
    opacity: 1;
}

/* Icon with animated gradient background */
.sa-feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
    font-size: 32px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-feature-card:hover .sa-feature-icon {
    transform: scale(1.1);
}

.sa-feature-icon i,
.sa-feature-icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Title */
.sa-feature-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.sa-feature-card:hover .sa-feature-title {
    color: #b8941f;
}

/* Description */
.sa-feature-description {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sa-features-wrapper {
        padding: 60px 30px;
    }

    .sa-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .sa-feature-card {
        padding: 35px 25px;
    }

    .sa-feature-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .sa-feature-icon i,
    .sa-feature-icon svg {
        width: 28px;
        height: 28px;
    }

    .sa-feature-title {
        font-size: 20px;
    }

    .sa-feature-description {
        font-size: 15px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sa-features-wrapper {
        padding: 50px 20px;
    }

    .sa-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sa-feature-card {
        padding: 30px 25px;
    }

    .sa-feature-icon {
        width: 65px;
        height: 65px;
        font-size: 26px;
        margin-bottom: 18px;
    }

    .sa-feature-icon i,
    .sa-feature-icon svg {
        width: 26px;
        height: 26px;
    }

    .sa-feature-title {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .sa-feature-description {
        font-size: 15px;
    }
}



/*--------------------------------------------------------------
Speakers Directory Page
Modern speaker listing page with search and filters
--------------------------------------------------------------*/

/* Container */
.speakers-directory-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

/* Header Section */
.speakers-directory-header {
    text-align: center;
    margin-bottom: 60px;
}

.speakers-directory-title {
    font-size: 48px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.speakers-directory-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #666666;
    margin: 0 0 30px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.speakers-directory-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 auto;
    border-radius: 2px;
}

/* Search Section */
.speakers-search-section {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.speakers-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.speakers-search-input {
    width: 100%;
    padding: 18px 60px 18px 24px;
    font-size: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 50px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    background: #ffffff;
}

.speakers-search-input:focus {
    border-color: #e2b830;
    box-shadow: 0 4px 20px rgba(226, 184, 48, 0.15);
}

.speakers-search-icon {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
    pointer-events: none;
    transition: color 0.3s ease;
}

.speakers-search-input:focus + .speakers-search-icon {
    color: #e2b830;
}

.speakers-results-count {
    font-size: 15px;
    color: #666666;
    font-weight: 500;
}

.speakers-sort-note {
    color: #999999;
    font-weight: 400;
    font-style: italic;
}

/* Speakers Grid */
.speakers-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Speaker Card */
.speaker-directory-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    padding: 3px;
}

/* Animated gold gradient border on hover */
.speaker-directory-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.speaker-directory-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.2);
}

.speaker-directory-card:hover::before {
    opacity: 1;
}

.speaker-directory-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 13px 13px 0 0;
    background: #f5f5f5;
}

.speaker-directory-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.speaker-directory-card:hover .speaker-directory-image {
    transform: scale(1.08);
}

.speaker-directory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(184, 148, 31, 0.5) 0%,
        rgba(226, 184, 48, 0.5) 50%,
        rgba(184, 148, 31, 0.5) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(1px);
}

.speaker-directory-card:hover .speaker-directory-overlay {
    opacity: 1;
}

.speaker-directory-view-bio {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.speaker-directory-card:hover .speaker-directory-view-bio {
    transform: translateY(-5px);
}

.speaker-directory-info {
    padding: 20px;
    text-align: center;
    background: #ffffff;
    border-radius: 0 0 13px 13px;
}

.speaker-directory-name {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.speaker-directory-position {
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0;
    line-height: 1.4;
}

/* No Results */
.speakers-no-results {
    text-align: center;
    padding: 80px 20px;
}

.speakers-no-results svg {
    color: #cccccc;
    margin-bottom: 20px;
}

.speakers-no-results h3 {
    font-size: 24px;
    font-weight: 700;
    color: #666666;
    margin: 0 0 10px 0;
}

.speakers-no-results p {
    font-size: 16px;
    color: #999999;
    margin: 0;
}

/* Pagination */
.speakers-pagination {
    margin: 50px 0 30px;
    text-align: center;
}

.speakers-pagination .page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.speakers-pagination .page-numbers li {
    display: inline-block;
}

.speakers-pagination .page-numbers a,
.speakers-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.speakers-pagination .page-numbers a:hover {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
    border-color: #e2b830;
    transform: translateY(-2px);
}

.speakers-pagination .page-numbers .current {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
    border-color: #e2b830;
    cursor: default;
}

.speakers-pagination .page-numbers .dots {
    background: transparent;
    border: none;
    color: #999999;
    cursor: default;
}

.speakers-pagination .page-numbers .prev,
.speakers-pagination .page-numbers .next {
    padding: 0 20px;
    gap: 8px;
}

.speakers-pagination .page-numbers .prev i,
.speakers-pagination .page-numbers .next i {
    font-size: 12px;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .speakers-pagination .page-numbers a,
    .speakers-pagination .page-numbers span {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    .speakers-pagination .page-numbers .prev,
    .speakers-pagination .page-numbers .next {
        padding: 0 15px;
    }
}

/* Modal Styles */
.speaker-directory-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.speaker-directory-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.speaker-directory-modal-content {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 100000;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.speaker-directory-modal-close {
    position: sticky;
    top: 15px;
    align-self: flex-end;
    margin: 15px 15px 0 0;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    color: #ffffff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 45px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.3);
}

.speaker-directory-modal-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 16px rgba(226, 184, 48, 0.5);
}

.speaker-directory-modal-inner {
    display: flex;
    flex-direction: column;
    padding: 0 40px 40px;
    flex: 1;
}

.speaker-directory-modal-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
    border-radius: 16px;
}

.speaker-directory-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 16px;
    display: block;
}

.speaker-directory-modal-details {
    text-align: center;
}

.speaker-directory-modal-name {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 15px 0;
}

.speaker-directory-modal-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.speaker-directory-modal-bio {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    text-align: left;
}

/*--------------------------------------------------------------
LearnDash Course Cards - Modern Design matching MC Modules
Clean, professional card layout with hover effects
--------------------------------------------------------------*/

/* Course Grid Container - 2 column layout on desktop like MC modules */
.bb-grid-courses {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    padding: 20px 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

/* Course Card - Modern Container matching MC module cards */
.sa-course-card-modern {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sa-course-card-container {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    height: 100%;
}

/* Animated gold gradient border on hover - matching MC modules */
.sa-course-card-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.sa-course-card-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15);
}

.sa-course-card-container:hover::before {
    opacity: 1;
}

/* Header Section (Lesson Count & Status Badge) - matching MC module header */
.sa-course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-bottom: 2px solid #e2b830;
    min-height: 50px;
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 2;
}

.sa-course-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
}

.sa-course-header-left i {
    font-size: 16px;
    color: #e2b830;
}

/* Status Badges - matching MC module status badges */
.sa-course-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sa-course-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status: Completed (Green) */
.sa-status-completed {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Status: In Progress (Blue) */
.sa-status-progress {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* Status: Start Course (Gold) */
.sa-status-start {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 100%);
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.3);
}

/* Status: Free (Emerald Green) */
.sa-status-free {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Status: Not Enrolled (Orange) */
.sa-status-not-enrolled {
    background: linear-gradient(135deg, #FF9800 0%, #FFA726 100%);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

/* Status: Open (Purple) */
.sa-status-open {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

/* Status: Ribbon (Custom) */
.sa-status-ribbon {
    background: linear-gradient(135deg, #E91E63 0%, #F06292 100%);
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);
}

/* Status: Price Badge (Gold Premium) */
.sa-status-price {
    background: linear-gradient(135deg, #b8941f 0%, #e2b830 50%, #f5d563 100%);
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.4);
    font-size: 13px;
    font-weight: 800;
}

.sa-status-price .ld-currency {
    font-size: 11px;
    opacity: 0.9;
}

/* Course Content Section */
.sa-course-content {
    padding: 30px 25px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* Course Title */
.sa-course-content .bb-course-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
    margin: 0 0 15px 0;
}

.sa-course-content .bb-course-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sa-course-content .bb-course-title a:hover {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Course Author */
.sa-course-content .course-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #666666;
}

.sa-course-content .course-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Course Excerpt */
.sa-course-content .bb-course-excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
    margin: 0 0 20px 0;
    flex: 1 1 auto;
}

.sa-course-content .bb-course-excerpt p {
    margin: 0 0 10px 0;
}

.sa-course-content .bb-course-excerpt p:last-child {
    margin-bottom: 0;
}

/* Progress Bar Section */
.sa-course-content .course-progress-wrap {
    margin: 20px 0 15px;
    padding: 15px;
    background-color: #fff9ed;
    border-left: 3px solid #e2b830;
    border-radius: 6px;
}

.sa-course-content .ld-progress {
    margin: 0 !important;
}

.sa-course-content .ld-progress .ld-progress-heading {
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    margin-bottom: 8px;
}

.sa-course-content .ld-progress .ld-progress-bar {
    height: 8px;
    background-color: #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
}

.sa-course-content .ld-progress .ld-progress-bar-percentage {
    height: 100%;
    background: linear-gradient(90deg, #b8941f 0%, #e2b830 50%, #f5d563 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Course Price Footer */
.sa-course-content .bb-course-footer {
    padding: 20px 0 0;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-course-content .course-fee {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

.sa-course-content .course-fee .ld-currency {
    font-size: 18px;
}

/* Hide old cover image section completely */
.sa-course-card-container .bb-course-cover {
    display: none !important;
}

/* Responsive Design - Tablet (single column) */
@media (max-width: 1024px) {
    .bb-grid-courses {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* Responsive Design - Mobile (single column) */
@media (max-width: 768px) {
    .bb-grid-courses {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 15px 10px;
    }

    .sa-course-header {
        padding: 12px 15px;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .sa-course-header-left {
        font-size: 12px;
    }

    .sa-course-header-left i {
        font-size: 14px;
    }

    .sa-course-status {
        font-size: 11px;
        padding: 5px 12px;
    }

    .sa-course-content {
        padding: 20px 15px;
    }

    .sa-course-content .bb-course-title {
        font-size: 18px;
    }

    .sa-course-content .bb-course-excerpt {
        font-size: 14px;
    }

    .sa-course-content .course-fee {
        font-size: 20px;
    }

    .sa-course-content .course-fee .ld-currency {
        font-size: 16px;
    }
}

/* Ensure proper spacing in course archive */
.learndash-wrapper .bb-grid-courses {
    margin: 20px 0;
}

/* Fix any BuddyBoss theme conflicts */
.bb-course-item-wrap.sa-course-card-modern {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.bb-cover-list-item.sa-course-card-container {
    min-height: auto !important;
}

/* Instructor Section Styling */
.sa-course-instructor {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fafafa;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}

.sa-course-instructor .item-avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sa-course-instructor .item-avatar:hover {
    border-color: #b8941f;
    transform: scale(1.05);
}

.sa-course-instructor .item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sa-instructor-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa-instructor-label {
    font-size: 12px;
    color: #999999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sa-instructor-name {
    font-size: 15px;
    font-weight: 600;
}

.sa-instructor-name a {
    color: #333333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sa-instructor-name a:hover {
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Increase Description Area Height */
.sa-course-content .bb-course-excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
    margin: 0 0 20px 0;
    flex: 1 1 auto;
    min-height: 120px; /* Increased minimum height for more space */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Show up to 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile adjustments for instructor section */
@media (max-width: 768px) {
    .sa-course-instructor {
        padding: 12px;
        gap: 12px;
    }

    .sa-course-instructor .item-avatar {
        width: 40px;
        height: 40px;
    }

    .sa-instructor-label {
        font-size: 11px;
    }

    .sa-instructor-name {
        font-size: 14px;
    }

    .sa-course-content .bb-course-excerpt {
        min-height: 100px;
        -webkit-line-clamp: 4; /* Show 4 lines on mobile */
    }
}

/* Enhanced Smooth Hover Animations for Course Cards */
.bb-course-items .bb-cover-list-item.sa-course-card-container,
.sa-course-card-container {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
}

.bb-course-items .bb-cover-list-item.sa-course-card-container:hover,
.sa-course-card-container:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(226, 184, 48, 0.15) !important;
}

/* Smooth opacity transition for gold border */
.sa-course-card-container::before {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Add subtle scale effect to course title on card hover */
.sa-course-card-container:hover .bb-course-title {
    transform: translateX(2px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-course-title {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for status badge */
.sa-course-status {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-course-card-container:hover .sa-course-status {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Smooth icon animation */
.sa-course-header-left i {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-course-card-container:hover .sa-course-header-left i {
    transform: rotate(5deg) scale(1.1);
    color: #b8941f;
}

/* Smooth instructor avatar hover */
.sa-course-instructor .item-avatar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-course-card-container:hover .sa-course-instructor .item-avatar {
    transform: scale(1.1);
    border-color: #b8941f;
    box-shadow: 0 4px 12px rgba(226, 184, 48, 0.3);
}

/* Make entire course card clickable */
.sa-course-card-container {
    cursor: pointer !important;
}

/* Ensure links inside the card are still clickable and have proper cursor */
.sa-course-card-container a {
    position: relative;
    z-index: 10;
    cursor: pointer;
}

/* Prevent text selection on card to improve click experience */
.sa-course-card-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* But allow text selection for links and text content */
.sa-course-card-container a,
.sa-course-card-container .bb-course-excerpt,
.sa-course-card-container .bb-course-title {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Add slight visual feedback when clicking */
.sa-course-card-container:active {
    transform: translateY(-6px) !important;
    transition: transform 0.1s ease !important;
}

/* Enhanced Header Layout with CPD Points */
.sa-course-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sa-cpd-points,
.sa-lesson-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
}

.sa-cpd-points i {
    font-size: 16px;
    color: #e2b830;
}

.sa-lesson-count i {
    font-size: 16px;
    color: #e2b830;
}

/* Additional Status Badge Styles */
.sa-status-ended {
    background: linear-gradient(135deg, #757575 0%, #9E9E9E 100%);
    box-shadow: 0 2px 8px rgba(117, 117, 117, 0.3);
}

.sa-status-upcoming {
    background: linear-gradient(135deg, #4A90E2 0%, #5BA3F5 100%);
    box-shadow: 0 2 8px rgba(74, 144, 226, 0.3);
}

/* Update header to handle multiple items */
.sa-course-header {
    min-height: 60px;
}

/* Mobile responsive for CPD points */
@media (max-width: 768px) {
    .sa-cpd-points,
    .sa-lesson-count {
        font-size: 12px;
    }
    
    .sa-cpd-points i,
    .sa-lesson-count i {
        font-size: 14px;
    }
    
    .sa-course-header-left {
        gap: 10px;
    }
}

/* Force 2-column grid layout for course cards - Override parent theme */
.bb-course-items,
.bb-course-items.bb-grid,
ul.bb-course-items,
ul.bb-grid-courses {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}

/* Ensure course items don't have conflicting flex or inline display */
.bb-course-items .bb-course-item-wrap,
.bb-course-items .sa-course-card-modern {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Tablet - single column */
@media (max-width: 1024px) {
    .bb-course-items,
    .bb-course-items.bb-grid,
    ul.bb-course-items,
    ul.bb-grid-courses {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* Mobile - single column */
@media (max-width: 768px) {
    .bb-course-items,
    .bb-course-items.bb-grid,
    ul.bb-course-items,
    ul.bb-grid-courses {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 15px 10px !important;
    }
}

/* Status: Ongoing (Green) */
.sa-status-ongoing {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/*--------------------------------------------------------------
Course Card - Masterclass Name, Year, and Module Number Styles
--------------------------------------------------------------*/

/* Masterclass Name */
.sa-masterclass-name {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Course Year */
.sa-course-year {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    margin-bottom: 10px;
}

/* Module Number in Title */
.bb-course-title .sa-module-number {
    color: #e2b830;
    font-weight: 700;
    margin-right: 5px;
}

/* Adjust spacing for course title when masterclass/year present */
.sa-course-content .bb-course-title {
    margin-top: 5px;
}

/*--------------------------------------------------------------
Course Card - Speakers Display
--------------------------------------------------------------*/

/* Course Speakers Section */
.sa-course-speakers {
    display: flex;
    align-items: center;
    margin: 10px 0 15px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.sa-speakers-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333;
    margin-right: 8px;
}

.sa-speakers-label i {
    margin-right: 5px;
    color: #e2b830;
}

.sa-speakers-list {
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sa-course-speakers {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sa-speakers-label {
        margin-bottom: 5px;
    }
}

/*--------------------------------------------------------------
Single Course Sidebar - Speakers Section
--------------------------------------------------------------*/

/* Speakers Section */
.bb-course-speakers {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e8e8e8;
}

.bb-course-speakers h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bb-course-speakers-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-course-speaker-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}

.bb-course-speaker-item:last-child {
    border-bottom: none;
}

.speaker-avatar {
    flex-shrink: 0;
    margin-right: 15px;
}

.speaker-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2b830;
}

.speaker-info {
    display: flex;
    flex-direction: column;
}

.speaker-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.speaker-position {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/*--------------------------------------------------------------
Single Course Sidebar - Speakers Section (Compact & Scrollable)
--------------------------------------------------------------*/

/* Speakers Section - Compact Version */
.bb-course-speakers {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
}

.bb-course-speakers h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scrollable Container - Shows ~3 speakers, rest scrollable */
.bb-course-speakers-scroll {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

/* Custom Scrollbar */
.bb-course-speakers-scroll::-webkit-scrollbar {
    width: 6px;
}

.bb-course-speakers-scroll::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

.bb-course-speakers-scroll::-webkit-scrollbar-thumb {
    background: #e2b830;
    border-radius: 3px;
}

.bb-course-speakers-scroll::-webkit-scrollbar-thumb:hover {
    background: #d4a81c;
}

.bb-course-speakers-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Compact Speaker Item - No Avatar */
.bb-course-speaker-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.bb-course-speaker-item:last-child {
    border-bottom: none;
}

.speaker-info {
    display: flex;
    flex-direction: column;
}

.speaker-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    line-height: 1.4;
}

.speaker-position {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* Update: Add back speaker avatars */
.bb-course-speaker-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.speaker-avatar {
    flex-shrink: 0;
    margin-right: 12px;
}

.speaker-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2b830;
}

/*--------------------------------------------------------------
Single Course Banner - Course Metadata Container
--------------------------------------------------------------*/

.sa-course-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sa-meta-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.sa-meta-item:hover {
    border-color: #e2b830;
    box-shadow: 0 2px 6px rgba(226, 184, 48, 0.15);
    transform: translateY(-2px);
}

.sa-meta-item i {
    font-size: 18px;
    margin-right: 8px;
    color: #e2b830;
}

.sa-meta-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Special styling for specific items */
.sa-meta-masterclass span {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sa-meta-cpd {
    background: linear-gradient(135deg, #fff8e6 0%, #ffffff 100%);
    border-color: #e2b830;
}

.sa-meta-cpd span {
    color: #d4a81c;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .sa-course-metadata {
        gap: 10px;
        padding: 15px;
    }
    
    .sa-meta-item {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
        padding: 8px 12px;
    }
    
    .sa-meta-item span {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .sa-meta-item {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/*--------------------------------------------------------------
Course Information Boxes - Single Course Sidebar
Modern info boxes matching SARSA and Masterclass widgets style
--------------------------------------------------------------*/
.bb-course-info-boxes {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bb-course-info-title {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2b830;
    position: relative;
}

.bb-course-info-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(
        90deg,
        #e2b830 0%,
        #f5d563 50%,
        #e2b830 100%
    );
    background-size: 200% 100%;
    animation: gradient-slide 3s ease-in-out infinite;
}

@keyframes gradient-slide {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.bb-course-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bb-course-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: #fafafa;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 2px solid transparent;
}

.bb-course-info-item:hover {
    background-color: #fff9ed;
    transform: translateX(3px);
    border-left-color: #e2b830;
    box-shadow: 0 2px 6px rgba(226, 184, 48, 0.1);
}

.bb-course-info-item i {
    font-size: 16px;
    color: #e2b830;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 20%,
        #f5d563 40%,
        #e2b830 60%,
        #b8941f 80%,
        #e2b830 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 12s ease-in-out infinite;
}

/* Offset animations for each icon */
.bb-course-info-item:nth-child(1) i {
    animation-delay: 0s;
}

.bb-course-info-item:nth-child(2) i {
    animation-delay: 1.5s;
}

.bb-course-info-item:nth-child(3) i {
    animation-delay: 3s;
}

.bb-course-info-item:nth-child(4) i {
    animation-delay: 4.5s;
}

.bb-course-info-item:nth-child(5) i {
    animation-delay: 6s;
}

.bb-course-info-item:nth-child(6) i {
    animation-delay: 7.5s;
}

.bb-course-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.bb-course-info-label {
    font-size: 11px;
    font-weight: 600;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bb-course-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    .bb-course-info-boxes {
        padding: 16px 14px;
    }

    .bb-course-info-title {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .bb-course-info-item {
        padding: 9px 11px;
        gap: 9px;
    }

    .bb-course-info-item i {
        font-size: 15px;
        width: 16px;
    }

    .bb-course-info-label {
        font-size: 10px;
    }

    .bb-course-info-value {
        font-size: 13px;
    }
}

/*--------------------------------------------------------------
Course Banner - Top Section Metadata Styles
--------------------------------------------------------------*/
.sa-course-masterclass {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #e2b830;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 6px 14px;
    /* background: linear-gradient(135deg, #fff8e6 0%, #ffffff 100%); */
    border: 1px solid #e2b830;
    border-radius: 6px;
}

.sa-course-year-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 50%,
        #f5d563 100%
    );
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(226, 184, 48, 0.3);
}

.bb-course-banner-inner .entry-title .sa-module-prefix {
    color: #e2b830;
    font-weight: 700;
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .sa-course-masterclass {
        font-size: 12px;
        padding: 5px 12px;
        margin-bottom: 8px;
    }

    .sa-course-year-badge {
        font-size: 13px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }
}

/*--------------------------------------------------------------
Course Offered By Banner - Simple and Minimalist
--------------------------------------------------------------*/
.sa-course-offered-by {
    padding: 20px 0;
    margin: 30px 0;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.sa-offered-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-offered-text {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sa-offered-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.sa-offered-name {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    background: linear-gradient(
        135deg,
        #b8941f 0%,
        #e2b830 50%,
        #f5d563 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: diagonal-gradient-wave 8s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .sa-course-offered-by {
        padding: 16px 0;
        margin: 20px 0;
    }

    .sa-offered-content {
        gap: 12px;
    }

    .sa-offered-text {
        font-size: 13px;
    }

    .sa-offered-logo {
        height: 32px;
    }

    .sa-offered-name {
        font-size: 16px;
    }
}

/*--------------------------------------------------------------
Compact Sidebar - General Spacing Adjustments
--------------------------------------------------------------*/
/* Pull sidebar up to align with banner */
.bb-single-course-sidebar.bb-preview-wrap {
    margin-top: -250px;
    position: relative;
}

/* Make Course Volume section more compact */
.bb-single-course-sidebar .bb-course-volume {
    padding: 0px 16px;
    margin-bottom: 0px;
    border-radius: 10px;
}

.bb-single-course-sidebar .bb-course-volume h4 {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.bb-single-course-sidebar .bb-course-volume-list {
    gap: 8px;
}

.bb-single-course-sidebar .bb-course-volume-list li {
    padding: 8px 10px;
    font-size: 14px;
}

/* Make Speakers section more compact */
.bb-single-course-sidebar .bb-course-speakers {
    padding: 18px 16px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.bb-single-course-sidebar .bb-course-speakers h4 {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.bb-single-course-sidebar .bb-course-speakers-scroll {
    max-height: 200px;
}

.bb-single-course-sidebar .bb-course-speaker-item {
    padding: 10px 0;
    gap: 10px;
}

.bb-single-course-sidebar .speaker-avatar img {
    width: 40px;
    height: 40px;
}

.bb-single-course-sidebar .speaker-name {
    font-size: 14px;
}

.bb-single-course-sidebar .speaker-position {
    font-size: 12px;
}

/*--------------------------------------------------------------
Course List Page - Hide Filters/Sorting Header
--------------------------------------------------------------*/
.ld-secondary-header {
    display: none !important;
}

/*--------------------------------------------------------------
Single Course Page - Hide Course Volume and Points
--------------------------------------------------------------*/
.bb-single-course-sidebar .bb-course-volume {
    display: none !important;
}

.bb-course-points {
    display: none !important;
}

/* Reduce spacing in enrollment widget */
.bb-single-course-sidebar .bb-enroll-widget {
    padding: 18px 16px;
}

.bb-single-course-sidebar .bb-course-member-wrap {
    margin-bottom: 12px;
}

.bb-single-course-sidebar .bb-course-status-wrap {
    margin-bottom: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

.bb-single-course-sidebar .bb-course-status-content {
    margin: 0;
}

.bb-single-course-sidebar .bb-button-wrap {
    margin-bottom: 0px;
    margin-top: 0;
}

.bb-single-course-sidebar .learndash_join_button {
    margin: 0;
}

.bb-single-course-sidebar .bb-course-type {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ===== Course Archive Page Pagination Styling ===== */
.bb-lms-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    margin: 40px auto !important;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}

.bb-lms-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0 5px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.bb-lms-pagination .page-numbers:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bb-lms-pagination .page-numbers.current {
    background-color: #e2b830;
    color: #fff;
    border-color: #e2b830;
    pointer-events: none;
}

.bb-lms-pagination .page-numbers.prev,
.bb-lms-pagination .page-numbers.next {
    font-weight: 700;
    min-width: 80px;
}

.bb-lms-pagination .page-numbers.dots {
    border: none;
    background: none;
    pointer-events: none;
}

.bb-lms-pagination .page-numbers.dots:hover {
    background: none;
    transform: none;
    box-shadow: none;
}

/* ===== Course Archive Sidebar Layout ===== */
.bb-courses-with-sidebar {
    max-width: 100%;
}

.bb-courses-sidebar-container {
    display: flex;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.bb-courses-sidebar {
    flex: 0 0 300px;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.bb-courses-sidebar-inner {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.bb-sidebar-section {
    padding: 25px;
    border-bottom: 1px solid #e8e8e8;
}

.bb-sidebar-section:last-child {
    border-bottom: none;
}

.bb-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #333;
}

/* Search in Sidebar */
.bb-sidebar-search .bs-search-form {
    position: relative;
}

.bb-sidebar-search .bs-search-form input[type="text"] {
    width: 100%;
    /* border: 1px solid #e0e0e0; */
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
}
.bs-dir-search {
    float: none;
    margin: 0;
}

.bb-courses-header {
    display: none;
}

.bb-sidebar-search .bs-search-form input[type="text"]:focus {
    outline: none;
    border-color: #e2b830;
    box-shadow: 0 0 0 3px rgba(226, 184, 48, 0.1);
}

/* Course Tags Filter */
.bb-course-tags-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bb-tag-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    text-decoration: none;
    color: #555;
    background: #f8f8f8;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.bb-tag-filter-item:hover {
    background: #f0f0f0;
    color: #333;
    transform: translateX(4px);
}

.bb-tag-filter-item.active {
    background: #e2b830;
    color: #fff;
    font-weight: 600;
}

.bb-tag-filter-item .tag-count {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.8;
}

/* Main Content Area */
.bb-courses-main-content {
    flex: 1;
    min-width: 0;
}

/* Hide original search from header */
.bb-courses-header #courses-dir-search {
    display: none;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .bb-courses-sidebar-container {
        flex-direction: column;
    }

    .bb-courses-sidebar {
        position: relative;
        top: 0;
        flex: 0 0 auto;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .bb-courses-sidebar-container {
        padding: 0 15px;
    }

    .bb-sidebar-section {
        padding: 20px;
    }
}

.bb-single-course-sidebar .btn-join  {
    margin-top: 0px;
    margin-bottom: 0;
}
/* Increase font size for LearnDash enrollment button */
.ld-enrollment__join-button.btn-join {
    font-size: 18px !important;
}

/* Show Sign In/Sign Up buttons on mobile using :after pseudo-element */
@media (max-width: 767px) {
    .bb-mobile-header .header-aside:after {
        content: '';
        display: flex;
        gap: 5px;
    }

    .bb-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Make the desktop header buttons visible on mobile */
    .site-header-container #header-aside {
        display: flex !important;
    }

    .site-header-container .bb-header-buttons {
        display: flex !important;
        gap: 5px;
    }

    .site-header-container .bb-header-buttons a {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* ============================================================================
   Hide icons from mobile menu
   ============================================================================ */
.bb-mobile-panel-inner .bb-icon-file,
.mobile-menu .bb-icon-file {
    display: none !important;
}

.bb-mobile-panel-inner .menu-item a,
.mobile-menu .menu-item a {
    padding-left: 15px !important;
}