.menu-link {
            color: #000000;
        }

        .nav-menu-item:hover .menu-ruler {
            background-color: #000000;
        }

        .courses-grid-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 30px;
            row-gap: 20px;
            margin: 30px 0;
        }
        
      @media screen and (min-width: 600px) and (max-width: 900px)
        {
            .courses-grid-wrapper{
                grid-template-columns: repeat(2, 1fr);
                
            }
        }
        
        @media screen and (max-width: 600px){
            .courses-grid-wrapper{
                grid-template-columns: repeat(1, 1fr);
                
            }
        }

        .courses-card {
            padding: 0;
            overflow: hidden;
            gap: 0;
        }

        .courses-image-wrapper {
            display: block;
            border-radius: 0;
            background-image: var(--bg-image);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 200px;
            position: relative;
        }

        .courses-image-wrapper .image {
            width: 60px;
            height: 60px;
            border: 2px solid white;
            border-radius: 50%;
            position: absolute;
            bottom: -30px;
            right: 10px;
            z-index: 10;
        }

        .courses-card-body,
        .courses-card-footer {
            padding: 10px 15px;
        }

        .courses-card-body {
            padding-top: 30px;
        }

        .trainer-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 3px 0;
        }

        .rating-container {
            display: flex;
            gap: 3px;
            align-items: center;
        }

        .star-wrapper {
            font-size: 12px;
        }

        .courses-card-body .title {
            font-size: 20px;
            margin: 5px 0;
        }

        .courses-card-body .description {
            color: #2c2c2c;
            font-weight: 400;
        }

        .fa-solid.fa-star {
            color: orange
        }

        .duration {
            font-size: 13px;
            margin-top: 15px;
        }

        .info-item {
            padding: 2px 0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-style: italic;
        }

        .info-item i {
            font-style: normal;
            font-family: 14px;
        }

        .courses-card-footer .shared-btn {
            border: none;
            padding: 6px 10px;
            cursor: pointer;
        }

        .courses-card-footer .enroll-btn-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .courses-card-footer .shared-btn:hover {
            opacity: 0.8;
            color: white;
        }
        

        .status-label {
            border-radius: 50px;
            padding: 6px 12px;
            background-color: #f1303a;
            color: white;
            font-weight: 500;
            position: absolute;
            left: 10px;
            top: 10px;
        }