body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: #1B365D;
}

.header img {
    height: 50px;
}

.nav-menu {
    list-style: none;
    display: flex;
    padding: 0;
    gap: 20px;
}

.nav-menu li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
}

.banner img {
    width: 100%;
    height: auto;
}

.hero-container-pd {
    width: 100%;
    /* Full width */
    height: 30vh;
    /* Half the viewport height */
    overflow: hidden;
    /* Hide the cropped part */
    position: relative;
}

.hero-container-pd img {
    width: 100%;
    /* Ensure the image spans the full width */
    height: auto;
    /* Maintain aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
}

.container {
    max-width: 1000px;
    margin: auto;
    padding: 0px 20px;
    text-align: left;
    margin-bottom: 70px;
}

#subtitle {
    text-align: center;
}

/* h1,
h2,
h3 {
    text-align: center;
    color: #F15A22;
} */

h1 {
    text-align: center;
}

h2 {
    margin-top: 40px;
}

.owl-carousel img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.footer {
    background-color: #1B365D;
    color: white;
    padding: 40px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin-bottom: 20px;
}

.footer-top img {
    height: 50px;
    margin-right: 20px;
}

.footer-top p {
    text-align: left;
    flex: 1;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    text-align: left;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.footer-column h3 {
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
}

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

.footer-column ul li a {
    font-weight: normal;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.participants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
    justify-items: center;
    padding: 20px 0;
}

.participant {
    text-align: center;
}

.participant img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
}

/* Specific styling for the profile-image container to manage its children (image and caption) */
.profile-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 100%; Removed from here. Width for .profile-image and .profile-details as flex items
                     is handled by their flex properties (flex-shrink, flex-grow) in the
                     .participant-content-layout context or by specific width settings within media queries. */
    margin-left: auto;
    margin-right: auto;
}
/* .profile-details does not need to be a flex container globally by default; its children are mostly block elements.
   Its sizing as a flex item within .participant-content-layout is handled by flex-grow. */

table tr td {
    border: none;
    font-size: 18px;
}

a[href$=".pdf"]:after {
    content: "" !important;
    margin-left: 0.3em;
}

/* Styles for participant page layout */
.participant-content-layout {
    display: flex;
    flex-direction: row; /* Default for desktop: image and details side-by-side */
    align-items: flex-start; /* Align items to the top */
    gap: 40px; /* Space between image and details - adjust as needed (original was 80px) */
    margin-bottom: 30px; /* Space below this entire section */
}

.profile-image img {
    display: block; /* Removes extra space below the image if it's an inline element */
    max-width: 90%; /* Makes image responsive within its container */
    height: auto;   /* Maintains aspect ratio */
    border: 1px solid #ddd; /* Optional: adds a light border */
    border-radius: 8px; /* Optional: slightly rounded corners */
}

.image-caption {
    text-align: center;
    padding-top: 10px; /* Original was 20px, adjusted for better spacing */
    font-weight: bold;
    font-size: 0.9em; /* Slightly smaller caption text */
    color: #555; /* Dark grey color for caption */
}

.profile-details {
    flex-grow: 1; /* Allows this section to take up remaining space */
}

.profile-details h2 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 20px; /* Space below the participant's name */
}

.profile-details table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px; /* Space before the audio player */
}

.profile-details table td {
    border: none; /* Replicates original inline style */
    padding: 10px 0; /* Vertical padding for table cells for better readability */
}

.profile-details table td:first-child {
    padding-right: 10px; /* Space between the label (e.g., "Full name:") and the value */
}

.profile-details audio {
    width: 100%; /* Makes the audio player responsive */
}

/* Styles for the "Files" section that follows participant-info */
.participant-info + section {
    text-align: center; /* Centers the content of the "Files" section */
    margin-top: 30px; /* Space above the "Files" section */
    padding-top: 20px; /* Padding inside the "Files" section */
    border-top: 1px solid #eee; /* Optional: a light separator line */
}

.participant-info + section h3 {
    margin-bottom: 15px; /* Space below the "Files" heading */
}

.participant-info + section div a {
    display: inline-block; /* Allows margin/padding and better spacing for links */
    margin: 5px 0; /* Vertical margin for links */
}

.text-center-section {
    text-align: center;
    margin-top: 30px; /* Optional: consistent spacing */
    padding-top: 20px; /* Optional: consistent spacing */
    /* border-top: 1px solid #eee; Optional: consistent styling */
}

.text-center-section h3 {
    margin-bottom: 15px; /* Optional: consistent spacing */
}

.video-content-wrapper {
    width: 80%;
    margin: 0 auto;
}

.video-metadata-title {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px; /* Added for spacing before the video player */
}

video {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block; /* Optional: to remove extra space below if any */
}


/* Mobile-friendly adjustments */
@media (max-width: 1120px) { /* Targets tablets and smaller devices */
    .participant-content-layout {
        flex-direction: column; /* Stack image and details vertically */
        align-items: center;   /* Center items when stacked */
        gap: 20px;             /* Reduced gap for mobile */
    }

    .profile-image {
        width: 100%;           /* Allow image container to take full width */
        max-width: 550px;      /* Constrain image size on mobile to prevent it from being too large */
        margin-bottom: 20px;   /* Space between image and details when stacked */
    }

    .profile-details {
        width: 100%; /* Ensure details section takes full width */
    }

    .profile-details h2 {
        text-align: center; /* Center the participant's name on mobile */
    }

    /* Stack table cells for better readability on small screens */
    .profile-details table,
    .profile-details table tbody,
    .profile-details table tr,
    .profile-details table td {
        display: block; /* Each cell takes full width */
        width: 100%;
        text-align: left; /* Align text to left for stacked cells */
    }

    .profile-details table tr {
        margin-bottom: 10px; /* Space between "rows" (which are now stacked groups of td) */
    }

    .profile-details table td:first-child {
        font-weight: bold; /* Make the label bold */
        padding-right: 0; /* Remove right padding as it's stacked */
        margin-bottom: 3px; /* Small space between label and value */
    }
}

.hamburger {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 10px;
}

/* Tablet and Mobile styles */
@media screen and (max-width: 1120px) {

    /* Adjusted breakpoint */
    .hamburger {
        display: block;
        font-size: 24px;
        /* Add back hamburger specific styles */
        background: none;
        padding: 10px;
        margin-left: auto;
        /* Push hamburger to the right */
    }

    .au-primary-nav {
        display: none;
        list-style: none;
        /* Ensure list style is none on mobile */
        gap: 0; /* Remove gap on mobile */
        flex-direction: column;
        position: absolute;
        background: #fff;
        box-shadow: 0 2px 5px rgba(75, 47, 47, 0.2);
        z-index: 1001;

        /* Sizing and Positioning */
        width: 30vw; /* Menu width */
        top: 90px;   /* Position below the header */
        right: 0px;  /* Align to the right edge of the viewport */
        left: auto;  /* Allow 'right' to control horizontal position */
        height: auto; /* Allow height to be determined by content */
        max-height: 70vh; /* Limit max height to 70% of viewport height */
        overflow-y: auto; /* Add scrollbar if content exceeds max-height */
        padding: 10px 0; /* Vertical padding for content inside the menu */
        margin: 0;
        /* Reset previous margins */
    }

    .au-primary-nav.active {
        display: flex;
    }

    .au-primary-nav li {
        margin: 5px 0;
        text-align: center;
        width: 100%; /* Ensure li takes full width of its parent ul */
    }

    .au-primary-nav li a {
        color: #1B365D;
        /* Change link color for mobile menu */
        display: block;
        /* Ensure links take full width */
        padding: 8px 10px;
        /* Add padding for better spacing and touch targets */
        overflow-wrap: break-word;
        /* Allow long words/strings to wrap */
        word-break: break-word;
        /* Fallback for word breaking */
        font-weight: normal;
        /* Ensure normal weight */
    }
}

@media (max-width: 800px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer-top img {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .footer-top p {
    text-align: center;
    margin: 0;
  }
}