/* ======================================= */
/* ===== 0. GLOBAL STYLES & VARIABLES ===== */
/* ======================================= */
:root {
    --primary-color: #006400; /* Dark Forest Green (Pakistan) */
    --accent-color: #E79D3A;  /* Goldenrod/Professional Gold (Afghanistan) */
    --text-color: #333333;
    --light-bg: #f8f9fa;
    --dark-bg: #2c3e50; /* Dark Footer Background */
    --white-bg: #ffffff;
    --header-height: 80px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-bg);
    
    /* 🛑 THE DEFINITIVE FIX 🛑 */
    /* This prevents the entire page from scrolling horizontally,
       and, most importantly, forces the vertical scrollbar to only appear 
       when the content is actually too long, overriding any small calculation errors 
       in the Hero section that caused the issue. */
    overflow-x: hidden; 
}

/* Also, ensure your global reset is still effective: */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ... */
}
ul {
    list-style: none;
}

section {
    padding: 80px 0;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Reusable Section Title Styling */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.section-title h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.section-title p {
    color: #666;
    font-size: 1.1rem;
}

/* Reusable CTA Buttons (Global) */
.btn {
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-primary-alt {
    background-color: var(--accent-color);
    color: var(--text-color);
    border: 2px solid var(--accent-color);
}

.btn-primary-alt:hover {
    background-color: #d18b33;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-secondary-alt {
    background-color: transparent;
    color: var(--white-bg);
    border: 2px solid var(--white-bg);
}

.btn-secondary-alt:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ======================================= */
/* ===== 1. HEADER / NAVIGATION BAR ===== */
/* ======================================= */
.main-header {
    background-color: var(--white-bg);
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo img {
    height: 50px;
    width: auto;
}

.nav-menu ul {
    display: flex;
    gap: 30px;
}

/* In css/style.css, locate the NAV BAR STYLES section */

.nav-menu ul li a {
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
    text-decoration: none; 
    
    /* 🛑 NEW STYLES for Professional Hover 🛑 */
    position: relative; /* Essential for positioning the animated line */
    padding-bottom: 5px; /* Adds space for the line */
}

/* Create the animated line below the text */
.nav-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position the line at the bottom of the padding */
    left: 0;
    width: 0%; /* Starts with zero width */
    height: 3px;
    background-color: var(--primary-color); /* Green line */
    transition: width 0.3s ease-out; /* Animates the width change */
    border-radius: 1px;
}

/* Hover State: Expand the line */
.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {
    width: 100%; /* Line swipes across */
}

/* Keep the text color change on hover/active */
.nav-menu ul li a:hover,
.nav-menu ul li a.active {
    color: var(--primary-color);
}

.nav-cta-btn {
    text-decoration: none;
    background-color: var(--primary-color);
    color: var(--white-bg);
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.nav-cta-btn:hover {
    background-color: #004d00;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-color);
    transition: all 0.3s ease-in-out;
}


/* ===== 2. HERO SECTION STYLES ===== */

.hero-section {
    /* ✅ GUARANTEED SCROLL FIX: Set height to 100% of viewport */
    height: 100vh;
    
    /* Use the dark professional color */
    background-color: var(--dark-bg);
    
    color: var(--white-bg);
    position: relative;
    
    /* 🛑 NEW: Use Flexbox to perfectly center content regardless of header height */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding-top: var(--header-height); /* Push content down past the sticky header */
}

/* Ensure content container uses the full height */
.hero-section .container {
    height: 100%; 
    display: flex;
    align-items: center; /* Vertically center content inside the container */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    /* Ensure content is positioned at the top of the container's flex-child */
    margin-top: 0px; /* Slight negative margin to visually pull content up */
}

.hero-title {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 40px;
    color: #e0e0e0;
}

.event-details {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.detail-box {
    /* Green details contrasting with dark background */
    background-color: rgba(0, 100, 0, 0.95); /* Slightly less transparent */
    padding: 20px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border-left: 5px solid var(--accent-color);
}

.detail-box i {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.detail-box h3 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
}

.detail-box p {
    font-size: 0.9rem;
    margin: 5px 0 0 0;
    opacity: 0.9;
}

.hero-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}
/* REMOVE .hero-section::before as it's not needed with a solid background */


/* ======================================= */
/* ===== NEW 1. HISTORY SECTION STYLES ===== */
/* ======================================= */
.history-section {
    background-color: var(--white-bg);
}

.history-content-grid {
    display: grid;
    /* Two main columns: text and stats */
    grid-template-columns: 2fr 1fr; 
    gap: 50px;
    align-items: flex-start;
}

.history-text {
    line-height: 1.8;
}

.history-text h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

/* Strategic Look Ahead Box */
.looking-ahead-box {
    margin-top: 30px;
    padding: 20px;
    background-color: var(--light-bg);
    border-left: 5px solid var(--primary-color);
    border-radius: 5px;
}

.looking-ahead-box h4 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 10px;
}

/* Trade Stats Card Styling */
.trade-stats-card {
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--accent-color);
}

.trade-stats-card h3 {
    text-align: center;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.trade-stats-card h4 {
    color: var(--text-color);
    margin-bottom: 5px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
    width: 30px;
    text-align: center;
}

.trade-stats-card hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 25px 0;
}

.trade-stats-card ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.trade-stats-card ul li {
    margin-bottom: 10px;
    color: #333;
}
.trade-stats-card ul li i {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-right: 8px;
}

.strategic-note {
    font-size: 0.9rem;
    margin-top: 20px;
    color: #666;
    font-style: italic;
}


/* ======================================= */
/* ===== NEW 2. GALLERY SECTION STYLES ===== */
/* ======================================= */
.gallery-section {
    background-color: var(--light-bg);
}

.gallery-grid {
    display: grid;
    /* 4 columns for desktop */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px;
    margin-bottom: 50px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    display: block;
    cursor: zoom-in;
}

.gallery-item img {
    width: 100%;
    height: 200px; /* Uniform height for a clean grid */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-cta-container {
    text-align: center;
}

/* ------------------------------------- */
/* MEDIA QUERIES FOR NEW SECTIONS */
/* ------------------------------------- */
@media (max-width: 992px) {
    /* History Section shifts to single column */
    .history-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    /* Gallery Grid shifts to 2 columns for better mobile viewing */
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
        gap: 10px;
    }
    .gallery-item img {
        height: 150px;
    }
}



/* ======================================= */
/* ===== 3. ABOUT & PARTICIPATION STYLES ===== */
/* ======================================= */
.about-section {
    background-color: var(--light-bg);
    padding: 30px;
}

.about-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 50px;
}

.about-text {
    flex: 2;
    line-height: 1.8;
}

.about-text h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

.facts-grid {
    flex: 1;
    background-color: var(--white-bg);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--accent-color);
}

.facts-grid h3 {
    text-align: center;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.fact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.fact-item i {
    font-size: 1.8rem;
    color: var(--accent-color);
    width: 30px;
    text-align: center;
}

.fact-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 600;
}

.fact-item p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* ======================================= */
/* ===== 3b. ORGANIZERS SECTION STYLES ===== */
/* ======================================= */

.organizers-section {
    padding: 40px 0;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    text-align: center;
}

.organizers-section h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.organizers-section > p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
}

.organizer-cards-grid {
    display: grid;
    /* 5 columns on desktop, responsive for smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 20px;
    justify-content: center;
}

.organizer-card {
    background-color: var(--white-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, border 0.3s ease;
    border-bottom: 3px solid var(--accent-color);
}

.organizer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.organizer-card img {
    max-height: 50px; /* Logo size */
    width: auto;
    margin-bottom: 10px;
}

.organizer-card h4 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin: 5px 0;
}

.organizer-card p {
    font-size: 0.8rem;
    color: #999;
    line-height: 1.3;
}

/* Style for the '+ More Collaborators' card */
.organizer-card.more-orgs {
    background-color: var(--light-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.organizer-card.more-orgs i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.organizer-card.more-orgs p {
    font-size: 0.75rem;
    color: #666;
}

/* Media Query Adjustment for smaller screens */
@media (max-width: 992px) {
    .organizer-cards-grid {
        /* Reduce min width for smaller screens */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}


.participation-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}

.point-item {
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--white-bg);
}

.point-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.point-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    background-color: rgba(0, 100, 0, 0.1);
    padding: 15px;
    border-radius: 50%;
}

.point-item h4 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* ======================================= */
/* ===== 4. CATEGORIES STYLES ===== */
/* ======================================= */
.categories-section {
    background-color: var(--white-bg);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.category-card {
    background-color: var(--light-bg);
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-bottom: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.category-card i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.category-card:hover i {
    color: var(--primary-color);
}

.category-card h3 {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* ======================================= */
/* ===== 4b. EXPO HIGHLIGHTS STYLES ===== */
/* ======================================= */

.highlights-section {
    /* Use a light/white background to contrast with the Categories and Contact sections */
    background-color: var(--white-bg); 
}

.highlight-cards-grid {
    display: grid;
    /* 4 columns on desktop, responsive for smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
}

.highlight-card {
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--primary-color);
    transition: all 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-top-color: var(--accent-color); /* Gold highlight on hover */
}

.highlight-card i {
    font-size: 3.5rem;
    color: var(--accent-color); /* Gold icon */
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.highlight-card:hover i {
    color: var(--primary-color); /* Green icon on hover */
}

.highlight-card h3 {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.highlight-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}





/* ======================================= */
/* ===== 5. CONTACT & VENUE STYLES ===== */
/* ======================================= */
.contact-section {
    background-color: var(--light-bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

/* Contact Details */
.contact-details h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 25px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-info-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.contact-info-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.contact-info-item p {
    margin: 0;
    color: #666;
}

.download-btn {
    margin-top: 30px;
    display: inline-flex;
    background-color: var(--primary-color);
    color: var(--white-bg);
    border: 2px solid var(--primary-color);
    font-size: 1rem;
    padding: 12px 25px;
}

.download-btn:hover {
    background-color: #004d00;
}

/* Contact Form */
.contact-form-area {
    background-color: var(--white-bg);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contact-form-area h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 25px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    width: 100%;
    font-size: 1.1rem;
    margin-top: 10px;
}


/* ======================================= */
/* ===== 6. FOOTER STYLES ===== */
/* ======================================= */
.main-footer {
    background-color: var(--dark-bg);
    color: #ecf0f1;
    padding: 50px 0 20px 0;
    position: relative;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 50px;
    margin-bottom: 40px;
}

.main-footer h3 {
    color: var(--accent-color);
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.footer-about p {
    line-height: 1.7;
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #bdc3c7;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: var(--white-bg);
    padding-left: 5px;
}

.footer-contact strong {
    color: #e0e0e0;
}

/* In css/style.css, inside the FOOTER STYLES section */

.social-links {
    display: flex;
    gap: 10px; /* Reduced gap for a tighter look */
    margin-top: 15px;
}

.social-links a {
    /* 🛑 NEW STYLES: Style the icon button 🛑 */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #4a6270; /* Darker background for the button */
    color: #ecf0f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    
    /* Remove the text labels from the original styles */
    gap: 0; 
    text-decoration: none; 
}

.social-links a:hover {
    background-color: var(--accent-color); /* Gold hover effect */
    color: var(--dark-bg);
}
.main-footer hr {
    border: 0;
    border-top: 1px solid #4a6270;
    margin: 30px 0;
}

.footer-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: #bdc3c7;
}

/* ======================================= */
/* ===== SCROLL TO TOP BUTTON STYLES ===== */
/* ======================================= */
.scroll-top-btn {
    /* 🛑 Key Fix: Make it fixed relative to the viewport 🛑 */
    position: fixed; 
    bottom: 30px; /* Position 30px from the bottom */
    right: 30px;  /* Position 30px from the right */
    
    background-color: var(--accent-color); /* Gold background */
    color: var(--dark-bg); /* Dark text for contrast */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, opacity 0.3s ease;
    z-index: 1000; /* Ensure it stays above all other content */
    
    /* We handle display (show/hide) in JS, but ensure it's hidden by default */
    display: none; 
    align-items: center;
    justify-content: center;
}

.scroll-top-btn:hover {
    background-color: #d18b33; /* Slightly darker gold on hover */
}

/* Media Query: Make it slightly smaller on mobile */
@media (max-width: 576px) {
    .scroll-top-btn {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }
}

/* ======================================= */
/* ===== 7. MOBILE RESPONSIVENESS ===== */
/* ======================================= */

@media (max-width: 992px) {
    /* Header/Nav */
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--white-bg);
        transition: all 0.5s ease;
        z-index: 99;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        padding: 40px 0;
        text-align: center;
    }

    .nav-menu ul li {
        margin: 20px 0;
    }

    .menu-toggle {
        display: block;
        z-index: 101;
    }

    .nav-cta-btn {
        display: none;
    }

    /* Hero */
    .hero-title {
        font-size: 3rem;
    }
    .hero-subtitle {
        font-size: 1.4rem;
    }
    .event-details {
        flex-direction: column;
        gap: 15px;
    }
    .hero-cta-buttons {
        flex-direction: column;
    }
    .btn {
        width: 100%;
    }

    /* About */
    .about-content {
        flex-direction: column;
    }
    .facts-grid {
        margin-top: 30px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
    .scroll-top-btn {
        right: 20px;
    }
}

@media (max-width: 576px) {
    .section-title h2 {
        font-size: 1.8rem;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .detail-box h3 {
        font-size: 1.2rem;
    }
}

/* ======================================= */
/* ===== 3c. ORGANIZING COMMITTEE STYLES (FINAL LAYOUT) ===== */
/* ======================================= */

.committee-section {
    padding: 60px 0;
    margin-top: 30px;
    background-color: var(--light-bg);
}

/*  TOP LEADERSHIP CONTAINER STYLES (2-column layout)  */
.top-leadership-container {
    display: grid;
    /* Two columns using minmax for responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
    max-width: 600px; /* Constrain width to keep it centered and distinct */
    margin: 0 auto 50px auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd; /* Separator line */
}

.committee-member.chief-member {
    /* Style for both top leader cards */
    max-width: 100%;
    border-top: 5px solid var(--accent-color);
    border-bottom: 5px solid var(--accent-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: none; 

}

/* Badge style for both top leaders */
.committee-member.chief-member .designation-tag {
    background-color: var(--primary-color);
    color: var(--white-bg);
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 15px;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
}

/* 🛑 COMMITTEE MEMBERS GRID (Remaining Members - 4 Columns) 🛑 */
.committee-members-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    justify-content: center;
}

/* Base member card styles (Applies to all cards) */
.committee-member {
    background-color: var(--white-bg);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    border-bottom: 4px solid var(--primary-color);
}

.committee-member:hover:not(.chief-member) {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.committee-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--accent-color);
}

/* ------------------------------------- */
/* 🛑 MEDIA QUERIES FOR COMMITTEE SECTION 🛑 */
/* ------------------------------------- */

@media (max-width: 992px) {
    /* Tablet: Main Committee Grid shifts to 2 columns */
    .committee-members-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 576px) {
    /* Mobile: Both the Top Leadership and Main Grid shift to 1 column (one by one/ek ek slide) */
    
    .top-leadership-container {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 20px;
    }
    
    .committee-members-grid {
        grid-template-columns: 1fr; 
    }
}


/* ======================================= */
/* ===== NEW 8. HISTORY SECTION STYLES ===== */
/* ======================================= */
.history-section {
    background-color: var(--white-bg);
}

.history-content-grid {
    display: grid;
    /* Two main columns: text and stats */
    grid-template-columns: 2fr 1fr; 
    gap: 50px;
    align-items: flex-start;
}

.history-text {
    line-height: 1.8;
}

.history-text h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 20px;
    /* Professional border style */
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

/* Strategic Look Ahead Box (Highlight) */
.looking-ahead-box {
    margin-top: 30px;
    padding: 20px;
    background-color: var(--light-bg);
    border-left: 5px solid var(--primary-color);
    border-radius: 5px;
}

.looking-ahead-box h4 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 10px;
}

/* Trade Stats Card Styling */
.trade-stats-card {
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--accent-color);
}

.trade-stats-card h3 {
    text-align: center;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.trade-stats-card h4 {
    color: var(--text-color);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
    width: 30px;
    text-align: center;
}

.trade-stats-card hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 25px 0;
}

.trade-stats-card ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.trade-stats-card ul li {
    margin-bottom: 10px;
    color: #333;
}
.trade-stats-card ul li i {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-right: 8px;
}

.strategic-note {
    font-size: 0.9rem;
    margin-top: 20px;
    color: #666;
    font-style: italic;
}


/* ------------------------------------- */
/* MEDIA QUERIES FOR HISTORY SECTION (Add to existing @media blocks) */
/* ------------------------------------- */
@media (max-width: 992px) {
    /* History Section shifts to single column */
    .history-content-grid {
        grid-template-columns: 1fr;
    }
}



/* ======================================= */
/* ===== NEW 9. GALLERY SECTION STYLES ===== */
/* ======================================= */
.gallery-section {
    background-color: var(--light-bg);
}

.gallery-grid {
    display: grid;
    /* 4 columns for desktop */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px;
    margin-bottom: 50px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    display: block;
    cursor: zoom-in;
    /* Added professional border and transition */
    border: 3px solid var(--white-bg); 
    transition: all 0.3s ease;
}

.gallery-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-color); /* Gold hover border */
}

.gallery-item img {
    width: 100%;
    height: 200px; /* Uniform height for a clean, professional grid */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.gallery-cta-container {
    text-align: center;
}


/* ------------------------------------- */
/* MEDIA QUERIES FOR GALLERY SECTION (Add to existing @media blocks) */
/* ------------------------------------- */

@media (max-width: 576px) {
    /* Mobile: Gallery Grid shifts to 2 columns for better mobile viewing */
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
        gap: 10px;
    }
    .gallery-item img {
        height: 150px;
    }
}