// Main Scss start
.content_section_outer {
    padding: 60px 0;
    background: #fcfcfc;
    &.pt-0 {
        padding-top: 0;
    }
}

.content_section {
    position: relative;
    box-shadow: none !important;
    @include md {
        text-align: center;
    }
    .section_title {
        margin-bottom: 40px;
        box-shadow: none;
        padding-right: 70px;
        .heading {
            font-size: 30px;
            font-weight: 700;
            margin: 0 0 15px 0;
        }
        .sub_heading {
            font-size: 16px;
            font-weight: 400;
            margin: 0;
        }
        @include md {
            padding: 0;
        }
        &.not_view_all {
            padding: 0;
        }
    }
}

.custom_shortcode {
    width: 100%;
    box-shadow: none !important;
    .post_counts {
        margin: 0 0 38px 0;
        font-size: 16px !important;
        font-weight: 400;
    }
    .link {
        position: absolute;
        top: 25px;
        right: 10px;
        font-weight: bold;
        color: $primary;
        border-bottom: 1px dashed;
        font-size: 20px;
        @include md {
            position: inherit;
            display: block;
            min-height: 40px;
            height: 40px;
            width: calc(100%);
            background: rgb(255, 255, 255);
            border: 1px solid rgb(240, 244, 247);
            border-radius: 8px;
            color: rgb(8, 189, 128);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 16px;
        }
    }
    .top-link{
        display: none;
    }
    .swiper-button-prev,
    .swiper-button-next {
        background: url(../../../assets/images/slider_arrow.svg) no-repeat center center, #fff;
        border-radius: 8px;
        height: 32px;
        width: 32px;
        background-size: 7.2px;
        box-shadow: $box-shadow;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: 0;
        visibility: hidden;
        transition: all ease 300ms;
    }
    .swiper-button-prev {
        transform: rotate(180deg);
        left: 0;
    }
    .swiper-button-next {
        right: 0;
    }
    &:hover {
        .swiper-button-prev,
        .swiper-button-next {
            opacity: 1;
            visibility: visible;
            transition: all ease 300ms;
        }
    }
}

.grid_wrapper {
    display: flex;
    margin: 0 -12px;
    box-shadow: none !important;
    position: relative;
    flex-wrap: wrap;
    margin-bottom: -24px;
    &::-webkit-scrollbar {
        display: none;
    }
    @include md{
        overflow: auto;
    }
    .card {
        display: flex;
        width: 100%;
        max-width: 25%;
        padding: 0 12px;
        margin: 0 0 24px;
        min-height: 180px;
        height: auto;
        @include lg {
            max-width: 33.3337%;
        }
        @include md {
            max-width: 50%;
        }
        @include sm {
            max-width: 100%;
        }
    }
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
    .swiper-wrapper {
        flex-wrap: wrap;
    }
    &.grid_swiper {
        overflow: auto;
        margin-bottom: 0px !important;
        scrollbar-width: none;
        .swiper-button-prev,
        .swiper-button-next {
            display: block;
            top: -40px;
        }
        .swiper-button-disabled {
            display: none;
        }
        .card {
            margin-bottom: 40px;
            @include lg {
                max-width: 100%;
                flex: 0 0 270px;
                width: 270px;
            }
        }
        .swiper-wrapper {
            flex-wrap: nowrap;
        }

        &::after {
            content: "";
            width: 120px;
            height: 100%;
            right: 0;
            top: 0;
            position: absolute;
            z-index: 2;
            background: rgba(252, 252, 252, 0.5);
            background: linear-gradient(
                270deg,
                rgb(252, 252, 252) 0%,
                rgba(252, 252, 252, 0.5) 51.04%,
                rgba(252, 252, 252, 0) 100%
            );
            @include lg {
                display: none;
            }
        }
    }
    &.notActive{
        .swiper-button-prev,
        .swiper-button-next {
            display: none;
        }
    }
    .card_content {
        display: flex;
        flex-direction: column;
        padding: 15px 25px;
        background: #fff;
        border-radius: 8px;
        border-left: 8px solid;
        box-shadow: 0px 16px 32px 0px rgba(233, 238, 242, 0.4);
        transition: all ease 0.3s;
        width: 100%;
        .name {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 20px 0;
            a {
                color: var(--text-color);
                font-weight: 600;
            }
        }
        .disc {
            font-size: 14px;
            line-height: 20px;
            color: var(--text-color);
        }
        .card_link {
            color: $secondary;
            font-size: 12px;
            text-decoration: underline;
            margin-top: auto;
            cursor: pointer;
            display: inline-block;
            width: max-content;
            @include md {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
}

// Three Cards
.three_cards {
    .grid_wrapper {
        .card {
            max-width: 33.3337%;
            @include lg {
                max-width: 50%;
            }
            @include md {
                max-width: 100%;
            }
        }
    }
}
// Two cards 
.two_cards{
    .grid_wrapper {
        .card {
            max-width: 50%;
            @include lg {
                max-width: 100%;
            }
        }
    }
}

.ua_study_materials{
    .card{
        min-height: auto;
        margin-bottom:20px;
        .card_content{
            border: 0;
            border-left: 8px solid #C7E1EB !important;
            padding: 25px;
        }
        .disc{
            margin-bottom: 0;
        }
    }
}

.ua_news{
    .card_content{
        padding: 0;
        overflow: hidden;
        border: none;
    }
    figure{
        max-height:200px;
        width: 100%;
        overflow: hidden;
        margin-bottom: 30px !important;
        @include md{
            max-height: 350px;
        }
        @include sm{
            max-height: 200px;
        }
        img{
            width: 100%;
            height: auto;
        }
    }
    .card_content .name{
        font-size: 20px;
    }
    .disc{
        margin-bottom: 0 !important;
    }
    .card_body, .card-footer{
        padding: 0 25px 15px;
    }
    .card-footer{
        margin-top: auto;
    }
    .date{
        font-size: 14px;
    }
}

.position_relative{
    position: relative;
    .elementor-widget{
        position: initial;
    }
}

// .study_material {
//     display: flex;
//     flex-wrap: wrap;
//     box-shadow: none !important;
//     margin: 0 -15px;
//     .subject_card {
//         width: 100%;
//         max-width: 16.66685%;
//         text-align: center;
//         margin-bottom: 35px;
//         padding: 15px;
//         border-radius: $border-radius;
//         transition: all ease 0.3s;
//         &:hover {
//             background: #ffffff;
//             box-shadow: 0px 18px 30px rgba(233, 239, 244, 0.6);
//             transform: scale(1.01);
//             transition: all ease 0.3s;
//         }
//         // Sending Code In Media Queries
//         @include xl {
//             max-width: 20%;
//         }
//         @include lg {
//             max-width: 25%;
//         }
//         @include md {
//             max-width: 33.33337%;
//         }
//         @include sm {
//             max-width: 50%;
//         }
//     }
//     .letter {
//         height: 96px;
//         width: 110px;
//         margin: auto;
//         background: #fea5a7;
//         color: #fff;
//         box-shadow: 0px 10px 10px #e9eff4;
//         border-radius: 5px;
//         font-size: 50px;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         margin-bottom: 30px;
//         text-transform: uppercase;
//     }
//     .name {
//         text-align: center;
//         font-weight: 600;
//         font-size: 18px;
//     }
// }

// Blog or News
// .latest_news_outer {
//     padding: 80px 100px;
//     background: #fff;
//     border-radius: $border-radius;
//     filter: drop-shadow(0px 18px 60px #e9eff4);
//     @include sm {
//         padding: 40px 15px 40px;
//     }
// }
.latest_news {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7.5px;
    box-shadow: none;
    .card {
        display: flex;
        width: 100%;
        max-width: 33.3337%;
        padding: 0 7.5px;
        margin: 0 0 40px;
        min-height: 180px;
        @include lg {
            max-width: 50%;
        }
        @include md {
            max-width: 100%;
        }
    }
    .card_inner {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 18px 30px rgba(233, 239, 244, 0.6);
        // border-top: 5px solid #E9EFF4;
        transition: all ease 0.3s;
        > div:only-child {
            border-top: 5px solid #e9eff4;
            border-radius: $border-radius $border-radius 0 0;
            height: 100%;
        }
    }
    .card_image {
        margin-bottom: 0 !important;
        box-shadow: none;
        position: relative;
        img {
            box-shadow: none;
            filter: none;
            margin-bottom: 0 !important;
            border-radius: 0;
        }
        // .date {
        //     position: absolute;
        //     top: 15px;
        //     left: 15px;
        //     padding: 15px 15px;
        //     height: 70px;
        //     width: 70px;
        //     // background: #fea5a7;
        //     color: #fff;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;
        //     text-align: center;
        //     border-radius: $border-radius;
        //     line-height: 18px;
        // }
        // .day {
        //     font-size: 26px;
        //     font-weight: 700;
        //     margin-bottom: 7px;
        // }
        // .month {
        //     font-size: 14px;
        //     font-weight: 400;
        // }
    }
    .card_content {
        display: flex;
        flex-direction: column;
        padding: 25px 15px;
        .name {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 20px 0;
            a {
                color: #3c4852;
                font-weight: 700;
            }
        }
        .disc {
            font-size: 14px;
            line-height: 20px;
        }
        .card_link {
            color: $secondary;
            font-size: 12px;
            text-decoration: underline;
            margin-top: auto;
            cursor: pointer;
            display: inline-block;
            width: max-content;
            // @include md {
            //     margin-left: auto;
            //     margin-right: auto;
            // }
        }
        .card_footer {
            display: flex;
            justify-content: space-between;
            margin-top: auto;
            font-size: 12px;
        }
        .date {
            padding: 0 15px;
        }
    }
}
// /-Blog or News

// .grid_subscription {
//     display: flex;
//     flex-wrap: wrap;
//     margin: 0 -7.5px;
//     .card {
//         display: flex;
//         width: 100%;
//         max-width: 25%;
//         padding: 0 7.5px;
//         margin: 0 0 40px;
//         min-height: 180px;
//         @include lg {
//             max-width: 33.33337%;
//         }
//         @include md {
//             max-width: 50%;
//         }
//         @include sm {
//             max-width: 100%;
//         }
//     }
//     .content_card {
//         width: 100%;
//         text-align: center;
//         display: flex;
//         flex-direction: column;
//         background: #fff;
//         border-radius: $border-radius;
//         box-shadow: 0px 10px 10px #e9eff4;
//         border: 1px solid #f3f3f3;
//         padding: 20px 15px 30px;
//         transition: all ease 0.3s;
//         &:hover {
//             background: #ffffff;
//             box-shadow: 0px 18px 30px rgba(233, 239, 244, 0.6);
//             transform: scale(1.01);
//             transition: all ease 0.3s;
//         }
//     }
//     .discount {
//         color: #ffbd5b;
//         background: rgba(255, 189, 91, 0.2);
//         font-weight: 700;
//         max-width: 100px;
//         max-width: max-content;
//         padding: 3px 10px;
//         margin: 0 auto 25px;
//         border-radius: 4px;
//         text-transform: uppercase;
//     }
//     .time {
//         font-size: 20px;
//         font-weight: 700;
//         line-height: 34px;
//         margin-bottom: 20px;
//         margin-top: auto;
//     }
//     .price {
//         font-size: 34px;
//         font-weight: 700;
//         margin-bottom: 20px;
//     }
//     .tax_info {
//         font-weight: 300;
//         opacity: 0.6;
//     }
// }
