.xb-program__wrapper {
    &:hover {
        .xb-item{
            &--dep-btn {
                a {
                    background: var(--color-primary);
                    color: var(--color-heading);
                }
            }
            &--img {
                img {
                    transform: scale(1.1);
                }
            }
        }
    }
    .xb-item {
        &--img {
            overflow: hidden;
            border-radius: 10px;
            img {
                width: 100%;
                @include transition(.4s);
            }
        }
        &--deprt {
            margin: 20px 0 10px;
        }
        &--group {
            line-height: 14px;
            color: var(--color-default-two);
            position: relative;
            padding-left: 16px;
            &::before {
                content: '';
                height: 2px;
                width: 8px;
                background: var(--color-primary);
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }
        }
        &--rating {
            position: relative;
            right: 0px;
            span {
                font-weight: 700;
                font-size: 14px;
                line-height: 14px;
                letter-spacing: -0.02em;
                text-align: center;
                color: var(--color-heading);
                position: absolute;
                top: 50%;
                left: 42%;
                transform: translate(-50%, -50%);
            }
        }
        &--title {
            font-size: 24px;
            line-height: 34px;
            margin-bottom: 20px;
            @include respond(lg) {
                font-size: 18px;
            }
            @include respond(xs) {
                font-size: 22px;
            }
            a {
                color: currentColor;
                @include transition(.4s);
            }
        }
        &--meta {
            border-top: 1px dashed #e8e5e6;
            padding: 30px 0;
            li {
                line-height: 14px;
                &:not(:last-child) {
                    margin-right: 77px;
                    @include respond(lg) {
                        margin-right: 20px;
                    }
                }
                img {
                    margin-right: 9px;
                }
            }
        }
        &--dep-btn {
            a {
                line-height: 50px;
                letter-spacing: -0.01em;
                text-transform: uppercase;
                text-align: center;
                color: var(--color-white);
                background: var(--color-heading);
                border-radius: 7px;
                padding: 14px 15px;
                line-height: 1.2;
                display: block;
                font-size: 16px;
            }
        }
    }
}
.program-shape {
    .shape {
        position: absolute;
        @include respond(lg) {
            display: none;
        }
        &--one {
            top: 7.5%;
            left: 97px;
        }
        &--two {
            bottom: 24%;
            left: 37px;
        }
        &--three {
            top: -7%;
            right: 60px;
        }
        &--four {
            bottom: 36%;
            right: 40px;
        }
    }
}
.clg-program_inner {
    display: inline-block;
    @include border-radius(10px);
    &:hover {
        .xb-item {
            &--img img {
                @include transform(scale(1.1));
            }
        }
    }
    .xb-item {
        &--holder {
            position: absolute;
            left: 31px;
            bottom: 23px;
        }
        &--img {
            border-radius: 10px;
            overflow: hidden;
            img {
                width: 100%;
                @include transition(.3s);
            }
        }
        &--tilte {
            font-size: 28px;
            line-height: 38px;
            font-weight: 700;
            color: var(--color-white);
            transform: translateY(40px);
            @include transition(.3s);
            text-transform: capitalize;
            @include respond(laptop) {
                font-size: 24px;
            }
            @include respond(md) {
                font-size: 22px;
            }
            a {
                color: currentColor;
            }
        }
        &--meta {
            transform: translateY(50px);
            @include transition(.3s);
            visibility: hidden;
            opacity: 0;
            li {
                color: var(--color-white);
                font-size: 18px;
                line-height: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                &:not(:last-child) {
                    margin-right: 38px;
                    @include respond(laptop) {
                        margin-right: 10px;
                    }
                    @include respond(lg) {
                        margin-right: 15px;
                    }
                }
                img {
                    margin-right: 10px;
                }
            }
        }
    }
    .clg-pro-btn {
        position: absolute;
        right: 30px;
        bottom: 30px;
        a {
            height: 43px;
            width: 43px;
            background: var(--color-white);
            @include border-radius(50px);
            @include center;
            @include transition(.3s);
            opacity: 0;
            visibility: hidden;
            transform: translateX(-20px);
        }
    }
}
.program-top {
    .clg-testimonial-carousel {
        position: absolute;
        right: 0;
        top: 28px;
        display: flex;
        @include respond(xs) {
            position: unset;
            margin-bottom: 30px;
        }
        .xb-arrow {
            width: 62px;
            height: 40px;
            background: var(--color-violet);
            @include border-radius (40px);
            @include center;
            @include transition(.3s);
            img {
                @include transition(.3s);
            }
            &:hover {
                background: var(--color-primary);
                img {
                    filter: brightness(0);
                }
            }
        }
        .xb-program-next {
            margin-left: 15px;
        }
    }
}
.clg-program-wrapper {
    margin-right: -15px;
    margin-left: -15px;
}
.program-slider .swiper-slide-active .clg-program_inner {
    box-shadow: 0 15px 32px 0 #ae969c;
    .xb-item {
        &--tilte {
            @include transform(translateY(0px));
        }
        &--meta {
            @include transform(translateY(0px));
            transition-delay: .1s;
            visibility: visible;
            opacity: 1;
        }
    }
    .clg-pro-btn {
        a {
            opacity: 1;
            visibility: visible;
            transform: translateX(0px);
            transition-delay: .2s;
        }
    }
}  
.hs-program_inner {
    border-radius: 10px;
    overflow: hidden;
    max-height: 508px;
    margin-top: 30px;
    @include transition(.3s);
    &:hover {
        box-shadow: 0 22px 33px 0 rgba(63, 104, 94, 0.28);
        .xb-item {
            &--link a {
                color: var(--color-primary);
                border-color: var(--color-primary);
                span {
                    margin-left: 14px;
                    svg path {
                        fill: var(--color-primary);
                    }
                }
            }
        }
    }
    .xb-item {
        &--holder {
            padding: 40px 30px;
        }
        &--title {
            font-weight: 700;
            font-size: 24px;
            line-height: 32px;
            text-transform: capitalize;
            color: var(--color-white);
            margin-bottom: 18px;
        }
        &--link a {
            font-weight: 700;
            font-size: 18px;
            line-height: 12px;
            text-transform: capitalize;
            color: var(--color-white);
            display: inline-block;
            padding-bottom: 3px;
            border-bottom: 2px solid #fff;
            @include transition(.3s);
            span {
                margin-left: 12px;
                @include transition(.3s);
                svg {
                    @include transition(.3s);
                }
            }
        }
        &--img {
          img {
            width: 100%;
          }
        }
    }
}
.hs-pro-bottom {
    background: var(--color-white);
    @include border-radius(10px);
    padding: 10px 40px 30px;
    .xb-content {
        p {
            font-size: 18px;
            line-height: 28px;
        }
    }
}
.program-menu {
	background: #F1F1E9;
	padding: 20px;
    @include border-radius(10px);
    gap: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    button {
        background-color: var(--color-white);
        color: #170006;
        padding: 6px 30px;
        @include border-radius(5px);
        @include respond(lg) {
            padding: 6px 24px;
        }
        @include respond(xs) {
            padding: 4px 24px;
            font-size: 15px;
        }
        &.active,
        &:hover {
            background-color: var(--color-primary)
        }
    }
}