/* CSS for this specific page */



    /* Make nav links black only on this page */
    body {
        background-color: #f8f8f4;
    }

    .custom-navbar {
        background-color: transparent !important;
        min-height: 70px;
        /* example height */
        padding-top: 1.5rem;
    }



    /* Shrink navbar on scroll */
    .custom-navbar.shrink-nav {
        padding-top: 0;
        padding-bottom: 0;
    }

    nav .nav-link:hover {
        color: #d1f5e8 !important;
    }

    .video-page-header {
        margin-top: 111px;
    }





    .video-section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .video-thumb {
        cursor: pointer;
        text-align: center;
        /* centers the content inside */
        position: relative;
        border-radius: 12px;
        transition: transform 0.3s ease;
        height: auto;
    }



    .custom-carousel-icon {
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 1);
        border-radius: 50%;
        background-size: 50% 50%;
    }


    #videoCarousel {
        position: relative;
    }

    .carousel-control-prev,
    .carousel-control-next {
        top: 35%;
        transform: translateY(-50%);
        position: absolute;
        z-index: 10;
    }

    .carousel-item {
        height: 500px;
    }

    .carousel-item .video-thumb{

        height:360px;

    }


/* For centering thumbnails - when using proper sized images */
/*        .carousel-item .video-thumb {
            height: 350px;
            fixed container height display: flex;
            add this align-items: center;
            vertical center child justify-content: center;
            horizontal center child overflow: hidden;
            crop overflow if needed
        }

            .carousel-item .video-thumb img {
                height: 100%;
                make image respect container height width: 100%;
                keep full width object-fit: contain;
                scale properly without cropping object-position: center;
            }
*/


    @media (max-width:767px) {
        .carousel-item {
            height: 1100px!important;
        }


    }

    .video-thumb:hover {
        transform: scale(1.02);
    }

    .play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-thumb:hover .play-overlay {
        opacity: 1;
    }

    .play-overlay i {
        font-size: 3rem;
        color: #fff;
    }

    .thumbnail-description {
        font-size: 1.1rem;
        /* bigger text */
        padding-top: 2rem;
        /* more space above text */
        text-align: center;
        /* center the text */
        color: #333;
        /* default text color */
        transition: color 0.3s ease, text-decoration 0.3s ease;
        /* smooth hover effect */
        cursor: pointer;
        /* changes cursor to pointer on hover */
    }

    .thumbnail-description:hover {
        color: darkslateblue;
        /* changes text color on hover */
    }