/* ============================================= */
/* ICCFN 2025 - MAIN STYLESHEET */
/* Organized with comments for easy maintenance */
/* ============================================= */

/* 
 * COLOR PALETTE (Customize these colors as needed):
 * - Primary Blue: #2c3e50 (Dark blue)
 * - Secondary Blue: #3498db (Medium blue) 
 * - Accent Red: #e74c3c (For alerts/important elements)
 * - Accent Orange: #f39c12 (For warnings/attention)
 * - Accent Green: #27ae60 (For success/completed)
 * - Gold: #FFD700 (For highlights)
 * - Light Gray: #f8f9fa (Background)
 */

/* ============ CSS RESET & GLOBAL STYLES ============ */
/* Reset margins, padding, and set box-sizing for consistent sizing */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

/* Base body styles - Change background color here */
body { 
    background-color: #f8f9fa; /* Light gray background */
    color: #333; 
    line-height: 1.6; 
}

/* Main container for centering content */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* ============ HEADER STYLES ============ */
/* Main header with gradient background - Change colors here */
header { 
    background: linear-gradient(135deg, #1a2a6c, #2a3a7c); /* Dark blue gradient */
    color: white; 
    padding: 1rem 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}

/* Header content layout */
.header-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* Logo styles - Change colors here */
.logo { 
    font-size: 1.8rem; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
}
.logo-main { 
    color: white; /* Main logo text color */
}
.logo-year { 
    color: #FFD700; /* Gold color for year */
    margin-left: 5px; 
}

/* ============ NAVIGATION STYLES ============ */
/* Main navigation menu */
nav ul { 
    display: flex; 
    list-style: none; 
}
nav ul li { 
    position: relative; 
    margin-left: 1.5rem; 
}

/* Navigation links - Change colors here */
nav ul li a { 
    padding: 0.5rem 1rem; 
    border-radius: 4px; 
    transition: all 0.3s ease; 
    font-weight: 500; 
    display: block; 
    color: white; /* Link color */
    text-decoration: none; 
}
nav ul li a:hover { 
    background-color: rgba(255, 215, 0, 0.2); /* Gold hover background */
    color: #FFD700; /* Gold hover text */
    transform: translateY(-2px); 
}

/* ============ DROPDOWN MENU STYLES ============ */
/* Dropdown menu container */
.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: white; 
    min-width: 220px; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); 
    border-radius: 4px; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-10px); 
    transition: all 0.3s ease; 
    z-index: 1000; 
    display: block; 
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

/* Dropdown menu items */
.dropdown-menu li { 
    margin: 0; 
    width: 100%; 
    display: block; 
}
.dropdown-menu li a { 
    display: block; 
    padding: 0.8rem 1rem; 
    color: #333; /* Dropdown text color */
    border-bottom: 1px solid #f0f0f0; 
    transition: all 0.3s ease; 
    white-space: nowrap; 
}
.dropdown-menu li:last-child a { 
    border-bottom: none; 
}
.dropdown-menu li a:hover { 
    background-color: ; /* #FFF9C4 Light yellow hover */
    color: #FF8C00; /* Orange hover text */
    padding-left: 1.5rem; 
}

/* ============ MOBILE MENU STYLES ============ */
/* Mobile menu button (hidden on desktop) */
.mobile-menu-btn { 
    display: none; 
    background: none; 
    border: none; 
    color: white; 
    font-size: 1.5rem; 
    cursor: pointer; 
    transition: color 0.3s ease; 
}
.mobile-menu-btn:hover { 
    color: #FFD700; /* Gold hover */
}

/* ============ MAIN CONTENT STYLES ============ */
/* Main content area */
main { 
    min-height: calc(100vh - 160px); 
    padding: 2rem 0; 
}

/* Hero section with background image - Change gradient colors here */
.hero { 
    background: linear-gradient(rgba(26, 42, 108, 0.8), rgba(26, 42, 108, 0.9)), url('https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); 
    background-size: cover; 
    background-position: center; 
    color: white; 
    text-align: center; 
    padding: 4rem 1rem; 
    border-radius: 8px; 
    margin-bottom: 2rem; 
}
.hero h1 { 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
}
.hero p { 
    font-size: 1.2rem; 
    max-width: 700px; 
    margin: 0 auto 2rem; 
}

/* Button styles - Change colors here */
.btn { 
    display: inline-block; 
    background-color: #4CAF50; /* #3498db Button background - CHANGE THIS COLOR */
    color: white; 
    padding: 0.8rem 1.5rem; 
    border-radius: 4px; 
    font-weight: 600; 
    transition: all 0.3s ease; 
    border: none; 
    cursor: pointer; 
    text-decoration: none; 
}
.btn:hover { 
    background-color: #3d8b40 ; /* #2980b9 Darker blue on hover */
    transform: translateY(-2px); 
}

/* Content sections spacing */
.content-section { 
    margin-bottom: 3rem; 
}

/* ============ SECTION TITLE STYLES ============ */
/* Section titles with colored underline - Change border color here */
.section-title { 
    font-size: 1.8rem; 
    margin-bottom: 1.5rem; 
    color: #1a2a6c; /* Title text color */
    border-bottom: 2px solid #3498db; /* Underline color - CHANGE THIS COLOR */
    padding-bottom: 0.5rem; 
    display: inline-block; 
}

/* ============ SPONSORS GRID STYLES ============ */
/* Sponsors grid layout */
.sponsors-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 1.5rem; 
    margin-top: 1.5rem; 
}

/* Sponsor logo sizing */
.sponsor-logo { 
    width: 196px; 
    height: 190px; 
    object-fit: contain; 
    margin-bottom: 1rem; 
}

/* Sponsor card styles */
.sponsor-card { 
    background-color: white; 
    border-radius: 8px; 
    padding: 1.5rem; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    text-align: center; 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.sponsor-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 
}
.sponsor-card h3 { 
    color: #1a2a6c; /* Sponsor name color */
    margin-bottom: 0.5rem; 
}

/* ============ INFO GRID STYLES ============ */
/* Info grid layout for cards */
.info-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; 
}

/* Info card styles - Change border color here */
.info-card { 
    background-color: white; 
    border-radius: 8px; 
    padding: 1.5rem; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease; 
    border-left: 4px solid #3498db; /* Left accent border - CHANGE THIS COLOR */
}
.info-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}
.info-card h3 { 
    color: #1a2a6c; /* Card title color */
    margin-bottom: 1rem; 
    font-size: 1.3rem; 
}
.info-card ul { 
    list-style-position: inside; 
    margin-left: 1rem; 
}
.info-card ul li { 
    margin-bottom: 0.5rem; 
}

/* ============ FOOTER STYLES ============ */
/* Footer styles - Change background color here */
footer { 
    background-color: #1a2a6c; /* Footer background */
    color: white; 
    padding: 2rem 0; 
}

/* Footer content layout */
.footer-content { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 2rem; 
}

/* Footer section headings */
.footer-section h3 { 
    font-size: 1.3rem; 
    margin-bottom: 1rem; 
    color: #FFD700; /* Gold color for footer headings */
}

/* Footer lists */
.footer-section ul { 
    list-style: none; 
}
.footer-section ul li { 
    margin-bottom: 0.5rem; 
}

/* Footer links */
.footer-section a { 
    color: white; /* Link color */
    transition: color 0.3s ease; 
    text-decoration: none; 
}
.footer-section a:hover { 
    color: #FFD700; /* Gold on hover */
}

/* Contact info layout */
.contact-info { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
}

/* Copyright section */
.copyright { 
    text-align: center; 
    margin-top: 2rem; 
    padding-top: 1rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

/* ============ TIMELINE STYLES ============ */
/* Timeline layout */
.timeline { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    margin-top: 1.5rem; 
}

/* /* Timeline item styles - Change border color here */
/* .timeline-item { 
/*     background: white; 
/*     padding: 1.5rem; 
/*     border-radius: 8px; 
/*     box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
/*     border-left: 4px solid #3498db; /* Left accent border - CHANGE THIS COLOR */
/*     transition: all 0.3s ease; 
/*     display: flex; 
/*     justify-content: space-between; 
/*     align-items: center; 
/* }
/* .timeline-item:hover { 
/*     transform: translateX(5px); 
/*     box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
/* }
/* .timeline-item h4 { 
/*     color: #1a2a6c; /* Timeline title color */
/*     margin-bottom: 0; 
/*     margin-right: 1rem; 
/* }
/* .timeline-item .date { 
/*     color: #666; /* Date text color */
/*     font-weight: 600; 
/*     white-space: nowrap; 
/* }

/* ============ PAGE CONTENT STYLES ============ */
/* General page content styles */
.page-content { 
    background: white; 
    border-radius: 8px; 
    padding: 2rem; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    margin-top: 2rem; 
    transition: all 0.3s ease; 
}
.page-content:hover { 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}

/* ============ RESPONSIVE STYLES ============ */
/* Mobile and tablet styles */
@media (max-width: 768px) {
    /* Stack header content vertically */
    .header-content { 
        flex-direction: column; 
        text-align: center; 
    }
    
    /* Mobile navigation */
    nav { 
        width: 100%; 
        margin-top: 1rem; 
    }
    nav ul { 
        flex-direction: column; 
        align-items: center; 
        display: none; 
    }
    nav ul.show { 
        display: flex; 
    }
    nav ul li { 
        margin: 0.5rem 0; 
        width: 100%; 
        text-align: center; 
    }
    
    /* Show mobile menu button */
    .mobile-menu-btn { 
        display: block; 
        position: absolute; 
        top: 1rem; 
        right: 1rem; 
    }
    
    /* Adjust dropdown for mobile */
    .dropdown-menu { 
        position: static; 
        opacity: 1; 
        visibility: visible; 
        transform: none; 
        box-shadow: none; 
        background-color: rgba(255, 255, 255, 0.1); 
        display: none; 
        width: 100%; 
    }
    .dropdown.active .dropdown-menu { 
        display: block; 
    }
    .dropdown-menu li a { 
        padding-left: 2rem; 
        color: white; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
    }
    .dropdown-menu li a:hover { 
        background-color: rgba(255, 215, 0, 0.3); 
        color: #FFD700; 
    }
    
    /* Adjust hero section for mobile */
    .hero h1 { 
        font-size: 2rem; 
    }
    .hero p { 
        font-size: 1rem; 
    }
}

/* ============ QUICK COLOR REFERENCE ============ */
/*
 * To change colors quickly, search and replace these hex codes:
 * 
 * BLUE COLORS:
 * #1a2a6c  (Dark blue - header, footer, titles)
 * #2a3a7c  (Medium dark blue - header gradient)
 * #3498db  (Medium blue - buttons, borders, accents)
 * #2980b9  (Darker blue - button hover)
 * 
 * ACCENT COLORS:
 * #FFD700  (Gold - highlights, hovers)
 * #e74c3c  (Red - alerts, important)
 * #f39c12  (Orange - warnings, attention)
 * #27ae60  (Green - success, completed)
 * 
 * NEUTRAL COLORS:
 * #f8f9fa  (Light gray - background)
 * #333     (Dark gray - text)
 * #666     (Medium gray - secondary text)
 * white    (White - cards, backgrounds)
 */