body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #B0C4DE; /* Background color */
            color: #333;
        }

        nav {
            background-color: #003366;
            color: #fff;
            padding: 0.5em 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

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

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

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 0.5em 1em;
            display: inline-block;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        nav ul li a:hover {
            background-color: #004080;
            border-radius: 5px;
        }

        header {
            position: relative; /* Allow positioning of child elements */
            overflow: hidden;
        }

        header img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            display: block; /* Remove bottom space in the image */
            filter:blur(2.4px);/*Add blur effect*/
        }

        .header-text {
            position: absolute; /* Position text on top of the image */
            top: 30%; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -30%); /* Adjusted to match the new top position */
            color:#009999; /* Text color */
            text-align: center; /* Center text */
            z-index: 2; /* Ensure text is on top of the image */
        }

        .header-text h1 {
           
        font-size: 4em; /* Reduced font size */
        font-weight: bold;/* Make the title bold */
        margin: 0;
        padding: 0 20px; /* Added padding to ensure better spacing */
        white-space: nowrap; /* Prevent line breaks */
        }

        .header-text h2 {color: #B0C4DE; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7)*/
            font-size: 5em; /* Increase font size for subtitle */
            font-weight: bold;/* Make the title bold */
        }

        .header-text p {color: #B0C4DE; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7)*/
            font-size: 3em; /* Increase font size for subtitle */
            font-weight: bold;/* Make the title bold */
            margin: 10px 0 0; /* Adjust margin */
            opacity: 1; /* Slightly transparent for better visibility */
        }

        main {
            padding: 2em;
            max-width: 1200px;
            margin: auto;
        }

        .section {
            margin-bottom: 2em;
            padding: 2em;
            background:#f0f4f8;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .grid-row {
            display: flex; /* Use flexbox for layout */
            justify-content: center; /* Center the columns */
        }

        .grid-column {
            margin: 0 30px; /* Increased margin between columns */
            text-align: center; /* Center text in each column */
            background-color: #f0f4f8; /* Background color for the column */
            padding: 15px; /* Padding for the column */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
	    /*grid-column: 1 / -2;*/
        }

        h2.align--center {
            text-align: center;
            color: #003366; /* Color for the organizing committee title */
        }

        footer {
            font-size: 1.5em; /* Increase font size for subtitle */
            background-color: #737373;
            color: #F4A60B;
            text-align: center;
            padding: 1em;
            position: relative;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Styling for the speakers list */
.speakers-section {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-around; /* Center-align and distribute space */
    gap: 20px; /* Space between cards */
    padding: 20px;
} 

.speaker-card {
    background-color: #20B2AA; /*  background color */
    border: 1px solid #e0e0e0; /* Border color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
    padding: 20px;
    width: calc(33.333% - 20px); /* Three columns with gaps */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.speaker-card p {
    font-size: 1.5em; /* Slightly larger font */
    margin: 0; /* Remove default margin */
    font-weight: bold;
}

.speaker-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Responsive styling for mobile screens */
@media (max-width: 768px) {
    .speaker-card {
        width: calc(50% - 20px); /* Two columns on smaller screens */
    }
} 

        /* Styling for the poster and schedule section */
        .poster-schedule-section {
            display: flex; /* Use flexbox to place elements side by side */
            justify-content: space-around; /* Space elements evenly */
            align-items: center; /* Vertically center elements */
            margin-bottom: 2em;
        }

        .poster-schedule-box {
            background-color: #f0f4f8; /* Background color for each box */
            padding: 20px;
            width: 45%; /* Each box takes up 45% of the available space */
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow for depth */
            transition: transform 0.3s ease;
        }

        .poster-schedule-box:hover {
            transform: scale(1.05); /* Slight zoom effect on hover */
        }

        /* Styling for the highlight section */
        .highlight {
            background-color: #f9f9f9; /* Light background */
            border: 1px solid #ccc; /* Light gray border */
            border-radius: 8px; /* Rounded corners */
            padding: 20px; /* Padding for space */
            margin: 20px 0; /* Margin for separation */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
        }

        /* Footer styling for blue text */
        .footer-text {
            color: #003366; /* Set text color to blue */
        }

        /* Button styles */
        .btn {
            display: inline-block;
            background-color: #003366;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #004080;
        }

<!--23 october-->
        /* Container for Responsive Layout */
        .container {
            width: 100%;
            max-width: 1200px;/*ensures it doesn't strech too much on large screens*/
            margin: 0 auto;
        }

        /* Phone Styles */
        @media only screen and (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }

        /* Tablet Styles */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .container {
                flex-direction: row;
            }
        }
/* Responsive styling for mobile screens */
@media only screen and (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .header-text h1 {
        font-size: 2em;
    }

    .header-text h2, .header-text p {
        font-size: 1.2em;
    }

    .speakers-section {
        flex-direction: column;
    }
.speaker-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .poster-schedule-section {
        flex-direction: column;
        align-items: stretch;
    }

    .poster-schedule-box {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Adjust footer grid to stack vertically on small screens */
    .grid-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* Tablet Styles */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .speaker-card {
        width: calc(50% - 20px);
    }

    .poster-schedule-box {
        width: 48%;
    }


<!--23 october END-->


}

#speaker{display: flex; justify-content: center; gap: 50px;}
#speaker-div{background-color: #20B2AA; width: 30%; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease;}
#speaker-p{font-size: 1.5em; font-weight: bold; color: #000; margin: 0;}
#speaker-section{background-color: #f0f4f8; padding: 40px; border-radius: 8px;}
#speaker-title{text-align: center; font-size: 2.5em; margin-bottom: 30px; color: #003366; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
#organizer-title{color: #003366; font-size: 2.5em; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}

#poster-section{display: flex;
justify-content: space-around; gap: 20px; padding: 40px; background-color:
#f0f4f8; border-radius: 8px; margin: 40px auto; max-width: 1200px;}

#poster-box{text-align: center;
background-color: #20B2AA; padding: 20px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s
ease, box-shadow 0.3s ease; width: 30%; margin: 0 10px;}

#poster-text{display:
inline-block; background-color: #003366; color: #fff; padding:
12px 24px; font-size: 1.2em; border-radius: 5px; text-decoration:
none; margin-top: 10px;}

#venue{background-color: #f0f4f8; padding: 40px; border-radius: 8px; margin: 40px auto; max-width: 800px; text-align: center;}
#venue-h2{font-size: 2.5em; color: #003366; margin-bottom: 20px;}
#venue-p{font-size: 1.2em; line-height: 1.6em; color: #003366; margin-bottom: 15px;}
#venue-p2{font-size: 1.2em; line-height: 1.6em; color: #003366;}

#footer{background-color: #778899; color: #FFF; text-align: center; padding: 2em; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);}
#footer-p{font-size: 1.2em; margin-bottom: 15px;}
#footer-section{margin-bottom: 1em;}
#footer-h3{font-size: 1.5em; color: #B0C4DE;}
#footer-row{display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; max-width: 800px; margin: 0 auto;}
#footer-text{text-align: left;}
#footer-p2{font-weight: bold;}
#footer-link{color: #20B2AA; word-wrap: break-word;}