/* In your main.css */

/*
 * FONT IMPORTS
 *
 * Use @font-face to define custom fonts.
 * Ensure you have rules for each font weight you plan to use.
 */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima_Nova_Soft_W03_Regular.ttf') format('truetype'), url('../fonts/ProximaSansRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima_Nova_Soft_W03_Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*
 * GLOBAL STYLES
 */
body {
    margin: 0;
    font-family: 'Proxima Nova', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Proxima Nova', sans-serif;
}

/*
 * NAVBAR STYLING
 *
 * This section contains all the styles for the navigation bar,
 * including its initial state and the mega menus.
 */

 /*********JS SCROLL**********/
 .navbar.scrolled {
    background-color: #fdf8f6fe !important; /* Changes the background to white */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition */
  }
 /*********JS SCROLL**********/

.navbar {
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(51, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.navbar-brand img {
    height: 40px;
    margin-right: 10px;
}

.navbar-brand:hover {
    color: #800000 !important;
}

.navbar.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: #800000;
    }


/*
 * megan STYLING
 *
 * Consolidated styles for the full-width dropdown menus.
 */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scaleY(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    position: absolute;
    z-index: 1000;
    background-color: #f9f9f9;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 -5px 15px rgba(0, 0, 0, 0.2);
    width: 100%;
    left: 0;
    top: 100%;
    display: flex;
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scaleY(1);
    }
    /* Add a separator between columns for desktop */
    .dropdown-menu .col-md-3:not(:last-child),
    .dropdown-menu .col-md-9:not(:last-child),
    .dropdown-menu .col-md-4:not(:last-child) {
        border-right: 1px solid #d9d9d9;
    }
}


/* Dropdown items */
.dropdown-item {
    color: black;
    padding: 8px 1rem;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
}

    .dropdown-item:hover {
        background-color: #4e020e13;
        color: maroon;
        padding-left: 1.25rem;
        border-radius: 5px;
    }

/* Mega menu column headers */
.dropdown-menu h6 {
    font-weight: bold;
    color: maroon;
    margin-bottom: 10px;
    text-transform: uppercase;
    padding: 0 1rem;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 991.98px) {
    .dropdown-menu .col-md-3,
    .dropdown-menu .col-md-9 {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
    }

        .dropdown-menu .col-md-3:last-child,
        .dropdown-menu .col-md-9:last-child {
            border-bottom: none;
        }

    .dropdown-menu .card-body p {
        margin-top: 5px;
    }
}
/***********************SECTION - News Section Styles********/
/* News Section Container - General styling for the whole section */
.news-section-container {
    padding-top: 2rem; /* Decreased from 4rem as requested */
    padding-bottom: 2rem; /* Decreased from 4rem as requested */
    background-color: #f8f9fa;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.05);
    border-radius: 0;
}

/* Section Title (formerly .section-header) */
.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #800000;
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

    .section-title::after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background-color: #9A4D46;
        margin: 8px 0 0 0;
        transition: width 0.3s ease, background-color 0.3s ease;
    }

    .section-title:hover::after {
        width: 100%;
        background-color: #6E252C;
    }

/* Section Button (View all News) */
.section-button {
    background-color: #9A4D46;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

    .section-button:hover {
        background-color: #6E252C;
        transform: translateY(-2px);
        color: white;
    }

/* News Articles Row - Provides some top margin for the content area */
.news-articles-row {
    margin-top: 1.5rem;
}

/* Base style for all news cards */
.news-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

    .news-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    /* Style for clickable news card links */
    .news-card .news-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

        .news-card .news-link:hover {
            color: inherit;
        }

        .news-card .news-link h3 {
            font-size: 1.4rem;
            color: #333;
            margin-top: 0.5rem;
            margin-bottom: 0.75rem;
            line-height: 1.3;
            transition: color 0.3s ease;
        }

        .news-card .news-link:hover h3 {
            color: #800000;
        }

    .news-card .news-excerpt {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.6;
        flex-grow: 1;
        margin-bottom: 1rem;
    }

/* News Image */
.news-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Specific styling for the Main News Card (optional, if distinct styling is needed) */
.main-news {
    /* Maybe a slightly different background or border if you want it to stand out more */
}

    .main-news h3 {
        font-size: 1.6rem;
        font-weight: 600;
    }

/* Trending News Card */
.trending-news-card {
    /* Inherits .news-card styles */
}

.trending-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.trending-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 1rem;
}

    .trending-list li {
        padding: 0.75rem 0;
        border-bottom: 1px dashed #eee;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .trending-list li:last-child {
            border-bottom: none;
        }

    .trending-list .trending-link {
        color: #555;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.3s ease;
        display: block;
    }

        .trending-list .trending-link:hover {
            color: #800000;
            text-decoration: underline;
        }

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .section-title {
        font-size: 2rem;
    }

        .section-title::after {
            width: 60px;
        }

    .news-image {
        height: 180px;
    }

    .news-card h3 {
        font-size: 1.3rem;
    }

    .main-news h3 {
        font-size: 1.5rem;
    }

    .trending-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 767.98px) {
    .section-title {
        font-size: 1.8rem;
        text-align: center;
        display: block;
    }

        .section-title::after {
            margin: 8px auto 0 auto;
        }

    .text-md-end {
        text-align: center !important;
    }

    .section-button {
        display: block;
        width: fit-content;
        margin: 1rem auto 0 auto;
    }

    .news-image {
        height: 200px;
    }

    .news-card {
        padding: 1rem;
    }

        .news-card h3 {
            font-size: 1.2rem;
        }

    .main-news h3 {
        font-size: 1.4rem;
    }

    .news-excerpt {
        font-size: 0.9rem;
    }

    .trending-list .trending-link {
        font-size: 0.85rem;
    }

    .trending-title {
        font-size: 1.3rem;
    }
}

/* Original programs-section (from first prompt) - ensure this is still desired */
.programs-section {
    background-color: #f8f9fa;
    padding-top: 3rem;
    padding-bottom: 3rem;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    animation: fadeInUp 1s ease-out; /* This fadeInUp is now in hero.css also, should be unique */
}

/* Card divider styles for general program cards */
.card-divider {
    border: none;
    border-top: 2px solid rgba(0, 0, 0, 0.1); /* Adjusted alpha for subtle effect */
    width: 80px;
    margin: 0.5rem auto 1rem auto;
    transition: border-color 0.3s ease, width 0.3s ease;
}

.card:hover .card-divider {
    border-color: maroon;
    width: 100%;
}

/* --- NEW STYLES FOR MAIN CAMPUS & UPCOMING EVENTS SECTION --- */
.main-campus-events-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #fff; /* White background for this section */
}

.main-campus-content {
    background-color: #f8f9fa; /* Light background for campus content */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 2rem; /* Consistent padding */
}

    .main-campus-content img {
        height: 300px; /* Fixed height for the campus image */
        object-fit: cover;
        width: 100%;
    }

    .main-campus-content .section-title {
        /* Inherits from global .section-title but can be adjusted */
        margin-bottom: 1.5rem; /* Space below title */
    }

/* Upcoming Events Sidebar */
.upcoming-events-sidebar {
    background-color: #BF2600; /* This is your base red color */
    /* Add your background image here */
    background-image: url('../images/events/scroll1.png'); /* IMPORTANT: Update this path to your image */
    background-repeat: repeat; /* This will tile the image to cover the background */
    background-size: auto; /* Use 'auto' for repeating textures, or a specific size if desired */
    background-blend-mode: multiply; /* Blends the image with the background-color.
                                     Try 'overlay', 'soft-light', 'hard-light', 'darken', 'lighten'
                                     to see which gives the best effect with your specific image.
                                     'Multiply' is good for darkening light textures with the color. */

    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: white; /* White text for contrast */
    padding: 0;
    overflow: hidden;
}


    .upcoming-events-sidebar .sidebar-header {
        background-color: #BF2600; /* Consistent red */
        padding: 1.5rem 1rem;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle separator */
    }

        .upcoming-events-sidebar .sidebar-header h3 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0;
            color: white;
        }

    .upcoming-events-sidebar .event-list {
        padding: 1rem 0; /* Vertical padding for the list */
        margin-bottom: 0; /* Remove default ul margin */
    }

    .upcoming-events-sidebar .event-item {
        display: flex; /* Use flexbox for date and details */
        align-items: flex-start; /* Align items to the top */
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator between events */
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

        .upcoming-events-sidebar .event-item:last-child {
            border-bottom: none; /* No border on the last item */
        }

        .upcoming-events-sidebar .event-item:hover {
            background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight on hover */
        }

.event-date-box {
    background-color: rgba(255, 255, 255, 0.2); /* Lighter background for the date box */
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 65px; /* Fixed width to align dates */
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    margin-right: 1rem;
    flex-shrink: 0; /* Prevent it from shrinking */
}

    .event-date-box .month {
        font-size: 0.8em;
        display: block;
        text-transform: uppercase;
    }

    .event-date-box .day {
        font-size: 1.5em; /* Larger day number */
        display: block;
    }

    .event-date-box .year {
        font-size: 0.7em;
        display: block;
    }

.event-details {
    flex-grow: 1;
}

.event-title-sidebar {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.event-location-sidebar,
.event-time-sidebar {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

.event-register-link {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2); /* Lighter button background */
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .event-register-link:hover {
        background-color: white;
        color: #BF2600; /* Red text on hover */
    }

.upcoming-events-sidebar .sidebar-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle separator */
}

.view-all-events-btn {
    background-color: white;
    color: #BF2600; /* Red text */
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    width: 100%; /* Make button full width in sidebar */
}

    .view-all-events-btn:hover {
        background-color: #f0f0f0; /* Slight grey on hover */
        color: #8C1C00; /* Darker red */
    }

/* Responsive adjustments for Main Campus & Events Sidebar */
@media (max-width: 991.98px) { /* Medium devices (tablet) */
    .main-campus-content,
    .upcoming-events-sidebar {
        padding: 1.5rem; /* Reduce padding */
    }

    .upcoming-events-sidebar {
        margin-top: 1.5rem; /* Add some margin between main content and sidebar when stacked */
    }

        .upcoming-events-sidebar .sidebar-header h3 {
            font-size: 1.6rem;
        }

    .event-title-sidebar {
        font-size: 1rem;
    }

    .event-location-sidebar,
    .event-time-sidebar {
        font-size: 0.8rem;
    }

    .event-register-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phone) */
    .main-campus-content {
        padding: 1rem;
    }

        .main-campus-content img {
            height: 200px; /* Adjust image height for smaller screens */
        }

        .main-campus-content .section-title {
            font-size: 1.8rem;
            text-align: center;
            display: block;
        }

            .main-campus-content .section-title::after {
                margin: 8px auto 0 auto;
            }

        .main-campus-content .btn {
            display: block;
            width: fit-content;
            margin: 1rem auto 0 auto;
        }

    .upcoming-events-sidebar {
        margin-top: 2rem; /* More space when stacked */
        border-radius: 8px; /* Slightly smaller radius on small screens */
    }

        .upcoming-events-sidebar .sidebar-header h3 {
            font-size: 1.4rem;
        }

    .event-date-box {
        min-width: 60px;
    }

        .event-date-box .day {
            font-size: 1.3em;
        }

    .view-all-events-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

/* --- Impact Stories Section Styles --- */
.impact-stories-section {
    background-color: #f0f2f5; /* Light grey background for this section */
    padding-top: 5rem;
    padding-bottom: 5rem;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.03); /* Subtle inner shadow */
}

    .impact-stories-section .section-title {
        color: #333; /* Darker color for this section's title */
    }

        .impact-stories-section .section-title::after {
            background-color: #BF2600; /* Use your primary red for the underline */
            margin: 8px auto 0 auto; /* Center the underline */
        }

        .impact-stories-section .section-title:hover::after {
            background-color: #8C1C00; /* Darker red on hover */
        }

#impactStoriesCarousel {
    max-width: 900px; /* Limit the carousel width for better readability */
    margin: 0 auto; /* Center the carousel */
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 3rem; /* Padding inside the carousel container */
    overflow: hidden; /* Important for border-radius on nested elements */
    position: relative;
}

.impact-story-card {
    padding: 2rem 0; /* Vertical padding for the content within each slide */
    display: flex; /* Ensure flex behavior */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Vertically align image and text */
}

.impact-story-img {
    width: 200px; /* Fixed size for the image */
    height: 200px;
    object-fit: cover;
    border-radius: 8px; /* Slight rounding for the box */
    /* UPDATED: Increased shadow for more visibility */
    box-shadow: 0 10px 20px rgba(128, 0, 0, 0.4); /* Increased blur and opacity */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .impact-story-img:hover {
        transform: translateY(-5px); /* Slight lift on hover */
        /* UPDATED: Even more prominent shadow on hover */
        box-shadow: 0 15px 30px rgba(128, 0, 0, 0.6); /* Further increased blur and opacity on hover */
    }

.impact-story-quote {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 0;
    font-style: italic;
}

    .impact-story-quote p {
        margin-bottom: 1rem;
    }

    .impact-story-quote .blockquote-footer {
        font-size: 0.95rem;
        color: #666;
        margin-top: 1rem;
        font-style: normal;
    }

        .impact-story-quote .blockquote-footer cite {
            font-weight: 600;
            color: #800000; /* Maroon for the source */
        }

/* Carousel controls (arrows) */
#impactStoriesCarousel .carousel-control-prev,
#impactStoriesCarousel .carousel-control-next {
    width: 5%;
    color: #BF2600;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

    #impactStoriesCarousel .carousel-control-prev:hover,
    #impactStoriesCarousel .carousel-control-next:hover {
        opacity: 1;
    }

#impactStoriesCarousel .carousel-control-prev-icon,
#impactStoriesCarousel .carousel-control-next-icon {
    background-image: none;
    font-family: 'FontAwesome';
    font-size: 2.5rem;
    line-height: 1;
    color: #BF2600;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    #impactStoriesCarousel .carousel-control-prev-icon::before {
        content: "\f104";
    }

    #impactStoriesCarousel .carousel-control-next-icon::before {
        content: "\f105";
    }

/* Carousel indicators (dots) */
#impactStoriesCarousel .carousel-indicators {
    bottom: -40px;
}

    #impactStoriesCarousel .carousel-indicators button {
        background-color: #9A4D46;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        margin: 0 5px;
        opacity: 0.5;
        transition: opacity 0.3s ease, background-color 0.3s ease;
    }

        #impactStoriesCarousel .carousel-indicators button.active {
            background-color: #BF2600;
            opacity: 1;
        }

/* Responsive adjustments for Impact Stories Section */
@media (max-width: 991.98px) { /* Medium devices */
    #impactStoriesCarousel {
        padding: 2rem;
    }

    .impact-story-img {
        width: 180px;
        height: 180px;
    }

    .impact-story-quote {
        font-size: 1.15rem;
    }

    #impactStoriesCarousel .carousel-control-prev-icon,
    #impactStoriesCarousel .carousel-control-next-icon {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) { /* Small devices */
    .impact-stories-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    #impactStoriesCarousel {
        padding: 1.5rem;
        border-radius: 10px;
    }

    .impact-story-card .col-md-12 {
        text-align: center !important;
    }

    .impact-story-img {
        width: 150px;
        height: 150px;
        margin-bottom: 1.5rem;
    }

    .impact-story-quote {
        font-size: 1rem;
    }

        .impact-story-quote .blockquote-footer {
            font-size: 0.85rem;
        }

    #impactStoriesCarousel .carousel-control-prev,
    #impactStoriesCarousel .carousel-control-next {
        top: 30%;
    }

    #impactStoriesCarousel .carousel-control-prev-icon,
    #impactStoriesCarousel .carousel-control-next-icon {
        font-size: 1.8rem;
    }

    #impactStoriesCarousel .carousel-indicators {
        bottom: -30px;
    }
}

/* --- Partners Section Styles --- */
.partners-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #f8f9fa; /* Lighter background than previous sections for contrast */
}

    .partners-section .section-title {
        color: #333; /* Darker color for this section's title */
    }

        .partners-section .section-title::after {
            background-color: #9A4D46; /* Maroon-ish color for the underline */
            margin: 8px auto 0 auto; /* Center the underline */
        }

        .partners-section .section-title:hover::after {
            background-color: #6E252C; /* Darker maroon on hover */
        }

/* New Styles for Continuous Logo Scroll */
.partners-scroll-container {
    width: 100%;
    overflow: hidden; /* Hide the overflowing parts of the track */
    white-space: nowrap; /* Keep all items on one line */
    padding: 20px 0; /* Add some vertical padding for logos */
}

.partners-scroll-track {
    display: inline-flex; /* Use inline-flex to allow flex behavior but keep it inline for white-space: nowrap */
    animation: scrollLogos 30s linear infinite; /* Adjust duration based on number of logos */
}

    .partners-scroll-track:hover {
        animation-play-state: paused; /* Pause animation on hover */
    }

.partner-logo {
    height: 80px; /* Fixed height for consistency */
    max-width: 150px; /* Max width, adjust based on your logos' natural sizes */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible, scales down if needed */
    margin: 0 40px; /* Space between logos */
    flex-shrink: 0; /* Prevent logos from shrinking */
    /* Removed: filter: grayscale(80%); */
    opacity: 0.7; /* KEPT: Subtle opacity */
    transition: opacity 0.3s ease; /* Transition only opacity now */
}

    .partner-logo:hover {
        /* Removed: filter: grayscale(0%); */
        opacity: 1; /* KEPT: Full opacity on hover */
    }

/* Keyframe animation for continuous scrolling */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%); /* Scroll exactly half the track length (one full set of logos) */
    }
}

/* Responsive adjustments for Partners Section */
@media (max-width: 991.98px) {
    .partners-scroll-container {
        padding: 15px 0;
    }

    .partner-logo {
        height: 70px;
        max-width: 120px;
        margin: 0 30px;
    }
    /* Adjust animation duration if logos are smaller or fewer per view */
    .partners-scroll-track {
        animation-duration: 25s;
    }
}

@media (max-width: 767.98px) {
    .partners-scroll-container {
        padding: 10px 0;
    }

    .partner-logo {
        height: 60px;
        max-width: 100px;
        margin: 0 20px;
    }
    /* Adjust animation duration */
    .partners-scroll-track {
        animation-duration: 20s;
    }
}

@media (max-width: 575.98px) {
    .partner-logo {
        height: 50px;
        max-width: 80px;
        margin: 0 15px;
    }

    .partners-scroll-track {
        animation-duration: 18s;
    }
}

/* --- FOOTER SECTION STYLES --- */
.footer-section {
    background-color: #000; /* Black background as per image */
    color: #f8f9fa; /* Light grey text for contrast */
    padding-top: 5rem;
    padding-bottom: 3rem; /* Less padding at the very bottom before social icons */
}

    .footer-section .footer-logo {
        display: flex; /* Align logo and text */
        align-items: center;
        margin-bottom: 1.5rem;
    }

        .footer-section .footer-logo img {
            height: 70px; /* Adjust logo size */
            width: 70px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 15px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Subtle white shadow for logo */
        }

        .footer-section .footer-logo h3 {
            font-size: 1.5rem;
            color: #fff; /* White text for university name */
            font-weight: 700;
            margin-bottom: 0;
        }

    .footer-section .footer-contact-info li {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        color: #ccc; /* Slightly lighter grey for contact info */
    }

        .footer-section .footer-contact-info li i {
            margin-right: 10px;
            color: #BF2600; /* Red icon color */
            font-size: 1.1rem;
        }

    .footer-section .footer-map-container {
        border-radius: 8px;
        overflow: hidden; /* Ensures iframe respects border-radius */
        margin-top: 1.5rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

        .footer-section .footer-map-container iframe {
            border-radius: 8px; /* Apply to iframe itself for consistency */
        }


    .footer-section .footer-heading {
        color: #fff; /* White headings */
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        position: relative;
        padding-bottom: 0.5rem; /* Space for underline */
    }

        .footer-section .footer-heading::after {
            content: '';
            display: block;
            width: 50px; /* Underline for headings */
            height: 3px;
            background-color: #BF2600; /* Red underline */
            margin-top: 8px;
        }

    .footer-section .footer-links li {
        margin-bottom: 0.7rem;
    }

    .footer-section .footer-links a {
        color: #ccc; /* Light grey links */
        text-decoration: none;
        font-size: 0.95rem;
        transition: color 0.3s ease;
    }

        .footer-section .footer-links a:hover {
            color: #BF2600; /* Red on hover */
            text-decoration: underline;
        }

    .footer-section .footer-news-item {
        display: flex;
        align-items: flex-start; /* Align image and text at the top */
        margin-bottom: 1.5rem;
    }

        .footer-section .footer-news-item img {
            width: 70px; /* Size for news thumbnails */
            height: 70px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 15px;
            flex-shrink: 0; /* Prevent image from shrinking */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .footer-section .footer-news-item a {
            color: #f8f9fa; /* White link for news titles */
            text-decoration: none;
            font-size: 0.95rem;
            line-height: 1.4;
            font-weight: 500;
            transition: color 0.3s ease;
        }

            .footer-section .footer-news-item a:hover {
                color: #BF2600; /* Red on hover */
            }

        .footer-section .footer-news-item small {
            display: block;
            color: #aaa; /* Lighter date text */
            font-size: 0.8rem;
            margin-top: 5px;
        }

/* Footer Contact Form */
.footer-contact-form .form-control,
.footer-contact-form .form-select {
    background-color: #333; /* Darker input background */
    border: 1px solid #555; /* Darker border */
    color: #fff; /* White text input */
    border-radius: 5px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

    .footer-contact-form .form-control::placeholder,
    .footer-contact-form .form-select option {
        color: #bbb; /* Lighter placeholder text */
    }

    .footer-contact-form .form-control:focus,
    .footer-contact-form .form-select:focus {
        background-color: #444; /* Slightly lighter on focus */
        border-color: #BF2600; /* Red border on focus */
        box-shadow: 0 0 0 0.25rem rgba(191, 38, 0, 0.25); /* Red focus shadow */
        color: #fff;
    }

.footer-contact-form textarea.form-control {
    min-height: 100px; /* Give textarea more height */
    resize: vertical; /* Allow vertical resizing */
}

.footer-send-btn {
    background-color: #F0F0F0; /* Yellow background for send button */
    color: #333; /* Dark text for contrast */
    padding: 0.75rem 2rem;
    border-radius: 5px;
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .footer-send-btn:hover {
        background-color: #BF2600; /* Darker yellow on hover */
        transform: translateY(-2px);
        color: #F8F8F8; /* Keep text dark on hover */
    }

/* Social Media Icons */
.footer-social-row {
    border-color: #333 !important; /* Darker border at the top of social row */
    padding-top: 2rem !important; /* Adjust padding for the border-top */
}

.footer-social-icon {
    color: #f8f9fa; /* White icons */
    font-size: 1.8rem; /* Larger icons */
    margin: 0 15px;
    transition: color 0.3s ease, transform 0.2s ease;
}

    .footer-social-icon:hover {
        color: #BF2600; /* Red on hover */
        transform: translateY(-3px); /* Slight lift */
    }

/* Responsive Adjustments for Footer */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .footer-section {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

        .footer-section .col-lg-3,
        .footer-section .col-lg-2 {
            margin-bottom: 2.5rem !important; /* More space between stacked columns */
        }

        .footer-section .footer-heading {
            margin-bottom: 1rem;
        }

        .footer-section .footer-logo h3 {
            font-size: 1.3rem;
        }

        .footer-section .footer-news-item img {
            width: 60px;
            height: 60px;
        }

        .footer-section .footer-news-item a {
            font-size: 0.9rem;
        }

        .footer-section .footer-news-item small {
            font-size: 0.75rem;
        }

        .footer-section .footer-contact-info li {
            font-size: 0.9rem;
        }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .footer-section {
        text-align: center; /* Center align all text on small screens */
        padding-top: 2.5rem;
        padding-bottom: 1.5rem;
    }

        .footer-section .footer-logo {
            justify-content: center; /* Center logo and text */
        }

        .footer-section .footer-heading::after {
            margin: 8px auto 0 auto; /* Center heading underline */
        }

        .footer-section .col-md-6 {
            margin-bottom: 2rem !important; /* Consistent spacing */
        }

        .footer-section .footer-news-item {
            justify-content: center; /* Center news items */
            text-align: left; /* Align text within news item to left */
        }

    .footer-contact-form .form-control,
    .footer-contact-form .form-select,
    .footer-send-btn {
        width: 100%; /* Full width form elements */
        max-width: 300px; /* Optional: limit max width for readability */
        margin-left: auto;
        margin-right: auto;
    }

    .footer-social-row {
        padding-top: 1.5rem !important;
    }

    .footer-social-icon {
        font-size: 1.5rem;
        margin: 0 10px;
    }
}

/* Styles for Continuous Vertical Scroll (similar to Partners Section) */
.partners-vertical-scroll-container {
    height: 1000px; /* Set a fixed height for the visible area. Adjust as needed. */
    overflow: hidden; /* Hide anything that goes outside this container */
    position: relative; /* Needed for absolute positioning or track movement */
    border-radius: 0.3rem; /* Optional: to match previous card styling */
    box-shadow: 0 0.8rem 0.8rem rgb(155, 141, 141, 0.92); /* Optional: subtle shadow */
}

.partners-vertical-scroll-track {
    display: flex; /* Arrange images vertically */
    flex-direction: column; /* Stack images vertically */
    will-change: transform; /* Optimize for animation */
    /* Animation will be applied here */
    animation: verticalScroll 150s linear infinite; /* Adjust duration (e.g., 20s) for speed */
}

.partner-vertical-logo {
    width: 100%; /* Make image span the full width of the column */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    padding: 5px 0; /* Optional: Add some vertical spacing between images if desired */
    /* object-fit: cover; /* Uncomment if you want images to crop and fill */
}


/* Keyframe Animation for Vertical Scrolling */
@keyframes verticalScroll {
    0% {
        transform: translateY(0); /* Start at the top */
    }

    100% {
        /* Move up by 50% of its own height to loop, assuming duplicated content */
        transform: translateY(-50%); /* Scrolls up by half the track height for seamless loop */
    }
}

/* Journey Timeline Styles */
.journey-timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 30px; /* Space between each timeline event */
}

    /* The Vertical Line */
    .journey-timeline-item::before {
        content: '';
        position: absolute;
        /* IMPORTANT: Line now starts 8px down from the top of the container.
       This value is half of the dot's height (16px / 2 = 8px).
       This allows the dot to sit "on top" with its bottom edge meeting the line's top.
       Adjust this '8px' if your dot size changes. */
        top: 8px; /* This makes the line start below the dot's center */
        left: 10px;
        width: 2px;
        /* Adjust height as line no longer starts from top:0 */
        height: calc(100% - 8px); /* Full height minus the new top offset */
        background-color: #BF2600; /* Color of the line */
        z-index: 0; /* Puts the line behind the text content */
    }

    /* Styling for the <h5> within the timeline item */
    .journey-timeline-item h5 {
        position: relative;
        margin-top: 0; /* IMPORTANT: Remove any default top margin */
        padding-top: 0; /* IMPORTANT: Remove any default top padding */
        margin-bottom: 5px; /* Space between heading and paragraph */
        padding-left: 15px; /* Space for the dot */
        z-index: 1;
        background-color: #ffffff; /* Match your section's background color */
        display: inline-block; /* Makes background only cover the text */
        padding-right: 5px; /* Small padding on the right for cleaner cut */
        line-height: 1.2; /* Can help with vertical alignment consistency */
    }

        /* The Dot on the Line - positioned to sit on top */
        .journey-timeline-item h5::before {
            content: '';
            position: absolute;
            /* Position the dot's vertical center at the same 'top' as the line's start.
       Since the dot is 16px high, its center is 8px from its top edge.
       If the line starts at 'top: 8px', the dot's center should also be at 'top: 8px'.
       So, dot's top needs to be 'top: 8px - (dot_height / 2)' = '8px - 8px' = 0px.
       Then, translateY(-50%) shifts it up by half its height, so its bottom edge is at 'top: 0'.
       Actually, to have the *bottom* of the dot align with 'top: 8px' of the container:
       dot_top_pos = (line_start_top) - (dot_height);
       dot_top_pos = 8px - 16px = -8px;
    */
            top: -8px; /* This positions the dot so its bottom edge aligns roughly where the line begins visually */
            left: -27px; /* Horizontal position on the line */
            width: 16px; /* Size of the dot */
            height: 16px; /* Size of the dot */
            background-color: #BF2600; /* Color of the dot */
            border-radius: 50%; /* Makes it a perfect circle */
            border: 3px solid #f9f9f9; /* Creates a small border. Match your section's background. */
            z-index: 2; /* Ensures the dot is on top */
        }

    /* Optional: Shorten the line for the last timeline item */
    .journey-timeline-item:last-child::before {
        /* Adjust this to ensure the last line stops correctly below the dot */
        height: calc(50% - 8px); /* For example, half height minus the dot's offset */
    }
/* GOVERNANCE SECTION STYLING */

/* New class for specific section headings */
.main-title {
    text-transform: uppercase; /* Capitalize the text */
    color: #ffffff; /* Text color white */
    background-color: #800000; /* Background color maroon */
    padding: 1.25rem 1.5rem; /* Padding top/bottom and left/right */
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4); /* Add a box shadow */
    /* REMOVED original margin-bottom: 2.5rem; to combine with auto margins */
    /* --- NEW/MODIFIED PROPERTIES FOR CONTENT-WIDTH & CENTERING --- */
    display: inline-block; /* Makes the element's width fit its content */
    margin: 0 auto 2.5rem auto; /* Centers the inline-block horizontally (0 auto) and adds bottom margin */
    text-align: center; /* Centers the text *within* the now content-width box */
    /* --- END NEW/MODIFIED PROPERTIES --- */

    border-radius: 0.3rem; /* Slightly rounded corners, optional but often looks good with shadows */
}


/* Center items within the card and apply initial shadow */
.card {
    text-align: center;
    box-shadow: 5px 5px 10px rgb(55, 3, 3, 0.39) !important;
    transition: all 0.3s ease;
    border-radius:0;
}

    /* Hover effect for the entire card */
    .card:hover {
        transform: translateY(-3px);
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3) !important;
    }

/* Styling for the governance member images */
.governance-member-image {
    height: 300px;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

/* Card body specific styling and hover effect */
.card-body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card:hover .card-body {
    background-color: #800000; /* Maroon background on hover */
    color: #ffffff; /* White text on hover */
}

/* Ensure title and text within card-body are centered */
.card-body .card-title,
.card-body .card-text {
    text-align: center;
}

/* You might want to add some padding to the vc-message-section if it feels too cramped */
.vc-message-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* PROGRAMS SECTION STYLING (Updated for Full Width Collage - 4 pictures) */

.image-collage-fullwidth {
    position: relative; /* Container for absolute positioning of images */
    display: block; /* Ensures it takes full width of its parent */
    width: 100%; /* Occupy the full width of the column */
    aspect-ratio: 4 / 3; /* Adjust this ratio (e.g., 1 / 1 for square, 16 / 9 for wider) */
    border-radius: 8px;
    overflow: hidden; /* Clip any parts of the images that go outside the container */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Added a subtle shadow to the whole collage container */
}

.collage-img {
    position: absolute; /* Allow overlapping */
    object-fit: cover; /* Ensure images fill their area without distortion */
    border-radius: 8px; /* Rounded corners for individual images */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle individual image shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, z-index 0.3s ease;
    opacity: 0.85; /* Slightly transparent initially for a layered look */
}

/* Positioning for each of the 4 images - TUNE THESE VALUES */
.image-collage-fullwidth .collage-img:nth-child(1) {
    top: 5%;
    left: 5%;
    width: 60%;
    height: 60%;
    z-index: 4; /* Highest z-index, appears most on top */
    transform: rotate(-3deg);
}

.image-collage-fullwidth .collage-img:nth-child(2) {
    top: 0;
    right: 0;
    width: 55%;
    height: 55%;
    z-index: 3;
    transform: translateX(15%) rotate(5deg); /* Overlap to the right, slight rotation */
}

.image-collage-fullwidth .collage-img:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 58%;
    height: 58%;
    z-index: 2;
    transform: translateY(15%) rotate(-7deg); /* Overlap to the bottom, slight rotation */
}

.image-collage-fullwidth .collage-img:nth-child(4) {
    bottom: 5%;
    right: 5%;
    width: 52%;
    height: 52%;
    z-index: 1; /* Lowest z-index, appears most in the back */
    transform: translate(10%, 10%) rotate(8deg); /* Overlap to bottom-right, more rotation */
}

/* Hover effect for all collage images */
.collage-img:hover {
    transform: translateY(-8px) scale(1.08) !important; /* Lifts and slightly enlarges */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; /* Stronger shadow on hover */
    opacity: 1 !important; /* Fully opaque on hover */
    z-index: 15 !important; /* Ensure the hovered image is always on top */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .image-collage-fullwidth {
        aspect-ratio: 1 / 1; /* Make the overall collage more square on small devices */
    }

    .collage-img {
        width: 70% !important; /* Make images larger to fill more space */
        height: 70% !important;
        top: auto !important; /* Reset position overrides */
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important; /* Remove individual transforms */
        opacity: 0.9 !important;
        /* Position them centrally for mobile for simpler display */
        position: relative !important; /* Change back to relative for flow */
        margin: 0 auto !important; /* Center horizontally if they wrap */
    }
    /* Mobile specific stacking/overlap if desired, otherwise they will just stack */
    .image-collage-fullwidth .collage-img:nth-child(1) {
        z-index: 4;
    }

    .image-collage-fullwidth .collage-img:nth-child(2) {
        z-index: 3;
        margin-top: -30px !important;
    }
    /* Example overlap */
    .image-collage-fullwidth .collage-img:nth-child(3) {
        z-index: 2;
        margin-top: -30px !important;
    }

    .image-collage-fullwidth .collage-img:nth-child(4) {
        z-index: 1;
        margin-top: -30px !important;
    }
}
/* FACULTIES SECTION STYLING (Refined) */

.col-lg-10 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

.faculty-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7; /* Maintains a responsive aspect ratio */
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .faculty-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

.faculty-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}


.faculty-item:hover .faculty-image {
    filter: brightness(0.95);
}

.faculty-text {
    position: absolute;
    /* CHANGE THIS SECTION: */
    top: 1.5rem; /* Space from the top edge */
    bottom: 1.5rem; /* Space from the bottom edge */

    right: 1rem;
    width: 55%;
    background-color: white;
    color: #595959;
    padding: 1.5rem; /* You can reduce this if needed */
    border-radius: 8px;
    z-index: 5;
    margin-right: -20px;
    transition: margin-right 0.9s ease;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    /* No longer need `transform` or `top: 50%;` */
}

.faculty-item:hover .faculty-text {
    margin-right: 40%; /* Dramatic slide distance */
    background-color: rgb(255, 255, 255, 0.89); /* Slightly transparent background */
    color:#000000;
}

.faculty-title {
    color: #800000;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align:center;
}

.faculty-description {
    color: #555;
    font-size: 1rem;
    margin-bottom: 0;
}
.faculty-programs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 40%;
    background-color: rgba(0, 0, 0, 0.05); /* Very light background */
    border-radius: 8px 0 0 8px;
    padding: 1rem;
    z-index: 2; /* Place it behind the main text */
    text-align: center;
}

    .faculty-programs h5 {
        color: #555;
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 0.7rem;
    }


/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .faculty-item {
        flex-direction: column;
        aspect-ratio: 1 / 1.1;
    }

    .faculty-image {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 8px 8px 0 0;
    }

    .faculty-text {
        position: static;
        width: auto;
        transform: none;
        margin: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: none;
        overflow-y: auto;
    }
    .faculty-programs {
        position: static;
        width: 100%;
        transform: none;
        border-radius: 0 0 8px 8px;
        padding: 0.5rem;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.05);
    }
}

.no-margin-top{
    margin-top:1px;
}
.no-margin-bottom {
    margin-bottom: 1px;
}
.no-margin-right {
    margin-right: 1px;
}
.no-margin-left {
    margin-left: 1px;
}

.coverflow-section {
    padding: 4rem 0;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.coverflow-container {
    position: relative;
    width: 80%;
    max-width: 1000px;
    height: 400px; /* Adjust height as needed */
    perspective: 1000px;
    transform-style: preserve-3d;
}

.coverflow-item {
    position: absolute;
    top: 0;
    left: 50%;
    width: 400px; /* Width of each slide */
    height: 100%;
    cursor: pointer;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out, z-index 0.6s;
    transform-origin: center;
    opacity: 0; /* All items hidden initially */
}

    .coverflow-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgb(0, 0, 0, 0.60);
    }

.coverflow-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: #fff;
    background-image: linear-gradient(to top, rgb(12, 11, 11, 0.92) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    text-align:center;
}

    .coverflow-caption h3 {
        margin-bottom: 0.25rem;
        font-size: 1.5rem;
    }

    .coverflow-caption p {
        margin-bottom: 0;
        font-size: 1rem;
    }

.coverflow-item.active .coverflow-caption {
    opacity: 1;
}

.story-image-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.story-image-container img {
    height: 350px; /* Adjust this value as needed */
    width: 100%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.large-quote {
    font-size: 4em;
    line-height: 1;
    color: #8c2323;
    /* Use relative positioning for fine-tuned control */
    position: relative;
    top: 5px; /* Adjust this value to raise or lower the quote */
}
    
.open-quote {
    margin-right: 0.1em;
    }
.close-quote {
    margin-left: 0.1em;
    /* Adjust vertical alignment to lower the closing quote */
    vertical-align: -0.5em; /* Try adjusting this value */
    }

    /*************ADMISSION STYLE********/
    .adm{
       border-radius: 10px; 
    }
    .adm .card-title{
        border-bottom: 1px solid rgba(240, 127, 127, 0.26); 
        padding-bottom: 10px;
        margin-bottom: 10px;
     }

     /* Projects Section */
.projects-section .card-img-top {
    height: 250px;
    object-fit: cover;
}

.projects-section .card-title {
    color: #007bff;
    font-size: 1.25rem;
}

.projects-section .card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.projects-section .card:hover {
    transform: translateY(-10px);
}
/* Introduction Section Overlap */
.introduction-section {
    background-color: #f8f2f2;
    border-radius: 10px;
    margin-top: -50px;
    position: relative;
    z-index: 100;
    margin-left: 20px;
    margin-right: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}