@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* This ensures no horizontal scroll */
    width: 100%;
    box-sizing: border-box; /* Include padding and borders in element width */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    z-index: 10;
    padding: 1rem 2rem;
    text-align: center;
}

nav {
    display: flex;
    justify-content: space-between; /* Distribute space between the logo and menu */
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Ensure the nav takes up full width */
    padding: 20px 40px;
    background-color: transparent;
    z-index: 20;
    box-sizing: border-box; /* Include padding and borders in width calculation */
}

.nav-brand {
    flex: 1; /* Allow the logo to take up space on the left */
    display: flex;
    align-items: center;
}

.icon {
    margin-left: 10px; /* Space between text and icon */
    font-size: 1.2em; /* Adjust icon size */
    color: #ffffff; /* Same color as nav links */
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end; /* Align the links to the right */
    align-items: center;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 1rem;
}

.nav-links a:hover {
    background-color: rgb(61, 61, 61);
    border-radius: 5px;
}

.nav-logo {
    height: 50px; /* Set a static height */
    width: auto; /* Keep the aspect ratio */
    cursor: pointer;
}


.container {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.page-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #000000;
    text-align: center;
}

.content-text {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 2rem;
}

.custom-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.custom-form label {
    font-weight: bold;
    color: #000000;
    font-size: 1.1rem;
}

.custom-form input, .custom-form textarea, .custom-form select {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
}

.custom-form input:focus, .custom-form textarea:focus, .custom-form select:focus {
    border-color: #000000;
    outline: none;
}

.btn {
    background-color: #000000;
    color: #ffffff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    display: inline-block;
    margin-top: 1rem;
}

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

footer {
    text-align: center;
    padding: 2rem;
    background-color: #f1f1f1;
    color: #333;
    margin-top: 3rem;
    border-top: 1px solid #ddd;
}

/* Fix for video-container and header width */
.video-container {
    position: relative;
    width: 100vw; /* Ensure the video fits the entire viewport width */
    height: 100vh; /* Full viewport height */
    top: 0;
    overflow: hidden; /* Prevent content overflow */
}

.inner-page .video-container {
    height: 500px; /* Reduced height for other pages */
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Full width for video background */
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
    z-index: -1; /* Behind other elements */
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 10px;
}

.video-overlay h1 {
    font-size: 3rem;
    margin: 0;
}

.video-overlay p {
    font-size: 1.5rem;
    margin: 0.5rem 0 0 0;
}

.cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 10px 0;
    background-color: #ffffff;
}

.card-header {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #000000;
}

.card-content {
    color: #4f4f4f;
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: justify;
}

.alert {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-info {
    background-color: #e7f1ff; /* Light blue background for info */
    border: 1px solid #b3d7ff; /* Slightly darker blue border */
    color: #333; /* Dark text color for readability */
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.5;
}

.custom-list {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.custom-list li {
    background-color: #f9f9f9; /* Light background color for contrast */
    border: 1px solid #e0e0e0; /* Light border for separation */
    border-radius: 4px; /* Rounded corners */
    padding: 15px; /* Spacing inside list item */
    margin-bottom: 10px; /* Space between list items */
    font-size: 16px; /* Font size for better readability */
    color: #333; /* Text color */
    line-height: 1.6; /* Line height for better readability */
}

.custom-list li:hover {
    background-color: #f1f1f1; /* Slightly darker background on hover */
    border-color: #ccc; /* Slightly darker border on hover */
}

/* Container for the category list */
.categories-grid {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap into new rows */
    gap: 20px; /* Space between items */
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
    justify-content: center; /* Centers items when a row is not fully filled */
}

.category-item {
    background-color: #000; /* Light background */
    color: #fff;
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 1rem;
    text-align: center;
    cursor: pointer; /* Make clickable */
    transition: background-color 0.3s ease;

    flex: 1 1 calc(33.33% - 20px); /* Each item takes up 1/3 of the row minus the gap */
    max-width: calc(33.33% - 20px); /* Limits the max width to 1/3 of the row */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    align-items: center;
    justify-content: center;
    display: flex;
    height: 70px;
}

.category-item:hover {
    background-color: #363636; /* Hover effect */
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
    overflow: auto; /* Enable scroll if needed */
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
}

/* Responsive adjustments */
@media (max-width: 1500px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 1500px) {
    .categories-grid {
        display: flex;
        width: 100%;
        flex-direction: column;

    }

    .category-item {
        all: unset;
        width: 87%;
        height: 50px;
        background-color: #000; /* Light background */
        color: #fff;
        border: 1px solid #e0e0e0; /* Light border */
        border-radius: 10px;
        padding: 15px 20px;
        font-size: 1rem;
        text-align: center;
        cursor: pointer; /* Make clickable */
        transition: background-color 0.3s ease;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Adjust grid for larger vertical cards */
.judges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 columns layout for judge cards */
    gap: 20px;
    justify-items: center; /* Center the grid items */
}


/* Info section at the bottom of the card */
.judge-info {
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
    height: 30%; /* Fixed height for the text area */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.4;
}

/* General styling for judge items */
.judge-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    text-align: center;
    transition: background-color 0.3s ease;
    height: 400px; /* Fixed height for the card */
    width: 240px; /* Increased width for the card */
    overflow: hidden;
}


.judge-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

/* Hover effect */
.judge-item:hover {
    background-color: #e6e6e6; /* Slightly darker background on hover */
}

/* Responsive adjustments */
/* Mobile adjustments: Enforce aspect ratio on small screens */
@media (max-width: 1000px) {
    /* Fix for mobile centering issue */
    .judges-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 column layout on mobile */
        gap: 20px;
        justify-items: center; /* This will center the items horizontally */
        margin: 0 auto; /* Ensure grid is centered within its container */
        padding: 0; /* Remove any extra padding */
        width: 100%; /* Take full width of the container */
    }

    .judge-item {
        height: 500px; /* Fixed height for the card */
        width: 300px; /* Increased width for the card */
    }

    .judge-photo-container {
        height: auto; /* Auto height to scale correctly */
        padding-top: 70%; /* Maintain the 70% aspect ratio for mobile */
    }

    .judge-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .judge-info {
        height: auto; /* Allow text area to expand as needed */
    }
}

/* Styling for the form group container */
.form-group {
    display: flex; /* Flexbox layout for alignment */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center; /* Vertically center-align items */
    margin-bottom: 20px; /* Space between form groups */
}

/* Styling for labels */
.form-label {
    flex: 1 0 200px; /* Label takes up space and sets a minimum width */
    font-weight: bold; /* Make the label bold */
    color: #333; /* Text color */
    margin-right: 10px; /* Space between the label and input */
}

/* Styling for input fields */
.form-input {
    flex: 2 1 auto; /* Input takes the remaining space */
    padding: 10px; /* Inner spacing for inputs */
    border: 1px solid #ccc; /* Light border around input */
    border-radius: 4px; /* Rounded corners */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    width: 100%; /* Full width for responsiveness */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Hamburger menu - hide it on larger screens */
.hamburger {
    display: none; /* Hidden by default */
    font-size: 2rem;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    z-index: 1001; /* Ensure the hamburger is on top */
}

.filter-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center; /* Center the buttons */
    margin-top: 30px; /* Add space above the buttons */
}

/* Modify the filter button style to match the design */
.filter-btn {
    background-color: #FFF; /* Dark navy color */
    color: #000; /* White text */
    border: 1px solid #000000; /* Border with same color */
    padding: 10px 30px; /* Padding for larger buttons */
    cursor: pointer;
    border-radius: 25px; /* Rounded corners for buttons */
    transition: background-color 0.3s ease;
    font-size: 1rem; /* Adjust font size */
}

.filter-btn.active {
    background-color: #000; /* Slightly darker background for active button */
    color: #FFF; /* Accent color for active button */
}

.filter-btn:hover {
    background-color: #000; /* Darker hover effect */
    color: #FFF; /* Accent color on hover */
}

/* Styling for the new custom category item class */
.custom-category-item {
    background-color: transparent;
    border: none;
    padding: 0; /* Remove padding */
    margin-bottom: 8px; /* Add space between category items */
    display: flex;
    align-items: center;
    min-height: 30px; /* Ensure small height */
}

/* Custom checkbox styles */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #000000; /* Navy blue text */
    position: relative;
    padding-left: 0; /* Remove extra padding */
}

.custom-checkbox input {
    position: absolute;
    opacity: 0; /* Hide the default checkbox */
    cursor: pointer;
}

/* Create a smaller custom checkbox */
.custom-checkbox .checkmark {
    display: inline-block;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border: 1px solid #000000; /* Navy blue border */
    border-radius: 3px; /* Slightly rounded corners */
    margin-right: 10px; /* Adds space between checkbox and text */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* On hover, darken the border */
.custom-checkbox:hover input ~ .checkmark {
    border-color: #000000;
}

/* When checkbox is checked, change background and border color */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #000000; /* Navy background when checked */
    border-color: #000000;
}

/* Create the checkmark (tick) */
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Add some margin between checkbox and label text */
.custom-checkbox span {
    font-size: 0.9rem;
    color: #333;
}

.nomination-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nomination-inner-container {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1500px) {
    .form-group {
        flex-direction: column; /* Stack label and input vertically on smaller screens */
        align-items: stretch; /* Stretch items to fill the container */
    }

    .form-label {
        margin-bottom: 5px; /* Add space between label and input when stacked */
    }

    .form-input {
        width: 100%; /* Ensure inputs are full width on smaller screens */
    }


    .nav-links a {
        padding: 15px;
        text-align: center;
        width: 90%;
        color: #ffffff;
    }

    .hamburger {
        display: block;
        font-size: 2rem;
        background: none;
        border: none;
        color: #ffffff;
        cursor: pointer;
        z-index: 999; /* Ensure the hamburger is on top */
    }

    .nav-links {
        display: none; /* Hidden by default */
        flex-direction: column;
        width: 100%;
        background-color: #000000;
        position: absolute;
        top: 70px; /* Below the header */
        left: 0;
        z-index: 998; /* Ensure it's below the hamburger but above other elements */
    }

    .nav-links.show {
        display: flex; /* Show the menu when 'show' class is added */
    }

    nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 20px 10px 20px 10px;
    }

    .nomination-container {
        width: 100%;
    }

    .nomination-inner-container {
        width: 90%;
    }

    .custom-form input, .custom-form textarea, .custom-form select {
        padding: 0.75rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
        width: 97%;
    }

    .filter-btn {
        background-color: #FFF; /* Dark navy color */
        color: #000; /* White text */
        border: 1px solid #000000; /* Border with same color */
        padding: 5px 15px; /* Padding for larger buttons */
        cursor: pointer;
        border-radius: 25px; /* Rounded corners for buttons */
        transition: background-color 0.3s ease;
        font-size: 1rem; /* Adjust font size */
    }

    @media (max-width: 768px) {
    .media-partners-logos {
        grid-template-columns: 1fr; /* Single column */
    }
}

    .package-grid {
        flex-direction: column;
        gap: 20px;
    }

    .book-table-package-item {
        width: 100%;
    }

    .payment-page-container {
        padding: 20px;
    }

    .payment-form-group input,
    .payment-form-group select {
        font-size: 1rem;
    }

    .btn-primary {
        width: 100%;
        padding: 15px;
        font-size: 1.2rem;
    }

    .payment-method-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .payment-option-btn {
        width: 100%;
        text-align: center;
    }

    .package-grid {
        flex-direction: column;
        align-items: center; /* Center the items horizontally */
        gap: 20px;
    }

    .book-table-package-item {
        width: 90%; /* Take up most of the screen width but leave some space on the sides */
        max-width: 400px; /* Optionally set a max-width to avoid overly wide boxes */
        margin: 0 auto; /* Ensure the items are centered */
    }
}

.nominate-button {
    border: 1px solid #e0e0e0;
    background-color: transparent;
    padding: 15px 30px;
    color: white;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
}

.nominate-button:hover {
    background-color: #FFF;
    color: #000;
}

.countdown {
    display: flex;
    justify-content: center; /* Align horizontally in the center */
    gap: 30px; /* Space between each time unit */
    text-align: center;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-number {
    font-size: 3rem; /* Larger font for numbers */
    font-weight: bold;
    color: #ffffff; /* White text */
}

.time-label {
    font-size: 1.2rem; /* Smaller font for labels */
    color: #ffffff; /* White text */
}

.video-container-agenda {
    position: relative;
    width: 100%; /* Ensure the video fits the entire viewport width */
    height: 200%; /* Full viewport height */
    top: 0;
    overflow: hidden; /* Prevent content overflow */
}

.video-bg-agenda {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width for video background */
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
    z-index: -1; /* Behind other elements */
}

.is-desktop .video-container {
    display: none;
}

/* Container for the judge photos */
.judge-photo-container {
    width: 100%;
    height: 70%; /* Adjusted photo height to 70% of the card */
    overflow: hidden;
    border-bottom: 2px solid #000; /* Optional border between photo and info */
    position: relative;
}

/* Rectangular judge photos */
.judge-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire area without distortion */
}

/* Media Partners Logos */
.media-partners-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Reduce to 2-3 columns for smaller screens */
    gap: 20px; /* Space between logos */
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    max-width: 100%; /* Ensures logos don't overflow */
}

.partner-logo {
    width: 100%;
    max-width: 150px; /* Set a maximum width for the logos */
    height: auto;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow */
    transition: transform 0.3s ease;
}

.partner-logo:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}


/* Container for the table packages */
.table-packages-container {
    margin: 40px 0;
    text-align: center;
}

.package-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.book-table-package-item {
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    cursor: pointer;
    width: 250px;
    transition: transform 0.3s ease;
}

.book-table-package-item:hover {
    transform: scale(1.05);
}

/* Modal styles for the book_table page */
.book-table-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.book-table-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 10% auto;
    text-align: center;
}

.book-table-close {
    float: right;
    font-size: 24px;
    cursor: pointer;
}

.payment-page-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.payment-section {
    margin-bottom: 30px;
}

.payment-form-group {
    margin-bottom: 20px;
}

.payment-form-group label {
    font-weight: bold;
    color: #000000;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.payment-form-group input,
.payment-form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.payment-form-group input:focus,
.payment-form-group select:focus {
    border-color: #000000;
    outline: none;
}

/* Payment method buttons */
.payment-method-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.payment-option-btn {
    padding: 15px 30px;
    border: 1px solid #000;
    background-color: transparent;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.payment-option-btn.active {
    background-color: #000;
    color: #fff;
}

.payment-option-btn:hover {
    background-color: #000;
    color: #fff;
}

.btn-primary {
    background-color: #000000;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.btn-primary:hover {
    background-color: #333333;
}

.error-message {
    color: red;
    font-size: 1rem;
    margin-top: 20px;
}

#successOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(56, 79, 56, 0.9); /* Slightly transparent green */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    z-index: 1000; /* Ensure it appears on top of everything */
    transition: opacity 0.5s ease; /* Smooth transition for fade-out */
}

#successOverlay .overlay-content {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add some background for the text */
    border-radius: 8px;
}

/* Target the specific image and its container */
.judge-photo-container img[alt="Jaime López de Villarreal"] {
    object-fit: contain; /* Ensures the image is contained within the frame */
    height: 100%; /* Makes sure the full height of the image is visible */
    width: 100%; /* Adjusts the width to match the container */
    background-color: black; /* Make the background of the image black */
}

/* Add black space above the card */
.judge-item a[href*="jaime-l%C3%B3pez-de-villarreal"] .judge-photo-container {
    background-color: black; /* Black background for the container */
    padding-top: 20px; /* Adds black space above the image */
}

/* Can Eken's photo zoom adjustments */
.judge-photo-container img[alt="Can Eken"] {
    object-fit: cover;
    transform: scale(1.5); /* Zoom in by 20% */
    height: 100%;
    width: 100%;
}


/* Andrew Clarke's photo adjustments */
.judge-photo-container img[alt="Andrew Clarke"] {
    object-fit: contain;
    height: 100%;
    width: 100%;
    background-color: black;
}

.judge-item a[href*="andrew-clarke"] .judge-photo-container {
    background-color: black;
    padding-top: 20px; /* Adds black space above Andrew Clarke's image */
}


.shortlist-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to one column for mobile */
    gap: 30px; /* Space between items */
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

/* Adjust to two columns on larger screens */
@media (min-width: 768px) {
    .shortlist-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablet and above */
    }
}

.shortlist-box {
    background-color: black;
    border-radius: 15px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column; /* Ensure content is stacked vertically */
    align-items: stretch; /* Stretch the width of children to match parent */
    justify-content: flex-start; /* Align all content to the top */
    min-height: 400px; /* Set a consistent minimum height for cards */
}

.shortlist-box:hover {
    transform: scale(1.05);
}

.shortlist-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    min-height: 3rem; /* Set consistent height for all titles */
    display: flex;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
}

.shortlist-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow the list to take up remaining space */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add consistent spacing between items */
    justify-content: flex-start; /* Align items at the top */
    height: 100%; /* Fill the remaining height of the card */
}


.shortlist-item {
    background-color: white;
    color: black;
    border-radius: 10px;
    padding: 10px 15px;
    text-align: center;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    width: 100%; /* Ensure all items have the same width */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.shortlist-item:hover {
    background-color: #f1f1f1;
}

/* Add space for empty areas at the bottom of shorter lists */
.shortlist-items::after {
    content: '';
    flex-grow: 1; /* Take up remaining space in the card */
    display: block;
}


/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .media-partners-logos {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px; /* Optional: Reduce gap for smaller screens */
    }

    .partner-logo {
        max-width:200px; /* Optional: Reduce logo size on mobile */
    }
}

/* Organization Grid */
.organization-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4-column layout like judges */
    gap: 20px;
    justify-content: center; /* Ensures items are centered when fewer than 4 */
}

/* Organization Card */
.organization-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.3s ease;
    height: 380px; /* Fixed height for uniformity */
    width: 240px;
    overflow: hidden;
}

/* Photo Container */
.organization-photo-container {
    width: 100%;
    height: 85%; /* Larger photo section */
    overflow: hidden;
    position: relative;
}

/* Image Styling */
.organization-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name Section (Larger Font) */
.organization-info {
    padding: 15px;
    font-size: 16px; /* Slightly bigger text */
    font-weight: bold;
    text-align: center;
    color: #333;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* Hover Effect */
.organization-item:hover {
    background-color: #e6e6e6;
}

/* Responsive Grid Adjustments */
@media (max-width: 1000px) {
    /* Fix for mobile centering issue */
    .organization-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 column layout on mobile */
        gap: 20px;
        justify-items: center; /* This will center the items horizontally */
        margin: 0 auto; /* Ensure grid is centered within its container */
        padding: 0; /* Remove any extra padding */
        width: 100%; /* Take full width of the container */
    }

    .organization-item {
        height: 500px; /* Fixed height for the card */
        width: 300px; /* Increased width for the card */
    }

}


/* Zoom into the upper part of Tuğçe Ergüden's image */
.organization-photo-container img[alt="Tuğçe Ergüden"] {
    background-color: black;
    padding-top: 50px; /* Adds black space above Andrew Clarke's image */
    object-fit: cover;
    object-position: top; /* Focus on the upper part of the image */
    transform: scale(1.3); /* Zoom into the upper section */
}