:root {
    /* Colors */
    --primary-color: #2c2c2c;
    --secondary-color: #666;
    --accent-color: #f9f9f9;
    --green-accent: #5a8f5a;
    --green-dark: #4a7a4a;
    --border-color: #e0e0e0;
    --bg-light: #f5f5f5;

    /* Layout */
    --sidebar-width: 280px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Smooth scrolling for anchor links */
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-color);
    background: var(--bg-light);
    line-height: 1.6;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: white;
    border-right: 1px solid var(--border-color);
    padding: 40px 30px;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.profile-section {
    margin-bottom: 20px;
}

.profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--green-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    position: relative;
    box-shadow: 0 4px 20px rgba(90, 143, 90, 0.3);
    overflow: hidden;
}

.avatar-text {
    font-size: 32px;
    font-weight: 700;
    z-index: 2;
}

.avatar-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--green-accent);
    opacity: 0.3;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

.sidebar-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.sidebar-role {
    font-size: 13px;
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-weight: 500;
}

.sidebar-location {
    font-size: 12px;
    color: var(--green-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sidebar-location i {
    font-size: 11px;
}

/* Currently Reading badge */
.currently-reading {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(90, 143, 90, 0.07);
    border-radius: 8px;
    border-left: 2px solid var(--green-accent);
    text-align: left;
    animation: fadeInUp 0.4s ease;
}

.reading-label {
    display: block;
    color: var(--green-accent);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    gap: 4px;
}

.reading-label i {
    margin-right: 4px;
    font-size: 9px;
}

.reading-title {
    display: block;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.4;
}



.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Reduced from 5px */
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reduced from 12px */
    padding: 10px 14px;
    /* Reduced from 12px 16px */
    color: var(--secondary-color);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-normal);
    font-size: 14px;
    /* Reduced from 15px */
    font-weight: 500;
}

.nav-link i {
    width: 18px;
    /* Reduced from 20px */
    font-size: 14px;
    /* Reduced from 16px */
}

.nav-link:hover,
.nav-link.active {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: translateX(5px);
}

.nav-link.active {
    background: var(--green-accent);
    color: white;
}

/* Dua Tooltip — redesigned to match site UI */
.dua-icon-container {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.dua-icon {
    color: var(--secondary-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.dua-icon:hover {
    opacity: 1;
    color: var(--primary-color);
    transform: scale(1.1);
}

.dua-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: -8px;
    transform: translateY(6px);
    /* White card — matches site cards */
    background: #ffffff;
    color: var(--primary-color);
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: 1.7;
    width: 280px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: all 0.25s ease;
    white-space: normal;
    pointer-events: none;
}

.dua-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12px;
    transform: none;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}

.dua-icon-container:hover .dua-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: narrower width */
@media (max-width: 600px) {
    .dua-tooltip {
        width: 220px;
    }
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 60px;
    box-sizing: border-box;
}

/* Ayah Banner */
.ayah-banner {
    background: white;
    border-radius: 12px;
    padding: 30px 40px;
    margin-bottom: 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ayah-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.refresh-icon {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 44px;
    height: 44px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--secondary-color);
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.refresh-icon:hover {
    background: var(--green-accent);
    color: white;
    transform: rotate(180deg);
    box-shadow: 0 4px 12px rgba(90, 143, 90, 0.3);
}

.refresh-icon:active {
    transform: scale(0.95);
}

/* Mobile - Larger touch target */
@media (max-width: 768px) {
    .refresh-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
        left: 15px;
        top: 15px;
    }
}

.ayah-reference {
    font-size: 14px;
    color: var(--green-accent);
    font-weight: 600;
    margin-bottom: 10px;
}

.ayah-text,
.ayah-reference {
    transition: opacity 0.22s ease;
}

.ayah-text {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    color: var(--primary-color);
    line-height: 1.8;
    font-style: italic;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 60px 0;
    margin-bottom: 60px;
}

.hero-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
}

.hero-description {
    font-size: 16px;
    color: var(--secondary-color);
    max-width: 700px;
    margin: 0 auto 20px;
    line-height: 1.8;
}

.hero-interests {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.typed-text {
    color: var(--green-accent);
    font-weight: 600;
}

.cta-button {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--green-accent);
    color: var(--green-accent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cta-button:hover {
    background: var(--green-accent);
    color: white;
    transform: translateY(-2px);
}

/* Content Sections */
.content-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

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

.section-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

.section-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.icon-btn {
    width: 36px;
    height: 36px;
    background: var(--accent-color);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--secondary-color);
}

.icon-btn:hover {
    background: var(--green-accent);
    color: white;
    border-color: var(--green-accent);
}

.icon-btn:hover i {
    transform: rotate(180deg);
}

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

.text-link {
    color: var(--green-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.text-link:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

/* Quote Card */
.quote-card {
    padding: 25px 30px;
    background: #f9f9f9 !important;
    border-radius: 8px;
    border-left: 4px solid var(--green-accent);
}

.quote-text {
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.8;
}

.quote-author {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--secondary-color);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Contemplation Card - Identical to Quote Card */
.contemplation-card,
#contemplationCardHome,
section#contemplations .contemplation-card {
    padding: 20px;
    background: #f9f9f9 !important; /* Same as quote card - forced */
    border-radius: 8px;
    border-left: 4px solid var(--green-accent); /* Same green accent */
}

.contemplation-text {
    font-size: 16px;
    color: var(--primary-color);
    line-height: 1.8;
    font-style: italic; /* Italic for contemplations to differentiate */
}

/* Books Section */
.books-section {
    margin-bottom: 40px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.book-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.book-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.book-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    background: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

.book-placeholder {
    font-size: 48px;
    color: var(--green-accent);
    opacity: 0.3;
}

.book-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.book-status.reading {
    background: #ffd93d;
    color: #8b6914;
}

.book-status.read {
    background: #6bcf7f;
    color: #1e5128;
}

.book-status.recommended {
    background: #a8dadc;
    color: #1d3557;
}

.book-info {
    padding: 15px;
}

.book-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-author {
    font-size: 13px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.book-rating {
    display: flex;
    gap: 3px;
}

.book-rating i {
    font-size: 12px;
    color: #ffd93d;
}

.book-rating .far {
    color: #ddd;
}

/* Art Gallery */
.art-gallery {
    margin-bottom: 40px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.art-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.art-item:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.art-item:hover .art-overlay {
    transform: translateY(0);
}

/* Contact Section */
.contact-section {
    text-align: center;
    padding: 40px 0;
}

.contact-section h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.contact-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    /* Safe wrapping if screen is tiny */
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    /* Smol padding */
    background: white;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 20px;
    /* Pill shape */
    font-weight: 500;
    font-size: 13px;
    /* Smol font */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
}

.contact-link:hover {
    background: var(--green-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(90, 143, 90, 0.2);
}

.contact-link i {
    font-size: 18px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Mobile Toggle */
.mobile-toggle {
    display: none;
}

/* Responsive */
@media (max-width: 968px) {

    /* Mobile Navigation */
    .mobile-toggle {
        display: block;
        /* Visible on mobile */
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 40px;
        height: 40px;
        font-size: 18px;
        color: var(--primary-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .sidebar {
        position: fixed;
        left: -280px;
        /* Hidden by default */
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
        border-right: none;
        border-bottom: none;
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 30px 20px;
    }

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

    .books-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 20px 15px;
    }

    .ayah-banner {
        padding: 20px;
    }

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

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .content-section {
        padding: 15px 10px;
        margin-bottom: 15px;
    }

    .hero-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
}

/* Horizontal Scroll Art (Single Row) */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    margin-top: 15px;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--green-accent) #f0f0f0;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 6px;
    /* Slimmer scrollbar */
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--green-accent);
    border-radius: 4px;
}


/* Experience & Education Layout */
.experience-block {
    margin-bottom: 20px;
    /* Reduced from 40px */
}

.experience-block h3 {
    font-size: 20px;
    margin-bottom: 12px;
    /* Reduced from 20px */
    color: var(--primary-color);
    padding-bottom: 8px;
    /* Reduced from 10px */
    border-bottom: 1px solid #f0f0f0;
}

.section-divider {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 25px 0;
    /* Reduced from 40px */
}

/* Education List Styles: Unique Horizontal Timeline */
.education-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Flexible */
    gap: 30px;
    padding-top: 50px; /* Space for top timeline */
    position: relative;
}

/* The Horizontal Line Connector */
.education-list::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15%; /* Start somewhat inside */
    right: 15%; /* End somewhat inside */
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
    /* Only show on desktop if enough items */
}

/* Education Item enhancements for timeline */
.education-item {
    position: relative;
    overflow: visible !important; /* Allow dot to be seen */
    margin-top: 0;
}

/* The Dot on the timeline (Desktop Default) - Gray for completed */
.education-item::before {
    content: '';
    position: absolute;
    top: -42px; /* Position up on the line level */
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #ccc; /* Gray border for completed */
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff; /* White halo to break line */
}

/* Current/Ongoing Education - Green Dot */
.education-item.current::before {
    background: var(--green-accent);
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--green-accent); /* Green halo */
}

/* The vertical connector from dot to card (Desktop Default) */
.education-item::after {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: linear-gradient(to bottom, var(--green-accent), rgba(255,255,255,0));
    opacity: 0.5;
    z-index: 0;
}

@media (max-width: 768px) {
    /* Education List: Vertical Timeline on Mobile */
    .education-list {
        display: flex;
        flex-direction: column;
        padding-top: 10px;
        gap: 30px;
        padding-left: 20px; /* Space for line */
        border-left: 2px solid #e0e0e0; /* The Vertical Line */
        margin-left: 10px;
    }

    .education-list::after {
        display: none; /* Hide horizontal line */
    }

    .education-item {
        margin-left: 15px;
    }

    /* Reposition Dot for Vertical Layout - Gray for completed */
    .education-item::before {
        display: block !important;
        top: 0;
        left: -37px; /* Align with border-left of parent (20px padding + 15px margin + 2px border approx) */
        transform: none;
        border: 2px solid #ccc; /* Gray border */
        width: 12px;
        height: 12px;
        background: white; /* White for completed */
        box-shadow: none;
    }

    /* Current Education - Green on Mobile */
    .education-item.current::before {
        background: var(--green-accent);
        border-color: white;
        box-shadow: 0 0 0 2px var(--green-accent);
    }

    /* Hide vertical connector from desktop style */
    .education-item::after {
        display: none;
    }
}


/* Timeline (Experience) */
.timeline-section {
    position: relative;
    padding: 20px 0;
    max-width: 800px;
    /* Limit width for readability if single column */
}


/* Clean up old layouts */
.experience-layout {
    display: none;
    /* Hide old container if it exists */
}

.experience-column h3 {
    /* Legacy style, should rely on new .experience-block h3 */
    display: none;
}

/* Remove connecting line from previous timeline style */
/* Main Section Containers */
.content-section,
.books-section,
.hero {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    /* Reduced from 35px */
    margin-bottom: 25px;
    /* Reduced from 35px */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    /* Reduced from 25px */
    /* Sticky header for sections if needed, but not implemented here */
}

.education-list::before {
    display: none;
}

/* Horizontal Scroll Container for Certifications */
.horizontal-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 15px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--green-accent) #f0f0f0;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--green-accent);
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--green-dark);
}


/* Elegant Compact Certifications */
.cert-card {
    min-width: 260px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: white;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--green-accent);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
    height: auto;
    box-shadow: var(--shadow-sm);
}

.cert-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--green-dark);
    box-shadow: 0 4px 12px rgba(90, 143, 90, 0.15);
}

.cert-icon {
    width: 36px;
    height: 36px;
    background: rgba(90, 143, 90, 0.1);
    color: var(--green-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cert-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cert-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.cert-info h5 {
    font-size: 14px;
    margin: 0 0 4px 0;
    font-weight: 600;
    color: var(--primary-color);
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
}

.cert-info p {
    font-size: 12px;
    margin: 0 0 3px 0;
    color: #777;
    font-weight: 500;
    line-height: 1.2;
}

.cert-date {
    display: block;
    font-size: 11px;
    color: #999;
    font-weight: 400;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .horizontal-scroll {
        padding: 15px 0 20px 0;
        gap: 12px;
    }
    
    .cert-card {
        min-width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .horizontal-scroll {
        padding: 15px 0 20px 0;
        gap: 10px;
    }
    
    .cert-card {
        min-width: 250px;
        max-width: 250px;
    }
}

/* Art Gallery Items */
.art-item {
    min-width: 300px;
    max-width: 350px;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.art-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.art-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.art-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Mobile - Full width art cards */
@media (max-width: 768px) {
    .art-item {
        min-width: 85vw;
        max-width: 85vw;
    }
    
    .art-item img {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .art-item {
        min-width: 90vw;
        max-width: 90vw;
    }
    
    .art-item img {
        height: 300px;
    }
}



/* Minimal Education Items (No Image) - Enhanced Visibility */
.education-item {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    /* Reduced from 12px */
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Visible shadow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    /* Reduced from 3px */
    transition: all 0.3s ease;
    height: auto;
}

.education-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* Enhanced shadow on hover */
    border-color: var(--green-accent);
}

/* Remove old Edu Icon styles if unused */
.edu-icon {
    display: none;
}

.edu-content {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    width: 100%;
}

/* Remove arrow if any left */
.edu-content::before {
    display: none;
}

.edu-school {
    font-weight: 600;
    font-size: 14px;
    /* Normal size */
    color: var(--primary-color);
    margin-bottom: 3px;
    line-height: 1.2;
}

.edu-degree {
    font-size: 12px;
    /* Normal size */
    color: var(--secondary-color);
    margin-bottom: 3px;
    font-weight: 500;
    line-height: 1.2;
}

.edu-date {
    font-size: 10px;
    /* Normal size */
    color: #999;
    background: transparent;
    padding: 0;
    display: block;
    line-height: 1.2;
}


.timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 30px;
    border-left: 2px solid #e0e0e0;
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
}

.timeline-dot {
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--green-accent);
    border-radius: 50%;
}

.timeline-content h4 {
    margin: 0;
    font-size: 16px;
    color: var(--primary-color);
}

.timeline-content .company {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 14px;
}

.timeline-content .date {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.timeline-content p {
    font-size: 14px;
    color: var(--secondary-color);
    margin-top: 5px;
}

/* Project Cards */
.project-card {
    background: #ffffff;
    border-radius: 16px;
    /* More rounded */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

.project-img {
    width: 100%;
    aspect-ratio: 16/9; /* Standard screenshot ratio */
    height: auto;
    background: #f8f9fa; /* Light placeholder background instead of black */
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the area nicely */
    object-position: top center; /* Focus on top part usually (header/nav) */
    transition: transform 0.5s ease;
}


.project-card:hover .project-img img {
    transform: scale(1.05);
}

.project-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--primary-color);
    line-height: 1.3;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tech-tag {
    background: #f0fdf4;
    color: var(--green-accent);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid rgba(75, 123, 75, 0.1);
}

.project-desc {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    padding: 8px 0;
    transition: gap 0.2s;
}

.project-link:hover {
    gap: 10px;
    text-decoration: underline;
}

/* Certification Grid (Adjusted for Horizontal or Grid) */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

/* Project Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.project-modal {
    background: white;
    width: 95%;
    max-width: 1000px;
    height: 85vh;
    border-radius: 16px;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .project-modal {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    z-index: 50;
    background: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.modal-close:hover {
    background: #f0f0f0;
    transform: rotate(90deg);
}

.modal-body {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Left Side: Image */
.modal-image-header {
    width: 55%;
    height: 100%;
    background: #f8f9fa; /* Light background for cleaner look */
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
}

.modal-image-header img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure full screenshot is visible */
    object-position: center;
}

/* Right Side: Details */
.modal-content-details {
    width: 45%;
    padding: 40px;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Mobile/Tablet Layout (Column) */
@media (max-width: 900px) {
    .project-modal {
        height: 90vh; /* Fixed height to allow internal scrolling */
        max-width: 95%;
        border-radius: 12px;
    }

    .modal-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .modal-image-header {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9; /* Perfect fitting for standard screenshots */
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid #eee;
        background: #000; /* Dark bg often looks better for 'cinema' feel on mobile top */
    }

    .modal-content-details {
        width: 100%;
        padding: 24px; /* Reduced padding */
        overflow-y: visible;
        flex-grow: 1;
    }
    
    .modal-close {
        top: 10px;
        right: 10px;
        background: rgba(255,255,255,0.9);
    }
}


.modal-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.modal-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.modal-tech {
    background: #eef5ee;
    color: var(--green-accent);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.modal-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--secondary-color);
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.modal-actions {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--green-accent);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.modal-btn:hover {
    background: #4a7a4a;
}



/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Tablet and below (768px) */
@media (max-width: 768px) {

    /* Education - Stack vertically */
    .education-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Certifications - Smaller cards */
    .cert-card {
        min-width: 160px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .cert-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .cert-info h5 {
        font-size: 12px;
        max-width: 120px;
    }

    .cert-info p {
        font-size: 10px;
    }

    /* Horizontal scroll containers */
    .horizontal-scroll {
        padding: 15px 10px;
        /* Ensure full visibility */
        margin: 0 -10px;
        width: calc(100% + 20px);
    }

    /* Content sections */
    .content-section,
    .books-section,
    .hero {
        padding: 20px;
        margin-bottom: 20px;
    }

    /* Section headers */
    .section-header {
        margin-bottom: 12px;
    }

    .section-header h2 {
        font-size: 20px;
    }

    /* Experience blocks */
    .experience-block {
        margin-bottom: 30px;
    }

    .experience-block h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* Timeline adjustments */
    .timeline-item {
        padding-left: 20px;
        margin-bottom: 20px;
    }

    .timeline-content h4 {
        font-size: 15px;
    }

    .timeline-content .company {
        font-size: 13px;
    }

    .timeline-content .date {
        font-size: 11px;
    }

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

    /* Projects grid */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Books grid */
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {

    /* Hero section */
    .hero {
        padding: 15px;
    }

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

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

    /* Certifications - Even smaller */
    .cert-card {
        min-width: 140px;
        padding: 6px;
    }

    .cert-icon {
        width: 20px;
        height: 20px;
    }

    .cert-info h5 {
        font-size: 11px;
        max-width: 100px;
    }

    /* Education cards */
    .education-item {
        padding: 10px;
    }

    .edu-school {
        font-size: 13px;
    }

    .edu-degree {
        font-size: 11px;
    }

    .edu-date {
        font-size: 9px;
    }

    /* Books - Single column on very small screens */
    .books-grid {
        grid-template-columns: 1fr;
    }

    /* Section divider */
    .section-divider {
        margin: 25px 0;
    }
}

/* Large tablets and small desktops (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .education-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



.horizontal-scroll .art-item {
    min-width: 250px;
    /* Slightly smaller for more visible items */
    height: 250px;
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 8px;
    /* Softer corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #888;
}

.close-modal:hover {
    color: #333;
}

.view-all-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.view-all-link {
    color: var(--green-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* Footer Styles */
.site-footer {
    margin-top: 50px;
    padding: 30px 20px;
    font-size: 13px;
    color: #666;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    background: #fdfdfd;
    position: relative;
    overflow: visible;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f4;
    padding: 6px 14px;
    border-radius: 16px;
    color: #5f6368;
    font-weight: 500;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Mobile Footer */
@media (max-width: 968px) {
    .site-footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 20px;
        padding-bottom: 80px;
        /* Space for bottom nav if any or just extra */
    }

    .footer-left {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-right {
        justify-content: center;
        flex-wrap: wrap;
    }
}

.footer-icons {
    display: flex;
    gap: 15px;
    opacity: 0.8;
}

.footer-icons a {
    color: #666;
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.inspired-link {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted #999;
    transition: all 0.3s;
}

.inspired-link:hover {
    color: var(--green-accent);
    border-bottom-color: var(--green-accent);
}

/* Reverted Contemplation Card to match Quote Card Style */
.contemplation-card {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--secondary-color);
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.contemplation-text {
    font-size: 16px;
    font-style: italic;
    color: #555;
    margin: 0;
}

/* Mobile Minimal Typography Updates */
@media (max-width: 768px) {
    .hero-title {
        font-size: 24px !important;
    }

    .hero-description {
        font-size: 13px !important;
        line-height: 1.5;
    }

    .section-header h2 {
        font-size: 18px !important;
    }

    .quote-text {
        font-size: 13px !important;
        line-height: 1.4;
    }

    .quote-author {
        font-size: 12px !important;
    }

    .contemplation-text {
        font-size: 13px !important;
        line-height: 1.4;
    }

    .content-section,
    .books-section,
    .art-gallery,
    .hero {
        padding: 18px 12px !important;
        /* Tighter padding for minimal look */
        margin-bottom: 18px !important;
    }

    .book-title {
        font-size: 13px !important;
    }

    .book-author {
        font-size: 11px !important;
    }

    /* Ensure cards are compact */
    .quote-card,
    .contemplation-card {
        padding: 12px !important;
    }
}

/* ============================================
   FOOTER STYLES
   ============================================ */

.footer {
    background: transparent;
    border-top: 1px solid #eee;
    margin-top: 60px;
    padding: 20px 0;
    width: 100%;
    position: relative;
    overflow: visible;
}

.footer-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    /* Side padding */
    display: flex;
    justify-content: space-between !important;
    /* Force split */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.footer-text {
    color: #666;
}

.footer-icon {
    font-size: 14px;
    color: #999;
}

.footer-link {
    color: #666;
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.footer-credit-link {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.footer-credit-link:hover {
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 12px;
        padding: 0 20px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        justify-content: center;
        width: 100%;
        font-size: 11px;
    }
}

/* ============================================
   EXPERIENCE LAYOUT (Horizontal Cards) - LinkedIn Style
   ============================================ */

/* The Main Container for scrolling */
.timeline-section {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    padding-left: 5px; /* Visual breathing room */
    padding-right: 5px;
    /* Hide scrollbar but keep functionality if desired, or style it */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.timeline-section::-webkit-scrollbar {
    height: 6px;
}
.timeline-section::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

/* Card Styling for Groups */
.experience-group,
.experience-single {
    min-width: 280px; 
    width: max-content; /* Fit to content, but respect max-width */
    max-width: 400px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    flex-shrink: 0; 
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect for Cards */
.experience-group:hover,
.experience-single:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Remove the global vertical line connecting separate cards */
.experience-group::before,
.experience-single::before {
    display: none;
}

/* Company Header within Card */
.company-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

/* Logo Stays Cutesy Fixed 48px */
.company-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.company-info {
    display: flex;
    flex-direction: column;
}

.company-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.company-duration-total {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    font-weight: 500;
}

/* Timeline Internal (Vertical inside Card) */
.group-timeline {
    margin-left: 10px; 
    padding-left: 20px; 
    border-left: 2px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 5px;
}

/* Role Item */
.role-item {
    position: relative;
    /* Compact the spacing */
}

.role-dot {
    position: absolute;
    left: -27px; /* -20px padding - 6px(half dot) -1px(line) */
    top: 5px;
    width: 12px;
    height: 12px;
    background: #bbb;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #fff;
    z-index: 2;
}

.role-item:first-child .role-dot {
    background: var(--green-accent); 
}

.role-content h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.role-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    display: block;
}

.role-desc {
    font-size: 13px;
    color: var(--secondary-color);
    line-height: 1.5;
}

/* Single Item Layout (Inside Card) */
/* We reuse .company-header for the main info if it's single */
/* But in the JS, single item doesn't use company-header structure exactly.
   It uses .experience-single > .company-logo + .single-content.
   Let's adjust styling to match card layout. */

.experience-single {
    /* Already styled as card above */
    flex-direction: row; /* WAIT, we want vertical stack usually? OR row if simple? */
    /* Let's keep it column for consistency with "Card" look if strictly one role?
       Actually, previous single layout was Row. 
       Let's allow Row but wrap if needed, or enforce Column structure for Card.
       Let's stick to Row as defined in HTML structure, but constrain width.
       Wait, "Single" HTML is:
       <div class="experience-single"><img ...><div class="single-content">...</div></div>
    */
    align-items: flex-start;
    padding-top: 24px;
}

.single-content {
    display: flex;
    flex-direction: column;
}

.single-role-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--primary-color);
}

.single-company-name {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

.single-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

/* Global Responsive Image Reset */
img {
    max-width: 100%;
    height: auto;
}

/* Force Logo Size strictly 48x48 on ALL screens */
.company-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    object-fit: contain;
    flex-shrink: 0; /* Never shrink */
    flex-grow: 0;   /* Never grow */
}

/* Ensure single experience cards maintain row layout for logo+text */
.experience-single {
    flex-direction: row !important; 
    align-items: flex-start !important;
    gap: 15px;
}

/* Prevent Page Horizontal Scroll */
body {
    overflow-x: hidden;
    width: 100%;
}

/* Fix for mobile specific overrides if any */
@media (max-width: 768px) {
    .experience-single {
        flex-direction: row !important;
    }
}

/* Hover effect for Try Now button */
.demo-link:hover {
    background: var(--green-dark) !important;
    border-color: var(--green-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Responsive: Side-by-side slide for Projects */
@media (max-width: 768px) {
    #projectsContainer {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        padding-bottom: 20px;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-right: 20px; /* Peek next card */
    }

    /* Target direct children (projects) */
    #projectsContainer .project-card {
        min-width: 85vw; /* Almost full width */
        max-width: 85vw;
        flex-shrink: 0;
        scroll-snap-align: center;
        margin-bottom: 0;
    }
}