body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #77A6AE;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}


.header {
    padding: 20px;
    margin-bottom: 20px;
}

.title {
    font-size: 2.5rem; /* Relative units */
    color: white;
    margin: 0.5rem 0;
    text-align: center;
    margin-left:4.5rem ;
}


.title span {
    color: #0E3A53; /* Blue color for the first letter */
    font-size:2.5rem; ;
}

.subtitle-logo-container {
    display: flex;
    
    justify-content: center;
    margin-top: 10px;
    margin-right: 10rem;

}

.subtitle {
    font-size: 2rem;
    margin-left: 8px;
   
    
    
    
}

.logo {
    width: 120px; /* Relative size */
    height: 120px;
    
}

.icon-text-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #0E3A53;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
}

.icon-text {
    color: white;
    font-size: 1rem;
    margin: 0 20px;
    text-decoration: none;
}

.icon-text:hover {
    color: #0056b3; /* Color on hover */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .icon-text-container {
        flex-direction: column;
        align-items: center;
    }
    
    .icon-text {
        margin: 10px 0;
        font-size: 1.2rem; /* Increase font size slightly for better readability on mobile */
    }
}.icon-text-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #0E3A53;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
}

.icon-text {
    color: white;
    font-size: 1rem;
    margin: 0 20px;
    text-decoration: none;
}

.icon-text:hover {
    color: #0056b3; /* Color on hover */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .icon-text-container {
        flex-direction: column;
        align-items: center;
    }
    
    .icon-text {
        margin: 10px 0;
        font-size: 1.2rem; /* Increase font size slightly for better readability on mobile */
    }
}


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 20px 0;
}

.photo {
    flex: 1 1 30%;
    margin: 10px;
    box-sizing: border-box;
}

.photo img {
    width: 100%;
    height: 300px;
    display: block;
}

@media (max-width: 768px) {
    .photo {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .photo {
        flex: 1 1 100%;
    }
}

.event-info {
    font-size: 1.35rem;
    color: #0E3A53;
    margin: 10px 0;
}
.welcome-message {
    font-size: 1.4rem;
    color:black;
    margin: 20px 0; /* Adjust margin as needed */
    text-align: center;
}

.call-for-papers {
    font-size: 1.35rem;
    margin: 20px 0;
}

button {
    font-size: 1rem;
    padding: 10px 20px;
    margin: 10px 0;
}

.lists-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 20px 0;
}

.list-container {
    background-color: #0E3A53;
    padding: 20px;
    border-radius: 5px;
    color: white;
    margin: 10px;
    flex: 1 1 45%;
    box-sizing: border-box;
}

.list-container h3 {
    font-size: 1.35rem;
    text-align: left;

}

.list-container ul {
   

    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.list-container li {

    font-size: 1.1rem;
    margin: 10px 0;
    margin-left: 4%;
    text-align: left;
}
 
a {
    color: inherit;
    text-decoration: none;
}
.logos {
    flex: 1 1 30%;
    margin: 10px;
    box-sizing: border-box;
}

.logos img {
    width: 100%;
    height: 200;
    display: block;
}
@media (max-width: 768px) {
    .logos {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .logos {
        flex: 1 1 100%;
    }
}






h1, h3, ul {
    margin-bottom: 10px;
}

.registration-containerr {
    max-width: 800px; /* Adjust max-width as per your design */
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #0E3A53; /* Border style */
    border-radius: 8px;
    background-color: #0E3A53; /* Background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.list-containerr {
    margin-bottom: 20px;
}

.list-titler {
    font-size: 1.5rem;
    color:white;
    margin-bottom: 10px;
   
   
}

.listr {
    list-style: none;
    font-size: 1.2rem;
    padding-left: 0; /* Remove default padding for lists */
    color: white;
   
    
}

.list li {
    margin-bottom: 5px;
}

.listr.left {
    float: left; /* Align left */
    width: calc(33.33% - 10px); /* Divide container into thirds (adjust spacing) */
     /* Adjust spacing between lists */
}
.list-containerr h3 {
    font-size: 1.35rem;
    text-align: left;
}
.list-containerr li {
    font-size: 1.1rem;
    margin: 10px 0;
    margin-left: 4%;
    text-align: left;
}
.contentt {
    padding: 20px;
    background-color: #77A6AE;
    margin: 20px;
    border-radius: 0px;
    box-shadow: 0 0 10px #77A6AE(0, 0, 0, 0.1);
    text-align: center;
}

.contentt img {
    width: 20%; /* Adjust the width as needed */
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#countdown {
    margin: 20px 0;
    font-size: 18px;
    color: #333;
}

#timer {
    font-size: 24px;
    font-weight: bold;
}


.countdown-container {
    text-align: center;
    padding: 20px 40px;
}

.countdown-container h1 {
    font-size: 1.35rem;
    color:#0E3A53;
    margin-bottom: 10px;
  
}

.countdown-container p {
    color:black;
    margin-bottom: 30px;
    font-size: 1.1em;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.countdown-item {
    background: #e9f0fb;
    padding: 27px;
    border-radius: 10px;
    box-shadow: none; /* Remove box-shadow */
    min-width: 15px;
}

.countdown-item span {
    display: block;
    font-size: 1.7rem;
    color: #0E3A53;
       
}

.countdown-item .label {
    font-size: 0.5rem;
    color: #888;
    

}

    .header-table {
        width:100%;
        background-color: #77A6AE;
        border-collapse: collapse;
        ALI
    }
    
    .logo-cell {
        text-align: center;
        padding: 20px;
    }
    
    .logo {
        width: auto;
        height: 100px;
    }
   .photos {
    width: 60%;
    height: auto;
    flex: auto;
    align-items: center;
    margin-top: 2%;
    margin-bottom: 2%;
}


.photospeaker {
 width: 30%;
 height: auto;
 flex: auto;
 align-items: center;
}

 /* Media query for smaller screens */
 @media (max-width: 600px) {
    .photoe img {
        max-width: 100%; /* Adjust this value to change the size of the logo on smaller screens */
    }
}
.speaker-title  {
    
    
    color: #77A6AE;
    
    
}
.custom-bullets {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 20px;
}

.custom-bullets li {
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.custom-bullets li::before {
    content: '•'; /* Bullet character */
    color:#77A6AE; /* Change this to your desired bullet color */
    position: absolute;
    left: 0;
    font-size: 20px; /* Adjust size as needed */
}
.custom-bulletss {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 20px;
}

.custom-bulletss li {
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.custom-bulletss li::before {
    content: '•'; /* Bullet character */
    color:red; /* Change this to your desired bullet color */
    position: absolute;
    left: 0;
    font-size: 20px; /* Adjust size as needed */
}
.crossed-out {
    text-decoration: line-through; /* Adds the strikethrough effect */
    
    color: red; /* Sets the color of the text */
}


.scrolling-banner {
    width: 100%;
    background-color: #b8d6db;
    color: red;
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.scrolling-banner .message {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}