#test-series {
     font-size: 32px;

 }

@media (max-width: 576px) {
  .testSeries-container {
    display: flex;
    flex-direction: row;

    min-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .testSeries-container > * {
    flex: 0 0 auto;
  }

  .testSeries-container::-webkit-scrollbar {
    height: 6px;
  }

  .testSeries-container::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
  }

  .text-box {
    max-height: 92% !important;
  }
}



 .testSeries-container {
     display: flex;
     align-items: center;
     gap: 15px;
     cursor: pointer;
     border: 1px solid rgba(0, 0, 0, 0.26);
 }

 .testSeries-container .img-box {
     flex: 0 0 30%;
 }

 .testSeries-container:hover .text-box {
     color: red;
 }

 .testSeries-container:hover {
     border: 1px solid rgba(0, 0, 255, 0.184);
 }

 #testType-fill .active {
     background-color: #dc3545 !important;
 }

 #testType-fill .active .text-box {
     color: white !important;
 }

 .testLayout {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }

 .testMeta:not(:first-of-type) {
     margin-left: 6px;
 }

 span.testMeta {
     background-color: #000bff17;
     color: #000bff;
     padding: 5px 10px;
     border-radius: 100px;
     font-size: 9pt;
     font-weight: 700;
 }

 .testSeries-layout {
     background-image: linear-gradient(180deg, #f4dfff, #ffffff) !important;
     padding: 30px;
     border-radius: 10px;
     border: 1px solid rgb(217, 217, 217);
 }

 .testSeries-layout .img-box img {
     width: 60px;
     height: 60px;
     background-color: white;
     padding: 5px;
     border-radius: 50%;
     object-fit: contain;
 }

 .testSeries-layout .language p {
     font-size: 9pt;
     margin: 0px;
     width: 100%;
     color: rgb(18, 18, 18);
     font-weight: 600;
     border-top: 1px solid rgb(232, 232, 232);
     border-bottom: 1px solid rgb(232, 232, 232);
     padding: 5px 0px;
 }

 .testSeries-btn {
     text-decoration: none;
     cursor: pointer;
     width: 100%;
     border: 0px;
     background-color: #dc3545;
     color: white;
     padding: 8px;
     border-radius: 5px;
     font-weight: 600;
 }

 @media(min-width:640px) and (max-width:1024px) {
     .testSeries-btn {
         text-decoration: none;
         cursor: pointer;
         width: 100%;
         border: 0px;
         background-color: #dc3545;
         color: white;
         padding: 6px;
         margin-right: 10px;
         border-radius: 5px;
         font-weight: 600;
         white-space: nowrap;
     }
 }

 .testSeries-btn :hover {
     background-color: #dc3545 !important;
 }

 #fill-testSeries {
     background-color: white;
     padding: 15px;
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.21);
 }

 #testSeries-fill {
     height: 500px;
     overflow-y: auto;
 }

 /* Default (large screens) — horizontal scroll */
/* Default: Large screens — Column layout */
#testType-fill {
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: auto;
    overflow: visible;
    white-space: nowrap;
    width: 100%;
}

/* For medium screens (≤768px) — Row layout with horizontal scroll */
@media (max-width: 768px) {
    #testType-fill {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-y: hidden;
        cursor: pointer;
        gap: 12px;
        height: 70px;
        scrollbar-width: thin; 
        -ms-overflow-style: none; 
    }

    #testType-fill::-webkit-scrollbar {
        height: 16px;
    }

    #testType-fill::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 8px;
        height: 10px;
    }
}

/* For small screens (≤576px) — same as medium */
@media (max-width: 576px) {
    #testType-fill {
        gap: 10px;
        height: auto;
        max-width: 200px;
        padding: auto;
        flex-direction: row;
        overflow-x: auto;
        width: 100%;
    }
}



 .testSeries-layout .details-box h5 {
     height: 45px;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }