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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between; /* Pushes content to opposite ends */
    align-items: center; /* Vertically centers the content */
    background-color: #ffffff;
    padding: 15px 5%; /* Responsive horizontal padding */
    min-height: 60px;
    border-bottom: 4px solid #343463;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}


.event-info {
    font-size: 14px;
    color: #333;
    font-weight: 400;
    letter-spacing: 0.5px;
}






/* For smaller screens (Mobile) */
@media (max-width: 600px) {
    .navbar {
        padding: 10px 15px; /* Reduce padding on mobile */
    }


    .event-info {
        font-size: 12px; /* Shrink text slightly on mobile */
    }
}



.main-footer {
    background-color: #2b2b52; /* Dark navy blue */
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    padding-top: 40px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 40px;
    gap: 20px;
}

/* Common Column Style */
.footer-col {
    flex: 1;
}

/* Logos */
.footer-logo {
    height: 70px;
}

.partner-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .partner-box img {
        width: 100px;
    }

/* Dividers */
.footer-divider {
    width: 1px;
    height: 120px;
    background-color: #fbc32b; /* Gold/Yellow color */
    opacity: 0.6;
}

/* Text & Links */
.web-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
}

.about-box p {
    font-size: 11px;
    line-height: 1.6;
    opacity: 0.8;
}

/* Contact & Social */
.contact-box {
    font-size: 12px;
    line-height: 1.6;
}

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

.social-icon {
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Bottom Yellow Bar */
.copyright-bar {
    background-color: #fbc32b;
    color: #333;
    padding: 15px 5%;
    text-align: left;
    font-size: 11px;
}

    .copyright-bar p {
        max-width: 1200px;
        margin: 0 auto;
    }

/* --- RESPONSIVE QUERIES --- */

/* --- MOBILE FRIENDLY MEDIA QUERIES --- */

@media (max-width: 992px) {
    .footer-inner {
        flex-direction: column; /* Stack columns vertically */
        text-align: center;
        gap: 35px; /* Space between stacked sections */
        padding: 0 20px 40px; /* Side padding for mobile safety */
    }

    .footer-divider {
        display: none; /* Hide vertical gold lines on mobile */
    }

    .footer-col {
        width: 100%; /* Ensure columns take full width */
    }

    .partner-box,
    .social-links {
        justify-content: center; /* Center icons and logos */
        align-items: center;
    }

    .about-box p {
        max-width: 450px; /* Prevent text from stretching too wide */
        margin: 0 auto; /* Center the paragraph block */
    }

    .copyright-bar {
        text-align: center;
        padding: 20px;
    }

        .copyright-bar p {
            font-size: 10px; /* Slightly smaller text for small screens */
            line-height: 1.5;
        }
}

/* Extra small devices (Phones) */
@media (max-width: 480px) {
    .footer-logo {
        height: 55px; /* Shrink main logo slightly */
    }

    .partner-box img {
        width: 80px; /* Shrink partner logos */
    }

    .footer-inner {
        gap: 25px; /* Tighter spacing for small phones */
    }
}




.hero-banner {
    background-color: #353560; /* The dark navy blue from the image */
    color: white;
    padding: 40px 5%;
    font-family: Arial, sans-serif;
}

.banner-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* Image styling */
.banner-image img {
    width: 150px; /* Adjust size based on your actual asset */
    height: auto;
}

.banner-text h3 {
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.banner-text h1 {
    font-size: 3rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* Bottom info row styling */
.info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .info-item .icon {
        color: #ffcc00; /* Yellow icons */
        font-size: 1.2rem;
    }

    .info-item p {
        font-size: 0.95rem;
        font-weight: bold;
    }


/* Optional: If you want them to stack vertically on very small phones */
@media (max-width: 350px) {
    .navbar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 992px) {
    .banner-text h1 {
        font-size: 2.2rem;
    }
}

/* For Mobile Phones */
@media (max-width: 768px) {
    .banner-container {
        flex-direction: column; /* Stacks image on top of text */
        text-align: center;
    }

    .info-grid {
        justify-content: center; /* Center the icons on mobile */
        flex-direction: column;
        gap: 15px;
    }

    .banner-image img {
        width: 120px;
    }

    .banner-text h1 {
        font-size: 1.8rem;
    }
}




.sub-banner {
    background-color: #fbc32b; /* The bright yellow from the image */
    color: #000; /* Black text */
    padding: 15px 0; /* Vertical spacing */
    text-align: center;
    width: 100%;
}

    .sub-banner h2 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
        text-transform: none; /* Keeps it as "Workshop Schedule..." */
    }

/* --- Responsive adjustment for the yellow bar --- */
@media (max-width: 600px) {
    .sub-banner h2 {
        font-size: 1rem; /* Slightly smaller text on mobile */
        padding: 0 20px; /* Prevents text from hitting screen edges */
    }
}



.schedule-container {
    max-width: 1200px;
    margin: 50px auto;
    font-family: sans-serif;
    position: relative;
}

    /* Vertical Timeline Line */
    .schedule-container::before {
        content: '';
        position: absolute;
        left: 50px; /* Aligned with center of clock */
        top: 106px;
        bottom: 0;
        width: 1px;
        background: #363636;
        z-index: 1;
    }

/* Calendar Tabs */
.calendar-header {
    margin-left: 150px;
    margin-bottom: 50px;
}

    .calendar-header .label {
        color: #FFCC29;
        font-size: 12px;
        margin-bottom: 8px;
    }

.tab-buttons {
    display: flex;
    gap: 10px;
}

.tab-btn {
    padding: 14px 40px; /* Bigger click area */
    font-size: 16px; /* Larger text */
    border: 2px solid #FFCC29; /* Slightly thicker border */
    background: #fff;
    border-radius: 10px; /* More modern rounded corners */
    cursor: pointer;
    font-weight: 700;
    color: #30305e;
    transition: all 0.3s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    min-height: 48px; /* Accessibility friendly */
}

    .tab-btn.active {
        background: #30305E;
        color: #ffffff;
        border-color: #30305E;
        box-shadow: 0 8px 18px rgba(0,0,0,0.25);
        transform: translateY(-1px);
    }

/* Timeline Rows */
.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

.timeline-row {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.clock-col {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
    background: white;
}

.clock-img {
    width: 70px;
    height: auto;
}

.time-col {
    display: flex;
    align-items: center;
    width: 350px;
    color: #000;
    font-weight: bold;
    font-size: 24px;
    padding: 0 20px;
}

.yellow-arrow, .yellow-arrow_f {
    flex-grow: 1;
    height: 1px;
    background: #FFCC29;
    margin: 0 15px;
    position: relative;
}

    .yellow-arrow::after {
        content: '▶';
        position: absolute;
        right: -5px;
        top: -8px;
        color: #FFCC29;
        font-size: 12px;
    }

.info-col {
    flex-grow: 1;
}

.speaker-label {
    color: #FFCC29;
    font-size: 12px;
    margin: 0;
}

.speaker-name {
    color: #30305e;
    margin: 2px 0 10px 0;
    font-size: 18px;
}

.session-title {
    color: #000;
    margin: 0 0 10px 0;
    font-size: 24px;
}

.session-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    max-width: 500px;
}

/* --- MOBILE FRIENDLY RESPONSIVE --- */

/* Tablet & Smaller Desktop Adjustments */
@media (max-width: 1100px) {
    .time-col {
        width: 250px; /* Shrink time column before it breaks the layout */
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    /* 1. Remove the vertical line background for a cleaner mobile stack */
    .schedule-container::before {
        display: none;
    }

    .schedule-container {
        padding: 0 20px;
        margin: 30px auto;
    }

    /* 2. Center the Header and Tabs */
    .calendar-header {
        margin-left: 0;
        text-align: center;
        margin-bottom: 30px;
    }

    .tab-buttons {
        justify-content: center;
        flex-wrap: wrap; /* Allows buttons to wrap on very small screens */
    }

    .tab-btn {
        padding: 8px 15px; /* Smaller padding for mobile */
        font-size: 14px;
    }

    /* 3. Stack the Timeline Row Vertically */
    .timeline-row {
        flex-direction: column;
        align-items: center; /* Center content for better mobile balance */
        text-align: center;
        margin-bottom: 40px;
        border-bottom: 1px solid #f0f0f0; /* Add a subtle divider between sessions */
        padding-bottom: 30px;
    }

    .clock-col {
        margin-bottom: 15px;
        background: transparent; /* No longer need to hide the line */
    }

    /* 4. Adjust Time and remove Arrows */
    .time-col {
        width: 100%;
        justify-content: center;
        padding: 0;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .yellow-arrow, .yellow-arrow_f, .yellow-arrow::after {
        display: none; /* Arrows clutter mobile views */
    }

    /* 5. Adjust Session Info Text */
    .info-col {
        width: 100%;
    }

    .session-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .speaker-name {
        font-size: 16px;
    }

    .session-desc {
        font-size: 13px;
        margin: 0 auto; /* Keep text centered if aligned center */
        max-width: 100%;
    }
}

/* Small Phones */
@media (max-width: 480px) {
    .tab-btn {
        width: 100%; /* Stack date buttons on very small phones */
    }

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