body {
    background-color: #EBF9FD; /* Change this to any color you want */
}


/* Event Single Page Styles */
.event-single-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 30px;
    font-family: 'Inter Tight', sans-serif;
}

.event-header {
    flex: 1 1 65%;
    order: 1;
}

.event-sidebar {
    flex: 1 1 30%;
    order: 2;
}

/* Event Type Label */
.event-type {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Seminar specific styling */
.event-type:contains("Seminar") {
    color: #207a7a;
}

/* Webinar specific styling */
.event-type:contains("Webinar") {
    color: #4a6fb5;
}

/* Event Title */
.event-title {
    font-size: 32px;
    font-weight: 500; /* Extra Bold */
    font-family: 'Inter Tight', sans-serif;
    margin-bottom: 40px;
    line-height: 1.2;
    color: #333;
    padding-bottom: 15px;
    /* Removed the orange/red border */
}

/* Presenter Section */
.event-presenter {
    margin-bottom: 30px;
}

.event-presenter h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Inter Tight', sans-serif;
}

.presenter-content {
    font-family: 'Source Serif Pro', serif;
    line-height: 1.6;
}

.presenter-content p {
    margin-bottom: 15px;
}

/* Abstract Section */
.event-abstract {
    margin-top: 30px;
}

.event-abstract h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: 'Inter Tight', sans-serif;
}

.abstract-content {
    font-family: 'Source Serif Pro', serif;
    line-height: 1.6;
}

.abstract-content p {
    margin-bottom: 15px;
}

/* Sidebar Info Box */
.event-info-box {
    background-color: #99e1f5;
    padding: 25px;
    
}

.event-info-box h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-date, .event-location {
    margin-bottom: 20px;
    margin-top: 8px; /* Space between text and data */
    
}

/* Reduce space below "Place" text */
.event-info-box h3 + .event-location {
    margin-top: 2px !important; /* Reduces space between 'Place' and the actual location */
}

/* Reduce space below all event details headings */
.event-info-box h3 {
    margin-bottom: 2px !important; /* Adjust space between headings and their values */
}



/* Calendar Button */
.event-actions {
    margin-top: 25px;
}

./* GOOGLE CALENDAR BUTTON - FIX ALIGNMENT */
.google-calendar-btn {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    justify-content: center; /* Centers text and icon */
    gap: 8px; /* Space between icon and text */
    padding: 12px 15px;
    background-color: white;
    border: 1px solid #207a7a;
    color: #207a7a;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px; /* Ensure consistent text size */
    transition: all 0.3s ease;
}

/* ICON INSIDE THE BUTTON */
.google-calendar-btn::before {
    
    font-size: 18px; /* Adjust icon size */
    display: inline-block;
}

.google-calendar-btn:hover {
    
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .event-single-container {
        flex-direction: column;
    }
    
    .event-header, .event-sidebar {
        flex: 1 1 100%;
    }
    
    .event-sidebar {
        order: 1;
    }
    
    .event-header {
        order: 2;
    }
}

/* EVENT PHOTO CONTAINER (Below Sidebar) */
.event-photo-container {
    width: 100%; /* Matches the sidebar width */
    display: flex;
    justify-content: center; /* Centers the image */
    align-items: center;
    margin-top: 20px; /* Adds space between sidebar and photo */
}

/* EVENT PHOTO (Ensure full image is visible) */
.event-photo {
    width: 100%; /* Adjust width to fit container */
    max-width: 100%; /* Prevents sidebar shrinking */
    height: auto; /* Keeps aspect ratio */
    object-fit: contain; /* Ensures full image is displayed */
    border-radius: 5px; /* Optional rounded corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Adds subtle shadow */
}


/* HIDE LEFT CONTENT (Title, Abstract, Speaker) ONLY FOR SEMINAR & WEBINAR ON MOBILE */
@media (max-width: 768px) {
    /* Hide left section for Seminar & Webinar */
    .event-single-container.seminar .event-header,
    .event-single-container.webinar .event-header {
        display: none !important;
    }

    /* Show left section for APS & PhD Defense */
    .event-single-container.aps .event-header,
    .event-single-container.phd-defense .event-header {
        display: block !important;
    }

    .event-single-container {
        justify-content: center; /* Centers the right sidebar */
    }

    .event-sidebar {
        width: 100%; /* Make sidebar full-width */
        max-width: 400px; /* Optimal size */
    }

    .event-photo-container {
        width: 100%; /* Full width for better alignment */
        max-width: 400px; /* Matches sidebar */
    }
}
@media (max-width: 768px) {
    /* Ensure Enough Space for the Left Section */
    .event-header {
        padding-bottom: 100px !important; /* Add more space to prevent cutoff */
    }

    .event-single-container {
        padding-bottom: 150px !important; /* Extra bottom space */
    }

    /* Push Footer Down */
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .event-single-container {
        flex-grow: 1; /* Ensures content expands properly */
    }

    footer {
        position: relative;
        width: 100%;
    }
}

/* Ensure Abstract is Properly Spaced Below the Title */
.event-abstract {
    margin-top: 10px !important; /* Adds space between title and abstract */
    padding-top: 15px !important; /* Ensures proper spacing */
}

/* Ensure Abstract Content Has Enough Padding */
.abstract-content {
    
    line-height: 1.6; /* Improves readability */
}

/* Mobile-Specific Spacing Fix */
@media (max-width: 768px) {
    .event-abstract {
        margin-top: 250px !important; /* Extra spacing for mobile */
    }

    .abstract-content {
        padding-top: 10px !important;
        padding-bottom: 25px !important;
    }
}

