@use '../utils' as *;
.case-study-one {
    position: relative;
    background: #F8F8F8;
    overflow: hidden;
    z-index: 1;
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 140px;
        background: linear-gradient(90deg, #F1BFEC -0.24%, #BAF2C6 99.96%);
        filter: blur(300px);
        z-index: -1;
    }
    &:after {
        content: "";
        display: block;
        width: 1030px;
        height: 1030px;
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        border-radius: 1030px;
        background: #DFDCEC;
        filter: blur(185px);
        z-index: -1;
    }
    &__color-effect1 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 620px;
        height: 620px;
        border-radius: 50px;
        background: #EBFCFC;
        filter: blur(185px);
        z-index: -1;
    }
    &__color-effect2 {
        position: absolute;
        top: 0;
        right: 0;
        width: 492px;
        height: 492px;
        border-radius: 50px;
        background: #EFF6DB;
        filter: blur(185px);
        z-index: -1;
    }
    .section-title__one-title {
        font-family: $mulish;
        margin-bottom: 60px;
    }
    &__single {
        padding: 30px;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 50px 70px 0px rgba(11, 23, 40, 0.08);
        width: 770px!important;
        @media #{$sm} {
            width: 550px!important;
        }
        @media #{$xs} {
            width: 310px !important;
        }
        .header {
            margin-bottom: 20px;
            .img {
                float: left;
                margin-right: 27px;
                @media #{$sm} {
                    display: block;
                    float: inherit;
                }
                @media #{$xs} {
                    display: block;
                    float: inherit;
                }
                img {
                    border-radius: 6px;
                    width: 180px;
                    height: 180px;
                    object-fit: cover;
                }
            }
            .content {
                overflow: hidden;
                padding: 20px 0;
                padding-right: 120px;
                @media #{$xs} {
                    padding-right: 0;
                }
                img {
                    margin-bottom: 10px;
                }
                h2 {
                    color: $heading-color;
                    font-family: $mulish;
                    font-size: 22px;
                    font-weight: 600;
                    line-height: 34px;
                    text-align: left;
                    a {
                        background: -webkit-gradient(linear, left top, left bottom, from(#0B1728), color-stop(98%, #0B1728));
                        background: linear-gradient(#0B1728 0%, #0B1728 98%);
                        background-size: 0 2px;
                        background-repeat: no-repeat;
                        background-position: left 100%;
                        -webkit-transition: 0.4s ease-in-out;
                        transition: 0.4s ease-in-out;
                        &:hover {
                            background-size: 100% 2px;
                        }
                    }
                }
            }
        }
    }
    .rr-scrollbar {
        background-color: rgba(10, 10, 10, 0.10);
        height: 2px;
        margin-left: 370px;
        margin-right: 370px;
        @media #{$sm} {
            margin-left: 50px;
            margin-right: 50px;
        }
        @media #{$xs} {
            margin-left: 50px;
            margin-right: 50px;
        }
        & .swiper-scrollbar-drag {
            width: 370px!important;
            background-color: $theme-primary;
            height: 3px;
            border-radius: 0;
            @media #{$sm} {
                width: 170px!important;
            }
            @media #{$xs} {
                width: 170px!important;
            }
        }
    }
    .footer__left {
        display: inline-block;
        width: 48%;
        margin-right: 20px;
        padding: 24px 34px;
        border-radius: 6px;
        border: 1px solid rgba(11, 23, 40, 0.14);
        background: #FFF;
        @media #{$sm} {
            width: 46%;
        }
        @media #{$xs} {
            width: 100%;
            margin-bottom: 20px;
        }
        &:last-child {
            margin-right: 0;
        }
        h3 {
            font-family: $mulish;
            font-size: 26px;
            font-weight: 700;
            line-height: normal;
        }
        p {
            font-family: $mulish;
            font-size: 15px;
            font-weight: 500;
            line-height: 22px;
            margin-bottom: 0;
        }
    }
}

.case-study-two {
    &__single {
        width: 100%;
        height: 478px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        @include transition(.3s);
        &-box {
            background: #FFF;
            box-shadow: 0px 10px 80px 0px rgba(11, 23, 40, 0.24);
            display: inline-block;
            padding: 36px 71px;
            text-align: center;
            visibility: hidden;
            opacity: 0;
            @include transition(.3s);
            @media #{$xs} {
                padding: 20px 12px;
                text-align: left;
            }
            span {
                color: #0B1728;
                font-family: Montserrat Alternates;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-bottom: 18px;
                display: block;
                &:before {
                    content: "";
                    display: inline-block;
                    width: 14px;
                    height: 6px;
                    border-radius: 10px;
                    background: $theme-secondary;
                    margin-right: 6px;
                    margin-bottom: 2px;
                }
            }
            h4 {
                color: #0B1728;
                font-family: Montserrat Alternates;
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                margin-bottom: 24px;
            }
            a {
                color: #0B1728;
                font-family: Mulish;
                font-size: 15px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                @include transition(.3s);
                &:hover {
                    text-decoration: underline;
                    @include transition(.3s);
                }
            }
        }
    }
    .owl-prev,
    .owl-next {
        width: 56px;
        height: 56px;
        position: absolute;
        top: -120px;
        background-color: #fff;
        line-height: 56px;
        text-align: center;
        color: #110718;
        @include transition(.3s);
        &:hover {
            color: #fff;
            background-color: $theme-secondary;
            @include transition(.3s);
        }
    }
    .owl-prev {
        right: 344px;
        @media #{$xxl} {
            right: 16.2%;
        }
        @media #{$xl} {
            right: 14.7%;
        }
        @media #{$lg} {
            right: 17.5%;
        }
        @media #{$md} {
            right: 176px;
        }
        @media #{$sm} {
            right: 8.9%;
        }
        @media #{$xs} {
            right: 17.6%;
        }
    }
    .owl-next {
        right: 290px;
        @media #{$xxl} {
            right: 12.7%;
        }
        @media #{$xl} {
            right: 10.7%;
        }
        @media #{$lg} {
            right: 13.7%;
        }
        @media #{$md} {
            right: 120px;
        }
        @media #{$sm} {
            right: 0%;
        }
        @media #{$xs} {
            right: 0%;
        }
    }
    .owl-item.active .case-study-two__single {
        height: 598px;
        margin-top: -120px;
        @include transition(.3s);
    }
    .owl-item.active .case-study-two__single-box {
        visibility: visible;
        opacity: 1;
        @include transition(.3s);
    }
    .owl-carousel .owl-stage-outer {
        overflow: inherit;
    }
}