/* Style for test section on default page */

/* Scroll container styles */
    .test-scroll-container {
        width: 100%;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;  /* Hide scrollbar for IE/Edge */
        scrollbar-width: none;  /* Hide scrollbar for Firefox */
    }
    
    .test-scroll-container::-webkit-scrollbar {
        display: none;  /* Hide scrollbar for Chrome/Safari */
    }
    
    .test-scroll-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 10px 0;
    }
    
    .test-item {
        flex: 0 0 calc(25% - 12px); /* 4 items per row with gap */
        min-width: calc(25% - 12px);
    }
    
    /* Navigation buttons */
    .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border: none;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .scroll-left {
        left: -20px;
    }
    
    .scroll-right {
        right: -20px;
    }
    
    .scroll-btn:hover {
        background: #f8f9fa;
    }
    
    /* Responsive adjustments */
    @media (max-width: 992px) {
        .test-item {
            flex: 0 0 calc(33.33% - 12px); /* 3 items on medium screens */
            min-width: calc(33.33% - 12px);
        }
    }
    
    @media (max-width: 768px) {
        .test-item {
            flex: 0 0 calc(50% - 12px); /* 2 items on small screens */
            min-width: calc(50% - 12px);
        }
    }
    
    @media (max-width: 576px) {
        .test-item {
            flex: 0 0 calc(100% - 12px); /* 1 item on extra small screens */
            min-width: calc(100% - 12px);
        }
    }






/* Style for blog section */

    /* Blog Scroll container styles */
    .blog-scroll-container {
        width: 100%;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .blog-scroll-container::-webkit-scrollbar {
        display: none;
    }
    
    .blog-scroll-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 10px 0;
    }
    
    .blog-item {
        flex: 0 0 calc(25% - 12px);
        min-width: calc(25% - 12px);
    }
    
    /* Navigation buttons */
    .blog-scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border: none;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .blog-scroll-left {
        left: -20px;
    }
    
    .blog-scroll-right {
        right: -20px;
    }
    
    .blog-scroll-btn:hover {
        background: #f8f9fa;
    }
    
    /* Responsive adjustments */
    @media (max-width: 992px) {
        .blog-item {
            flex: 0 0 calc(33.33% - 12px);
            min-width: calc(33.33% - 12px);
        }
    }
    
    @media (max-width: 768px) {
        .blog-item {
            flex: 0 0 calc(50% - 12px);
            min-width: calc(50% - 12px);
        }
    }
    
    @media (max-width: 576px) {
        .blog-item {
            flex: 0 0 calc(100% - 12px);
            min-width: calc(100% - 12px);
        }
    }




/* Style for video section */

/* Common Scroll Container Styles */
    .scroll-container {
        width: 100%;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scroll-container::-webkit-scrollbar {
        display: none;
    }
    
    .scroll-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 10px 0;
    }
    
    .scroll-item {
        flex: 0 0 calc(25% - 12px);
        min-width: calc(25% - 12px);
    }
    
    /* Navigation Buttons */
    .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border: none;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .scroll-left {
        left: -20px;
    }
    
    .scroll-right {
        right: -20px;
    }
    
    .scroll-btn:hover {
        background: #f8f9fa;
    }
    
    /* Video Specific Styles */
    .course-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*background: rgba(0,0,0,0.3);*/
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .play_btn1 {
        color: white;
        font-size: 30px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 992px) {
        .scroll-item {
            flex: 0 0 calc(33.33% - 12px);
            min-width: calc(33.33% - 12px);
        }
    }
    
    @media (max-width: 768px) {
        .scroll-item {
            flex: 0 0 calc(50% - 12px);
            min-width: calc(50% - 12px);
        }
    }
    
    @media (max-width: 576px) {
        .scroll-item {
            flex: 0 0 calc(100% - 12px);
            min-width: calc(100% - 12px);
        }
    }