/*
   ABCD Forum 2025 Website Styles - Modern Refresh
   A contemporary, clean, and professional design for an ASEAN business forum
*/

/* ===== GENERAL STYLES ===== */
:root {
    /* Primary color palette - Modern & Vibrant */
    --primary-color: #007BFF; /* Vibrant Blue */
    --primary-light: #4DA3FF;
    --primary-dark: #0056B3;
    
    /* Secondary color palette - Professional & Neutral */
    --secondary-color: #6C757D; /* Cool Gray */
    --secondary-light: #A1AAB1;
    --secondary-dark: #495057;
    
    /* Accent color palette - Engaging & Action-Oriented */
    --accent-color: #28A745; /* Success Green */
    --accent-light: #5DD380;
    --accent-dark: #1E7E34;
    
    /* Neutral colors - Clean & Crisp */
    --dark-color: #212529; /* Near Black for Text */
    --light-color: #F8F9FA; /* Light Gray for Backgrounds */
    --white-color: #FFFFFF;
    --gray-color: #ADB5BD; /* Medium Gray */
    --gray-light: #E9ECEF; /* Lighter Gray */
    --gray-dark: #343A40; /* Dark Gray */
    
    /* Utility colors */
    --success-color: #28A745;
    --danger-color: #DC3545; /* Bootstrap Danger Red */
    --warning-color: #FFC107; /* Bootstrap Warning Yellow */
    --info-color: #17A2B8;    /* Bootstrap Info Teal */
    
    /* Design elements - Modern & Subtle */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1);
    --card-border-radius: 8px;
    --button-border-radius: 5px;
    --transition: all 0.25s ease-in-out;
    --section-spacing: 80px; /* Slightly reduced for a tighter feel */

    /* Typography */
    --font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-headings: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

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

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-family-sans-serif);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white-color); /* Cleaner default background */
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75em; /* Consistent margin */
    color: var(--primary-dark); /* Default heading color */
}

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.75rem; }  /* 28px */
h4 { font-size: 1.5rem; }   /* 24px */
h5 { font-size: 1.25rem; }  /* 20px */
h6 { font-size: 1rem; }     /* 16px */

.container {
    width: 90%;
    max-width: 1140px; /* Common max-width */
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: var(--section-spacing) 0;
    position: relative;
    overflow: hidden; /* Optional: if you want to contain ::before/::after elements */
}

/* Optional: A subtle background pattern or texture for sections if desired
section:nth-child(odd) {
    background-color: var(--light-color);
}
*/

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--card-border-radius); /* Soften image corners by default */
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline; /* Common hover state */
}

ul {
    list-style: none;
    padding-left: 0; /* Remove default padding */
}

.btn {
    display: inline-block;
    padding: 12px 24px; /* Modern padding */
    border-radius: var(--button-border-radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent; /* Base for outline buttons */
    font-size: 0.95rem;
    text-transform: capitalize; /* Softer than uppercase */
    letter-spacing: 0.2px;
    box-shadow: var(--box-shadow);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-hover);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white-color); /* Ensure text color remains on hover */
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: var(--white-color);
}

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

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

.btn-outline-primary {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.section-header {
    text-align: center;
    margin-bottom: 60px; /* Adjusted spacing */
}

.section-header h2 {
    font-size: 2.25rem; /* Slightly smaller for modern feel */
    margin-bottom: 15px;
    color: var(--dark-color); /* Stronger section titles */
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Closer to text */
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Shorter underline */
    height: 3px;
    background: var(--primary-color); /* Simpler underline */
    border-radius: 2px;
}

.section-header p {
    color: var(--gray-dark);
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto;
    margin-top: 20px;
    font-weight: 400; /* Regular weight for readability */
}

/*
  ==========================================================================
  END OF FOUNDATIONAL MODERN STYLES
  ==========================================================================
  The styles below this point are from the original stylesheet and
  will need to be refactored to align with the new modern look and feel
  established above. This includes updating color usage, typography,
  spacing, and component-specific styles (header, banner, cards, etc.).
  Consider this a starting point for a full visual overhaul.
  ==========================================================================
*/

/* ===== HEADER STYLES (NEEDS REFACTORING) ===== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.97); /* Keep light bg for header */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Softer shadow */
    z-index: 1000;
    padding: 15px 0; /* Adjusted padding */
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--gray-light); /* Subtle border */
}

header.scrolled {
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: block;
}

.logo-image {
    height: 50px; /* Adjusted logo size */
    width: auto;
    display: block;
    transition: var(--transition);
}

header.scrolled .logo-image {
    height: 45px;
}

nav {
    position: relative;
}

nav ul {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between nav items */
}

nav ul li {
    margin-left: 20px; /* Adjusted margin */
}

nav ul li a {
    font-weight: 500;
    position: relative;
    padding: 8px 12px;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    color: var(--dark-color);
    transition: all 0.3s ease;
    border-radius: var(--button-border-radius);
}

nav ul li a:hover,
nav ul li a.active { /* Style for active link */
    background-color: var(--primary-light-translucent, rgba(0, 123, 255, 0.08)); /* Use a translucent primary color */
    color: var(--primary-color);
}

/* Remove underline effect for a cleaner look, or simplify it */
/* nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
    border-radius: 2px;
}

nav ul li a:hover::after {
    width: 100%;
} */

nav ul li:last-child a { /* "Register" or CTA button */
    background: var(--primary-color);
    color: var(--white-color);
    padding: 8px 20px;
    border-radius: var(--button-border-radius); /* Consistent button radius */
    box-shadow: var(--box-shadow);
}

nav ul li:last-child a:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-hover);
}

.mobile-menu-btn {
    display: none; /* Will be handled by media queries */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-color);
    transition: var(--transition);
    background: none;
    border: none;
    padding: 5px;
}

.mobile-menu-btn:hover {
    color: var(--primary-dark);
}


/* ===== BANNER SECTION (NEEDS SIGNIFICANT REFACTORING) ===== */
/* This section requires a full review to align with the new design.
   The current styles are very specific and might clash.
   Consider a simpler, more modern hero section.
   Example: Full-width image with text overlay, or a cleaner split layout.
*/
.banner {
    display: flex;
    flex-direction: column; /* Stack on mobile, adjust with media queries */
    min-height: calc(100vh - 80px); /* Adjust based on header height */
    margin-top: 80px; /* Placeholder for header height, adjust if header height changes */
    background-color: var(--light-color); /* A light background for the banner area */
    overflow: hidden;
    padding: var(--section-spacing) 0; /* Use section spacing */
}

.banner .container {
    display: flex;
    flex-direction: row; /* Default for larger screens */
    align-items: center;
    gap: 30px;
}

.banner-content {
    flex: 1;
    padding-right: 30px; /* Space between text and image */
    text-align: left; /* Modern hero sections often left-align text */
    animation: fadeInLeft 0.8s ease-out;
}

.banner-content h1 {
    font-size: 3rem; /* Large, impactful heading */
    color: var(--primary-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.banner-content .sub-headline { /* Replaces h2 for more semantic meaning */
    font-size: 1.5rem;
    color: var(--secondary-dark);
    margin-bottom: 15px;
    font-weight: 400;
}

.banner-content .event-details { /* Replaces p for more semantic meaning */
    font-size: 1.1rem;
    color: var(--gray-dark);
    margin-bottom: 30px;
    font-style: normal; /* Remove italics for a cleaner look */
}

.banner-content .btn {
    margin-top: 20px;
    padding: 15px 30px; /* Larger CTA button */
    font-size: 1.1rem;
}

.banner-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 0.8s ease-out;
}

.banner-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--card-border-radius); /* Consistent border radius */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Keyframe animations (can be kept or simplified) */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

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


/*
  Placeholder for further sections.
  Each subsequent section (About, Speakers, Schedule, Sponsors, Contact, Footer)
  will need to be refactored using the new color variables, typography,
  button styles, and layout principles defined at the top of this file.
*/

/* Example: About Section (Conceptual - Needs specific content and styling) */
/*
.about-section {
    background-color: var(--white-color);
}

.about-section .container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-content {
    flex: 1;
}

.about-image {
    flex: 1;
    text-align: center;
}

.about-image img {
    max-width: 450px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
}
*/

/* About Section - Organization Logos */
.organization-logos-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-around; /* Distribute space */
    align-items: flex-start; /* Align items to the top */
    margin-top: 40px; /* Space above the logos section */
    margin-bottom: 40px; /* Space below the logos section */
    padding: 20px 0;
    border-top: 1px solid var(--gray-light);
    border-bottom: 1px solid var(--gray-light);
}

.organization-group {
    text-align: center;
    margin: 15px; /* Spacing around each group */
    flex: 1; /* Allow groups to grow */
    min-width: 200px; /* Minimum width before wrapping */
}

.organization-group h4 {
    font-size: 1.1rem; /* Slightly smaller heading */
    color: var(--secondary-dark);
    margin-bottom: 15px;
    font-weight: 600;
}

.org-logo {
    max-height: 80px; /* Control logo height */
    width: auto;      /* Maintain aspect ratio */
    max-width: 180px; /* Prevent logos from being too wide */
    margin: 0 auto;   /* Center the logo if it's smaller than max-width */
    border-radius: 0; /* Remove default image border-radius if not desired for logos */
    box-shadow: none; /* Remove default image box-shadow if not desired for logos */
}

/* Responsive adjustments for organization logos */
@media (max-width: 767px) {
    .organization-logos-container {
        flex-direction: column; /* Stack groups vertically */
        align-items: center; /* Center groups when stacked */
    }
    .organization-group {
        width: 100%; /* Full width for stacked groups */
        margin-bottom: 30px;
    }
    .organization-group:last-child {
        margin-bottom: 0;
    }
}
/* ===== REGISTRATION & PRICING SECTION ===== */
.registration-section {
    background-color: var(--white-color); /* Or a very light gray */
}

.pricing-container-modern {
    display: flex;
    flex-direction: column; /* Stack pricing tiers and form on smaller screens */
    gap: 40px;
}

.pricing-tiers-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 30px; /* Space before notes */
}

.pricing-tier-modern {
    background-color: var(--white-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid var(--gray-light);
}

.pricing-tier-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.pricing-tier-modern.popular {
    border-top: 4px solid var(--accent-color); /* Highlight popular tier */
    position: relative; /* For badge positioning */
}

.popular-badge-modern {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--button-border-radius);
    text-transform: uppercase;
}

.tier-header-modern {
    margin-bottom: 20px;
}

.tier-header-modern .tier-badge-modern { /* For Early Bird, Standard badges */
    display: inline-block;
    background-color: var(--primary-light-translucent, rgba(0,123,255,0.15));
    color: var(--primary-dark);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.tier-header-modern.early-bird .tier-badge-modern {
    background-color: var(--info-color); /* Example: different color for early bird */
    color: var(--white-color);
}


.tier-header-modern h4 {
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.tier-header-modern p { /* Sub-text like "by 31 May 2025" */
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-bottom: 0;
}

.tier-price-modern {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
}
.tier-price-modern span.currency { /* If you add RM, USD etc. */
    font-size: 1.5rem;
    font-weight: 400;
    vertical-align: super;
    margin-right: 3px;
}


.tier-features-modern ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    flex-grow: 1; /* Make feature list take available space */
}

.tier-features-modern ul li {
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center items if text is short */
}

.tier-features-modern ul li i { /* FontAwesome check icon */
    color: var(--success-color);
    margin-right: 8px;
    font-size: 1.1em; /* Slightly larger icon */
}
.tier-features-modern ul li.feature-highlight-modern {
    color: var(--primary-dark);
    font-weight: 600;
}
.tier-features-modern ul li.feature-highlight-modern i {
    color: var(--accent-color); /* Different icon color for highlight */
}


.tier-action-modern .btn {
    width: 100%; /* Full width button */
    padding: 12px 20px;
}

.pricing-notes-modern {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--gray-dark);
}
.pricing-notes-modern p {
    margin-bottom: 8px;
}
.pricing-notes-modern p i {
    margin-right: 5px;
    color: var(--primary-color);
}

/* Registration Form Styles */
.registration-form-modern {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    position: relative;
}

/* Modal Popup Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.modal-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background-color: var(--white-color);
    border-radius: var(--card-border-radius);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-popup.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Close button for the form */
.close-form {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1;
}

.close-form:hover {
    background-color: var(--gray-dark);
}

.close-form i {
    color: var(--dark-color);
    font-size: 1rem;
}

.close-form:hover i {
    color: var(--white-color);
}

.registration-form-modern h3 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--primary-dark);
}
.registration-form-modern .form-intro-modern {
    text-align: center;
    margin-bottom: 25px;
    color: var(--gray-dark);
    font-size: 0.95rem;
}

.form-group-modern {
    margin-bottom: 20px;
}

.form-group-modern label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.9rem;
}
.form-group-modern label i {
    margin-right: 6px;
    color: var(--primary-color);
}

.form-group-modern input[type="text"],
.form-group-modern input[type="email"],
.form-group-modern input[type="tel"],
.form-group-modern select,
.form-group-modern textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--gray-light);
    border-radius: var(--button-border-radius);
    font-size: 0.95rem;
    color: var(--dark-color);
    transition: border-color var(--transition);
    background-color: var(--white-color);
}

.form-group-modern input:focus,
.form-group-modern select:focus,
.form-group-modern textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-light-translucent, rgba(0,123,255,0.25));
}

.form-group-modern textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group-modern .btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
}

/* How to Register Section */
.how-to-register-modern {
    margin-top: var(--section-spacing);
    text-align: center;
}
.how-to-register-modern h3 {
    margin-bottom: 30px;
}

.register-steps-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.register-step-modern {
    text-align: center;
}

.register-step-modern .step-icon-modern {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    background-color: var(--primary-light-translucent, rgba(0,123,255,0.1));
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.register-step-modern h4 {
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.register-step-modern p {
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.register-images-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}
.register-images-modern img {
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
/* ===== SPONSORSHIP SECTION ===== */
.sponsorship-section {
    background-color: var(--light-color); /* Or var(--white-color) for alternation */
}

.sponsorship-packages-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: var(--section-spacing);
}

.package-card-modern {
    background-color: var(--white-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    padding: 35px 30px; /* Generous padding */
    text-align: center;
    transition: var(--transition);
    border-top: 5px solid transparent; /* Placeholder for accent border */
}

.package-card-modern:hover {
    transform: translateY(-8px); /* More pronounced hover effect */
    box-shadow: var(--box-shadow-hover);
}

/* Tier-specific accent colors */
.package-card-modern.platinum { border-top-color: #E5E4E2; /* Platinum color */ }
.package-card-modern.gold { border-top-color: #FFD700; /* Gold color */ }
.package-card-modern.silver { border-top-color: #C0C0C0; /* Silver color */ }
.package-card-modern.bronze { border-top-color: #CD7F32; /* Bronze color */ }

.package-header-modern {
    margin-bottom: 25px;
}

.package-header-modern h3 {
    font-size: 1.8rem; /* Prominent package name */
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.package-price-modern {
    font-size: 2.5rem; /* Large price display */
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.package-price-modern span.currency {
    font-size: 1.3rem;
    font-weight: 500;
    vertical-align: super;
    margin-right: 4px;
}
.package-price-modern span.period { /* e.g., /year, /event */
    font-size: 0.9rem;
    color: var(--gray-dark);
    font-weight: 400;
    display: block; /* Or inline-block if preferred */
    margin-top: -5px;
}


.package-benefits-modern ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.package-benefits-modern ul li {
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center benefits */
}

.package-benefits-modern ul li i {
    color: var(--accent-color); /* Green check for benefits */
    margin-right: 10px;
    font-size: 1.2em;
}

.package-card-modern .btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
}
.package-card-modern.platinum .btn { background-color: #A9A9A9; border-color: #A9A9A9; color: var(--white-color); } /* Darker gray for platinum */
.package-card-modern.platinum .btn:hover { background-color: #808080; border-color: #808080; }
.package-card-modern.gold .btn { background-color: #EAA220; border-color: #EAA220; color: var(--white-color); } /* Gold-ish for gold */
.package-card-modern.gold .btn:hover { background-color: #D48F1C; border-color: #D48F1C; }


.sponsorship-cta-modern {
    text-align: center;
    margin-top: 40px;
}
.sponsorship-cta-modern h4 {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}
.sponsorship-cta-modern p {
    font-size: 1rem;
    color: var(--gray-dark);
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.sponsorship-images-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.sponsorship-images-modern img {
    width: 100%;
    height: auto;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    object-fit: cover;
    max-height: 200px; /* Optional: constrain image height */
}

.sponsor-logos-modern {
    margin-top: var(--section-spacing);
    text-align: center;
}
.sponsor-logos-modern h3 { /* Sub-header for logos */
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 30px;
}
.logos-grid-modern {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Increased gap for better spacing */
}
.logos-grid-modern img {
    max-height: 60px; /* Control logo height */
    width: auto;
    opacity: 0.75; /* Slightly desaturate for a classier look */
    transition: var(--transition);
    filter: grayscale(50%); /* Start slightly grayscale */
}
.logos-grid-modern img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}
/* ===== VENUE SECTION ===== */
.venue-section {
    background-color: var(--white-color); /* Or a very light gray */
    padding-bottom: calc(var(--section-spacing) * 1.5); /* Extra padding if map is large */
}

.venue-content-modern {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    gap: 40px;
}

@media (min-width: 768px) {
    .venue-content-modern {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablet and up */
        align-items: flex-start; /* Align items to the top */
    }
}

.venue-info-modern {
    /* No specific background needed if section has one */
}

.venue-info-modern h3 { /* Sub-heading for venue details */
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 25px;
}

.venue-detail-modern {
    display: flex;
    align-items: flex-start; /* Align icon and text to the top */
    margin-bottom: 20px;
    gap: 15px;
}

.venue-detail-modern .icon {
    font-size: 1.5rem; /* Adjust icon size */
    color: var(--primary-color);
    margin-top: 3px; /* Align icon slightly better with text */
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 30px; /* Fixed width for alignment */
    text-align: center;
}

.venue-detail-modern div h4 {
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.venue-detail-modern div p {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: 0;
}
.venue-detail-modern div p a {
    color: var(--primary-color);
    font-weight: 500;
}
.venue-detail-modern div p a:hover {
    text-decoration: underline;
}


.venue-map-modern {
    border-radius: var(--card-border-radius);
    overflow: hidden; /* Ensures map respects border radius */
    box-shadow: var(--box-shadow);
    height: 400px; /* Default height, adjust as needed */
}

.venue-map-modern iframe {
    width: 100%;
    height: 100%;
/* ===== TERMS & CONDITIONS SECTION ===== */
.terms-section {
    background-color: var(--light-color); /* Or var(--white-color) for alternation */
}

.terms-content-modern {
    background-color: var(--white-color);
    padding: 30px 40px; /* More horizontal padding */
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
}

.terms-content-modern h3 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
    display: inline-block; /* So border only spans text width */
}

.terms-list-modern ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-bottom: 25px; /* Space between lists if multiple */
}

.terms-list-modern ul li {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.7; /* Increased line height for readability */
    margin-bottom: 12px; /* Space between list items */
    padding-left: 25px; /* Indent text */
    position: relative; /* For custom bullet */
}

.terms-list-modern ul li::before {
    content: "\f058"; /* FontAwesome check-circle icon (or \f10c for circle, \f00c for check) */
    font-family: "Font Awesome 5 Free"; /* Ensure FontAwesome is loaded */
    font-weight: 900; /* For solid icons */
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 1px; /* Adjust vertical alignment */
    font-size: 1.1em; /* Icon size */
}

.terms-content-modern p.terms-notice { /* For any additional notices */
    font-size: 0.9rem;
    color: var(--secondary-dark);
    margin-top: 30px;
    font-style: italic;
    text-align: center;
}
    border: 0;
}

.venue-images-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px; /* Space above images if they are below text */
}

.venue-images-modern img {
    width: 100%;
    height: auto;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    object-fit: cover;
    max-height: 220px; /* Optional: constrain image height */
}

/* If venue-info and venue-map are side-by-side, ensure proper spacing */
@media (min-width: 768px) {
    .venue-info-modern {
        padding-right: 20px; /* Add some space if map is to the right */
    }
}
}

/* Responsive adjustments for pricing and form */
@media (min-width: 992px) {
    .pricing-container-modern {
        flex-direction: row; /* Side-by-side on larger screens */
        align-items: flex-start; /* Align to top */
    }
    .pricing-info-modern {
        flex: 1.5; /* More space for tiers */
    }
    .registration-form-modern {
        flex: 1; /* Less space for form */
        margin-top: 0; /* Remove top margin if side-by-side */
    }
}
/* ===== WHY ATTEND SECTION ===== */
.why-attend-section {
    background-color: var(--light-color); /* Or var(--white-color) for alternation */
}

.benefits-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: var(--section-spacing);
}

.benefit-card-modern {
    background-color: var(--white-color);
    padding: 30px 25px; /* Adjusted padding */
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    border-left: 5px solid var(--primary-color); /* Accent border on the left */
}

.benefit-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
    border-left-color: var(--accent-dark); /* Change accent on hover */
}

.benefit-card-icon {
    font-size: 2.5rem; /* Slightly smaller icons if needed */
    color: var(--primary-color);
    margin-bottom: 15px; /* Reduced margin */
    display: inline-block;
}

.benefit-card-modern h3 {
    font-size: 1.25rem; /* Adjusted font size */
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.benefit-card-modern p {
    font-size: 0.9rem; /* Adjusted font size */
    color: var(--gray-dark);
    line-height: 1.6;
}

.impact-section-modern {
/* ===== CONTACT US SECTION ===== */
.contact-section {
    background-color: var(--white-color); /* Or var(--light-color) for alternation */
}

.contact-content-modern {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    gap: 40px;
    background-color: var(--light-color); /* Light background for the content area */
    padding: 40px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
}

@media (min-width: 992px) { /* Adjusted breakpoint for better layout */
    .contact-content-modern {
        grid-template-columns: 1fr 1.2fr; /* Give slightly more space to the form */
    }
}

.contact-info-modern {
    /* No specific background needed if parent has one */
}

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

.contact-item-modern {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px; /* Increased spacing */
    gap: 18px; /* Increased gap */
}

.contact-item-modern .icon {
    font-size: 1.6rem; /* Larger icons */
    color: var(--primary-color);
    margin-top: 2px;
    flex-shrink: 0;
    width: 35px; /* Fixed width for alignment */
    text-align: center;
    background-color: var(--primary-light-translucent, rgba(0,123,255,0.1));
    border-radius: 50%;
    height: 35px;
    line-height: 35px; /* Vertically center icon */
}

.contact-item-modern div h4 {
    font-size: 1.15rem;
    color: var(--dark-color);
    margin-bottom: 6px;
    font-weight: 600;
}

.contact-item-modern div p {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: 3px; /* Reduced margin for tighter text blocks */
}
.contact-item-modern div p a {
    color: var(--primary-color);
    font-weight: 500;
}
.contact-item-modern div p a:hover {
    text-decoration: underline;
}

.social-links-modern {
    margin-top: 30px;
}
.social-links-modern h4 { /* Optional sub-heading for social links */
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}
.social-links-modern a {
    display: inline-block;
    margin-right: 15px; /* Spacing between icons */
    color: var(--secondary-dark);
    font-size: 1.8rem; /* Larger social icons */
    transition: var(--transition);
}
.social-links-modern a:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}
.social-links-modern a:last-child {
    margin-right: 0;
}


.contact-form-modern {
    /* Styles for form elements are already in .registration-form-modern */
    /* We can reuse .form-group-modern and input styles */
}
.contact-form-modern h3 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 25px;
}
.contact-form-modern .form-group-modern label {
    font-weight: 500; /* Slightly less bold for contact form */
}
.contact-form-modern .btn {
    width: 100%; /* Full width submit button */
}
    margin-top: calc(var(--section-spacing) / 2); /* Reduced top margin */
    padding-top: calc(var(--section-spacing) / 2); /* Reduced top padding */
    border-top: 1px solid var(--gray-light); /* Separator */
}

.impact-section-modern .section-header {
    margin-bottom: 40px; /* Spacing for sub-header */
}
.impact-section-modern .section-header h2 {
    font-size: 2rem;
}
.impact-section-modern .section-header p {
    font-size: 1rem;
}

.impact-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Responsive grid */
    gap: 25px;
    margin-bottom: 40px; /* Space before images */
}

.impact-card-modern {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* Reduced gap */
    background-color: var(--white-color);
    padding: 20px;
    border-radius: var(--card-border-radius);
    box-shadow: 0 3px 10px rgba(0,0,0,0.07); /* Slightly softer shadow */
    transition: var(--transition);
}
.impact-card-modern:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.impact-card-number {
    font-size: 1.8rem; /* Slightly smaller number */
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    background-color: var(--primary-light-translucent, rgba(0,123,255,0.1));
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.impact-card-content h4 {
    font-size: 1.05rem; /* Adjusted size */
    color: var(--primary-dark);
    margin-bottom: 5px;
    font-weight: 600;
}

.impact-card-content p {
    font-size: 0.85rem; /* Adjusted size */
    color: var(--gray-dark);
    line-height: 1.5;
    margin-bottom: 0;
}

.impact-images-modern {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for images */
    gap: 20px;
    margin-top: 30px;
}

.impact-images-modern img {
    width: 100%;
    height: auto;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    object-fit: cover; /* Ensure images cover their area */
    max-height: 250px; /* Optional: constrain image height */
}
/* ===== WHY ATTEND SECTION ===== */
.why-attend-section {
    background-color: var(--light-color); /* Or var(--white-color) for alternation */
}

.benefits-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: var(--section-spacing);
}

.benefit-card-modern {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    border-left: 4px solid var(--primary-color); /* Accent border */
}

.benefit-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
    border-left-color: var(--accent-color); /* Change accent on hover */
}

.benefit-card-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: inline-block; /* Allows centering */
}

.benefit-card-modern h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.benefit-card-modern p {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
}

.impact-section-modern {
    margin-top: var(--section-spacing);
    padding: 40px 0; /* Add some padding if it's a distinct sub-section */
    /* background-color: var(--white-color); /* Optional: if needs different bg */
    /* border-radius: var(--card-border-radius); */
}

.impact-section-modern .section-header { /* If using a sub-header for impact */
    margin-bottom: 40px;
}
.impact-section-modern .section-header h2{
    font-size: 2rem;
}

.impact-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px; /* Space before images */
}

.impact-card-modern {
    display: flex;
    align-items: flex-start; /* Align icon/number and text */
    gap: 20px;
    background-color: var(--white-color);
    padding: 20px;
    border-radius: var(--card-border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Softer shadow for these items */
}

.impact-card-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.impact-card-content h4 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.impact-card-content p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
    margin-bottom: 0;
}

.impact-images-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.impact-images-modern img {
    width: 100%;
    height: auto;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
}
/* ===== SPEAKERS SECTION ===== */
.speakers-section {
    background-color: var(--white-color); /* Or var(--light-color) */
}

.speakers-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px;
    margin-bottom: var(--section-spacing);
}

.speaker-card-modern {
    background-color: var(--white-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* To contain image and ensure rounded corners apply */
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.speaker-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.speaker-card-image {
    width: 100%;
    padding-top: 80%; /* Aspect ratio for the image container (e.g., 5:4). Adjust as needed. */
    position: relative;
    overflow: hidden;
}

.speaker-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area, might crop */
    object-position: center top; /* Focus on the top part of the image */
    border-radius: 0; /* Remove individual border-radius if card has overflow:hidden */
    transition: transform 0.3s ease;
}

.speaker-card-modern:hover .speaker-card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.speaker-card-content {
    padding: 20px;
    flex-grow: 1; /* Allows content to fill space if cards have varying text length */
}

.speaker-name {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-weight: 700;
}

.speaker-title {
    font-size: 0.9rem;
    color: var(--secondary-dark);
    margin-bottom: 0; /* Remove bottom margin if no bio */
}

/* VVIP Section - reuses speaker card styles but can have specific adjustments */
.vvip-section-modern {
    margin-top: var(--section-spacing);
    padding-top: var(--section-spacing);
    border-top: 1px solid var(--gray-light); /* Separator */
}

.vvip-section-modern .section-header h2 {
    font-size: 2rem; /* Slightly smaller for sub-section */
}

.vvip-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center; /* Center items if fewer than grid columns */
}

.speaker-card-modern.vvip .speaker-card-image {
    padding-top: 70%; /* Adjust aspect ratio for VVIP if images are different */
}

.speaker-card-modern.vvip .speaker-name {
    font-size: 1.3rem; /* Slightly larger for VVIPs */
}
/* ===== TRACKS & AGENDA SECTION ===== */
.tracks-section {
    background-color: var(--white-color); /* Or var(--light-color) for alternation */
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: var(--section-spacing);
}

.track-card {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--gray-light);
}

.track-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.track-card-icon {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.track-card-title {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.track-card-description {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
}

.agenda-glance {
    margin-top: var(--section-spacing);
    background-color: var(--light-color); /* Slight contrast for this sub-section */
    padding: 40px;
    border-radius: var(--card-border-radius);
}

.agenda-glance .section-header h2 {
    font-size: 2rem; /* Slightly smaller for sub-section header */
}
.agenda-glance .section-header p {
    font-size: 1rem;
}


.agenda-timeline-modern {
    position: relative;
    margin-top: 30px;
}

.agenda-timeline-modern::before { /* The central timeline bar */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary-light);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    width: 50%;
    padding: 10px 30px;
    box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 50px; /* Space from center line */
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 50px; /* Space from center line */
    text-align: left;
}

/* Circle on the timeline */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--white-color);
    border: 4px solid var(--primary-color);
    top: 15px; /* Adjust to align with text */
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(odd)::after {
    right: -9px; /* (18px / 2) */
    transform: translateX(50%);
}

.timeline-item:nth-child(even)::after {
    left: -9px; /* (18px / 2) */
    transform: translateX(-50%);
}


.timeline-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.timeline-content {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
}
.timeline-item:nth-child(odd) .timeline-content {
   border-right: 3px solid var(--primary-color);
}
.timeline-item:nth-child(even) .timeline-content {
   border-left: 3px solid var(--primary-color);
}


.timeline-content h4 {
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-weight: 600;
}

.timeline-content ul {
    padding-left: 0;
    list-style-type: none;
}

.timeline-content ul li {
    font-size: 0.9rem;
    color: var(--gray-dark);
    margin-bottom: 5px;
    line-height: 1.5;
}

.timeline-content ul li::before {
    content: "✓"; /* Or use FontAwesome icon */
    color: var(--accent-color);
    margin-right: 8px;
    font-weight: bold;
}

/* Responsive adjustments for timeline */
@media (max-width: 768px) {
    .agenda-timeline-modern::before {
        left: 15px; /* Move line to the left */
        transform: translateX(0);
    }
    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        padding-left: 50px; /* Space for items */
        padding-right: 15px;
        text-align: left;
    }
    .timeline-item:nth-child(odd) {
        padding-right: 15px; /* Reset padding */
    }

    .timeline-item::after,
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        left: 6px; /* (15px - (18px/2)) */
        transform: translateX(0);
    }
     .timeline-item:nth-child(odd) .timeline-content,
     .timeline-item:nth-child(even) .timeline-content {
        border-left: 3px solid var(--primary-color);
        border-right: none;
    }
}
/* ===== ABOUT SECTION ===== */
.about-section {
    background-color: var(--light-color); /* Light background for contrast */
}

.about-main-content {
    display: flex;
    flex-direction: row; /* Default for larger screens */
    align-items: flex-start; /* Align items to the top */
    gap: 40px; /* Space between text and image gallery */
    margin-bottom: var(--section-spacing); /* Space before statistics */
}

.about-text-content {
    flex: 1.2; /* Give slightly more space to text */
    animation: fadeInLeft 0.8s ease-out; /* Re-use existing animation */
}

.about-text-content h3 {
    font-size: 1.5rem; /* Slightly smaller h3 for this context */
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.about-text-content p {
    margin-bottom: 15px;
    color: var(--gray-dark);
    line-height: 1.7;
}

.about-text-content .btn {
    margin-top: 20px;
}

.about-image-gallery {
    flex: 0.8; /* Slightly less space for images */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid */
    gap: 15px;
    animation: fadeInRight 0.8s ease-out; /* Re-use existing animation */
}

.about-image-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow-hover);
}

/* Modern Statistics Section */
.statistics-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid for stats */
    gap: 30px;
    text-align: center;
    margin-top: 40px; /* Space above stats */
}

.stat-card {
    background-color: var(--white-color);
    padding: 25px 20px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.stat-icon {
    font-size: 2.5rem; /* Larger icons */
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block; /* Ensure it takes full width for centering */
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.stat-description {
    font-size: 0.95rem;
    color: var(--secondary-dark);
    font-weight: 500;
}

/* Animation data attributes (if you plan to use JS for scroll animations) */
[data-animation="fade-up"] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animation="fade-left"] {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animation="fade-right"] {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Add .animated class via JS when element is in viewport */
.animated {
    opacity: 1;
    transform: translateY(0) translateX(0);
}
/* ===== UTILITY COMPONENTS ===== */

/* Preloader Styles */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white-color); /* Use theme color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    width: 60px; /* Slightly smaller modern loader */
    height: 60px;
    border: 4px solid var(--primary-light-translucent, rgba(0, 123, 255, 0.1)); /* Use theme color */
    border-radius: 50%;
    border-top-color: var(--primary-color); /* Use theme color */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 45px; /* Modern size */
    height: 45px;
    background-color: var(--primary-color); /* Use theme color */
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Adjusted icon size */
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999; /* Ensure it's above most content */
    box-shadow: var(--box-shadow);
    border: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-dark); /* Use theme color */
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-hover);
}
/* ===== MEDIA QUERIES (NEEDS REFACTORING) ===== */
/* Review and update all media queries to ensure responsiveness with the new design. */

@media (max-width: 992px) {
    .container {
        width: 95%;
    }

    .section-header h2 {
        font-size: 2rem;
    }
    .section-header p {
        font-size: 1rem;
    }

    /* Header adjustments for tablet */
    nav ul li {
        margin-left: 15px;
    }
    nav ul li a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    nav ul li:last-child a {
        padding: 6px 15px;
    }

    /* Banner adjustments for tablet */
    .banner .container {
        flex-direction: column;
        text-align: center;
    }
    .banner-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .banner-content h1 {
        font-size: 2.5rem;
    }
    .banner-content .sub-headline {
        font-size: 1.3rem;
    }
    .banner-content .event-details {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px; /* Adjust base font for smaller screens */
    }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.6rem; }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
    }

    /* Mobile Menu Navigation */
    .mobile-menu-btn {
        display: block; /* Show hamburger icon */
        z-index: 1001; /* Above nav */
    }

    nav ul {
        display: none; /* Hide desktop nav by default */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--white-color);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 10px 0;
        border-top: 1px solid var(--gray-light);
    }

    nav ul.active { /* Class to show mobile menu */
        display: flex;
    }

    nav ul li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 12px 15px;
        width: 100%;
        border-radius: 0;
    }
    nav ul li a:hover {
        background-color: var(--gray-light);
    }
    nav ul li:last-child a { /* CTA button in mobile menu */
        margin: 10px 15px; /* Add some margin */
        width: auto; /* Allow it to size to content + padding */
        display: inline-block; /* Center it */
        border-radius: var(--button-border-radius); /* Restore border radius */
    }
    nav ul li:last-child a:hover {
        background-color: var(--primary-dark);
    }

    /* Banner adjustments for mobile */
    .banner {
        min-height: auto; /* Allow content to define height */
        padding: 40px 0;
        margin-top: 60px; /* Adjust for potentially smaller header */
    }
    .banner-content h1 {
        font-size: 2rem;
    }
    .banner-content .sub-headline {
        font-size: 1.2rem;
    }
    .banner-content .event-details {
        font-size: 0.95rem;
    }
    .banner-image-wrapper img {
        max-width: 90%; /* Ensure image doesn't touch edges */
    }
}

/* Further sections (About, Speakers, Schedule, etc.) and their media queries
   will need to be refactored here.
*/
/* Modern Contact Section Styles */
.contact-modern {
    padding: 80px 0;
    background: #f9f9f9; /* Light background for the section */
}

.contact-content-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.contact-info-modern {
    flex: 1;
    min-width: 300px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.contact-item-modern {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-item-modern i {
    font-size: 24px;
    color: var(--primary-color);
    margin-right: 20px;
    margin-top: 5px;
    width: 30px; /* Ensure consistent icon alignment */
    text-align: center;
}

.contact-item-modern h3 {
    font-size: 1.3em;
    margin-bottom: 5px;
    color: #333;
}

.contact-item-modern p {
    font-size: 1em;
    color: #666;
    margin: 0;
}

.social-links-modern {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.social-links-modern a {
    display: inline-block;
    color: var(--primary-color);
    font-size: 20px;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links-modern a:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
}

.contact-form-modern {
    flex: 2;
    min-width: 300px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.form-group-modern {
    margin-bottom: 20px;
}

.form-group-modern input[type="text"],
.form-group-modern input[type="email"],
.form-group-modern textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.form-group-modern input[type="text"]:focus,
.form-group-modern input[type="email"]:focus,
.form-group-modern textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.form-group-modern textarea {
    min-height: 150px;
    resize: vertical;
}

/* Modern Call to Action Banner Styles */
.cta-banner-modern {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.cta-content-modern h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 600;
}

.cta-content-modern p {
    font-size: 1.2em;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-buttons-modern .btn-modern {
    margin: 0 10px;
}
/* Modern Footer Styles */
.footer-modern {
    background-color: #2c3e50; /* Dark blue-gray background */
    color: #ecf0f1; /* Light gray text */
    padding: 60px 0 20px;
    font-size: 0.95em;
}

.footer-content-modern {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo-modern {
    flex-basis: 100%;
    max-width: 350px; /* Limit width for better layout on smaller screens */
    margin-bottom: 30px; /* Add space below logo section on mobile */
}

.footer-logo-img {
    max-height: 50px; /* Adjust as needed */
    margin-bottom: 15px;
}

.footer-logo-modern h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 600;
}

.footer-logo-modern p {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #bdc3c7; /* Lighter gray for tagline */
}

.footer-social-modern {
    display: flex;
    gap: 15px;
}

.footer-social-modern a {
    color: #ecf0f1;
    font-size: 1.3em;
    transition: color 0.3s ease, transform 0.3s ease;
}

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

.footer-links-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Gap between columns */
    flex-grow: 1;
    justify-content: space-around; /* Distribute columns nicely */
}

.footer-column-modern {
    flex: 1; /* Allow columns to grow and shrink */
    min-width: 180px; /* Minimum width for columns */
}

.footer-column-modern h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 500;
    position: relative;
    padding-bottom: 10px;
}

.footer-column-modern h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-column-modern ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column-modern ul li {
    margin-bottom: 12px;
}

.footer-column-modern ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-column-modern ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.newsletter-form-modern {
    display: flex;
    margin-top: 10px;
    max-width: 300px; /* Limit width of newsletter form */
}

.newsletter-form-modern input[type="email"] {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #7f8c8d; /* Mid-gray border */
    border-radius: 5px 0 0 5px;
    background-color: #34495e; /* Darker input background */
    color: #ecf0f1;
    font-size: 0.9em;
}

.newsletter-form-modern input[type="email"]::placeholder {
    color: #95a5a6; /* Lighter placeholder text */
}

.newsletter-form-modern input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}


.newsletter-form-modern .btn-modern {
    border-radius: 0 5px 5px 0;
    padding: 12px 18px;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.footer-bottom-modern {
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #34495e; /* Slightly darker border */
    font-size: 0.9em;
    color: #bdc3c7;
}

.footer-bottom-modern p i {
    color: var(--primary-color);
    margin: 0 3px;
}

/* Modern Back to Top Button Styles */
.back-to-top-modern {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.back-to-top-modern.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-modern:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

/* Responsive adjustments for footer */
@media (max-width: 992px) {
    .footer-logo-modern {
        text-align: center; /* Center logo and text on smaller screens */
        max-width: 100%; /* Allow full width */
    }
    .footer-social-modern {
        justify-content: center; /* Center social icons */
    }
    .footer-links-modern {
        justify-content: flex-start; /* Align columns to start */
    }
}

@media (max-width: 768px) {
    .footer-content-modern {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
        text-align: center;
    }

    .footer-column-modern {
        min-width: 100%; /* Full width for columns */
        margin-bottom: 30px;
    }

    .footer-column-modern:last-child {
        margin-bottom: 0;
    }

    .footer-column-modern h3::after {
        left: 50%;
        transform: translateX(-50%); /* Center the underline */
    }

    .newsletter-form-modern {
        margin-left: auto;
        margin-right: auto; /* Center newsletter form */
    }
}

/* Modern Preloader Styles */
.preloader-modern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Solid white background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.7s ease-in-out; /* Smooth fade-out */
}

.preloader-modern-logo {
    margin-bottom: 30px;
}

.preloader-modern-logo img {
    max-width: 150px; /* Adjust size as needed */
    animation: pulse 1.5s infinite ease-in-out;
}

.preloader-modern-dots {
    display: flex;
}

.preloader-modern-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background-color: var(--primary-color); /* Use primary color for dots */
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.preloader-modern-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.preloader-modern-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.preloader-modern.fade-out-modern {
    opacity: 0;
    pointer-events: none; /* Disable interaction after fade out */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

/* Ensure body is hidden until preloader is done (optional, can cause flash if JS is slow) */
/* body.loading {
    overflow: hidden;
} */