/* CSS Reset */
*,
::before,
::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* General Body and HTML Styles */
html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* Selection styling to match provided design */
::selection {
    background-color: #222;
    color: white;
    text-shadow: none;
}

/* Global transparency overrides for particles visibility */
[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-700 {
    background: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .bg-gray-900,
[data-theme="dark"] .bg-gray-800,
[data-theme="dark"] .bg-gray-700 {
    background: rgba(31, 41, 55, 0.8) !important;
}

/* Ensure particles show through content areas */
section,
.section,
.container {
    background: transparent !important;
}

body {
    font-family: var(--main-font); /* Apply main font */
    background-color: var(--bg-color); /* Light background like provided design */
    color: #111; /* Dark text for readability */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Responsive title sizing to fit containers */
.works__title {
    font-size: clamp(1.5rem, 4vw, 4rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* Loader Styles */
.loader {
    transition: opacity 0.7s ease-out, visibility 0.7s ease-out;
    opacity: 1;
    visibility: visible;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Loader SVG Animation */
@keyframes animate-loader-rect {
    0% {
        stroke-dasharray: 0 800;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 400 800;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 400 800;
        stroke-dashoffset: -400;
    }
}

.animate-loader-rect {
    animation: animate-loader-rect 2s linear infinite;
}

/* Loader Box Animations */
@keyframes bounce-delay-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes bounce-delay-2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-bounce-delay-1 {
    animation: bounce-delay-1 1.5s infinite 0s;
}

.animate-bounce-delay-2 {
    animation: bounce-delay-2 1.5s infinite 0.2s;
}

/* Particles.js Background */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Put particles behind all content */
    opacity: 1; /* Ensure particles are visible by default */
    pointer-events: none; /* Allow clicks to pass through */
}

#particles-js canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dots__circle.active {
    background-color: var(--accent-color); /* Updated to use accent color variable */
    transform: scale(1.2); /* Slightly enlarge active dot */
    box-shadow: 0 0 8px rgba(1, 98, 127, 0.7); /* Updated shadow to match */
}

/* Sections */
.section {
    position: relative;
    z-index: 1; /* Ensure sections are above particles */
    padding-top: 80px; /* Space for fixed nav */
    padding-bottom: 80px;
}

/* Make sections semi-transparent so particles show through */
.section.bg-gray-900 {
    background: rgba(236, 240, 241, 0.8) !important; /* Slightly less transparent */
    color: #111 !important; /* Dark text */
}

.section.bg-gray-800 {
    background: rgba(255, 255, 255, 0.8) !important; /* Slightly less transparent */
    color: #111 !important; /* Dark text */
}

/* Hero Section Specifics */
/* Hero Text Section - responsive width and container-aware sizing */
.hero-text-section {
    width: clamp(85%, 90%, 95%);
    text-align: left;
    padding-right: clamp(0.5rem, 2vw, 2rem);
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Hero main title (animated name) responsive container sizing */
.hero__name {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.5rem, 6vw, 4.5rem) !important;
    line-height: clamp(1.1, 1.2, 1.3) !important;
    letter-spacing: clamp(-0.02em, 0.01em, 0.05em) !important;
    word-spacing: clamp(-0.1em, 0, 0.1em) !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.hero__subtitle {
    /* Enhanced responsive font sizing for subtitle */
    font-size: clamp(0.875rem, 2.5vw, 1.8rem) !important;
    font-family: var(--sub-font);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    color: var(--accent-color) !important; /* Teal accent for subtitle */
    margin-top: clamp(0.5rem, 2vw, 1.5rem);
    line-height: clamp(1.2, 1.3, 1.4) !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.arrow {
    /* Tailwind classes handle positioning and animation */
    text-shadow: 0 0 10px rgba(1, 98, 127, 0.8); /* Teal glow */
    color: #222 !important; /* Dark arrow */
}

/* Navigation Responsive Font Sizing */
.nav__logo h1 {
    font-size: clamp(1rem, 3vw, 2xl) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* Navigation container responsive */
nav .max-w-7xl {
    padding: 0 clamp(0.5rem, 2vw, 1.5rem) !important;
}

/* Desktop Navigation Links */
nav ul {
    gap: clamp(0.5rem, 2vw, 1.5rem) !important;
}

nav ul li a {
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: clamp(0.25rem, 1vw, 0.5rem) !important;
}

/* Mobile Navigation Menu */
#mobile-menu {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Mobile menu in light theme */
[data-theme="light"] #mobile-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Mobile menu close button */
#mobile-menu button {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    transition: background-color 0.3s ease !important;
}

#mobile-menu button:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Light theme mobile menu button */
[data-theme="light"] #mobile-menu button {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #111 !important;
}

[data-theme="light"] #mobile-menu button:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile menu links styling */
#mobile-menu ul li a {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#mobile-menu ul li a:hover {
    background: rgba(99, 102, 241, 0.8) !important;
    border-color: rgba(99, 102, 241, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* Light theme mobile menu links */
[data-theme="light"] #mobile-menu ul li a {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] #mobile-menu ul li a:hover {
    background: rgba(99, 102, 241, 0.8) !important;
    color: white !important;
    border-color: rgba(99, 102, 241, 0.9) !important;
}

/* Navigation buttons responsive sizing */
.nav__toggle,
#theme-toggle {
    font-size: clamp(0.875rem, 2.5vw, 1.25rem) !important;
    padding: clamp(0.25rem, 1vw, 0.5rem) !important;
}

/* Right side controls spacing */
nav .flex.items-center.space-x-3 {
    gap: clamp(0.25rem, 1vw, 0.75rem) !important;
}

/* Navigation Typing Effect */
.nav-typing {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    color: white; /* Default white for dark theme */
    font-size: clamp(0.875rem, 2.5vw, 1.5rem) !important;
}

.nav-nbr {
    display: inline-block;
    margin: 0 0.01em;
    transition: all 0.2s ease;
    min-width: clamp(0.2em, 0.5vw, 0.3em);
    text-align: center;
    color: #9ca3af; /* Gray for initial state */
}

.nav-nbr.revealed {
    color: white !important; /* White for dark theme */
}

/* Light theme navigation colors */
[data-theme="light"] .nav-typing {
    color: #111 !important; /* Dark text for light theme */
}

[data-theme="light"] .nav-nbr.revealed {
    color: #111 !important; /* Dark text for revealed characters in light theme */
}

[data-theme="light"] .nav__logo h1 {
    color: #111 !important; /* Dark text for entire navigation in light theme */
}

/* Animated Name Effect - Enhanced container-aware responsive sizing */
.random {
    font-family: var(--main-font);
    font-size: clamp(1.5rem, 6vw, 4.5rem) !important; /* More conservative, container-aware sizing */
    font-weight: 900;
    line-height: clamp(1.1, 1.2, 1.3) !important; /* Responsive line height */
    color: var(--accent-color); /* Updated to use accent color variable */
    text-shadow: 0 0 20px rgba(1, 98, 127, 0.5); /* Updated shadow to match */
    letter-spacing: clamp(-0.02em, 0.01em, 0.05em) !important; /* Responsive letter spacing */
    word-spacing: clamp(-0.1em, 0, 0.1em) !important; /* Responsive word spacing */
    min-height: clamp(4rem, 12vw, 12rem) !important; /* More conservative height */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align to start for natural text flow */
    align-items: flex-start; /* Align to top for multi-line */
    align-content: flex-start; /* Align content to top */
    width: 100%; /* Use full container width */
    max-width: 100%; /* Ensure it fits container */
    margin: 0; /* Remove auto centering, align to left */
    padding: 0; /* Remove padding for full stretch */
    overflow-wrap: break-word !important; /* Enhanced text wrapping */
    word-wrap: break-word !important;
    hyphens: auto !important; /* Allow hyphenation for long words */
}

.nbr {
    display: inline-block;
    margin: 0 clamp(0.005em, 0.1em, 0.15em); /* Responsive character spacing */
    transition: all 0.3s ease;
    animation: numberFlip 0.1s ease-in-out;
    text-align: center;
    min-width: clamp(0.1em, 0.3em, 0.5em); /* Responsive minimum width */
    flex-shrink: 1; /* Allow shrinking to fit container */
    max-width: 100%; /* Ensure characters fit in container */
}

/* Dynamic line breaks handled by JavaScript based on phrase content */
.nbr::after {
    content: none; /* No automatic line breaks */
}

.ltr {
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes numberFlip {
    0% { 
        transform: rotateY(0deg) scale(1);
        opacity: 1;
    }
    50% { 
        transform: rotateY(90deg) scale(0.8);
        opacity: 0.5;
    }
    100% { 
        transform: rotateY(0deg) scale(1);
        opacity: 1;
    }
}

/* Animation trigger button (hidden by default) */
.animation-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent-color); /* Updated to use accent color variable */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    display: none;
    font-size: 0.9rem;
    font-family: var(--sub-font);
}

.animation-trigger:hover {
    background: #014c63; /* Darker teal on hover */
}

/* Responsive adjustments for the animated name - now handled by clamp() in main .random rule */
@media (max-width: 1200px) {
    /* Font sizing now handled by clamp() for better responsiveness */
}

@media (max-width: 768px) {
    /* Font sizing now handled by clamp() for better responsiveness */
    
    /* Hero section adjustments */
    .hero__subtitle {
        font-size: 1.1rem !important;
    }
    
    /* Content blocks */
    .content-block {
        padding: 1.5rem !important;
        margin: 0 1rem;
    }
    
    /* Table responsiveness */
    .table-wrapper {
        margin: 0 -1rem;
        padding: 0 1rem;
    }
}

@media (max-width: 640px) {
    /* Font sizing now handled by clamp() for better responsiveness */
    
    .nbr {
        margin: 0 0.01em;
        min-width: 0.25em;
    }
    
    /* Hero section mobile layout */
    .hero__subtitle {
        font-size: 1rem !important;
    }
    
    /* Content spacing */
    .content-block {
        padding: 1rem !important;
        margin: 0 0.5rem;
    }
    
    /* Section padding */
    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {
    /* Font sizing now handled by clamp() for better responsiveness */
    
    .nbr {
        margin: 0 0.005em;
        min-width: 0.2em;
    }
    
    .hero__subtitle {
        font-size: 0.9rem !important;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Original tablet/small desktop responsive adjustments */
@media (max-width: 768px) and (min-width: 641px) {
    /* Font sizing now handled by clamp() for better responsiveness */
}

/* Large mobile/small tablet specific */
@media (max-width: 640px) and (min-width: 481px) {
    /* Font sizing now handled by clamp() for better responsiveness */
    
    .nbr {
        margin: 0 0.01em;
        min-width: 0.3em;
    }
}

/* Photo spacing adjustments */
.person {
    margin-right: 3rem; /* Additional right margin for photo container */
}

/* Mobile-first responsive photo layout */
@media (max-width: 767px) {
    .person {
        margin-right: 0;
        margin-top: 2rem;
        text-align: center;
    }
    
    .person img {
        max-width: 250px;
        width: 100%;
        height: auto;
    }
    
    /* Stack hero content vertically on mobile with enhanced container fitting */
    .hero-text-section {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: clamp(1rem, 4vw, 2rem) !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-left: clamp(0.5rem, 2vw, 1rem) !important;
        padding-right: clamp(0.5rem, 2vw, 1rem) !important;
    }
    
    /* Enhanced mobile sizing for hero elements */
    .random {
        font-size: clamp(1.2rem, 8vw, 3rem) !important;
        min-height: clamp(3rem, 16vw, 8rem) !important;
        justify-content: center !important; /* Center on mobile */
        text-align: center !important;
    }
    
    .hero__subtitle {
        font-size: clamp(0.75rem, 4vw, 1.2rem) !important;
        text-align: center !important;
        margin-top: clamp(0.5rem, 3vw, 1rem) !important;
    }
}

@media (min-width: 768px) {
    .person {
        margin-right: 4rem; /* Even more space on larger screens */
    }
    
    .person img {
        max-width: 300px;
    }
    
    /* Optimize hero text for medium to large screens */
    .hero-text-section {
        width: clamp(85%, 90%, 95%) !important;
        text-align: left !important;
        padding-right: clamp(1rem, 3vw, 2.5rem) !important;
    }
    
    .random {
        font-size: clamp(2rem, 6vw, 4.5rem) !important;
        min-height: clamp(5rem, 12vw, 12rem) !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .hero__subtitle {
        font-size: clamp(1rem, 2.5vw, 1.8rem) !important;
        text-align: left !important;
    }
}

@media (min-width: 1024px) {
    .person {
        margin-right: 5rem; /* Maximum space on desktop */
    }
    
    .person img {
        max-width: 350px;
    }
}

/* Extra large screens optimization */
@media (min-width: 1200px) {
    .hero-text-section {
        width: 85% !important;
        padding-right: 2rem !important;
    }
    
    .random {
        font-size: clamp(3rem, 5vw, 4.5rem) !important;
        min-height: clamp(8rem, 10vw, 12rem) !important;
    }
    
    .hero__subtitle {
        font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
    }
}

/* Content Blocks */
.content-block {
    /* Tailwind classes handle background, padding, border-radius, shadow */
    line-height: 1.8;
    background: rgba(255, 255, 255, 0.9) !important; /* Less transparent content blocks */
    color: #111 !important; /* Dark text */
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.content-block h3 {
    font-family: var(--sub-font);
    color: var(--accent-color) !important; /* Use accent color variable for subheadings */
}

.content-block ul li {
    margin-bottom: 0.5rem;
}

.content-block a {
    text-decoration: none;
}

/* Curriculum Section Tables */
.curriculum-table {
    min-width: 100%; /* Full width */
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* Enable fixed layout for better text control */
    font-size: clamp(0.75rem, 2vw, 1rem); /* Responsive font size */
}

.table-wrapper {
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    max-width: 100%;
}

/* Add scrollbar styling for better UX */
.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #4f46e5;
}

.curriculum-table th,
.curriculum-table td {
    padding: clamp(0.5rem, 2vw, 1rem);
    border-bottom: 1px solid #4a5568; /* Gray-600 border */
    font-size: clamp(0.75rem, 1.8vw, 1rem); /* Responsive text */
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    vertical-align: top;
}

.curriculum-table th {
    font-weight: 600;
    background-color: #4a5568; /* Gray-700 for header */
    font-size: clamp(0.8rem, 2vw, 1.1rem); /* Slightly larger for headers */
}

.curriculum-table tbody tr:last-child td {
    border-bottom: none; /* No border for the last row */
}

.curriculum-table tbody tr:nth-child(even) {
    background-color: #2d3748; /* Gray-800 for even rows */
}

/* Specific column widths for better text fitting */
.curriculum-table th:nth-child(1),
.curriculum-table td:nth-child(1) {
    width: 15%; /* Weeks column */
}

.curriculum-table th:nth-child(2),
.curriculum-table td:nth-child(2) {
    width: 25%; /* Topics column */
}

.curriculum-table th:nth-child(3),
.curriculum-table td:nth-child(3) {
    width: 30%; /* Key Concepts column */
}

.curriculum-table th:nth-child(4),
.curriculum-table td:nth-child(4) {
    width: 30%; /* Projects/Activities column */
}

.curriculum-header img {
    object-fit: contain;
}

.resource-category ul li img {
    object-fit: contain;
}

/* Responsive curriculum section */
@media (max-width: 768px) {
    .curriculum-header {
        flex-direction: column;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .curriculum-header img {
        margin-bottom: 1rem;
        margin-right: 0;
    }
    
    .curriculum-header h3 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .curriculum-header h3 {
        font-size: 1.2rem !important;
    }
    
    .curriculum-header img {
        width: 48px;
        height: 48px;
    }
}

/* Footer */
footer a {
    text-decoration: none;
}

/* Animation Classes (replicated from original with CSS keyframes) */
.animated {
    opacity: 0; /* Hidden by default */
    transform: translateY(20px); /* Slightly off-screen for slide-in effects */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Specific Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fadeIn.in-view {
    animation: fadeIn 0.8s ease-out forwards;
}

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

.fadeInDown.in-view {
    animation: fadeInDown 0.8s ease-out forwards;
}

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

.fadeInRight.in-view {
    animation: fadeInRight 0.8s ease-out forwards;
}

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

.fadeInUp.in-view {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.bounce.infinite {
    animation: bounce 2s infinite;
}

/* Animation Delays (using data-delay attribute with JS) */
/* No direct CSS for this, handled by JS */

/* Responsive adjustments for tables */
@media (max-width: 1024px) {
    .curriculum-table {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    }
    
    .curriculum-table th,
    .curriculum-table td {
        padding: clamp(0.4rem, 1.5vw, 0.75rem);
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    }
    
    .curriculum-table th {
        font-size: clamp(0.75rem, 2vw, 1rem);
    }
}

/* Tablet and mobile table adjustments */
@media (max-width: 768px) {
    .table-wrapper {
        margin: 0;
        border-radius: 0.5rem;
        padding: 0;
        overflow-x: auto; /* Keep horizontal scroll for tables */
        background: rgba(55, 65, 81, 0.95);
    }
    
    .curriculum-table {
        display: table !important; /* Keep tables visible on mobile */
        min-width: 600px; /* Minimum width for readability */
        font-size: clamp(0.65rem, 1.8vw, 0.8rem);
    }
    
    .curriculum-table th,
    .curriculum-table td {
        padding: clamp(0.3rem, 1.2vw, 0.6rem);
        font-size: clamp(0.65rem, 1.8vw, 0.8rem);
        line-height: 1.3;
    }
    
    .curriculum-table th {
        font-size: clamp(0.7rem, 2vw, 0.85rem);
        background-color: #4a5568; /* Preserve original color */
    }
    
    .curriculum-table tbody tr:nth-child(even) {
        background-color: #2d3748; /* Preserve original color */
    }
    
    .curriculum-table tbody tr:hover {
        background-color: #374151; /* Preserve hover color */
    }
    
    /* Show mobile cards only as additional content, not replacement */
    .mobile-cards {
        display: none !important; /* Hide cards, keep tables */
    }
    
    .curriculum-header h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important; /* Responsive header */
    }
    
    .curriculum-header img {
        width: clamp(35px, 7vw, 56px);
        height: clamp(35px, 7vw, 56px);
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .curriculum-table {
        min-width: 500px; /* Smaller minimum for very small screens */
        font-size: clamp(0.6rem, 2vw, 0.75rem);
    }
    
    .curriculum-table th,
    .curriculum-table td {
        padding: clamp(0.25rem, 1vw, 0.5rem);
        font-size: clamp(0.6rem, 2vw, 0.75rem);
    }
    
    .curriculum-table th {
        font-size: clamp(0.65rem, 2.2vw, 0.8rem);
    }
    
    .curriculum-header h3 {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
    }
    
    .curriculum-header img {
        width: clamp(30px, 6vw, 48px);
        height: clamp(30px, 6vw, 48px);
    }
}

/* Mobile card carousel styles - Hidden since tables remain visible */
.mobile-cards {
    display: none !important; /* Always hidden - tables are used instead */
}

.card-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    background: rgba(55, 65, 81, 0.9);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 200px; /* Ensure minimum height */
}

.cards-container {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
    position: relative;
}

.curriculum-card {
    min-width: 100%;
    padding: 1.5rem;
    background: rgba(55, 65, 81, 0.95);
    border: 1px solid #4a5568;
    position: relative;
    display: none; /* Initially hidden */
}

.curriculum-card:first-child {
    display: block; /* Show first card by default */
}

.card-header {
    background: #4a5568;
    color: white;
    padding: 0.75rem;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    font-weight: 600;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    text-align: center;
    border-radius: 0.5rem 0.5rem 0 0;
}



.card-row {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #4a5568;
}

.card-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-label {
    font-weight: bold;
    color: var(--accent-color);
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    margin-bottom: 0.25rem;
    display: block;
}

.card-value {
    color: #f9fafb;
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    line-height: 1.4;
    word-wrap: break-word;
}

/* Navigation controls for cards */
.card-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0 1rem;
}

.card-nav-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    cursor: pointer;
    transition: background 0.2s ease;
    min-width: 60px;
}

.card-nav-button:hover {
    background: #014c63;
}

.card-nav-button:disabled {
    background: #6b7280;
    cursor: not-allowed;
}

.card-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.card-counter {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    color: #d1d5db;
    margin: 0 0.5rem;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    transition: background 0.2s ease;
}

.indicator-dot.active {
    background: var(--accent-color);
}

/* Alternative stacked layout for very small screens */
@media (max-width: 480px) {
    .table-wrapper {
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }
    
    .curriculum-card {
        padding: 1rem;
    }
    
    .card-header {
        margin: -1rem -1rem 0.75rem -1rem;
        padding: 0.6rem;
        font-size: clamp(0.8rem, 3vw, 1rem);
    }
    
    .card-row {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .card-label {
        font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    }
    
    .card-value {
        font-size: clamp(0.75rem, 3vw, 0.9rem);
    }
    
    .card-nav-button {
        padding: 0.4rem 0.8rem;
        font-size: clamp(0.7rem, 2.5vw, 0.85rem);
        min-width: 50px;
    }
}

/* Enhanced table responsiveness for very small screens */
@media (max-width: 320px) {
    .table-wrapper {
        margin: 0 -0.5rem;
        padding: 0.5rem;
    }
    
    .curriculum-table {
        min-width: 450px; /* Even smaller for tiny screens */
        font-size: clamp(0.55rem, 2.5vw, 0.7rem);
    }
    
    .curriculum-table th,
    .curriculum-table td {
        padding: clamp(0.2rem, 1vw, 0.4rem);
        font-size: clamp(0.55rem, 2.5vw, 0.7rem);
    }
    
    .curriculum-table th {
        font-size: clamp(0.6rem, 2.8vw, 0.75rem);
    }
}

/* Theme Variables and Theming System */
:root {
    /* Font and color variables */
    --accent-color: #01627f;
    --bg-color: #ecf0f1;
    --main-font: 'Montserrat', sans-serif;
    --sub-font: 'Work Sans', sans-serif;
    --g-ratio: 1.618;
    --anim-delay: 1000ms;

    /* Light theme colors - updated to match provided design */
    --bg-primary-light: var(--bg-color);
    --bg-secondary-light: #ffffff;
    --bg-tertiary-light: #ddd;
    --text-primary-light: #111;
    --text-secondary-light: #222;
    --text-accent-light: var(--accent-color);
    --border-light: #ccc;
    --shadow-light: rgba(0, 0, 0, 0.15);
    
    /* Dark theme colors (keeping current dark theme) */
    --bg-primary-dark: #111827;
    --bg-secondary-dark: #1f2937;
    --bg-tertiary-dark: #374151;
    --text-primary-dark: #f9fafb;
    --text-secondary-dark: #d1d5db;
    --text-accent-dark: var(--accent-color);
    --border-dark: #4b5563;
    --shadow-dark: rgba(0, 0, 0, 0.25);
}

/* Default to dark theme */
[data-theme="dark"] {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-accent: var(--text-accent-dark);
    --border-color: var(--border-dark);
    --shadow-color: var(--shadow-dark);
}

[data-theme="light"] {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-tertiary: var(--bg-tertiary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-accent: var(--text-accent-light);
    --border-color: var(--border-light);
    --shadow-color: var(--shadow-light);
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Light theme overrides */
[data-theme="light"] .bg-gray-900 {
    background-color: rgba(236, 240, 241, 0.6) !important;
    color: var(--text-primary-light) !important;
}

[data-theme="light"] .bg-gray-800 {
    background-color: rgba(255, 255, 255, 0.6) !important;
    color: var(--text-primary-light) !important;
}

[data-theme="light"] .bg-gray-700 {
    background-color: rgba(221, 221, 221, 0.7) !important;
    color: var(--text-primary-light) !important;
}

[data-theme="light"] .text-white {
    color: var(--text-primary-light) !important;
}

[data-theme="light"] .text-indigo-300 {
    color: var(--text-accent-light) !important;
}

[data-theme="light"] nav {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

[data-theme="light"] #particles-js {
    opacity: 1; /* Full opacity in light theme */
}

/* Dark theme overrides */
[data-theme="dark"] .bg-gray-900 {
    background-color: rgba(17, 24, 39, 0.8) !important; /* Less transparent dark background */
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .bg-gray-800 {
    background-color: rgba(31, 41, 55, 0.8) !important; /* Less transparent dark background */
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .bg-gray-700 {
    background-color: rgba(55, 65, 81, 0.8) !important; /* Less transparent dark background */
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .text-white {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .text-indigo-300 {
    color: var(--text-accent-dark) !important;
}

[data-theme="dark"] nav {
    background-color: rgba(31, 41, 55, 0.95) !important;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] #particles-js {
    opacity: 1; /* Full opacity in dark theme too */
}

/* Dark theme transparent sections */
[data-theme="dark"] .section.bg-gray-900 {
    background: rgba(17, 24, 39, 0.8) !important; /* Less transparent dark background */
    color: #f9fafb !important; /* Light text */
}

[data-theme="dark"] .section.bg-gray-800 {
    background: rgba(31, 41, 55, 0.8) !important; /* Less transparent dark background */
    color: #f9fafb !important; /* Light text */
}

/* Dark theme transparent content blocks */
[data-theme="dark"] .content-block {
    background: rgba(55, 65, 81, 0.9) !important; /* Less transparent dark content blocks */
    color: #f9fafb !important; /* Light text */
    border: 1px solid #6b7280;
}

/* Theme toggle button styles */
.theme-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-icon-light,
.theme-icon-dark {
    font-size: 18px;
    transition: opacity 0.3s ease;
}

/* Additional Mobile-First Responsive Design */

/* Base mobile styles (320px and up) */
@media (min-width: 320px) {
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Improved navigation for mobile */
    nav {
        padding: 0.75rem 1rem;
    }
    
    .nav__logo h1 {
        font-size: 1rem;
    }
    
    /* Better button sizing */
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .theme-icon-light,
    .theme-icon-dark {
        font-size: 14px;
    }
}

/* Small mobile (375px and up) */
@media (min-width: 375px) {
    body {
        font-size: 15px;
    }
    
    .nav__logo h1 {
        font-size: 1.1rem;
    }
    
    .theme-toggle {
        width: 38px;
        height: 38px;
    }
    
    .theme-icon-light,
    .theme-icon-dark {
        font-size: 16px;
    }
}

/* Large mobile (425px and up) */
@media (min-width: 425px) {
    body {
        font-size: 16px;
    }
    
    .nav__logo h1 {
        font-size: 1.2rem;
    }
    
    .theme-toggle {
        width: 40px;
        height: 40px;
    }
    
    .theme-icon-light,
    .theme-icon-dark {
        font-size: 18px;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .nav__logo h1 {
        font-size: 1.5rem;
    }
    
    /* Better photo sizing */
    .person img {
        max-width: 300px;
        height: auto;
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .nav__logo h1 {
        font-size: 1.75rem;
    }
    
    .person img {
        max-width: 350px;
    }
}

/* Large screens (1440px and up) */
@media (min-width: 1440px) {
    .nav__logo h1 {
        font-size: 2rem;
    }
    
    .container {
        max-width: 1200px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .section {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    
    /* Font sizing now handled by clamp() for better responsiveness */
    
    .hero__subtitle {
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .photo-background-blend {
        filter: contrast(1.2) brightness(1.1);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animated {
        animation: none;
    }
}

/* Dark mode media query support */
@media (prefers-color-scheme: dark) {
    :root {
        --default-theme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --default-theme: light;
    }
}

/* Hide curriculum table rows by default */
.curriculum-table tbody {
    display: none;
}
/* Show rows when parent section is hovered */
.curriculum-section:hover .curriculum-table tbody,
.curriculum-section:focus-within .curriculum-table tbody {
    display: table-row-group;
}
/* Make the header look like a button on hover/focus */
.curriculum-header {
    cursor: pointer;
    transition: background 0.2s;
}
.curriculum-header:focus,
.curriculum-header:hover {
    background: rgba(99,102,241,0.08);
    outline: 2px solid #6366F1;
}