nav {
    background-color: rgba(229, 238, 242, 1.0);
}


main {
    background-color: #f8fcfd;
    color: #0f2a42;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1.5vw;
}

.footer-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.tint1 {
    background-color: #DCE7EB;
}

.tint2 {
    background-color: #99b8c4;
}

h2.sectiontitle {
    padding-top: 5px;
    font-size: 24px;
}

#introduction {
    padding-top: 310px;
    height: 580px;
    background: url(assets/banner.jpg) center center/cover no-repeat;
}

.card.introcard {
    border: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    font-size: 2vw;
}

.quote {
    font-size: 2vw;
}

.introtitle {
    font-size: 24px;
    color: #225F96;
    font-weight: bold;
}
.small-text {
    font-size: 0.90em; /* Adjust the size as needed */
}
@media (max-width: 768px) {
    .small-text {
        font-size: 0.90rem; /* Adjust the size as needed */
    }
}
h6.small-text {
    font-size: 0.90em; /* Ensure this is applied specifically to h6 elements with the small-text class */
}

.container .testimonial-section h6.small-text {
    font-size: 0.75em; /* Ensure this is applied specifically to h6 elements with the small-text class */
}

h3 {
    font-size: 2rem; 
}

h4 {
    font-size: 1.75rem; 
}

h5 {
    font-size: 1.5rem; /* Base size for h5 using rem for better scaling */
    color: #225F96; /* Adjust color as needed */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h6 {
    font-size: 1.25rem; /* Size for h6 */
    color: #20B090; /* Adjust color as needed */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

main h2 {
    font-size: 2.5vw;
    font-weight: bold;
    margin: 10px 0;
}
main h4 {
    font-size: 1.75rem; /* Base size */
    color: #20B090 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

main h5 {
    font-size: 1.5rem; /* Base size for h5 in main using rem for better scaling */
    color: #225F96; /* Adjust color as needed */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    
}

main h6{
    font-size: 1.25rem;
    color: #20B090;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
footer h4{
    font-size: 1.75rem;
    color: #fdfefe;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
@media (max-width: 768px) {
    h4 {
        font-size: 1.5rem; /* Smaller size for medium screens */
    }
    main h4, footer h4 {
        font-size: 1.5rem; /* Adjust the size as needed */
    }
    h5 {
        font-size: 1.4rem; /* Adjusted size for h5 on medium screens */
    }
    main h5 {
        font-size: 1.4rem; /* Adjusted size for h5 in main on medium screens */
    }
}
@media (max-width: 480px) {
    h4 {
        font-size: 1.2rem; /* Even smaller size for small screens */
    }
    h5 {
        font-size: 1.2rem; /* Even smaller size for h5 on small screens */
    }
    main h5 {
        font-size: 1.2rem; /* Even smaller size for h5 in main on small screens */
    }
}
@media (max-width: 768px) {
    main h2{
        font-size: 2.5rem; /* Adjust the size as needed */
    }
}
@media (max-width: 768px) {
    main h5{
        font-size: 1.5rem; /* Adjust the size as needed */
    }
}
@media (max-width: 768px) {
    main h6{
        font-size: 1rem; /* Adjust the size as needed */
    }
}

.link {
    display: inline-block; /* Make the link a block for better spacing */
    margin-top: 20px; /* Space above the link */
    color: #20B090; /* Link color */
    font-weight: bold; /* Bold text for emphasis */
    text-decoration: none; /* Remove underline */
    font-size: 1.2rem; /* Adjusted font size using rem for better scaling */
}

.link:hover {
    text-decoration: underline; /* Underline on hover for interaction */
}

.bg-blue {
    background-color: #C2E1E8;
}

.bg-paleyellow {
    background-color: #E6F6AF;
}

.bg-paleblue {
    background-color: #EBF2F7;
}

.lang-toggle-container {
    margin-left: auto; /* Pushes the container to the right */
}

.point-system-bullets {
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* Remove padding */
}

.point-system-bullets li {
    margin: 10px 0; /* Space between bullet points */
    font-size: 1.6vw; /* Responsive font size */
    color: #333; /* Text color */
}

.point-system-bullets i {
    color: #20B090; /* Icon color */
    margin-right: 8px; /* Space between icon and text */
}

.subscribe-form {
    color: white;
    text-align: center;
    font-size: 1.5vw;
}

.about-us-description, .social-media-description, .point-system-description, .progress-tracking-description, .testimonial-description, .event-description, .about-us-our-team-description, .card-text {
    font-size: 16px;
    line-height: 1.6; 
    color: #555; 
    margin-bottom: 15px;
}

/* Add this media query for mobile devices */
@media (max-width: 768px) {
    .about-us-description, .social-media-description, .point-system-description, .progress-tracking-description, .event-description, .about-us-our-team-description, .card-text, .subscribe-form {
        font-size: 1.5rem; /* Adjust the size as needed */
    }
    
    .testimonial-description {
        font-size: 1rem; /* Smaller size specifically for testimonials on mobile */
    }
}


#progress-tracking {
    background: transparent url(assets/background_data.png) center center/cover no-repeat;
}

#progress-tracking, #progress-tracking h4 {
    color: black;
}
#social-media {
    background: transparent url(assets/wall1.png) center center/cover no-repeat;
}

#social-media, #social-media h4 {
    color: black;
    
}

.about-us-image img {
    width: 100%;
    height: auto;
    
}
.progress-tracking-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.about-us-image {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.progress-tracking-image {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.team-image {
    display: inline-block;
    width: 300px;   
    border-radius: 80px;
    overflow: hidden;
    box-shadow: 0px 10px 13px -7px #000000, 8px 7px 16px -3px rgba(0,0,0,0); 
}

.team-image img {
    width: 100%;
    height: auto;     /* preserve aspect ratio */
    display: block;
}    

.social-container {
    display: flex;
    gap: 5px;
    font-size: vwrem;
    justify-content: center;
}

.social-container a {
    color: #333;
    margin: 0 10px;
}

.introcard {
    width: 100%; /* Full width of the container */
    max-width: 600px; /* Limit the maximum width */
    margin: 0 auto; /* Center the card */
    margin-left: -20px; /* Move the card to the left */
    padding: 20px; /* Adjust padding as needed */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a background color with transparency */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    min-height: 150px; /* Set a minimum height for the card */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
}

.quote {
    font-size: 1.5rem; /* Adjust font size for better readability on smaller screens */
}

.testimonial-quote {
    background-color: #f9f9f9; /* Light background for contrast */
    border-left: 4px solid #20B090; /* Left border for emphasis */
    padding: 20px; /* Padding for spacing */
    margin: 20px 0; /* Margin for spacing above and below */
    font-style: italic; /* Italic text for a quote feel */
    color: #333; /* Darker text color for readability */
    border-radius: 5px; /* Rounded corners */
    height: 100%;
}

.testimonial-quote i {
    font-size: 24px; /* Larger quote icon */
    color: #20B090; /* Color matching the theme */
    margin-right: 10px; /* Space between icon and text */
}

.about-us-our-team-section, .events-section h4 {
    color: #1B3B53; /* Darker color for headings */
    font-size: 1.75rem;
    margin-bottom: 20px; /* Space below the heading */
}

.about-us-our-team-description {
    font-size: 16px; /* Standard font size for descriptions */
    line-height: 1.6; /* Improved line height for readability */
    color: #555; /* Slightly lighter color for text */
    margin-bottom: 15px; /* Space between paragraphs */
}
.progress-tracking-image img {
    max-width: 100%; /* Responsive image */
    border-radius: 5px; /* Rounded corners for the image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for the image */
}
.about-us-our-team {
    font-size: 2vw !important;
    color: #20B090 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 50px;
}
.link {
    display: inline-block; /* Make the link a block for better spacing */
    margin-top: 20px; /* Space above the link */
    color: #20B090; /* Link color */
    font-weight: bold; /* Bold text for emphasis */
    text-decoration: none; /* Remove underline */
}
.link:hover {
    text-decoration: underline; /* Underline on hover for interaction */
}

.btn.btn-primary {
    min-width: 50px; /* Adjusted width */
    padding: 5px 10px; /* Reduced padding for smaller buttons */
    font-size: 1.2rem; /* Adjusted font size */
    color: #ffffff; 
    background-color: #225F96; /* Primary button color */
    border: none; 
    outline: none;
    border-radius: 5px; /* Rounded corners for a consistent look */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
}

.btn.btn-primary:hover {
    background-color: #1a4d7a; /* Darker shade for hover effect */
    transform: translateY(-2px); /* Slight lift on hover */
}

.btn.btn-primary:focus {
    outline: none !important; 
}

.about-us-our-team-section, .event-section{
    background-color: #f0f8ff; /* Light background color */
    padding: 10px 20px; /* Reduced padding for spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 20px 0; /* Top margin, right/left margin, and bottom margin set to 20px */
}

.about-us-our-team-section, .events-section .row {
    margin-top: 0; /* Remove top margin from the row */
    margin-bottom: 0; /* Remove bottom margin from the row */
}
.separator {
    height: 1px; /* Height of the separator */
    margin: 0; /* No additional margin around the separator */
    background-color: transparent; /* Optional: make it transparent if you don't want to see it */
}

.testimonial-section h6{
    font-size: 1.25rem;
    color: #225F96;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.introduction-section {
    padding-top: 100px; /* Ensure consistent padding */
    height: 580px; /* Fixed height */
    background: url(assets/banner.jpg) center center no-repeat; /* Background image */
    background-size: cover; /* Ensure the image covers the section */
    width: 100%; /* Full width */
    max-width: 100%; /* Remove max-width to allow full width */
    margin: 0 auto; /* Center the section */
    position: relative; /* Ensure positioning context */
    overflow: hidden; /* Prevent overflow if necessary */
}

.introcard {
    width: 100%; /* Full width of the container */
    max-width: 600px; /* Limit the maximum width */
    margin: 0 auto; /* Center the card */
    margin-left: -20px; /* Move the card to the left */
    padding: 20px; /* Adjust padding as needed */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a background color with transparency */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

@media (max-width: 768px) {
    .quote {
        font-size: 1.2rem; /* Smaller font size for mobile devices */
    }
}

.form-label {
    font-size: 1rem; /* Adjust the size as needed */
}

.calendar-date {
    position: relative;
    display: inline-block;
    text-align: center;
}

.date-box {
    background-color: #f0f0f0; /* Light background for the date box */
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
}

.date {
    font-size: 2rem; /* Larger font size for the date */
    font-weight: bold;
}

.day {
    display: block; /* Display day on a new line */
    font-size: 1rem; /* Smaller font size for the day */
    color: #666; /* Gray color for the day */
}
.month-name {
    font-size: 1.5rem; /* Adjust font size for the month */
    font-weight: bold; /* Make the month name bold */
    color: #225F96; /* Change color to match your theme */
    text-transform: uppercase; /* Make the month name uppercase */
    letter-spacing: 1px; /* Add some spacing between letters */
    margin-bottom: 5px; /* Space below the month name */
}

.table-padding {
    padding-top: 20px; /* Space above the table content */
    padding-bottom: 20px; /* Space below the table content */
}

.table {
    border: none; /* Ensure no border on the table */
}

.table td {
    padding: 15px; /* Space inside table cells */
    border: none; /* Ensure no border on table cells */
}

.btn-eventbrite {
    text-decoration: none; 
    padding: 12px 20px; 
    border-radius: 30px; 
    display: inline-block; 
    background-color: #225F96; /* Your desired button color */
    color: white; 
    font-weight: bold; 
    border: none; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: background-color 0.3s, transform 0.3s;
}

.btn-eventbrite:hover {
    background-color: #1a4d7a; /* Darker shade for hover effect */
    transform: translateY(-2px); /* Slight lift on hover */
}

.events-section {
    background-color: #EBF2F7; /* Change this to your desired background color */
    padding: 20px; /* Optional: Add padding for better spacing */
    border-radius: 8px; /* Optional: Add rounded corners */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #1a4d7a; /* Darker shade for hover effect */
    color: #ffffff; 
    outline: none !important; 
}
.carousel-item {
    height: 500px; /* Default height for desktop */
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

/* Add media query for mobile devices */
@media (max-width: 768px) {
    .carousel-item {
        height: auto; /* Remove fixed height on mobile */
        min-height: 300px; /* Set a minimum height to prevent collapse */
        padding: 15px; /* Slightly reduce padding on mobile */
    }
    
    .carousel-item .row {
        height: auto; /* Allow row to adjust to content */
    }
    
    .carousel-item .col-md-8 {
        padding: 15px 0; /* Add some vertical padding */
    }
    
    .testimonial-quote {
        min-height: 150px; /* Ensure minimum space for quote */
    }
}

/* Remove the pseudo-element for the bottom shadow */
.carousel-item::after {
    content: none; /* No content for the pseudo-element */
}

.btn-carousel {
    background-color: transparent; /* Make the background transparent */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font-size: 2rem; /* Increase icon size */
    color: #225F96; /* Icon color */
    transition: color 0.3s; /* Smooth transition for hover effects */
}

.btn-carousel:hover {
    color: #1a4d7a; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.btn-carousel:focus {
    outline: none !important; 
}

/* Add margin to the icons */
.btn-carousel i {
    margin: 0 10px; /* Adjust the margin as needed */
}

.text-center .btn-carousel {
    background-color: transparent; /* Make the background transparent */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font-size: 2rem; /* Increase icon size */
    color: #225F96 !important; /* Icon color with !important to override */
    transition: color 0.3s; /* Smooth transition for hover effects */
    height: 100%;
}

.text-center .btn-carousel:hover {
    color: #1a4d7a !important; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
    height: 100%;
}

.carousel-item img.rounded-circle {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border: 2px solid #fff; /* Optional: adds a clean white border */
    transform: translateZ(0); /* Forces hardware acceleration */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Add this to ensure the container doesn't cause issues */
.col-md-4.d-flex.justify-content-center.align-items-center.flex-column {
    padding: 10px;
}

.testimonial-image-container {
    width: 100px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-item .col-md-8 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.testimonial-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 20px;
}

.testimonial-quote p {
    margin: 0; /* Remove default paragraph margins */
    padding: 5px 0; /* Add some vertical padding between paragraphs */
}

.carousel-item .team-image {
    width: 230px;   /* Previously reduced from 300px */
    border-radius: 50px;  /* Reduced from 80px to maintain proportion */
    overflow: hidden;
    box-shadow: 0px 10px 13px -7px #000000, 8px 7px 16px -3px rgba(0,0,0,0);
    margin-bottom: 20px;
}

.carousel-item .team-image img {
    width: 100%;
    height: auto;
    display: block;
}

.event-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
    display: block;
}

.event-image:hover {
    transform: translateY(-5px);
}

.event-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Add responsive styles for the event image */
@media (max-width: 768px) {
    .event-image {
        height: auto;
    }
    
    .event-image img {
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .event-image {
        height: auto;
    }
    
    .event-image img {
        height: auto;
        object-fit: contain;
    }
}

.event-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding: 20px;
    width: 100%;
}

.event-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
}

/* Add responsive styles for the event content */
@media (max-width: 768px) {
    .event-content {
        padding: 15px;
    }
    
    .event-description {
        font-size: 1.5rem;
    }
}

/* Event Page Styles */
.event-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #225F96;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.event-navigation:hover {
    background-color: #1a4d7a;
    transform: translateY(-50%) scale(1.1);
}

.event-navigation.prev {
    left: -20px;
}

.event-navigation.next {
    right: -20px;
}

.event-navigation.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
}

.event-navigation.disabled:hover {
    transform: translateY(-50%);
}

.event-container {
    position: relative;
    padding: 0 40px;
}

.date-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.date-box {
    background-color: #225F96;
    color: white;
    padding: 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.date {
    font-size: 2.2rem;
    font-weight: bold;
    display: block;
    line-height: 1;
}

.day {
    font-size: 1rem;
    color: white;
    display: block;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .event-navigation {
        width: 30px;
        height: 30px;
    }
    .event-navigation.prev {
        left: -15px;
    }
    .event-navigation.next {
        right: -15px;
    }
}

/* Event Page Styles */
.month-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #225F96;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.event-section {
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.event-section:hover {
    transform: translateY(-5px);
}

.event-section.past-event {
    opacity: 0.85;
    background-color: #f8f9fa;
}

.event-section.past-event:hover {
    transform: none;
}

.event-section.past-event .btn-eventbrite {
    background-color: #6c757d;
    pointer-events: none;
    opacity: 0.8;
}

.date-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.date-box {
    background-color: #225F96;
    color: white;
    padding: 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.date {
    font-size: 2.2rem;
    font-weight: bold;
    display: block;
    line-height: 1;
}

.day {
    font-size: 1rem;
    color: white;
    display: block;
    margin-top: 4px;
}

.event-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.event-image:hover {
    transform: scale(1.02);
}

.event-content {
    padding: 20px;
}

.event-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
}

.btn-eventbrite {
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 30px;
    display: inline-block;
    background-color: #225F96;
    color: white;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.btn-eventbrite:hover {
    background-color: #1a4d7a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    color: white;
}

.events-section {
    padding: 40px 0;
}

.events-section h4 {
    color: #225F96;
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: bold;
}

.event-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #225F96;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.event-navigation:hover {
    background-color: #1a4d7a;
    transform: translateY(-50%) scale(1.1);
}

.event-navigation.prev {
    left: -20px;
}

.event-navigation.next {
    right: -20px;
}

.event-navigation.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
}

.event-navigation.disabled:hover {
    transform: translateY(-50%);
}

.event-container {
    position: relative;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .event-section {
        padding: 20px;
    }
    .date-container {
        margin-bottom: 20px;
    }
    .event-image {
        margin-bottom: 20px;
    }
    .event-content {
        padding: 10px;
    }
    .event-description {
        font-size: 1rem;
    }
    .event-navigation {
        width: 30px;
        height: 30px;
    }
    .event-navigation.prev {
        left: -15px;
    }
    .event-navigation.next {
        right: -15px;
    }
}

.event-video-container {
    width: 100%;
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #000;
}

.event-video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .event-video {
        max-height: 300px;
    }
}

.speaker-section {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    border-left: 4px solid #225F96;
}

.speaker-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.speaker-name {
    color: #225F96;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.speaker-title {
    color: #20B090;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.speaker-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .speaker-section {
        padding: 1.5rem;
    }
    
    .speaker-image {
        width: 120px;
        height: 120px;
        margin-bottom: 1rem;
    }
    
    .speaker-name {
        font-size: 1.3rem;
    }
    
    .speaker-title {
        font-size: 1rem;
    }
    
    .speaker-bio {
        font-size: 1rem;
    }
}

.speaker-guest-title {
    color: #225F96;
    font-size: 1.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    border-bottom: 2px solid #20B090;
    padding-bottom: 0.5rem;
    display: inline-block;
}

@media (max-width: 768px) {
    .speaker-guest-title {
        font-size: 1.4rem;
    }
}