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

html, body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #333333;
    font-size: 16px;
    background-color: #ffffff;
    line-height: 1.6;
}
/* Wrapper for your content to push the footer down */
.content-wrap {
    min-height: 100%; /* Make sure it at least spans the height of the viewport */
    /* This is important: it pushes the footer down */
    margin-bottom: -35px; /* Adjust this to your footer's height */
    padding-bottom: 35px; /* Adjust this to your footer's height */
}


header {
    background-color: #003366;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    color:#ffffff;
    font-family: Georgia, serif;
    font-size: 40px;
}
header h2 {
    color:#ffffff;
    font-family: Georgia, serif;
    font-size: 24px;
    margin-bottom: 10px;
}

nav {
    background: #007bff;
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #0056b3; /* Slightly darker blue on hover/active */
    color: white;
}

nav ul li a:visited {
    color: white;
}

section {
    padding: 30px;
    margin-bottom: -20px;
}

section h2 {
    font-family: Georgia, serif;
    color: #003366;
    margin-bottom: 10px;
}
section h3 {
    font-family: Georgia, serif;
    color: #003366;
    margin-bottom: 6px;
}

/* Keynote Speakers Section Enhancements */
#keynote-speakers {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 10px 0;
}

#keynote-speakers h2 {
    color: #003366;
    text-align: center;
    font-family: Georgia, serif;
    margin-bottom: 10px;
}
p {
    font-family: Georgia, serif; /* Use the name provided by Google Fonts */
    font-size: 16px; /* Adjust as needed */
    color: #4a4a4a; /* This color offers good readability */
    line-height: 1.6; /* Ensures text is not too cramped */
}



ul li {
    font-family: Georgia, serif; /* Use the name provided by Google Fonts */
    font-size: 16px; /* Adjust as needed */
    color: #4a4a4a; /* This color offers good readability */
    line-height: 1.6; /* Ensures text is not too cramped */
}
.speakers-container {
    display: flex;
    justify-content: space-around; /* This will space out the speaker divs evenly */
    flex-wrap: wrap; /* Allows speaker sections to wrap on smaller screens */
}
.speaker {
    flex-basis: 49%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: #333333; 
    max-width: 75%; /* Adjust this value as needed */
    margin-left: auto; /* Center the div */
    margin-right: auto; /* Center the div */
}

.speaker img {
    flex-shrink: 0; /* Prevents the image from resizing */
    margin-right: 10px;
    width: 150px;
    height: 120px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 50%;
}

.speaker h3 {
    margin-top: 0;
    font-size: 16px;
    margin-right: 10px;
}

.speaker p {
    font-size: 16px;
    text-align: justify;
    color: #4a4a4a;
}
#sponsors {
    text-align: center;
    padding: 20px 0;
    background-color: #f8f9fa; /* Light grey background, adjust as needed */
}

#sponsors h2 {
    margin-bottom: 30px;
    color: #003366; /* Dark text for the heading */
}

.sponsor-list {
    display: flex;
    justify-content: center; /* Adjust this to flex-start if you prefer logos aligned to the left */
    flex-wrap: wrap;
    gap: 10px; /* Controls the space between logos */
    padding: 0 5px; /* Adjusts padding inside the sponsor list for edge spacings */
}

.sponsor {
    width: 30%; /* Slightly less than one-third to accommodate gap */
    display: flex;
    justify-content: center;
    align-items: center;
}

.sponsor img {
    width: auto; /* Auto width for intrinsic image dimensions */
    max-width: 100%; /* Ensures the image is responsive and fits its container */
    height: auto; /* Maintains aspect ratio */
    max-height: 200px; /* Controls the maximum height of the logos */
}



/* Improving responsiveness */
@media (max-width: 768px) {
    .speaker {
        flex-direction: column;
        text-align: center;
    }

    .speaker img {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .speaker h3, .speaker p {
        text-align: center;
    }
}
@media (max-width: 600px) {
    .sponsor {
        width: 48%; /* Example for two per row on small screens */
    }
}
footer {
    background-color: #003366;
    color: #ffffff;
    text-align: center;
    height: 35px; 
    line-height: 35px; /* Adjust this to your footer's actual height for vertical alignment */
    width: 100%;
}
footer p, footer h3, footer h4 {
    color: #ffffff; /* White text color for readability */
}
/* Footer links color */
footer a {
    color: #ffd700; /* Gold color; adjust as needed */
    text-decoration: none; /* Optional: removes underline from links */
}

/* Footer links hover effect */
footer a:hover {
    color: #ff8c00; /* Dark orange; adjust as needed */
    text-decoration: underline; /* Optional: adds underline on hover */
}
/* Ensure footer is not hidden if the content is longer than the viewport */
body > footer {
    clear: both;
}

@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 5px 0;
    }

    .speaker {
        flex-direction: column;
        text-align: center;
    }

    .speaker img {
        margin: 0 auto 20px;
        width: 150px; /* Slightly smaller images on mobile */
    }
}