.courses-section {
    .nav {
        display: inline-flex;
        gap: $gap-32;
        row-gap: 24px;
        border: 0px;
        position: relative;

        @include media-query(1599px) {
            gap: $gap-16;
            row-gap: 24px;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: -16px;
            left: 0;
            display: block;
            width: 100%;
            height: 2px;
            background: $lightest-gray;
            z-index: -1;
            @include media-query(1199px) {
                bottom: -10px;
            }

            @include media-query(992px) {
                display: none;
            }
        }

        .nav-item {
            .nav-link {
                color: $dark-gray;
                font-family: $font-primary;
                font-size: clamp(16px, 0.938vw, 22px);
                font-style: normal;
                font-weight: 500;
                line-height: 150%;
                border: 0px;
                padding: 0px;
                position: relative;

                &::after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 2px;
                    background: $accent-1;
                    transition: width 0.7s;
                    position: absolute;
                    bottom: -15px;
                    left: 0;
                    @include media-query(1199px) {
                        bottom: -9px;
                    }
                }

                &.active {
                    font-weight: 500;
                    background: transparent;
                    color: $accent-1;
                    transition: $transition;
                    border: 0px;

                    &::after {
                        width: 100%;
                    }
                }

                &:hover {
                    color: $accent-1;
                    transition: $transition;

                    &::after {
                        width: 100%;
                    }
                }
            }
        }
    }
    .input-container {
        position: relative;
        width: clamp(380px, 21.563vw, 520px);
        @include media-query(399px){
            width: 100%;
        }
        i{
            position: absolute;
            z-index: 5;
            top: 20px;
            left: 16px;
        }
        input {
            background: $white;
            border-radius: $br-8;
            border: 1px solid $lightest-gray;
            padding: 14.5px;
            padding-left: 44px;
        }

        a {
            position: absolute;
            top: 12px;
            right: 16px;
            border: 0;
            background: transparent;

            svg {
                font-size: 20px;
            }
        }
    }
}

.course-card {
    padding: clamp(16px, 1.25vw, 32px) clamp(12px, 1.25vw, 32px);
    border: 1px solid $lightest-gray;
    border-radius: $br-12;
    @include media-query(992px){
        width: 100%;
    }
    .course-image {
        border-radius: clamp(6px, 0.625vw, 20px);
        position: relative;
        overflow: hidden;

        &.shine {
            &::before {
                background: linear-gradient(to right,
                    fade_out(#fff, 1) 0%,
                    fade_out(#fff, 0.7) 100%);
                content: "";
                display: block;
                height: 100%;
                left: -75%;
                position: absolute;
                top: 0;
                transform: skewX(-25deg);
                width: 50%;
                z-index: 2;
                pointer-events: none;
            }


            @keyframes shine {
                100% {
                    left: 125%;
                }
            }
        }

        img {
            border-radius: clamp(6px, 0.625vw, 20px);
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-transition: all 0.35s linear 0s;
            transition: all 0.35s linear 0s;
        }
    }

    .course-content {
        h5{
            transition: $transition;
        }
        .course-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            @include media-query(399px){
                flex-wrap: wrap;
                row-gap: $gap-16;
                gap: $gap-16;
            }

            .info-box {
                padding: 8px 16px;
                border: 1px solid $light-gray;
                background: $light-white;
                border-radius: $br-4;
            }
        }
        .course-detail{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2; 
            -webkit-box-orient: vertical;
        }
        img{
            width: clamp(18px, 1.25vw, 32px);
            height: clamp(18px, 1.25vw, 32px);
        }
        .price-label{
            padding: 8px 16px;
            background: $accent-1;
            border-radius: $br-8;
            h5{
                color: $white;
            }
        }
        .rating-star{
            margin-top: -6px;
        }
    }
    &:hover {
        h5 {
            color: $accent-1;
            transition: $transition;
        }

        .course-image {
            img{
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                -webkit-transition: all 0.35s linear 0s;
                transition: all 0.35s linear 0s;
            }
            &.shine {
                &:hover,
                &:focus {
                    &::before {
                        animation: shine 0.85s;
                    }
                }
            }
        }
    }
}