@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
    /*line-height: 1.6;*/
    background-color: var(--background-black);
}

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 50%, var(--background-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--primary-color-30);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: loadingSpinner 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes loadingSpinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-screen .loading-text {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    opacity: 0.8;
    animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* Global Typography */
h3 {
    font-size: 25px;
}

/* Skip Links CSS - Temporarily commented out due to Safari display issues
.skip-links {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--background-dark);
    color: var(--text-white);
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.skip-link:focus {
    position: fixed;
    left: 10px;
    top: 20px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    background: var(--background-medium);
    z-index: 10001;
    transition: none;
}

.skip-link:hover:focus {
    background: var(--background-hover);
    border-color: var(--primary-color);
}

.skip-link:nth-child(1):focus { top: 20px; }
.skip-link:nth-child(2):focus { top: 70px; }
.skip-link:nth-child(3):focus { top: 120px; }
.skip-link:nth-child(4):focus { top: 170px; }
.skip-link:nth-child(5):focus { top: 220px; }
.skip-link:nth-child(6):focus { top: 270px; }
.skip-link:nth-child(7):focus { top: 320px; }

@media (max-width: 768px) {
    .skip-link:focus {
        left: 5px;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .skip-link:nth-child(1):focus { top: 15px; }
    .skip-link:nth-child(2):focus { top: 55px; }
    .skip-link:nth-child(3):focus { top: 95px; }
    .skip-link:nth-child(4):focus { top: 125px; }
    .skip-link:nth-child(5):focus { top: 165px; }
    .skip-link:nth-child(6):focus { top: 205px; }
    .skip-link:nth-child(7):focus { top: 245px; }
}
End of commented skip links CSS */

/* Keyboard Navigation - Enhanced Span Dots */
/* Make spans keyboard accessible */
.hero-dot,
.dot,
.events-dot,
.videos-dot,
.articles-dot {
    cursor: pointer;
    outline: none;
}

/* Enhanced focus styles for keyboard navigation */
.hero-dot:focus,
.dot:focus,
.events-dot:focus,
.videos-dot:focus,
.articles-dot:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--primary-color-60);
}

/* Active state for better feedback */
.hero-dot:active,
.dot:active,
.events-dot:active,
.videos-dot:active,
.articles-dot:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

/* Old button styles removed - using pseudo-elements now */

/* All old button styles removed - using pseudo-elements for visual dots */

/* Preserve animations for button dots */
button.dot,
button.events-dot,
button.videos-dot,
button.articles-dot {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Old button focus styles removed */

/* Enhanced focus styles for all interactive elements */
button:focus,
a:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Ensure carousel buttons have proper focus styles */
.carousel-btn:focus,
.events-btn:focus,
.videos-btn:focus,
.articles-btn:focus,
.hero-control-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}



/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1003;
    position: relative;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.mobile-nav-links li {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-links a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 30px;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: var(--primary-color-10);
    border-color: var(--primary-color-30);
    transform: translateX(10px);
}

.mobile-nav-links a:hover::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-15);
    border-color: var(--primary-color-50);
}

.mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a:active {
    transform: translateX(10px) scale(0.98);
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile navigation close button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1004;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1003;
    position: relative;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.mobile-nav-links li {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-links a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 30px;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: var(--primary-color-10);
    border-color: var(--primary-color-30);
    transform: translateX(10px);
}

.mobile-nav-links a:hover::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-15);
    border-color: var(--primary-color-50);
}

.mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a:active {
    transform: translateX(10px) scale(0.98);
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile navigation close button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1004;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Header scrolled state */
.header.scrolled {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav-links a.active::after {
    width: 100%;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1003;
    position: relative;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.mobile-nav-links li {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-links a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 30px;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: var(--primary-color-10);
    border-color: var(--primary-color-30);
    transform: translateX(10px);
}

.mobile-nav-links a:hover::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-15);
    border-color: var(--primary-color-50);
}

.mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a:active {
    transform: translateX(10px) scale(0.98);
}

/* Mobile menu accessibility and visual enhancements */
.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile navigation close button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1003;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth header background transition */
.header.scrolled {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Enhanced mobile navigation animations */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-nav-overlay.active .mobile-nav-links li {
    animation: slideInFromTop 0.4s ease forwards;
}

/* Mobile navigation ripple effect */
.mobile-nav-links a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--primary-color-30);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    pointer-events: none;
}

.mobile-nav-links a:active::after {
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: var(--background-black);
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: var(--text-white);
    max-width: 1000px;
    padding: 80px 20px 0 20px;
}

.hero h1,
.hero .hero-h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.25rem, 12vw, 78px);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cta-button {
    background: black;
    color: var(--text-white);
    border: 4px solid var(--primary-color);
    padding: 9px 32px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: white;
    color: black;
}

/* Generic button class for custom HTML content */
.btn {
    background: black;
    color: var(--text-white);
    border: 4px solid var(--primary-color);
    padding: 9px 32px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn:hover {
    background: white;
    color: black;
}

/* Hero Dots Navigation */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 4;
}

.hero-dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
}

.hero-dot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    z-index: -1;
}

.hero-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6), 0 0 30px rgba(93, 167, 231, 0.3);
    border-color: rgba(93, 167, 231, 0.3);
}

.hero-dot.active::before {
    background: var(--primary-color-20);
    transform: scale(1.2);
}

.hero-dot:hover {
    background: var(--white-overlay-80);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--white-overlay-40);
    border-color: var(--white-overlay-20);
}

.hero-dot:hover::before {
    background: var(--white-overlay-10);
    transform: scale(1.1);
}

/* Video Loading States */
.hero-slide.video-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 5;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
    transition: opacity 0.3s ease;
}

.video-play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--white-overlay-90);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px var(--background-overlay-30);
}

.video-play-btn:hover {
    background: var(--white-overlay-100);
    transform: scale(1.1);
    box-shadow: 0 6px 25px var(--background-overlay-40);
}

.play-icon {
    font-size: 24px;
    margin-left: 4px;
    /* Optical alignment */
}

.video-error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5;
}

.error-content {
    text-align: center;
    color: var(--text-white);
    padding: 20px;
}

.error-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
}

.error-content p {
    margin-bottom: 20px;
    font-size: 16px;
}

.retry-btn {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.retry-btn:hover {
    background: #4A96D6;
}

/* Video Quality Indicators */
.video-quality-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 4;
    backdrop-filter: blur(5px);
}

/* Hero Interactive Controls */
.hero-controls {
    position: absolute;
    bottom: 30px;
    left: 30px;
    display: flex;
    gap: 15px;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero:hover .hero-controls,
.hero-controls:hover {
    opacity: 1;
    visibility: visible;
}

.hero-control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
}

.hero-control-btn:hover {
    background: var(--primary-color-30);
    border: 1px solid var(--primary-color-50);
    transform: scale(1.1);
}

.hero-control-btn:active {
    transform: scale(0.95);
}

/* Ripple effect on click */
.hero-control-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.hero-control-btn:active::after {
    transform: scale(1.5);
    opacity: 0;
}

/* About Section */
.about {
    position: relative;
    display: flex;
    align-items: center;
    /* Background is set dynamically via inline styles in about.php component */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.about-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: end;
    height: 100%;
}

.about-image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.person-image {
    width: 100%;
    max-width: 600px;
    height: 667px;
    object-fit: cover;
    object-position: bottom;
}

.about-text {
    color: var(--text-white);
    background: rgba(0, 0, 0, 0.6);
    padding: 80px 40px 40px 40px;
    border-radius: 15px;
    align-self: center;
}

.about-text h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-white);
}

.about-text .roles {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.about-text p {
    font-size: 15px;
    /*line-height: 1.6;*/
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}



/* Books Section */
.books {
    background: var(--background-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 0 40px 0;
}

.books-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 60%;
    padding: 0 clamp(40px, 8vw, 200px);
    gap: 40px;
    /* Gap between book image and text */
}

.main-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
}

.book-carousel {
    position: relative;
    width: 300px;
    height: 400px;
    margin-bottom: 20px;
}

.book-image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.book-image.active {
    opacity: 1;
}

.book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.carousel-dots {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(51, 51, 51, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
}

.dot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    z-index: -1;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6), 0 0 30px rgba(93, 167, 231, 0.3);
    border-color: rgba(93, 167, 231, 0.3);
}

.dot.active::before {
    background: rgba(93, 167, 231, 0.2);
    transform: scale(1.2);
}

.dot:hover {
    background: rgba(93, 167, 231, 0.8);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(93, 167, 231, 0.4);
    border-color: rgba(93, 167, 231, 0.2);
}

.dot:hover::before {
    background: rgba(93, 167, 231, 0.1);
    transform: scale(1.1);
}

.book-text h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 30px;
    color: var(--text-dark);
}

.book-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-muted);
}

.book-text .book-title {
    font-weight: 700;
    color: var(--primary-color);
}

.book-availability {
    margin-top: 30px;
}

.availability-text {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.marketplace-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.marketplace-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.marketplace-link:hover {
    transform: translateY(-3px);
}

.marketplace-link img {
    width: 120px;
    border-radius: 5px;
}

.recommended-books {
    padding: 50px 40px 0 40px;
    margin-bottom: 0;
}

.recommended-books h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--text-muted);
    text-align: center;
}

.books-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.books-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: justify-content 0.3s ease, overflow-x 0.3s ease;
    flex: 1;
    min-width: 0;
}

.books-carousel::-webkit-scrollbar {
    display: none;
}

.book-thumbnail {
    flex: 0 0 auto;
    width: 75px;
    height: 100px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.book-thumbnail:hover {
    transform: scale(1.08) translateY(-5px);
    z-index: 10;
}

.book-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.book-thumbnail:hover img {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* Clickable book styles */
.book-thumbnail.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.book-thumbnail.clickable:hover {
    transform: scale(1.12) translateY(-8px);
}

.book-thumbnail.clickable:hover img {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid #007bff;
}

.book-thumbnail.clickable:active {
    transform: scale(1.05) translateY(-3px);
    transition: all 0.1s ease;
}

.book-tooltip {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-white);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 20;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 1.3;
    min-width: 80px;
    max-width: 250px;
    width: max-content;
}

.book-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.book-thumbnail:hover .book-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Tooltip positioning adjustments for edge cases */
.books-carousel:hover {
    overflow: visible;
}

.recommended-books:hover {
    overflow: visible;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease;
}

.books-carousel-container:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: -20px;
}

.next-btn {
    right: -20px;
}

/* Speaking Section */
.speaking {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    /* Background image now controlled by admin panel */
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

.speaking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.speaking-container {
    position: relative;
    z-index: 2;
    color: var(--text-white);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 100px 0 0 0;
}

.speaking-header {
    flex: 0 0 auto;
}



.speaking h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.speaking-subtitle {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.speaking-subtitle .contact-text {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.speaking-subtitle .contact-text:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.speaking-subtitle .contact-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: white;
    transition: width 0.3s ease;
}

.speaking-subtitle .contact-text:hover::after {
    width: 100%;
}

/* Events Carousel */
.events-section {
    width: 100%;
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(0, 0, 0, 1) 100%);
    padding: 40px;
    margin-top: auto;
}

.events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.events-title-section {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.events-header h3 {
    font-size: 25px;
    font-weight: 600;
    color: var(--text-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.view-all-events {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.view-all-events:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.view-all-events::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: white;
    transition: width 0.3s ease;
}

.view-all-events:hover::after {
    width: 100%;
}

.events-nav {
    display: flex;
    gap: 10px;
}

.events-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.events-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.events-carousel-wrapper {
    overflow: hidden;
    margin-bottom: 30px;
    width: 100%;
    position: relative;
}

.events-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    padding: 10px 0;
    width: calc(300px * 15);
    /* Total width for all 15 events */
    /* Prevent manual scrolling on mobile */
    -webkit-overflow-scrolling: auto;
    scroll-behavior: auto;
}

.event-thumbnail {
    flex: 0 0 auto;
    width: 280px;
    height: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.event-thumbnail:hover {
    transform: translateY(-5px);
    border: 2px solid var(--primary-color);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.event-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 15px 10px 15px;
    color: var(--text-white);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.event-thumbnail:hover .event-overlay {
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.event-date {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
}

.event-thumbnail:hover .event-date {
    font-size: 16px;
    margin-bottom: 15px;
    opacity: 1;
}

.event-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: all 0.4s ease;
}

.event-thumbnail:hover .event-name {
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.4;
}

.event-details-btn {
    background: transparent;
    color: var(--text-white);
    border: 2px solid white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
    align-self: center;
    display: none;
}

.event-thumbnail:hover .event-details-btn {
    display: inline-block;
    animation: slideUpFade 0.3s ease forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-details-btn:hover {
    background: white;
    color: black;
}

/* Upcoming Label */
.upcoming-label {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: var(--text-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }
}

.events-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.events-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.events-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--primary-color-50);
}

/* Videos Section */
.videos {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: var(--background-dark);
}

.videos-container {
    position: relative;
    z-index: 2;
    color: var(--text-white);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 100px 0 0 0;
}

.videos-header {
    flex: 0 0 auto;
}

.videos h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.videos-subtitle {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

/* Videos Carousel */
.videos-section {
    width: 100%;
    padding: 40px;
    margin-top: auto;
}

/* Video Loading States */
.video-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.video-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-color-30);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: loadingSpinner 1s linear infinite;
    margin-bottom: 20px;
}

.video-loading p {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

/* Video Error States */
.video-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.video-error .error-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.video-error .error-message h3 {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.video-error .error-message p {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 20px;
}

.video-error .retry-btn {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-error .retry-btn:hover {
    background: #4a96d6;
    transform: translateY(-2px);
}

.videos-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.videos-title-section {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.videos-carousel-header h3 {
    font-size: 25px;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
}

.view-all-videos {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.view-all-videos:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.view-all-videos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: white;
    transition: width 0.3s ease;
}

.view-all-videos:hover::after {
    width: 100%;
}

.videos-nav {
    display: flex;
    gap: 10px;
}

.videos-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.videos-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.videos-carousel-wrapper {
    overflow: hidden;
    margin-bottom: 30px;
    width: 100%;
    position: relative;
}

.videos-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    padding: 10px 0;
    width: calc(300px * 12);
    /* Total width for all 12 videos */
    /* Prevent manual scrolling on mobile */
    -webkit-overflow-scrolling: auto;
    scroll-behavior: auto;
}

.video-thumbnail {
    flex: 0 0 auto;
    width: 280px;
    height: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.video-thumbnail:hover {
    transform: translateY(-5px);
    border: 2px solid var(--primary-color);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video Item Styles (for dynamically loaded YouTube videos) */
.video-item {
    flex: 0 0 auto;
    width: 280px;
    height: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.video-item:hover {
    transform: translateY(-5px);
    border: 2px solid var(--primary-color);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.video-item .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: static;
}

.video-item .video-thumbnail:hover {
    transform: none;
    border: none;
    box-shadow: none;
}

.video-item .video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: var(--text-white);
    padding: 20px;
    transition: all 0.3s ease;
}

.video-item:hover .video-overlay {
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.video-item .video-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.video-item:hover .video-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-white);
}

.video-item .video-duration {
    font-size: 12px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: var(--text-white);
}

.video-item:hover .video-duration {
    font-size: 14px;
    margin-bottom: 15px;
    position: static;
    background: transparent;
    padding: 0;
}

.video-item .video-description {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 15px;
    display: none;
    line-height: 1.4;
}

.video-item:hover .video-description {
    display: block;
    font-size: 14px;
    margin-bottom: 20px;
}

.video-item .video-play-btn {
    background: var(--accent-color) !important;
    color: var(--text-white) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: none;
    transition: all 0.3s ease;
    text-align: center;
}

.video-item:hover .video-play-btn {
    display: inline-block !important;
    animation: slideUpFade 0.3s ease forwards;
}

.video-item .video-play-btn:hover {
    background: var(--accent-hover) !important;
    transform: scale(1.05);
}

/* Video Placeholder Styles */
.video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.video-placeholder .placeholder-icon {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.video-placeholder .placeholder-text {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 15px 10px 15px;
    color: var(--text-white);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

.video-thumbnail:hover .video-overlay {
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.video-duration {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    align-self: flex-start;
    color: var(--text-white);
    z-index: 3;
    position: relative;
}

.video-thumbnail:hover .video-duration {
    font-size: 14px;
    margin-bottom: 15px;
    opacity: 1;
    align-self: center;
}

.video-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: all 0.4s ease;
    color: var(--text-white);
    z-index: 3;
    position: relative;
}

.video-thumbnail:hover .video-title {
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.4;
}

.video-play-btn {
    background: var(--accent-color) !important;
    color: var(--text-white) !important;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-top: 10px;
    align-self: center;
    display: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
    width: auto;
    height: auto;
    z-index: 4;
    position: relative;
}

.video-thumbnail:hover .video-play-btn {
    display: inline-block !important;
    animation: slideUpFade 0.3s ease forwards;
    opacity: 1;
    visibility: visible;
}

.video-play-btn:hover {
    background: var(--accent-hover) !important;
    color: var(--text-white) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 102, 102, 0.4);
    text-decoration: none !important;
}

.videos-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.videos-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.videos-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--primary-color-50);
}

/* Articles Section */
.articles {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: var(--background-light);
}

.articles-container {
    position: relative;
    z-index: 2;
    color: var(--text-dark);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 100px 0 0 0;
}

.articles-header {
    flex: 0 0 auto;
}

.articles h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--text-dark);
}

.articles-subtitle {
    font-weight: 400;
    color: var(--text-muted);
}

/* Articles Carousel */
.articles-section {
    width: 100%;
    padding: 40px;
    margin-top: auto;
}

.articles-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.articles-title-section {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.articles-carousel-header h3 {
    font-size: 25px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.view-all-articles {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.view-all-articles:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.view-all-articles::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--border-dark);
    transition: width 0.3s ease;
}

.view-all-articles:hover::after {
    width: 100%;
}

.articles-nav {
    display: flex;
    gap: 10px;
}

.articles-btn {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-white);
    border: 2px solid rgba(0, 0, 0, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.articles-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(93, 167, 231, 0.4);
}

.articles-carousel-wrapper {
    overflow: hidden;
    margin-bottom: 30px;
    width: 100%;
    position: relative;
}

.articles-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    padding: 10px 0;
    width: calc(300px * 12);
    /* Total width for all 12 articles */
    /* Prevent manual scrolling on mobile */
    -webkit-overflow-scrolling: auto;
    scroll-behavior: auto;
}

.article-thumbnail {
    flex: 0 0 auto;
    width: 280px;
    height: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    background: white;
    border: 2px solid rgba(93, 167, 231, 0.3);
}

.article-thumbnail:hover {
    transform: translateY(-5px);
    border: 2px solid var(--primary-color);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 15px 10px 15px;
    color: var(--text-dark);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.article-thumbnail:hover .article-overlay {
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.article-date {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
    color: var(--text-muted);
}

.article-thumbnail:hover .article-date {
    font-size: 14px;
    margin-bottom: 15px;
    opacity: 1;
}

.article-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.4s ease;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.article-thumbnail:hover .article-title {
    font-size: 15px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.article-read-btn {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
    align-self: center;
    display: none;
}

.article-thumbnail:hover .article-read-btn {
    display: inline-block;
    animation: slideUpFade 0.3s ease forwards;
}

.article-read-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.articles-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.articles-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(51, 51, 51, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.articles-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--primary-color-50);
}

/* Contact Section */
.contact {
    position: relative;
    background: var(--background-black);
    display: flex;
    align-items: center;
    padding: 100px 0;
    /* Background can be customized via inline styles if needed */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.contact-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.contact-content {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h2 {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.contact-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.contact-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Contact Form */
.contact-form-section {
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 90px; /* Reserve space for error messages */
}

.form-group:has(textarea) {
    min-height: 180px; /* More space for textarea fields */
}

.form-group label {
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px var(--primary-color-20);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Error message styling */
.field-error {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 5px;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    animation: slideDownError 0.2s ease-out;
}

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

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* Form-level message styling */
.form-message {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: none;
    animation: slideDownError 0.3s ease-out;
}

.form-message.success {
    background: rgba(46, 213, 115, 0.2);
    border: 1px solid rgba(46, 213, 115, 0.5);
    color: #2ed573;
}

.form-message.error {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.5);
    color: #ff6b6b;
}

.form-message.info {
    background: rgba(93, 167, 231, 0.2);
    border: 1px solid rgba(93, 167, 231, 0.5);
    color: #5da7e7;
}

/* Character count styling */
.character-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    margin-top: 5px;
}

.character-count.warning {
    color: #ffa502;
    font-weight: 600;
}

/* Loading state for submit button */
.submit-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-btn.loading .btn-icon {
    animation: pulseIcon 1s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.submit-btn {
    background: black;
    color: var(--text-white);
    border: 4px solid var(--primary-color);
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.submit-btn:hover {
    background: white;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--primary-color-30);
}

.btn-icon {
    transition: transform 0.3s ease;
}

.submit-btn:hover .btn-icon {
    transform: translateX(5px);
}

/* Contact Info */
.contact-info-section {
    padding: 20px 0;
}

.contact-info h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
}

.contact-info>p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 40px;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-method:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    border-color: var(--primary-color-30);
}

.method-icon {
    font-size: 24px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 12px;
    color: var(--text-white);
}

.method-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 5px;
}

.method-details p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px var(--primary-color-40);
    background: white;
    color: var(--primary-color);
}

/* YouTube Video Loading */
.video-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    color: var(--text-white);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.video-loading p {
    font-size: 16px;
    opacity: 0.8;
}

/* YouTube Video Thumbnail Enhancements */
.youtube-video-thumbnail {
    position: relative;
}

.youtube-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-white);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-thumbnail:hover .youtube-play-icon {
    opacity: 1;
}

.youtube-play-icon::before {
    content: '▶';
    margin-left: 3px;
}

/* Responsive Design */

/* Tablet Styles */
@media (max-width: 1024px) {

    /* Fix iPad viewport height issues */
    .hero {
        height: 100vh;
        height: 100dvh;
        /* Dynamic viewport height for modern browsers */
        min-height: -webkit-fill-available;
        /* Safari fallback */
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        font-size: 15px;
    }

    /* About Section */
    .about-container {
        grid-template-columns: 50% 50%;
        padding: 0 40px;
    }

    .person-image {
        max-width: 500px;
        height: 500px;
    }

    .about-text {
        padding: 30px;
    }

    .about-text h2 {
        font-size: 32px;
    }

    /* Books Section */
    .books-container {
        padding: 0 40px;
        gap: 30px;
        /* Maintain 30px gap */
    }

    .book-carousel {
        width: 250px;
        height: 350px;
    }

    .book-text {
        padding-left: 0;
    }

    .book-text h2 {
        font-size: 32px;
    }

    .marketplace-icons {
        gap: 15px;
    }

    .marketplace-link img {
        width: 140px;
    }
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1003;
    transition: transform 0.3s ease;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text-white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
}

.mobile-nav-links li {
    margin: 0 0 30px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s ease;
}

.mobile-nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 28px;
    font-weight: 500;
    display: block;
    padding: 15px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.mobile-nav-links a:hover::before {
    left: 100%;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-10);
}

/* Mobile Menu Active States */
.mobile-menu-active .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu-active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation for menu items */
.mobile-menu-active .mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-menu-active .mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

/* Hamburger Animation */
.mobile-menu-active .mobile-menu-toggle {
    transform: rotate(180deg);
}

.mobile-menu-active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.mobile-menu-active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Prevent body scroll when menu is open */
.mobile-menu-active {
    overflow: hidden;
}

/* Focus styles for accessibility */
.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth header background on scroll */
.header.scrolled {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

/* Logo hover effect */
.logo {
    transition: color 0.3s ease;
    cursor: pointer;
}

.logo:hover {
    color: var(--primary-color);
}

/* iPad Specific Fixes */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Fix Safari viewport issues on iPad */
    html,
    body {
        height: 100%;
        overflow-x: hidden;
    }

    .hero {
        height: 100vh;
        height: 100dvh;
        min-height: -webkit-fill-available;
    }

    /* Prevent sections from being too tall */
    .about,
    .books,
    .speaking,
    .videos,
    .articles {
        min-height: auto;
    }
}

/* Desktop Styles - Ensure desktop nav shows and mobile menu is hidden */
@media (min-width: 1025px) {
    .nav-links {
        display: flex !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Medium Tablet Styles */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Contact Section Tablet */
    .contact-container {
        padding: 0 30px;
    }

    .contact-content {
        padding: 50px 40px;
    }

    .contact-main {
        gap: 50px;
    }

    .contact-header h2 {
        font-size: 40px;
    }

    .contact-subtitle {
        font-size: 18px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Header Mobile Fix */
    .header.scrolled {
        background: #000000 !important;
        backdrop-filter: none !important;
        opacity: 0.95 !important;
        z-index: 1001 !important;
    }

    /* Responsive Section Heights - Scale down to 70% on tablet */
    .speaking[style*="height"],
    .videos[style*="height"],
    .articles[style*="height"],
    .about[style*="height"],
    .books[style*="height"],
    .contact[style*="height"] {
        height: auto !important;
        min-height: 70vh !important;
    }

    /* Ensure sections with specific pixel heights scale appropriately */
    .speaking,
    .videos,
    .articles,
    .about,
    .books,
    .contact {
        min-height: 500px !important;
    }

    /* Hero Typography - Responsive for Tablet */
    .hero-content {
        padding: 60px 20px 0 20px;
        max-width: 90%;
    }

    .hero h1,
    .hero .hero-h1,
    .hero .hero-title {
        font-size: clamp(2rem, 7.5vw, 52px) !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero p,
    .hero .hero-subtitle {
        font-size: clamp(1.05rem, 3.5vw, 1.2rem) !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .cta-button,
    .btn {
        padding: 9px 26px !important;
        font-size: 17px !important;
    }

    /* Make hero controls always visible on mobile (no hover state) */
    .hero-controls {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hero Controls Mobile - Center aligned above dots */
    .hero-controls {
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        justify-content: center;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-control-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .hero-control-btn span {
        font-size: 16px;
    }

    /* Ensure dots are properly spaced below controls */
    .hero-dots {
        bottom: 40px;
    }

    /* About Section Mobile */
    .about {
        height: auto;
        min-height: 80vh;
        padding: 100px 0;
    }

    .about-container {
        grid-template-columns: 1fr;
        align-items: center;
        padding: 0 20px;
        gap: 30px;
    }

    .about-image {
        order: 1;
        height: auto;
    }

    .person-image {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        border: 4px solid var(--primary-color);
        box-shadow: 0 8px 25px var(--primary-color-30);
    }

    .about-text {
        order: 2;
        text-align: center;
        padding: 20px;
        margin: 0 auto;
        max-width: 500px;
    }

    .about-text h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .about-text .roles {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .about-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: left;
    }



    /* Speaking Section Mobile */
    .speaking {
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    .speaking::before {
        background: rgba(0, 0, 0, 0.7);
    }

    .speaking h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }



    .speaking-container {
        padding: 80px 20px 21px 20px;
    }

    .events-section {
        padding: 0;
        margin-top: auto;
    }

    .view-all-events-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 12px 32px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 30px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-events-mobile:hover {
        background: white;
        color: black;
    }

    .events-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    .events-header h3 {
        font-size: 24px;
        margin-top: 35px;
    }

    .events-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-events {
        display: none;
    }

    .events-carousel-wrapper {
        padding: 0 20px;
        overflow: visible;
        height: auto;
    }

    .events-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .event-thumbnail {
        width: 100%;
        height: 220px;
    }

    .upcoming-label {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Videos Section Mobile */
    .videos h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }



    .videos-container {
        padding: 80px 20px 21px 20px;
    }

    .videos-section {
        padding: 0;
    }

    .videos-carousel-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .videos-carousel-header h3 {
        font-size: 25px;
        margin-top: 35px;
    }

    .videos-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-videos {
        display: none;
    }

    .videos-carousel-wrapper {
        padding: 0 20px;
        overflow: visible;
        height: auto;
    }

    .videos-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .video-thumbnail {
        width: 100%;
        height: 220px;
    }

    .view-all-videos-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 12px 32px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 30px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-videos-mobile:hover {
        background: white;
        color: black;
    }

    /* Articles Section Mobile */
    .articles h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }



    .articles-container {
        padding: 80px 20px 21px 20px;
    }

    .articles-section {
        padding: 0;
    }

    .articles-carousel-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .articles-carousel-header h3 {
        font-size: 25px;
        margin-top: 35px;
    }

    .articles-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-articles {
        display: none;
    }

    .articles-carousel-wrapper {
        padding: 0 20px;
        overflow: visible;
        height: auto;
    }

    .articles-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .article-thumbnail {
        width: 100%;
        height: 220px;
    }

    .view-all-articles-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 12px 32px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 30px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-articles-mobile:hover {
        background: white;
        color: black;
    }

    /* Books Section Mobile */
    .books {
        height: auto;
        min-height: 80vh;
        padding: 100px 0;
    }

    .books-container {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0 20px;
        gap: 30px;
        /* Maintain 30px gap on mobile */
    }

    .main-book {
        order: 1;
    }

    .book-carousel {
        width: 250px;
        height: 350px;
        margin: 0 auto 30px auto;
    }

    .carousel-dots {
        margin-top: 25px;
    }

    .book-text {
        order: 2;
        padding-left: 0;
        text-align: center;
        max-width: 500px;
        margin: 0 auto;
    }

    .book-text h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .book-text p {
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }

    .book-availability {
        margin-top: 20px;
    }

    .availability-text {
        font-size: 16px;
        text-align: center;
    }

    .marketplace-icons {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .marketplace-link img {
        width: 140px;
    }

    /* Recommended Books Mobile */
    .recommended-books {
        order: 3;
    }

    .recommended-books h3 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 15px;
        color: var(--text-muted);
    }

    .book-thumbnail {
        width: 70px;
        height: 95px;
    }

    .books-carousel {
        gap: 15px;
    }

    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .prev-btn {
        left: -15px;
    }

    .next-btn {
        right: -15px;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {

    /* Responsive Section Heights - Scale down to 50% on mobile phones */
    .speaking[style*="height"],
    .videos[style*="height"],
    .articles[style*="height"],
    .about[style*="height"],
    .books[style*="height"],
    .contact[style*="height"] {
        height: auto !important;
        min-height: 50vh !important;
    }

    /* Ensure sections with specific pixel heights scale appropriately */
    .speaking,
    .videos,
    .articles,
    .about,
    .books,
    .contact {
        min-height: 400px !important;
    }

    /* Hero Typography - Optimized for small mobile */
    .hero-content {
        padding: 40px 15px 0 15px !important;
        max-width: 95%;
    }

    .hero h1,
    .hero .hero-h1,
    .hero .hero-title {
        font-size: clamp(1.75rem, 9vw, 42px) !important;
        margin-bottom: 12px !important;
        line-height: 1.15 !important;
    }

    .hero p,
    .hero .hero-subtitle {
        font-size: clamp(1rem, 4.5vw, 1.15rem) !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }

    .cta-button,
    .btn {
        padding: 8px 22px !important;
        font-size: 15px !important;
    }

    /* Hero Controls Small Mobile */
    .hero-controls {
        bottom: 90px;
        gap: 8px;
    }

    .hero-control-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .hero-control-btn span {
        font-size: 14px;
    }

    /* Adjust dots for small mobile */
    .hero-dots {
        bottom: 30px;
    }

    /* About Section Small Mobile */
    .about-text h2 {
        font-size: 32px;
    }

    .about-text .roles {
        font-size: 14px;
    }

    .about-text p {
        font-size: 13px;
        text-align: left;
    }

    .person-image {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        border: 3px solid var(--primary-color);
        box-shadow: 0 6px 20px var(--primary-color-30);
    }

    /* Speaking Section Small Mobile */
    .speaking {
        background-position: center center;
    }

    .speaking::before {
        background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.8) 100%);
    }

    .speaking h2 {
        font-size: 32px;
    }

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

    .events-section {
        padding: 0;
    }

    .events-header {
        margin-bottom: 15px;
    }

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

    .events-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-events {
        display: none;
    }

    .view-all-events-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 10px 28px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 25px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-events-mobile:hover {
        background: white;
        color: black;
    }

    .events-carousel-wrapper {
        padding: 0 15px;
        overflow: visible;
        height: auto;
    }

    .events-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .event-thumbnail {
        width: 100%;
        height: 200px;
    }

    .upcoming-label {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .events-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    /* Videos Section Small Mobile */
    .videos h2 {
        font-size: 32px;
    }

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

    .videos-section {
        padding: 0;
    }

    .videos-carousel-header h3 {
        font-size: 25px;
    }

    .videos-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-videos {
        display: none;
    }

    .videos-carousel-wrapper {
        padding: 0 15px;
        overflow: visible;
        height: auto;
    }

    .videos-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .video-thumbnail {
        width: 100%;
        height: 200px;
    }

    .view-all-videos-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 10px 28px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 25px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-videos-mobile:hover {
        background: white;
        color: black;
    }

    .videos-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    /* Articles Section Small Mobile */
    .articles h2 {
        font-size: 32px;
    }

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

    .articles-section {
        padding: 0;
    }

    .articles-carousel-header h3 {
        font-size: 25px;
    }

    .articles-title-section {
        flex-direction: column;
        gap: 0;
    }

    .view-all-articles {
        display: none;
    }

    .articles-carousel-wrapper {
        padding: 0 15px;
        overflow: visible;
        height: auto;
    }

    .articles-carousel {
        display: flex;
        /* Keep flex for horizontal carousel */
        gap: 15px;
        /* Smaller gap on mobile */
        width: 100%;
        /* Remove transform/transition overrides to allow carousel JS to work */
    }

    .article-thumbnail {
        width: 100%;
        height: 200px;
    }

    .view-all-articles-mobile {
        display: block;
        background: black;
        color: var(--text-white);
        border: 4px solid var(--primary-color);
        padding: 10px 28px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        margin: 25px auto 0 auto;
        width: fit-content;
        transition: all 0.3s ease;
    }

    .view-all-articles-mobile:hover {
        background: white;
        color: black;
    }

    .articles-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    /* Contact Section Small Mobile */
    .contact {
        padding: 40px 0;
    }

    .contact-content {
        padding: 30px 20px;
    }

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

    .contact-header h2 {
        font-size: 32px;
    }

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

    .contact-main {
        gap: 30px;
    }

    .contact-form-section {
        padding: 25px 20px;
    }

    .contact-form {
        gap: 20px;
    }

    .contact-info h3 {
        font-size: 24px;
    }

    .contact-info>p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .contact-methods {
        gap: 15px;
    }

    .contact-method {
        padding: 12px;
        gap: 12px;
    }

    .method-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .method-details h4 {
        font-size: 16px;
    }

    .method-details p {
        font-size: 14px;
    }

    .social-links {
        gap: 12px;
        justify-content: center;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
        font-size: 14px;
    }

    .form-group textarea {
        min-height: 100px;
    }

    .submit-btn {
        padding: 10px 25px;
        font-size: 14px;
    }

    /* Contact Section Mobile */
    .contact {
        padding: 60px 0;
        background-attachment: scroll;
    }

    .contact-container {
        padding: 0 20px;
    }

    .contact-content {
        padding: 40px 30px;
    }

    .contact-header h2 {
        font-size: 32px;
    }

    .contact-subtitle {
        font-size: 18px;
    }

    .contact-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-section {
        padding: 30px 25px;
    }

    .contact-info h3 {
        font-size: 28px;
    }

    .contact-methods {
        gap: 20px;
    }

    .contact-method {
        padding: 15px;
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .method-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
        margin: 0 auto;
    }

    .social-link {
        width: 45px;
        height: 45px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px;
        font-size: 14px;
    }

    .submit-btn {
        padding: 12px 30px;
        font-size: 14px;
    }

    /* Books Section Small Mobile */
    .book-text h2 {
        font-size: 32px;
    }

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

    .book-carousel {
        width: 220px;
        height: 300px;
        margin-bottom: 30px;
    }

    .carousel-dots {
        margin-top: 25px;
    }

    .marketplace-link img {
        width: 140px;
    }

    .book-thumbnail {
        width: 60px;
        height: 80px;
    }
}

/* Footer */
.footer {
    background: var(--background-black);
    color: var(--text-white);
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.footer-container p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Footer Responsive Styles */
@media (max-width: 768px) {
    .footer-container {
        padding: 0 20px;
    }

    .footer-container p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 20px 0;
    }

    .footer-container p {
        font-size: 12px;
    }
}

/* Mobile Landscape Orientation Styles - All iPhones */
@media (max-height: 500px) and (orientation: landscape) {

    /* Hero Section Landscape - Optimized for all mobile devices */
    .hero-content {
        padding: 20px 20px 0 20px !important;
        max-width: 95%;
    }

    .hero h1,
    .hero .hero-h1,
    .hero .hero-title {
        font-size: clamp(1.2rem, 6vw, 32px) !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero p,
    .hero .hero-subtitle {
        font-size: clamp(0.85rem, 3vw, 0.95rem) !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .cta-button,
    .btn {
        padding: 6px 18px !important;
        font-size: 13px !important;
    }

    /* Header Landscape Fix */
    .header {
        background: transparent;
        z-index: 1001;
    }

    .header.scrolled {
        background: #000000 !important;
        backdrop-filter: none !important;
        transition: all 0.3s ease !important;
        z-index: 1001 !important;
        opacity: 0.95 !important;
    }

    /* Mobile Menu Landscape Fixes */
    .mobile-nav-overlay {
        height: 100vh;
        height: 100dvh;
        /* Dynamic viewport height */
        min-height: -webkit-fill-available;
        /* Safari fallback */
        z-index: 1002 !important;
        pointer-events: auto;
    }

    .mobile-nav {
        padding: 20px 20px 20px;
        overflow-y: auto;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
        pointer-events: auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav-links li {
        margin: 0;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        flex: 0 0 auto;
    }

    .mobile-nav-links a {
        padding: 10px 16px;
        font-size: 16px;
        color: var(--text-white);
        text-decoration: none;
        display: block;
        text-align: center;
        pointer-events: auto;
        position: relative;
        z-index: 1003;
        border-radius: 6px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        white-space: nowrap;
    }

    .mobile-nav-links a:hover,
    .mobile-nav-links a:focus {
        color: var(--primary-color);
        background: var(--primary-color-10);
        border-color: var(--primary-color-30);
    }

    /* Ensure mobile menu toggle is accessible in landscape */
    .mobile-menu-toggle {
        z-index: 1004 !important;
        pointer-events: auto !important;
        position: relative;
        display: flex !important;
    }

    /* Force mobile menu active state in landscape */
    .mobile-menu-active .mobile-nav-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .mobile-menu-active .mobile-nav-links li {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* Mobile Portrait Orientation - Specific positioning for hero controls */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-controls {
        bottom: 110px;
        left: 50% !important;
        transform: translateX(-50%);
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 280px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-dots {
        bottom: 50px;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .hero-controls {
        bottom: 95px !important;
        gap: 8px;
        max-width: 240px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-control-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .hero-control-btn span {
        font-size: 12px;
    }

    .hero-dots {
        bottom: 35px;
    }
}

@media (max-width: 768px) and (orientation: landscape) {

    /* About Section Landscape */
    .about {
        padding: 20px 0;
        min-height: auto;
    }

    .about-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;
        padding: 0 20px;
    }

    .about-image {
        order: 1;
    }

    .person-image {
        width: 200px;
        height: 200px;
    }

    .about-text {
        order: 2;
        text-align: left;
        padding: 15px;
        max-width: none;
    }

    .about-text h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .about-text .roles {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .about-text p {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 10px;
    }



    /* Books Section Landscape */
    .books {
        padding: 40px 0 20px 0;
        height: auto;
    }

    .books-container {
        grid-template-columns: 1fr 1fr;
        height: auto;
        padding: 0 20px;
        gap: 30px;
        /* Maintain 30px gap on tablet */
    }

    .book-carousel {
        width: 180px;
        height: 240px;
    }

    .book-text h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .book-text p {
        font-size: 12px;
    }

    /* Speaking Section Landscape */
    .speaking {
        padding: 40px 0;
    }

    .speaking h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

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

    .events-section {
        padding: 20px;
    }

    /* Videos Section Landscape */
    .videos-container {
        padding: 40px 20px 0 20px;
    }

    .videos h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

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

    .videos-section {
        padding: 20px;
    }

    /* Articles Section Landscape */
    .articles-container {
        padding: 40px 20px 0 20px;
    }

    .articles h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

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

    .articles-section {
        padding: 20px;
    }

    /* Contact Section Landscape */
    .contact {
        padding: 40px 0;
    }

    .contact-content {
        padding: 30px 40px;
    }

    .contact-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .contact-header h2 {
        font-size: 28px;
    }

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

    .contact-form-section {
        padding: 20px;
    }

    .contact-info h3 {
        font-size: 24px;
    }

    .contact-methods {
        gap: 15px;
    }

    .contact-method {
        padding: 12px;
        flex-direction: row;
        text-align: left;
        gap: 15px;
    }

    .method-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin: 0;
    }
}

@media (max-width: 480px) and (orientation: landscape) {

    /* Small Mobile Landscape - Extra small devices */
    .hero-content {
        padding: 15px 15px 0 15px !important;
    }

    .hero h1,
    .hero .hero-h1,
    .hero .hero-title {
        font-size: clamp(1rem, 5vw, 26px) !important;
        margin-bottom: 6px !important;
        line-height: 1.05 !important;
    }

    .hero p,
    .hero .hero-subtitle {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important;
        margin-bottom: 10px !important;
        line-height: 1.25 !important;
    }

    .cta-button,
    .btn {
        padding: 5px 16px !important;
        font-size: 12px !important;
    }

    .about-container {
        gap: 15px;
    }

    .person-image {
        width: 150px;
        height: 150px;
        border: 2px solid var(--primary-color);
        box-shadow: 0 4px 15px var(--primary-color-30);
    }

    .about-text h2 {
        font-size: 20px;
    }

    .about-text .roles {
        font-size: 12px;
    }

    .about-text p {
        font-size: 11px;
    }

    .book-carousel {
        width: 200px;
        height: 280px;
        margin-bottom: 20px;
    }

    .carousel-dots {
        margin-top: 20px;
    }

    .contact-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/*
 Mobile Vertical Events Carousel */
@media (max-width: 768px) {
    .events-carousel {
        overflow: hidden;
        /* Keep horizontal carousel behavior */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        /* Smaller gap on mobile */
    }

    .events-carousel::-webkit-scrollbar {
        display: none;
    }

    .event-thumbnail {
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 220px;
        padding: 15px;
    }

    .event-thumbnail:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

    .event-overlay {
        border-radius: 0 0 15px 15px;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .events-carousel {
        overflow: hidden;
        /* Keep horizontal carousel behavior */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .event-thumbnail {
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .event-thumbnail:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }

    .event-overlay {
        border-radius: 0 0 20px 20px;
        padding: 15px 12px 12px 12px;
    }

    .event-date {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .event-name {
        font-size: 16px;
        line-height: 1.3;
    }
}

/*
 Hide mobile events button on desktop */
.view-all-events-mobile {
    display: none;
}

@media (max-width: 768px) {
    .view-all-events-mobile {
        display: block;
    }
}

/* Mobile 
Videos Carousel Enhancements */
@media (max-width: 768px) {
    .videos-carousel {
        overflow: hidden;
        /* Keep horizontal carousel behavior */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        /* Smaller gap on mobile */
    }

    .videos-carousel::-webkit-scrollbar {
        display: none;
    }

    .video-thumbnail {
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 220px;
        padding: 12px;
    }

    .video-thumbnail:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

    .video-overlay {
        border-radius: 0 0 15px 15px;
        padding: 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .videos-carousel {
        overflow: hidden;
        /* Keep horizontal carousel behavior */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .video-thumbnail {
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .video-thumbnail:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }

    .video-overlay {
        border-radius: 0 0 20px 20px;
    }
}

/* Mobile Articles Carousel Enhancements */
@media (max-width: 768px) {
    .articles-carousel {
        overflow: hidden;
        /* Keep horizontal carousel behavior */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        /* Smaller gap on mobile */
    }

    .articles-carousel::-webkit-scrollbar {
        display: none;
    }

    .article-thumbnail {
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 220px;
        padding: 12px;
    }

    .article-thumbnail:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .article-overlay {
        border-radius: 0 0 15px 15px;
        padding: 20px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    /* Fix mobile carousel horizontal scrolling issue */
    .videos-carousel-wrapper,
    .articles-carousel-wrapper,
    .events-carousel-wrapper {
        overflow: hidden !important;
        position: relative;
        width: 100%;
        /* Prevent any scrolling on the wrapper */
        -webkit-overflow-scrolling: auto !important;
        scroll-behavior: auto !important;
    }

    .videos-carousel,
    .articles-carousel,
    .events-carousel {
        overflow: visible !important;
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: auto !important;
        /* Prevent manual horizontal scrolling */
        touch-action: pan-y !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        /* Disable any scroll snapping */
        scroll-snap-type: none !important;
        -webkit-scroll-snap-type: none !important;
    }

    /* Ensure carousel items don't create horizontal scroll */
    .video-thumbnail,
    .article-thumbnail,
    .event-thumbnail {
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        /* Prevent dragging/scrolling on items */
        touch-action: manipulation !important;
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
        user-drag: none !important;
        /* Ensure consistent height across all carousel types on mobile */
        height: 320px !important;
    }

    /* Prevent horizontal scrolling on carousel item images */
    .video-thumbnail img,
    .article-thumbnail img,
    .event-thumbnail img {
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
        user-drag: none !important;
        pointer-events: none !important;
    }
}

@media (max-width: 480px) {
    .articles-carousel {
        overflow: visible !important;
        /* Prevent horizontal scrolling */
        scroll-behavior: auto;
        -webkit-overflow-scrolling: auto;
    }

    .article-thumbnail {
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .article-thumbnail:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    }

    .article-overlay {
        border-radius: 0 0 20px 20px;
    }
}

/* Hide mobile buttons on desktop */
.view-all-videos-mobile,
.view-all-articles-mobile {
    display: none;
}

@media (max-width: 768px) {

    .view-all-videos-mobile,
    .view-all-articles-mobile {
        display: block;
    }
}

/* 
Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Staggered animation delays for multiple elements */
.about-text.animate-on-scroll {
    transition-delay: 0.1s;
}

.main-book.animate-on-scroll {
    transition-delay: 0.2s;
}

.book-text.animate-on-scroll {
    transition-delay: 0.3s;
}

.speaking-header.animate-on-scroll {
    transition-delay: 0.1s;
}

.videos-header.animate-on-scroll {
    transition-delay: 0.1s;
}

.articles-header.animate-on-scroll {
    transition-delay: 0.1s;
}

.contact-header.animate-on-scroll {
    transition-delay: 0.1s;
}

.recommended-books h3.animate-on-scroll {
    transition-delay: 0.2s;
}

/* Carousel items subtle entrance */
.event-thumbnail,
.video-thumbnail,
.article-thumbnail {
    transition: all 0.3s ease;
}

/* Hover enhancements for better interactivity */
.event-thumbnail:hover,
.video-thumbnail:hover,
.article-thumbnail:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Smooth section transitions */
section {
    transition: all 0.3s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .event-thumbnail:hover,
    .video-thumbnail:hover,
    .article-thumbnail:hover {
        transform: translateY(-3px);
    }
}

/* Smooth section reveal */
.hero-content {
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced carousel interactions */
.carousel-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Dot animations */
/* Enhanced dot animations for other sections */
.events-dot,
.videos-dot,
.articles-dot {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.events-dot:hover,
.videos-dot:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.articles-dot:hover {
    background: var(--primary-color-80);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--primary-color-40);
}

/* Subtle glow effects for interactive elements */
.cta-button,
.submit-btn {
    position: relative;
    overflow: hidden;
}

.cta-button::before,
.submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--primary-color-30) 0%, transparent 70%);
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.cta-button:hover::before,
.submit-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Smooth page transitions - controlled by database settings */
html.smooth-scrolling-enabled {
    scroll-behavior: smooth !important;
}

/* Ensure smooth scrolling is disabled when class is not present */
html:not(.smooth-scrolling-enabled) {
    scroll-behavior: auto !important;
}

/* Focus styles for skip link targets - DISABLED for now, will re-enable with skip links */
/*
main:focus,
section:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    scroll-margin-top: 80px;
    /* Account for fixed header */
}

/* Mobile Navigation Responsive Styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 20px;
    }

    /* Prevent horizontal scrolling on mobile */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Ensure main sections don't cause horizontal overflow */
    .videos,
    .articles,
    .speaking {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Ensure carousel sections stay within viewport */
    .videos-section,
    .articles-section,
    .speaking-section {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Improve touch targets for mobile */
    .mobile-nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on mobile menu */
    .mobile-nav-overlay {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling for mobile navigation */
    .mobile-nav {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .mobile-nav-links a {
        font-size: 20px;
        padding: 15px 25px;
        margin: 8px 0;
    }

    .mobile-nav-links a::before {
        left: 25px;
        width: calc(100% - 50px);
    }

    .mobile-nav-links a:hover::before,
    .mobile-nav-links a.active::before {
        width: calc(100% - 50px);
    }
}

/* Mobile video handling */
@media (max-width: 768px) {
    .hero-video {
        /* Ensure video covers the container properly on mobile */
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Clean black background when video is loading or not available */
        background: var(--background-black);
    }

    .hero-slide {
        /* Fallback background for when video fails */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Reduce video quality on very small screens */
    @media (max-width: 480px) {
        .hero-video {
            min-height: 100vh;
        }
    }
}

/* Hide video error overlays - force them to be invisible */
.video-error-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure video loading states don't show error messages */
.video-loading::after,
.hero-slide.video-loading::after {
    content: "";
    display: none !important;
}

/* Clean video background - no poster needed */
.hero-video {
    background: #000 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-video::-webkit-media-controls {
    display: none !important;
}

/* Ensure clean background for video containers */
.hero-slide {
    background-color: var(--background-black);
    /* Prevent flickering during transitions */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Smooth video loading without flicker */
.hero-video {
    will-change: auto;
    transform: translateZ(0);
}

/* Loading state for dynamic content */
.video-loading {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Video
 Loading Performance Optimizations */

/* Mobile Video Optimizations */
@media (max-width: 768px) {
    .video-play-btn {
        background: var(--accent-color) !important;
        color: var(--text-white) !important;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        margin-top: 10px;
        width: auto;
        height: auto;
        transition: all 0.3s ease;
        display: none;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
    }

    .video-thumbnail:hover .video-play-btn,
    .video-thumbnail:active .video-play-btn,
    .video-thumbnail:focus .video-play-btn {
        display: inline-block !important;
        animation: slideUpFade 0.3s ease forwards;
        opacity: 1;
        visibility: visible;
    }

    .video-play-btn:hover {
        background: var(--accent-hover) !important;
        color: var(--text-white) !important;
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 102, 102, 0.4);
        text-decoration: none !important;
    }

    /* Mobile touch support for video overlay */
    .video-thumbnail:active .video-overlay,
    .video-thumbnail:hover .video-overlay {
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-thumbnail:active .video-title,
    .video-thumbnail:hover .video-title {
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .video-thumbnail:active .video-duration,
    .video-thumbnail:hover .video-duration {
        font-size: 14px;
        margin-bottom: 15px;
        opacity: 1;
        align-self: center;
    }

    .play-icon {
        font-size: 20px;
    }

    .hero-slide.video-loading::after {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .video-quality-indicator {
        top: 10px;
        right: 10px;
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Reduce video overlay opacity on mobile for better performance */
    .hero-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    /* Optimize video controls for mobile */
    .hero-controls {
        bottom: 15px;
        left: 15px;
        gap: 10px;
    }

    .hero-control-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Disable video autoplay on mobile to save bandwidth */
    .hero-video[autoplay] {
        -webkit-autoplay: none;
        autoplay: none;
    }
}

/* Data Saver Mode Optimizations */
@media (prefers-reduced-data: reduce) {
    .hero-video {
        display: none;
    }

    .hero-slide {
        background: var(--background-black);
    }

    .video-play-overlay {
        background: rgba(0, 0, 0, 0.8);
    }

    .video-play-overlay::before {
        content: 'Tap to load video';
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--text-white);
        font-size: 14px;
        text-align: center;
    }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: opacity 0.3s ease;
    }

    .video-play-btn {
        transition: none;
    }

    .hero-slide.video-loading::after {
        animation: none;
        border: 3px solid var(--primary-color);
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .video-play-btn {
        background: white;
        border: 2px solid black;
    }

    .video-error-overlay {
        background: black;
        border: 2px solid white;
    }

    .retry-btn {
        background: white;
        color: black;
        border: 2px solid black;
    }
}

/* Performance optimizations for older devices */
@media (max-width: 480px) {
    .hero-video {
        transform: none;
        /* Disable transforms on very small screens */
    }

    .hero-slide {
        will-change: auto;
        /* Reduce GPU usage */
    }

    .video-play-overlay {
        backdrop-filter: none;
        /* Remove expensive blur effects */
    }

    .hero-control-btn {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.7);
    }
}

/* ========================================================================== 
   NEW DEDICATED PAGES STYLES
   ========================================================================== */

/* Section Hero Styles */
.section-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.speaking-hero {
    /* Background image set dynamically via inline style */
}

.videos-hero {
    background-image: url('../images/videos_hero1.png');
}

.articles-hero {
    /* Background image set dynamically via inline style or fallback */
    background-color: #2a2a2a;
    /* Fallback color similar to videos */
}

.section-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.section-hero-content {
    position: relative;
    z-index: 2;
    color: var(--text-white);
    max-width: 800px;
    padding: 0 20px;
}

.section-hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-hero p {
    font-size: 1.25rem;
    font-weight: 400;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Container and Section Styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 80px 0 40px 0;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Filters Container */
.filters-container {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-filter {
    position: relative;
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 12px 50px 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 16px;
    background: white;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-10);
}

.search-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.search-btn:hover {
    color: var(--primary-color);
}

.topic-filter,
.duration-filter {
    min-width: 180px;
}

.filter-select {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-10);
}

/* Grid Layouts */
.events-grid,
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Event Card Styles */
.event-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

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

.event-content {
    padding: 25px;
}

.event-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.4;
}

.event-description {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.event-location {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.event-tag {
    background: #f8f9fa;
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.event-actions {
    display: flex;
    gap: 10px;
}

.event-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.event-btn-primary {
    background: var(--primary-color);
    color: var(--text-white);
}

.event-btn-primary:hover {
    background: #4A96D6;
    transform: translateY(-2px);
}

.event-btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.event-btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-white);
}

/* Video Card Styles */
.video-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.video-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail-img {
    transform: scale(1.05);
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-play-overlay {
    opacity: 1;
}

.video-play-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.video-play-icon:hover {
    background: white;
    transform: scale(1.1);
}

.video-duration-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.video-content {
    padding: 25px;
}

.video-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.4;
}

.video-description {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #888;
}

.video-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-date {
    font-size: 12px;
}

.video-actions {
    display: flex;
    gap: 10px;
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin: 40px 0;
}

.load-more-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
}

/* Coming Soon Styles */
.coming-soon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 60px 20px;
}

.coming-soon-content {
    text-align: center;
    max-width: 500px;
}

.coming-soon-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.coming-soon-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.newsletter-signup {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
}

.newsletter-signup p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 16px;
    background: white;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.newsletter-btn {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-btn:hover {
    background: #4A96D6;
    transform: translateY(-2px);
}

/* Additional Event Card Styles */
.event-image-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.event-image-container .upcoming-label {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: var(--text-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite;
}

/* Mobile Navigation Responsive Styles */
@media (max-width: 768px) {

    /* Hide desktop navigation, show mobile toggle */
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Header background for mobile */
    .header {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 20px;
    }

    /* Improve touch targets for mobile */
    .mobile-nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on mobile menu */
    .mobile-nav-overlay {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling for mobile navigation */
    .mobile-nav {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

/* Responsive Design for New Pages */
@media (max-width: 768px) {
    .section-hero {
        height: 50vh;
        min-height: 300px;
    }

    .section-hero h1 {
        font-size: 2.5rem;
    }

    .section-hero p {
        font-size: 1.1rem;
    }

    .filters-container {
        flex-direction: column;
        gap: 15px;
    }

    .search-filter {
        min-width: 100%;
        max-width: 100%;
    }

    .topic-filter,
    .duration-filter {
        min-width: 100%;
    }

    .events-grid,
    .videos-grid,
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input,
    .newsletter-btn {
        width: 100%;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .section-header p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {

    /* Mobile navigation adjustments for smaller screens */
    .mobile-nav-links a {
        font-size: 20px;
        padding: 15px 25px;
        margin: 8px 0;
    }

    .mobile-nav-links a::before {
        left: 25px;
    }

    .mobile-nav-links a:hover::before,
    .mobile-nav-links a.active::before {
        width: calc(100% - 50px);
    }

    .section-hero {
        height: 40vh;
        min-height: 250px;
    }

    .section-hero-content h1 {
        font-size: 1.75rem;
    }

    .section-hero-content p {
        font-size: 0.9rem;
    }

    .section-header {
        padding: 60px 0 30px 0;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .filters-container {
        padding: 20px;
    }

    .search-input,
    .filter-select {
        padding: 10px 15px;
        font-size: 14px;
    }

    .event-content,
    .video-content {
        padding: 15px;
    }

    .event-title,
    .video-title {
        font-size: 1.1rem;
    }

    .event-description,
    .video-description {
        font-size: 13px;
    }

    .event-actions {
        flex-direction: column;
    }

    .event-btn {
        width: 100%;
    }
}

/* Section-specific styles for dedicated pages */
.speaking-events-section {
    background: var(--background-light);
    min-height: 100vh;
    padding-bottom: 80px;
}

.videos-content-section {
    background: var(--background-light);
    min-height: 100vh;
    padding-bottom: 80px;
}

.articles-content-section {
    background: var(--background-light);
    min-height: 100vh;
    padding-bottom: 80px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Article Card Styles */
.article-card {
    background: var(--background-light);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

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

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

.article-card:hover .article-image {
    transform: scale(1.05);
}

.article-reading-time-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.article-content {
    padding: 24px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.article-date {
    font-weight: 500;
}

.article-author {
    color: var(--primary-color);
    font-weight: 500;
}

.article-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.2;
}

.article-description {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}

.article-excerpt {
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.article-tag {
    background: #f8f9fa;
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e9ecef;
}

.article-actions {
    display: flex;
    gap: 12px;
}

.article-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    flex: 1;
}

.article-btn-primary {
    background: var(--primary-color);
    color: var(--text-white);
}

.article-btn-primary:hover {
    background: #4a96d6;
    transform: translateY(-2px);
}

.article-btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.article-btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
}

/* M
obile Navigation Responsive Styles */
@media (max-width: 768px) {

    /* Hide desktop navigation, show mobile toggle */
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Header background for mobile */
    .header {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 20px;
    }

    /* Improve touch targets for mobile */
    .mobile-nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on mobile menu */
    .mobile-nav-overlay {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling for mobile navigation */
    .mobile-nav {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {

    /* Mobile navigation adjustments for smaller screens */
    .mobile-nav-links a {
        font-size: 20px;
        padding: 15px 25px;
        margin: 8px 0;
    }

    .mobile-nav-links a::before {
        left: 25px;
    }

    .mobile-nav-links a:hover::before,
    .mobile-nav-links a.active::before {
        width: calc(100% - 50px);
    }
}

/* =
========================================================================= 
   MOBILE NAVIGATION RESPONSIVE STYLES - CRITICAL FOR FUNCTIONALITY
   ========================================================================== */

@media (max-width: 768px) {

    /* SHOW mobile navigation, HIDE desktop navigation */
    .nav-links {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Header background for mobile */
    .header {
        background: rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 20px;
    }

    /* Improve touch targets for mobile */
    .mobile-nav-links a {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on mobile menu */
    .mobile-nav-overlay {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling for mobile navigation */
    .mobile-nav {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {

    /* Mobile navigation adjustments for smaller screens */
    .mobile-nav-links a {
        font-size: 20px;
        padding: 15px 25px;
        margin: 8px 0;
    }

    .mobile-nav-links a::before {
        left: 25px;
    }

    .mobile-nav-links a:hover::before,
    .mobile-nav-links a.active::before {
        width: calc(100% - 50px);
    }
}

/* ==
======================================================================== 
   CRITICAL MOBILE NAVIGATION RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 768px) {

    /* SHOW mobile navigation, HIDE desktop navigation */
    .nav-links {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Header background for mobile */
    .header {
        background: rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Mobile Menu Toggle - Only on Mobile */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1003;
    position: relative;
    border-radius: 4px;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Force hide hamburger on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Show hamburger only on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
    }

    .nav-links {
        display: none !important;
    }
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: white !important;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
    display: block !important;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay - Force Show */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.mobile-nav-links li {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-links a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 30px;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: var(--primary-color-10);
    border-color: var(--primary-color-30);
    transform: translateX(10px);
}

.mobile-nav-links a:hover::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-15);
    border-color: var(--primary-color-50);
}

.mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a:active {
    transform: translateX(10px) scale(0.98);
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile navigation close button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1004;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* FORC
E MOBILE NAVIGATION CONTENT TO BE VISIBLE */
.mobile-nav-overlay .mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 80px 20px 20px !important;
}

.mobile-nav-overlay .mobile-nav-links {
    list-style: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 400px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-nav-overlay .mobile-nav-links li {
    margin: 10px 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-nav-overlay .mobile-nav-links a {
    display: block !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    padding: 20px 30px !important;
    margin: 10px 0 !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-overlay .mobile-nav-links a:hover {
    color: var(--primary-color) !important;
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
    transform: translateX(10px) !important;
}

.mobile-nav-overlay .mobile-nav-links a.active {
    color: var(--primary-color) !important;
    background: var(--primary-color-15) !important;
    border-color: var(--primary-color-50) !important;
}

.mobile-nav-overlay .mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-overlay .mobile-nav-links a:hover::before,
.mobile-nav-overlay .mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    color: var(--text-white) !important;
    font-size: 32px !important;
    cursor: pointer !important;
    padding: 10px !important;
    z-index: 1004 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==
======================================================================== 
   IMPROVED MOBILE NAVIGATION FORMATTING - PORTRAIT & LANDSCAPE
   ========================================================================== */

/* Enhanced Mobile Navigation Layout */
.mobile-nav-overlay .mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 60px 20px 40px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.mobile-nav-overlay .mobile-nav-links {
    list-style: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 500px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-nav-overlay .mobile-nav-links li {
    margin: 8px 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-nav-overlay .mobile-nav-links a {
    display: block !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    padding: 18px 25px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* LANDSCAPE ORIENTATION - Two Column Layout */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .mobile-nav-overlay .mobile-nav {
        padding: 30px 20px 20px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .mobile-nav-overlay .mobile-nav-links {
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .mobile-nav-overlay .mobile-nav-links li {
        margin: 0 !important;
    }

    .mobile-nav-overlay .mobile-nav-links a {
        font-size: 18px !important;
        padding: 14px 20px !important;
        margin: 0 !important;
        text-align: center !important;
    }
}

/* SMALL PORTRAIT SCREENS - Compact Layout */
@media screen and (orientation: portrait) and (max-height: 600px) {
    .mobile-nav-overlay .mobile-nav {
        padding: 40px 15px 20px !important;
    }

    .mobile-nav-overlay .mobile-nav-links a {
        font-size: 20px !important;
        padding: 15px 20px !important;
        margin: 6px 0 !important;
    }
}

/* VERY SMALL SCREENS - Ultra Compact */
@media screen and (max-height: 450px) {
    .mobile-nav-overlay .mobile-nav {
        padding: 20px 15px 15px !important;
    }

    .mobile-nav-overlay .mobile-nav-links {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .mobile-nav-overlay .mobile-nav-links a {
        font-size: 16px !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }
}

/* Enhanced Hover and Active States */
.mobile-nav-overlay .mobile-nav-links a:hover {
    color: var(--primary-color) !important;
    background: var(--primary-color-15) !important;
    border-color: var(--primary-color-40) !important;
    transform: translateX(8px) scale(1.02) !important;
    box-shadow: 0 6px 20px var(--primary-color-20) !important;
}

.mobile-nav-overlay .mobile-nav-links a.active {
    color: var(--primary-color) !important;
    background: var(--primary-color-20) !important;
    border-color: rgba(255, 0, 64, 0.6) !important;
    box-shadow: 0 6px 20px var(--primary-color-30) !important;
}

/* Enhanced Underline Effect */
.mobile-nav-overlay .mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 25px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #7bb3e8);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 2px;
    box-shadow: 0 2px 8px var(--primary-color-40);
}

.mobile-nav-overlay .mobile-nav-links a:hover::before,
.mobile-nav-overlay .mobile-nav-links a.active::before {
    width: calc(100% - 50px);
}

/* Close Button Enhanced */
.mobile-nav-close {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-white) !important;
    font-size: 28px !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 1004 !important;
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 4px 15px var(--primary-color-30) !important;
}

/* ====
====================================================================== 
   CLEAN MOBILE NAVIGATION - SIMPLE & ELEGANT (OVERRIDE)
   ========================================================================== */

/* Mobile Navigation Layout - Clean Override */
.mobile-nav-overlay .mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 60px 30px 40px !important;
}

.mobile-nav-overlay .mobile-nav-links {
    list-style: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 400px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-nav-overlay .mobile-nav-links li {
    margin: 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Clean Link Styling - No Background, Simple White Text */
.mobile-nav-overlay .mobile-nav-links a {
    display: block !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Hover State - Primary Color Only */
.mobile-nav-overlay .mobile-nav-links a:hover {
    color: var(--primary-color) !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Active State - Primary Color Only */
.mobile-nav-overlay .mobile-nav-links a.active {
    color: var(--primary-color) !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Clean Animated Underline Effect */
.mobile-nav-overlay .mobile-nav-links a::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.mobile-nav-overlay .mobile-nav-links a:hover::after,
.mobile-nav-overlay .mobile-nav-links a.active::after {
    width: 60px;
}

/* Remove any existing ::before pseudo elements and desktop nav interference */
.mobile-nav-overlay .mobile-nav-links a::before {
    display: none !important;
}

/* Complete reset of mobile navigation link styling */
.mobile-nav-overlay .mobile-nav-links a {
    /* Reset all pseudo elements first */
    position: relative !important;
}

.mobile-nav-overlay .mobile-nav-links a::before,
.mobile-nav-overlay .mobile-nav-links a::after {
    content: '' !important;
    position: absolute !important;
    display: block !important;
}

/* Clean underline effect - only ::after */
.mobile-nav-overlay .mobile-nav-links a::after {
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary-color) !important;
    transition: width 0.3s ease !important;
    top: auto !important;
    right: auto !important;
}

.mobile-nav-overlay .mobile-nav-links a:hover::after,
.mobile-nav-overlay .mobile-nav-links a.active::after {
    width: 60px !important;
}

/* Ensure ::before is completely hidden */
.mobile-nav-overlay .mobile-nav-links a::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* LANDSCAPE ORIENTATION - Horizontal Layout */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .mobile-nav-overlay .mobile-nav {
        padding: 40px 30px 20px !important;
    }

    .mobile-nav-overlay .mobile-nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
        max-width: 100% !important;
    }

    .mobile-nav-overlay .mobile-nav-links li {
        flex: 0 0 auto !important;
    }

    .mobile-nav-overlay .mobile-nav-links a {
        padding: 15px 20px !important;
        font-size: 20px !important;
    }
}

/* Clean Close Button */
.mobile-nav-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    color: var(--text-white) !important;
    font-size: 32px !important;
    cursor: pointer !important;
    padding: 10px !important;
    z-index: 1004 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.mobile-nav-close:hover {
    color: var(--primary-color) !important;
    transform: rotate(90deg) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* REMOVED: Overly broad rule that was hiding all flex elements on desktop
   This was breaking carousel dots and other dynamic flex layouts
   Original intent was to hide hamburger menu, but selector was too broad */


/* ========================================
   HEADER STYLES - COMPLETE RESET
   All previous header styles are overridden here
   ======================================== */

/* Reset all header-related styles */
.header,
.header.scrolled,
.nav-container,
.logo,
.nav-links,
.nav-links a,
.nav-links a::after,
.nav-links a.active,
.nav-links a.active::after,
.mobile-menu-toggle,
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle.active,
.hamburger-line,
.mobile-menu-toggle.active .hamburger-line:nth-child(1),
.mobile-menu-toggle.active .hamburger-line:nth-child(2),
.mobile-menu-toggle.active .hamburger-line:nth-child(3),
.mobile-nav-overlay,
.mobile-nav-overlay.active,
.mobile-nav,
.mobile-nav-links,
.mobile-nav-links li,
.mobile-nav-links a,
.mobile-nav-links a::before,
.mobile-nav-links a:hover,
.mobile-nav-links a:hover::before,
.mobile-nav-links a.active,
.mobile-nav-links a.active::before,
.mobile-nav-links a:active,
.mobile-nav-links a:focus,
.mobile-nav-close,
.mobile-nav-close:hover,
.mobile-nav-close:focus {
    /* Reset all properties */
    all: unset !important;
    /* Reset display to initial */
    display: initial !important;
}

/* Now we can add fresh header styles here */
/* =
=======================================
   HEADER STYLES - FRESH START
   ======================================== */

/* Main Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    color: var(--text-white);
    padding: 15px 0;
    z-index: 1001;
    transition: all 0.3s ease;
}

/* Header when scrolled */
.header.scrolled {
    background: rgba(0, 0, 0, 1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Navigation Container */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Logo */
.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    z-index: 1003;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Logo image support */
.logo .logo-image {
    max-height: 40px;
    width: auto;
    display: block;
}

/* Logo text styling */
.logo .logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
}

/* Desktop Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active {
    color: var(--primary-color);
    font-weight: 500;
}

.nav-links a.active::after {
    width: 100%;
}

/* Mobile Menu Toggle Button - Temporarily Hidden */
.mobile-menu-toggle {
    display: none;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Mobile Styles - Temporarily Simplified */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 20px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        font-size: 14px;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        padding: 0 30px;
    }

    .nav-links {
        gap: 25px;
    }

    .nav-links a {
        font-size: 15px;
    }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
    .nav-container {
        max-width: 1400px;
    }
}

/ *========================================TEMPORARY: HIDE ALL MOBILE NAVIGATION========================================*/
/* Force hide mobile navigation overlay completely */
.mobile-nav-overlay,
.mobile-nav-overlay.active,
.mobile-menu-active .mobile-nav-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide mobile menu toggle button */
.mobile-menu-toggle {
    display: none !important;
}

/* Ensure desktop navigation is always visible */
.nav-links {
    display: flex !important;
}

/ *========================================UPDATED HEADER STYLES - BASED ON SGADE/INDEX.HTML========================================*/
/* CSS Variables for consistency */
:root {
    /* Note: Primary color is dynamically set by SettingsHelper.php */
    --primary-hover: #4a8bc2;
    --background-dark: #000;
    --background-overlay: rgba(0, 0, 0, 0.9);
    
    /* Text Colors - Improved Readability */
    --text-white: #f5f5f5;              /* Soft white for better readability */
    --text-light: #e5e5e5;              /* Secondary white text */
    --text-overlay: rgba(255, 255, 255, 0.95); /* Text over images/videos */
    --text-pure-white: #ffffff;         /* Only for special cases */
    
    --font-family: 'Inter', sans-serif;
    --max-width: 1200px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --transition-fast: 0.3s ease;
    --z-header: 1000;
    
    /* Additional color variations for dynamic theming */
    --background-overlay-95: rgba(0, 0, 0, 0.95);
    --background-overlay-40: rgba(0, 0, 0, 0.4);
    --background-overlay-30: rgba(0, 0, 0, 0.3);
    --white-overlay-05: rgba(255, 255, 255, 0.05);
    --white-overlay-10: rgba(255, 255, 255, 0.1);
    --white-overlay-20: rgba(255, 255, 255, 0.2);
    --white-overlay-40: rgba(255, 255, 255, 0.4);
    --white-overlay-80: rgba(255, 255, 255, 0.8);
    --white-overlay-90: rgba(255, 255, 255, 0.9);
    --white-overlay-100: rgba(255, 255, 255, 1);
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.5);
}

/* Override Header Styles */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: var(--z-header) !important;
    transition: all var(--transition-fast) !important;
    padding: var(--spacing-md) 0 !important;
    width: 100% !important;
}

/* Header when scrolled - solid black */
.header.scrolled {
    background: var(--background-dark) !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Override Navigation Container */
.nav-container {
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 var(--spacing-lg) !important;
}

/* Override Logo */
.logo {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
}

/* Override Desktop Navigation Links */
.nav-links {
    display: flex !important;
    list-style: none !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-links a {
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    position: relative !important;
}

.nav-links a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary-color) !important;
    transition: width 0.3s ease !important;
}

.nav-links a:hover {
    color: var(--primary-color) !important;
}

.nav-links a:hover::after,
.nav-links a:focus::after {
    width: 100% !important;
}

.nav-links a.active {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
}

.nav-links a.active::after {
    width: 100% !important;
}

/* 
========================================
   HEADER VISIBILITY DEBUG & FIX
   ======================================== */

/* Ensure header is always visible */
.header {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure navigation container is visible */
.nav-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Ensure logo is visible */
.logo {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: var(--text-white) !important;
}

/* Ensure navigation links are visible */
.nav-links {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.nav-links li {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.nav-links a {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: var(--text-white) !important;
}

/*
 ========================================
   HEADER FIX - ENSURE ALWAYS VISIBLE
   ======================================== */

/* Force header to always be visible */
.header,
.header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* Initial state - completely transparent */
.header {
    background: transparent !important;
    padding: 15px 0 !important;
}

/* Scrolled state - solid black (maintain all other styles) */
.header.scrolled {
    background: rgba(0, 0, 0, 1) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
    padding: 15px 0 !important;
    /* Ensure all other properties remain the same */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Force navigation container to be visible */
.nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force logo to be visible */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force navigation links to be visible */
.nav-links {
    display: flex !important;
    list-style: none !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-links li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-links a {
    display: block !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

.nav-links a:hover {
    color: var(--primary-color) !important;
}

.nav-links a.active {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
}

/* Underline effect */
.nav-links a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary-color) !important;
    transition: width 0.3s ease !important;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100% !important;
}

/ *========================================HEADER RESPONSIVE & MOBILE NAVIGATION========================================*/
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1003;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Hamburger Lines */
.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text-white);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Hamburger Animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: none;
    /* Force hidden by default */
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Navigation Container */
.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 20px;
}

/* Mobile Navigation Links */
.mobile-nav-links {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 0;
}

.mobile-nav-links li {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-links a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 30px;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background: var(--primary-color-10);
    border-color: var(--primary-color-30);
    transform: translateX(10px);
}

.mobile-nav-links a:hover::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a.active {
    color: var(--primary-color);
    background: var(--primary-color-15);
    border-color: var(--primary-color-50);
}

.mobile-nav-links a.active::before {
    width: calc(100% - 60px);
}

.mobile-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile Navigation Close Button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1004;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Desktop Styles - 769px and above */
@media (min-width: 769px) {

    /* Show desktop navigation, hide mobile toggle */
    .nav-links {
        display: flex !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .mobile-nav-overlay {
        display: none !important;
    }
}

/* Tablet Styles - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        padding: 0 30px !important;
    }

    .nav-links {
        gap: 25px !important;
    }

    .nav-links a {
        font-size: 15px !important;
    }
}

/* Large Desktop Styles - 1200px and above */
@media (min-width: 1200px) {
    .nav-container {
        max-width: 1400px !important;
        padding: 0 40px !important;
    }

    .nav-links {
        gap: 35px !important;
    }

    .nav-links a {
        font-size: 17px !important;
    }
}

/* Mobile Styles - 768px and below */
@media (max-width: 768px) {

    /* Hide desktop navigation, show mobile toggle */
    .nav-links {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Header mobile adjustments */
    .header {
        padding: 12px 0 !important;
    }

    .header.scrolled {
        padding: 12px 0 !important;
    }

    /* Navigation container mobile spacing */
    .nav-container {
        padding: 0 15px !important;
    }

    /* Logo mobile size */
    .logo {
        font-size: 20px !important;
    }

    /* Mobile navigation portrait layout */
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Small Mobile Styles - 480px and below */
@media (max-width: 480px) {

    /* Tighter spacing for small screens */
    .header {
        padding: 10px 0 !important;
    }

    .header.scrolled {
        padding: 10px 0 !important;
    }

    .nav-container {
        padding: 0 10px !important;
    }

    /* Smaller logo for very small screens */
    .logo {
        font-size: 18px !important;
    }

    /* Smaller mobile navigation */
    .mobile-nav-links a {
        font-size: 20px !important;
        padding: 15px 20px !important;
    }
}

/* Landscape Orientation - Horizontal Layout */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-nav {
        padding: 40px 20px 20px !important;
    }

    .mobile-nav-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        max-width: 100% !important;
    }

    .mobile-nav-links li {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .mobile-nav-links a {
        font-size: 18px !important;
        padding: 12px 20px !important;
        margin: 0 !important;
    }
}

/* Small Mobile Landscape */
@media (max-width: 480px) and (orientation: landscape) {
    .mobile-nav-links a {
        font-size: 16px !important;
        padding: 10px 15px !important;
    }
}

/* ====
====================================
   MOBILE OVERLAY FIX - ENSURE HIDDEN BY DEFAULT
   ======================================== */

/* Force mobile overlay to be completely hidden by default */
.mobile-nav-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
}

/* Only show when explicitly activated */
.mobile-nav-overlay.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Ensure mobile navigation links are hidden by default */
.mobile-nav-overlay .mobile-nav-links li {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

/* Show navigation links only when overlay is active */
.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Force hide on desktop */
@media (min-width: 769px) {

    .mobile-nav-overlay,
    .mobile-nav-overlay.active {
        display: none !important;
    }
}

/ *========================================IMMEDIATE OVERLAY HIDE - PAGE LOAD FIX========================================*/
/* Immediate hide on page load - highest priority */
.mobile-nav-overlay:not(.active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Body scroll lock prevention */
body.mobile-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ========
================================
   HAMBURGER MENU VISIBILITY FIX
   ======================================== */

/* Force hamburger menu to be visible on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 30px !important;
        height: 30px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1003 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ensure hamburger lines are visible */
    .hamburger-line {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: var(--text-white) !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Force hide hamburger menu on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Ensure hamburger is always visible in nav container */
.nav-container .mobile-menu-toggle {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 
========================================
   MOBILE OVERLAY DEBUG - MANUAL ACTIVATION
   ======================================== */

/* Test class to manually show overlay */
.mobile-nav-overlay.test-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    z-index: 1002 !important;
}

.mobile-nav-overlay.test-active .mobile-nav-links li {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/ *========================================MOBILE OVERLAY FORCE SHOW - FINAL OVERRIDE========================================*/
/* AGGRESSIVE: Force show overlay when active */
.mobile-nav-overlay.active {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Force show all content inside active overlay */
.mobile-nav-overlay.active * {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.mobile-nav-overlay.active .mobile-nav {
    display: flex !important;
}

.mobile-nav-overlay.active .mobile-nav-links {
    display: block !important;
}

.mobile-nav-overlay.active .mobile-nav-links li {
    display: block !important;
}

.mobile-nav-overlay.active .mobile-nav-links a {
    display: block !important;
    color: var(--text-white) !important;
    font-size: 24px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 10px 0 !important;
}

/* Test: Manual show class */
.mobile-nav-overlay.manual-show {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 0, 0, 0.8) !important;
    z-index: 99999 !important;
}

/*
 ========================================
   FINAL HAMBURGER FIX - HIGHEST PRIORITY
   ======================================== */

/* FORCE hamburger to show on mobile - override everything */
@media (max-width: 768px) {

    .mobile-menu-toggle,
    .nav-container .mobile-menu-toggle,
    header .mobile-menu-toggle,
    .header .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 30px !important;
        height: 30px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .hamburger-line {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: var(--text-white) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* FORCE hide on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ===
=====================================
   MOBILE NAVIGATION CLOSE BUTTON
   ======================================== */

/* Force show and style the close button */
.mobile-nav-overlay .mobile-nav-close {
    display: flex !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: var(--text-white) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-nav-overlay .mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--primary-color) !important;
    transform: rotate(90deg) !important;
}

.mobile-nav-overlay .mobile-nav-close:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Ensure close button is visible when overlay is active */
.mobile-nav-overlay.active .mobile-nav-close {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/ *========================================SIMPLE X CLOSE BUTTON - NO CIRCLE========================================*/
/* Override close button to be simple X like hamburger position */
.mobile-nav-overlay .mobile-nav-close {
    display: flex !important;
    position: fixed !important;
    top: 15px !important;
    right: 20px !important;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-white) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.mobile-nav-overlay .mobile-nav-close:hover {
    background: transparent !important;
    color: var(--primary-color) !important;
    transform: rotate(90deg) !important;
}

.mobile-nav-overlay .mobile-nav-close:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    background: transparent !important;
}

/* Ensure it's visible when overlay is active */
.mobile-nav-overlay.active .mobile-nav-close {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====
===================================
   FINAL CLOSE BUTTON OVERRIDE - HIGHEST PRIORITY
   ======================================== */

/* Ultra-specific selector to override everything */
.mobile-nav-overlay.active .mobile-nav-close,
.mobile-nav-overlay .mobile-nav-close,
button.mobile-nav-close {
    /* Reset conflicting properties first */
    all: initial !important;

    /* Then set our desired properties */
    display: flex !important;
    position: fixed !important;
    top: 15px !important;
    right: 20px !important;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-white) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    font-family: inherit !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.mobile-nav-overlay.active .mobile-nav-close:hover,
.mobile-nav-overlay .mobile-nav-close:hover,
button.mobile-nav-close:hover {
    background: transparent !important;
    color: var(--primary-color) !important;
    transform: rotate(90deg) !important;
    border: none !important;
}

.mobile-nav-overlay.active .mobile-nav-close:focus,
.mobile-nav-overlay .mobile-nav-close:focus,
button.mobile-nav-close:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    background: transparent !important;
    border: none !important;
}

/ *========================================MOBILE OVERLAY BLACK BACKGROUND========================================*/
/* Force solid black background for mobile overlay */
.mobile-nav-overlay,
.mobile-nav-overlay.active {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Ensure overlay content is visible on black background */
.mobile-nav-overlay.active .mobile-nav-links a {
    color: var(--text-white) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-overlay.active .mobile-nav-links a:hover {
    color: var(--primary-color) !important;
    background: var(--primary-color-10) !important;
}

.mobile-nav-overlay.active .mobile-nav-links a.active {
    color: var(--primary-color) !important;
    background: var(--primary-color-15) !important;
}

/*
 ========================================
   FORCE SOLID BLACK OVERLAY BACKGROUND
   ======================================== */

/* Ultra-specific override for solid black background */
.mobile-nav-overlay,
.mobile-nav-overlay.active,
div.mobile-nav-overlay,
div.mobile-nav-overlay.active {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Override any inline styles that might be setting background */
.mobile-nav-overlay[style*="background"] {
    background: #000000 !important;
}

.mobile-nav-overlay.active[style*="background"] {
    background: #000000 !important;
}

/* =
=======================================
   FORCE OVERLAY TO COVER ENTIRE SCREEN
   ======================================== */

/* Ensure overlay covers entire viewport */
.mobile-nav-overlay,
.mobile-nav-overlay.active,
div.mobile-nav-overlay,
div.mobile-nav-overlay.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
    overflow: hidden !important;
}

/* Ensure it covers on all devices including mobile with address bars */
@supports (-webkit-touch-callout: none) {

    .mobile-nav-overlay,
    .mobile-nav-overlay.active {
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }
}

/* For mobile devices with dynamic viewport */
.mobile-nav-overlay,
.mobile-nav-overlay.active {
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height */
}

/* =========
===============================
   DESKTOP NAVIGATION CURSOR & ACTIVE STATE FIXES
   ======================================== */

/* Ensure proper cursor on navigation links */
.nav-links a,
.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active {
    cursor: pointer !important;
}

/* Fix active state - only show active when actually on that section */
.nav-links a.active {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
}

.nav-links a.active::after {
    width: 100% !important;
}

/* Remove any incorrect active states by default */
.nav-links a {
    color: var(--text-white) !important;
    font-weight: 500 !important;
}

.nav-links a::after {
    width: 0 !important;
}

/* Only show underline on hover or active */
.nav-links a:hover::after {
    width: 100% !important;
}

.nav-links a:hover {
    color: var(--primary-color) !important;
}

/* =======
===================================================================
   NAVIGATION FIXES - Critical fixes for font consistency and layout shifts
   ======================================== */

/* CRITICAL: Ensure all navigation links have consistent font properties */
.nav-links a {
    font-weight: 500 !important;
    font-size: inherit !important;
    position: relative !important;
}

/* CRITICAL: Active state should ONLY change color - NO font changes */
.nav-links a.active {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    /* SAME as normal links */
    font-size: inherit !important;
    /* SAME as normal links */
}

/* CRITICAL: Ensure active state shows underline */
.nav-links a.active::after {
    width: 100% !important;
    background: var(--primary-color) !important;
}

/* CRITICAL: Consistent underline for all states */
.nav-links a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary-color) !important;
    transition: width 0.3s ease !important;
}

/* CRITICAL: Hover should also maintain same font properties */
.nav-links a:hover {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    /* SAME as normal links */
    font-size: inherit !important;
    /* SAME as normal links */
}

.nav-links a:hover::after {
    width: 100% !important;
}

/* Prevent layout shifts from image/video loading */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent content jumping during page transitions */
body {
    overflow-x: hidden;
}

.header {
    will-change: transform;
}

/* Force consistent navigation styling - override any conflicting styles */
.nav-links a,
.nav-links a:link,
.nav-links a:visited,
.nav-links a:hover,
.nav-links a:active,
.nav-links a.active {
    font-family: inherit !important;
    font-weight: 500 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   END NAVIGATION FIXES
   ======================================== */


/* ULTIMATE CSS VARIABLE FIX - Maximum Specificity */
html body .header .nav-links a:hover,
html body .nav-links a:hover,
body .header .nav-links a:hover,
body .nav-links a:hover {
    color: var(--primary-color) !important;
}

html body .header .nav-links a.active,
html body .nav-links a.active,
body .header .nav-links a.active,
body .nav-links a.active {
    color: var(--primary-color) !important;
}

/* Force all primary color usage */
.text-primary,
.btn-primary,
.button-primary {
    color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}



/* NUCLEAR CSS OVERRIDE - MAXIMUM PRIORITY */
html body * .nav-links a:hover,
html body * .header .nav-links a:hover,
html body .nav-links a:hover,
html body .header .nav-links a:hover,
body .nav-links a:hover,
.header .nav-links a:hover,
.nav-links a:hover {
    color: var(--primary-color) !important;
}

html body * .nav-links a.active,
html body * .header .nav-links a.active,
html body .nav-links a.active,
html body .header .nav-links a.active,
body .nav-links a.active,
.header .nav-links a.active,
.nav-links a.active {
    color: var(--primary-color) !important;
}

/* Override any remaining blue colors */
* {
    --bs-primary: var(--primary-color) !important;
    --bootstrap-primary: var(--primary-color) !important;
}

/* Force primary color on common elements */
.btn-primary,
.button-primary,
.text-primary,
a.text-primary {
    color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Navigation specific overrides */
nav a:hover,
.navbar a:hover,
.navigation a:hover {
    color: var(--primary-color) !important;
}

/* ULTIMATE NUCLEAR OVERRIDE - MAXIMUM FORCE */
html body .nav-links a:hover,
html body .header .nav-links a:hover,
body .nav-links a:hover,
body .header .nav-links a:hover,
.nav-links a:hover,
.header .nav-links a:hover {
    color: var(--primary-color) !important;
}

html body .nav-links a.active,
html body .header .nav-links a.active,
body .nav-links a.active,
body .header .nav-links a.active,
.nav-links a.active,
.header .nav-links a.active {
    color: var(--primary-color) !important;
}

/* Force hardcoded red on ALL navigation */
nav a:hover,
.navbar a:hover,
.navigation a:hover,
.nav a:hover,
header a:hover,
.menu a:hover {
    color: var(--primary-color) !important;
}

/* Override Bootstrap and any framework */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
}

/* Responsive logo image and text styles */
@media (max-width: 768px) {
    .logo {
        gap: 8px;
    }

    .logo .logo-image {
        max-height: 32px;
    }

    .logo .logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .logo {
        gap: 6px;
    }

    .logo .logo-image {
        max-height: 28px;
    }

    .logo .logo-text {
        font-size: 18px;
    }
}
/* 
Video Text Layering Fix - Ensure all video text appears on top */
.video-overlay * {
    z-index: 10 !important;
    position: relative !important;
    color: var(--text-white) !important;
}

.video-thumbnail .video-title,
.video-thumbnail .video-duration,
.video-thumbnail .video-play-btn {
    z-index: 15 !important;
    position: relative !important;
    color: var(--text-white) !important;
}

/* Ensure video overlay is always above the image */
.video-thumbnail .video-overlay {
    z-index: 5 !important;
}
/* =======
=================================
   DYNAMIC COLOR OVERRIDES - FIXES HARDCODED COLORS
   ======================================== */

/* Mobile Navigation Overrides */
.mobile-nav-links a:hover {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.mobile-nav-links a.active {
    background: var(--primary-color-15) !important;
    border-color: var(--primary-color-50) !important;
}

.mobile-nav-links a:focus {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

/* Hero Section Overrides */
.hero-dot.active {
    box-shadow: 0 0 15px var(--primary-color-60), 0 0 30px var(--primary-color-30) !important;
    border-color: var(--primary-color-30) !important;
}

.hero-dot.active::before {
    background: var(--primary-color-20) !important;
}

.dot.active {
    box-shadow: 0 0 15px var(--primary-color-60), 0 0 30px var(--primary-color-30) !important;
    border-color: var(--primary-color-30) !important;
}

.dot.active::before {
    background: var(--primary-color-20) !important;
}

.dot:hover {
    background: var(--primary-color-80) !important;
    box-shadow: 0 0 10px var(--primary-color-40) !important;
    border-color: var(--primary-color-20) !important;
}

.dot:hover::before {
    background: var(--primary-color-10) !important;
}

/* Button and Control Overrides */
.hero-control-btn:hover {
    background: var(--primary-color-30) !important;
    border: 1px solid var(--primary-color-50) !important;
}

/* Contact Form Overrides */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-10) !important;
}

.contact-form .btn-primary:hover {
    box-shadow: 0 10px 25px var(--primary-color-30) !important;
}

/* Social Links Overrides */
.social-link:hover {
    box-shadow: 0 10px 25px var(--primary-color-40) !important;
}

/* Articles Section Overrides */
.articles-dot:hover {
    background: var(--primary-color-80) !important;
    box-shadow: 0 0 10px var(--primary-color-40) !important;
}

/* Loading Spinner Overrides */
.loading-spinner,
.hero-loading-spinner {
    border: 4px solid var(--primary-color-30) !important;
    border-top: 4px solid var(--primary-color) !important;
}

/* Carousel and Slider Overrides */
.carousel-dot:hover,
.slider-dot:hover {
    box-shadow: 0 0 10px var(--primary-color-50) !important;
}

/* Image and Media Overrides */
.profile-image,
.featured-image {
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 25px var(--primary-color-30) !important;
}

/* Focus States Override */
*:focus {
    outline-color: var(--primary-color) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-20) !important;
}

/* Ripple Effects Override */
.ripple::before {
    background: var(--primary-color-30) !important;
}

.ripple-effect {
    background: radial-gradient(circle, var(--primary-color-30) 0%, transparent 70%) !important;
}

/* Hard-coded Color Overrides */
[style*="color: #ff0040"] {
    color: var(--primary-color) !important;
}

[style*="background: #ff0040"] {
    background: var(--primary-color) !important;
}

[style*="border-color: #ff0040"] {
    border-color: var(--primary-color) !important;
}

/* End Dynamic Color Overrides *//* ======
==================================
   ADDITIONAL COLOR OVERRIDES - COMPREHENSIVE FIX
   ======================================== */

/* Force override all remaining hardcoded red colors */
* {
    /* Override any inline styles with hardcoded colors */
}

/* Specific selector overrides for remaining hardcoded colors */
.mobile-nav-links a:hover,
.mobile-nav-links a:focus,
.mobile-nav-links a:active {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.mobile-nav-links a.active {
    background: var(--primary-color-15) !important;
    border-color: var(--primary-color-50) !important;
}

/* Hero section comprehensive overrides */
.hero-dot,
.dot,
.carousel-dot {
    /* Base state handled by existing CSS */
}

.hero-dot.active,
.dot.active,
.carousel-dot.active {
    background: var(--primary-color) !important;
    box-shadow: 0 0 15px var(--primary-color-60), 0 0 30px var(--primary-color-30) !important;
    border-color: var(--primary-color-30) !important;
}

.hero-dot:hover,
.dot:hover,
.carousel-dot:hover {
    background: var(--primary-color-80) !important;
    box-shadow: 0 0 10px var(--primary-color-40) !important;
    border-color: var(--primary-color-20) !important;
}

/* Loading and spinner overrides */
.loading-spinner,
.hero-loading-spinner,
.spinner,
[class*="spinner"] {
    border-color: var(--primary-color-30) transparent transparent transparent !important;
    border-top-color: var(--primary-color) !important;
}

/* Button and control comprehensive overrides */
.btn-primary,
.button-primary,
.primary-button,
[class*="btn-primary"] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
[class*="btn-primary"]:hover {
    background-color: var(--primary-color-80) !important;
    border-color: var(--primary-color-80) !important;
    box-shadow: 0 4px 15px var(--primary-color-30) !important;
}

/* Form focus states comprehensive override */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
[type="text"]:focus,
[type="email"]:focus,
[type="password"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-20) !important;
    outline-color: var(--primary-color) !important;
}

/* Link and anchor overrides */
a:hover,
a:focus,
a:active {
    color: var(--primary-color) !important;
}

/* Ripple and animation effects */
.ripple::before,
.ripple-effect,
[class*="ripple"]::before {
    background: var(--primary-color-30) !important;
}

/* Shadow and glow effects */
[style*="box-shadow"][style*="255, 0, 64"],
[style*="box-shadow"][style*="93, 167, 231"] {
    box-shadow: 0 0 15px var(--primary-color-40) !important;
}

/* Border color overrides */
[style*="border-color"][style*="#ff0040"],
[style*="border-color"][style*="rgb(255, 0, 64)"],
[style*="border-color"][style*="rgba(255, 0, 64"] {
    border-color: var(--primary-color) !important;
}

/* Background color overrides */
[style*="background"][style*="#ff0040"],
[style*="background"][style*="rgb(255, 0, 64)"],
[style*="background"][style*="rgba(255, 0, 64"] {
    background-color: var(--primary-color) !important;
}

/* Text color overrides */
[style*="color"][style*="#ff0040"],
[style*="color"][style*="rgb(255, 0, 64)"] {
    color: var(--primary-color) !important;
}

/* Gradient overrides */
[style*="linear-gradient"][style*="#ff0040"],
[style*="linear-gradient"][style*="rgb(255, 0, 64)"],
[style*="radial-gradient"][style*="#ff0040"],
[style*="radial-gradient"][style*="rgb(255, 0, 64)"] {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important;
}

/* Media query overrides for responsive design */
@media (max-width: 768px) {
    .mobile-nav-links a:hover,
    .mobile-nav-links a:focus {
        background: var(--primary-color-10) !important;
        border-color: var(--primary-color-30) !important;
    }
    
    .mobile-nav-links a.active {
        background: var(--primary-color-15) !important;
        border-color: var(--primary-color-50) !important;
    }
}

/* High specificity overrides for stubborn elements */
body .hero-section .hero-dot.active,
body .carousel .dot.active,
body .slider .dot.active {
    background: var(--primary-color) !important;
    box-shadow: 0 0 15px var(--primary-color-60), 0 0 30px var(--primary-color-30) !important;
}

body .contact-section input:focus,
body .contact-section textarea:focus,
body .contact-form input:focus,
body .contact-form textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-10) !important;
}

body .social-links a:hover,
body .social-media a:hover {
    box-shadow: 0 10px 25px var(--primary-color-40) !important;
    color: var(--primary-color) !important;
}

/* End Additional Color Overrides *//
* ========================================
   CONTACT SECTION SPECIFIC OVERRIDES
   ======================================== */

/* Contact Section Social Links - Force Primary Color */
.contact .social-links .social-link,
.contact-info-section .social-link,
#contact .social-link {
    border: 2px solid var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
    transition: all 0.3s ease !important;
}

.contact .social-links .social-link:hover,
.contact-info-section .social-link:hover,
#contact .social-link:hover {
    background: white !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px var(--primary-color-40) !important;
}

/* Contact Method Icons */
.contact-method .method-icon {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.contact-method:hover .method-icon {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color) !important;
}

/* Contact Form Focus States */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-20) !important;
    outline: none !important;
}

/* Contact Form Submit Button */
.contact-form .submit-btn,
.contact-form button[type="submit"] {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

.contact-form .submit-btn:hover,
.contact-form button[type="submit"]:hover {
    background: var(--primary-color-80) !important;
    border-color: var(--primary-color-80) !important;
    box-shadow: 0 10px 25px var(--primary-color-30) !important;
    transform: translateY(-2px) !important;
}

/* Contact Method Links */
.contact-method a,
.contact-methods a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.contact-method a:hover,
.contact-methods a:hover {
    color: var(--primary-color-80) !important;
    text-decoration: underline !important;
}

/* SVG Icons in Social Links */
.social-link svg {
    fill: currentColor !important;
    color: inherit !important;
    width: 24px;
    height: 24px;
}

/* Ensure SVG icons are visible in contact section */
.contact .social-link svg,
#contact .social-link svg {
    fill: white !important;
}

.contact .social-link:hover svg,
#contact .social-link:hover svg {
    fill: var(--primary-color) !important;
}

/* High Specificity Override for Stubborn Elements */
body .contact-section .social-link:hover,
body #contact .social-link:hover,
body .contact .social-link:hover {
    background: white !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 10px 25px var(--primary-color-40) !important;
}

/* Remove any red borders or backgrounds */
.contact *[style*="#ff0040"],
.contact *[style*="rgb(255, 0, 64)"],
.contact *[style*="rgba(255, 0, 64"] {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

/* End Contact Section Overrides *//* 
========================================
   EMAIL AND LINKEDIN CONTACT METHOD OVERRIDES
   ======================================== */

/* Contact Methods - Email, Phone, LinkedIn Icons */
.contact-methods .contact-method {
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.contact-methods .contact-method:hover {
    border-color: var(--primary-color-30) !important;
    background: var(--primary-color-10) !important;
    transform: translateY(-2px) !important;
}

/* Method Icons - Email (📧), Phone (📞), LinkedIn (💼) */
.contact-method .method-icon {
    background: var(--primary-color-10) !important;
    border: 2px solid var(--primary-color-30) !important;
    color: var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

.contact-method:hover .method-icon {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 5px 15px var(--primary-color-40) !important;
}

/* Method Details - Text and Links */
.contact-method .method-details h4 {
    color: var(--primary-color) !important;
}

.contact-method .method-details p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.contact-method .method-details a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.contact-method .method-details a:hover {
    color: var(--primary-color-80) !important;
    border-bottom-color: var(--primary-color-80) !important;
    text-decoration: none !important;
}

/* Specific overrides for Email method */
.contact-method:has(.method-icon:contains("📧")) .method-icon,
.contact-method .method-icon:contains("📧") {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.contact-method:has(.method-icon:contains("📧")):hover .method-icon,
.contact-method:hover .method-icon:contains("📧") {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px var(--primary-color-40) !important;
}

/* Specific overrides for LinkedIn method */
.contact-method:has(.method-icon:contains("💼")) .method-icon,
.contact-method .method-icon:contains("💼") {
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.contact-method:has(.method-icon:contains("💼")):hover .method-icon,
.contact-method:hover .method-icon:contains("💼") {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px var(--primary-color-40) !important;
}

/* Alternative selector approach for method icons */
.contact-methods .contact-method:nth-child(1) .method-icon {
    /* Email icon */
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.contact-methods .contact-method:nth-child(1):hover .method-icon {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px var(--primary-color-40) !important;
}

.contact-methods .contact-method:nth-child(3) .method-icon {
    /* LinkedIn icon (assuming it's 3rd after email and phone) */
    background: var(--primary-color-10) !important;
    border-color: var(--primary-color-30) !important;
}

.contact-methods .contact-method:nth-child(3):hover .method-icon {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px var(--primary-color-40) !important;
}

/* Force override any remaining red colors in contact methods */
.contact-methods *[style*="#ff0040"],
.contact-methods *[style*="rgb(255, 0, 64)"],
.contact-methods *[style*="rgba(255, 0, 64"],
.contact-method *[style*="#ff0040"],
.contact-method *[style*="rgb(255, 0, 64)"],
.contact-method *[style*="rgba(255, 0, 64"] {
    color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* High specificity overrides for contact methods */
body .contact .contact-methods .contact-method:hover,
body #contact .contact-methods .contact-method:hover {
    border-color: var(--primary-color-30) !important;
    background: var(--primary-color-10) !important;
}

body .contact .contact-method .method-icon:hover,
body #contact .contact-method .method-icon:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

/* End Email and LinkedIn Contact Method Overrides */