.subjectcards {
     margin: 20px;
}

.col {
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
}

.col a {
     text-decoration: none;
}

.card {
     padding: 10px;
     /* JUST TO LOOK COOL */
     border: 1px solid #eee;
     /* JUST TO LOOK COOL */
     box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px;
     transition: all 0.3s ease-in-out;
     background-color: white;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}


.card-title {
     color: #4285f4 !important;
     font-weight: 700 !important;
}

.card-text {
     font-weight: 700 !important;
}

.card:hover {
     box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
     transform: translate3d(0px, -2px, 0px);
     /* background-color: #dce9ff; */
     background-image: linear-gradient(
          120deg,
          #a1c4fd 0%,
          #c2e9fb 100%
     ) !important;
}

.card:hover .card-text {
     color: black !important;
}

.card:hover .card-title {
     color: #ffffff !important;
}

.imagecontainer {
     margin: auto;
     width: 50%;
     padding: 10px;
}

/* In subject Page */

.card-text a {
     font-weight: 500;
     text-decoration: none;
}

.card2 {
     padding: 10px;
     /* JUST TO LOOK COOL */
     border: 1px solid #eee;
     /* JUST TO LOOK COOL */
     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
          rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
     background-color: white;
}

.col2 {
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
}

.card2 li a:hover {
     color: #d76a73 !important;
}

/* Blog Label Style */
.label-tag {
     top: 15px;
     left: 15px;
     background-color: rgba(0, 0, 0, 0.792);
     color: #ffffff;
     padding: 8px 12px;
     border-radius: 10px;
     font-size: 14px;
     font-weight: 500;
     margin-right: 5px;
     margin-bottom: 5px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.label-tag:hover {
     background-color: #6366f1;
     color: #ffffff;
     cursor: pointer;
     transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
     .label-tag {
          padding: 6px 10px;
          font-size: 13px;
     }
}

@media (max-width: 576px) {
     .label-tag {
          padding: 5px 8px;
          font-size: 14px;
     }
}