MAINHACK

Viewing / Editing File: elements.scss

body {
    img.mfp-img {
        padding: 0 !important;
    }
    .mfp-fade.mfp-bg.mfp-ready {
        opacity: 0.9;
    }
    .mfp-iframe-scaler .mfp-close {
        line-height: 40px;
        padding: 0;
        right: 0;
        text-align: center;
        top: -44px;
        width: 40px;
        @include border-radius(2px 2px 0 0);
        background-color: #000;
        &:hover {
            background-color: $primary_color;
        }
    }
    .mfp-bottom-bar {
        margin-top: 0;
    }
    .mfp-wrap .mfp-container .mfp-arrow {
        background-color: $primary_color;
        width: 60px;
        height: 120px;
        opacity: 1;
        &:before, &:after {
            border: none;
        }
        &:before {
            font-family: "Material-Design-Iconic-Font";
            font-size: 20px;
            color: #fff;
            margin: 0;
            padding: 0;
            line-height: normal;
            position: absolute;
            top: 50%;
            display: block;
            @include transform(translate(-50%, -50%));
            opacity: 1;
            left: 50%;
            width: auto;
            height: auto;
        }
        &.mfp-arrow-left:before {
            content: "\f2ea";
        }
        &.mfp-arrow-right:before {
            content: "\f2ee";
        }
    }

@media #{$min-xl} {
        .mfp-wrap .mfp-container {
            padding: 0 120px;
        }
    }
}

.revslider-initialised {
    margin-bottom: 0 !important;
    cite {
        font-style: normal;
        color: $third_color !important;
    }
    .letter-10 {
        letter-spacing: -0.01em !important;
    }
    .letter-25 {
        letter-spacing: -0.025em !important;
    }
    .slider-title-shadow1 {
        text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
    }
    .rev-btn {
        display: inline-flex;
        align-items: center;
        .space-left {
            margin-left: 12px;
        }
        .space-right {
            margin-right: 12px;
        }
    }
    .fs-18 {
        font-size: 18px;
    }
    .btn {
        @include box-shadow(0 5px 6px rgba(#000000, 0.17));
        &:not(.size-default) {
            line-height: 48px;
            padding: 0 32px;
        }
        &.btn-gradient2 {
            padding: 0 22px;
            line-height: 60px;
            @media #{$max-xsx} {
                padding: 0 14px;
                line-height: 48px;
                font-size: 14px;
            }
        }
        &.btn-white {
            padding: 0 31px;
            line-height: 60px;
            @media #{$max-xsx} {
                padding: 0 14px;
                line-height: 48px;
                font-size: 14px;
            }
        }
        &.size-default {
            padding: 0 27px;
        }
        .space-right {
            margin-right: 6px;
        }
        .space-left {
            margin-left: 6px;
        }
        &.btn-icon {
            padding-right: 20px;
            line-height: 52px;
        }
    }
    .btn-slider-shadow {
        @include box-shadow(0 9px 21px rgba(#000000, 0.22));
    }
    .shap-slider-bottom {
        transform:skew(-29deg) !important;
        -webkit-transform:skew(-29deg) !important;
        transform-origin: left bottom !important;
        -webkit-transform-origin: left bottom !important;
    }
    .title-box-shadow {
        text-shadow: 0px 3px 4px rgba(#000000, 0.29);
        -webkit-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
        -ms-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
        -o-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
    }
    .arrow-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .tp-leftarrow.custom, .tp-rightarrow.custom {
        width: 69px !important;
        height: 69px !important;
        @include border-radius(3px !important);
        background-color: #dadbdc !important;
        @include transition(all 300ms linear 0ms);
        opacity: 1 !important;
        &:before {
            font-size: 24px !important;
            color: #000000  !important;
            font-family: "Font Awesome 5 Pro" !important;
            position: absolute !important;
            top: 50%  !important;
            left: 50% !important;
            @include transform(translate(-50%, -50%) !important);
            font-weight: 400 !important;
        }
        &:hover {
            background-color: $third_color !important;
            &:before  {
                color: #fff !important;
            }
        }
        @media #{$max-xl} {
            width: 50px !important;
            height: 50px !important;
            &:before {
                font-size: 16px !important;
            }
        }
        @media #{$max-sm} {
            display: none !important;
        }
    }
    .tp-leftarrow.custom:before {
        content: '\f104' !important;
    }
    .tp-rightarrow.custom:before {
        content: '\f105' !important;
    }

.tp-bullets.custom .tp-bullet {
      height: 18px;
      width: 18px;
      @include border-radius(18px);
      border: 2px solid #fff;
      background: transparent;
      @media #{$max-md} {
        width: 10px;
        height: 10px;
      }
      &:before {
        display: none;
      }
      &.selected {
        background: #fff;
      }
    }
    .tp-bullets.hesperiden .tp-bullet {
        height: 16px !important;
        width: 16px !important;
        border: none !important;
        background-color: transparent !important;
        background-image: none !important;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include border-radius(100%);
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
        &:after {
            content: '';
            width: 24px;
            height: 24px;
            border: 2px solid #fff;
            @include border-radius(24px);
            position: absolute;
            top: -4px;
            left: -4px;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            opacity: 0;
        }
        &.selected {
            &:before {
                @include transform(scale(0.6));
            }
            &:after {
                opacity: 1;
            }
        }
    }
    .ct_alico1.tparrows {
        background-color: transparent !important;
        width: 70px !important;
        height: 70px !important;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        border: 2px solid #e7ebed;
        @include border-radius(100%);
        @media #{$max-xxl} {
            width: 50px !important;
            height: 50px !important;
        }
        &:before {
            color: #fff !important;
            font-family: 'Material-Design-Iconic-Font' !important;
            font-size: 34px !important;
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%,-50%));
            @media #{$max-xxl} {
                font-size: 22px !important;
            }
        }
        &.tp-leftarrow:before {
            content: "\f2fa" !important;
        }
        &.tp-rightarrow:before {
            content: "\f2fb" !important;
        }
        &:hover {
            background-color: #fff !important;
            border-color: #fff !important;
            &:before {
                color: #000 !important;
            }
        }
    }
    .ct-video-button {
        width: 80px;
        height: 80px;
        background-color: rgba(#fff, 0.18);
        font-size: 18px;
        @media #{$max-md} {
            width: 60px;
            height: 60px;
            font-size: 16px;
        }
    }
}

.ct-gallery-grid1 {
    .item--image {
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(#000, 0.8);
            @include transition(all 300ms linear 0ms);
            opacity: 0;
        }
    }
    .light-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        height: 50px;
        width: 50px;
        background-color: $primary_color;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
        @include border-radius(50px);
        margin: auto;
        opacity: 0;
        transform: translate(0, -40px);
    }
    .item--inner {
        margin-bottom: 30px;
        &:hover {
            .item--image {
                &:before {
                    opacity: 1;
                }
            }
            .light-box {
                opacity: 1;
                transform: translate(0, 0px);
                -webkit-transition-delay: 0.1s;
                -moz-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
        }
    }
}

.ct-image-single {
    @include border-radius(inherit);
    *, img {
        @include border-radius(inherit);
    }
    img {
        width: auto;
    }
}

.btn-text-gr {
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    span {
        @extend .text-gradient;
    }
    i {
        color: $gradient_color_to;
        margin: 0 6px;
        @include transition(all .25s cubic-bezier(.3,.3,0,.8));
        font-size: 20px;
    }
    &:hover i {
        transform: translateX(4px);
    }
}

.ct-service-external1 {
    text-align: center;
    .item--icon {
        margin: auto;
        width: 76px;
        height: 76px;
        @extend .bg-gradient;
        border-radius: 76px;
        position: relative;
        i, svg, img {
            @extend .ct-middle;
        }
        i {
            font-size: 40px;
            color: #fff;
        }
        svg {
            height: 40px;
        }
        img {
            max-height: 40px;
        }
    }
    .item--divider {
        width: 88px;
        height: 4px;
        @extend .bg-gradient;
        margin: 0 auto 23px auto;
    }
    .item--title {
        margin-bottom: 20px;
        font-size: 20px;
        color: #101130;
    }
    .item--description {
        color: #666;
        line-height: 1.5;
    }
    .item--front {
        background-color: #fff;
        padding: 72px 24px 47px;
        @include border-radius(60px 8px 8px 8px);
        @include box-shadow(0 0 10px rgba(#01193b, 0.06));
        position: relative;
        border: 1px solid #edf1f7;
        .item--icon {
            position: absolute;
            top: -38px;
            left: 0;
            right: 0;
        }
    }
    .item--back {
        background-color: #000;
        border-radius: 8px;
        padding: 120px 24px 32px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: center;
        @include box-shadow(0 20px 30px rgba(#01193b, 0.18));
        &.ct-flipbox--back {
            top: auto;
            bottom: 0;
            height: calc(100% + 45px);
        }
        &:before {
            content: '';
            z-index: 1;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 90%;
            @include background-gradient-bottom(#000 32%, rgba(#000, 0));
        }
        .item--icon {
            background: #fff;
            position: absolute;
            top: 35px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 9;
            i {
                @extend .text-gradient;
            }
        }
        .item--title {
            margin-bottom: 12px;
            color: #fff;
        }
        .item--meta {
            position: relative;
            z-index: 101;
        }
    }
    .item--inner {
        position: relative;
        margin: 60px 0 80px;
        z-index: 9;
    }
    .ct-carousel-inner {
        overflow: hidden;
        margin: 0 -30px;
        padding-bottom: 30px;
        .slick-list {
            padding: 0 15px;
        }
    }
    .slick-slide {
        @include transition(.2s cubic-bezier(.24,.74,.58,1));
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .ct-slick-carousel[data-arrows="true"][data-dots="true"] { 
        padding-bottom: 21px;
        .slick-arrow {
            height: 46px;
            width: 46px;
            margin: 0;
            transform: translate(0,0);
            &:before {
                font-size: 20px;
                font-weight: 400;
            }
            &.slick-prev {
                left: 30px;
                right: auto;
            }
            &.slick-next {
                right: 30px;
                left: auto;
            }
        }
    }
    .slick-arrow {
        &:after {
            left: 0px;
            width: 100%;
            transform: skewX(0deg);
            @extend .bg-gradient;
            animation: none;
            opacity: 0;
            transition: all 300ms linear 0ms;
        }
        &:hover {
            @include box-shadow(none);
            &:after {
                opacity: 1;
            }
        }
    }
}

.ct-fancy-box-layout1 {
    &.style1 {
        display: flex;
        flex-wrap: nowrap;
        .item--icon {
            line-height: 1;
            margin-top: 8px;
            margin-right: 22px;
            i {
                color: $primary_color;
                font-size: 60px;
                @include transition(all 250ms linear 0ms);
                display: inline-block;
            }
        }
        .item--title {
            margin-bottom: 8px;
            font-size: 30px;
            cite {
                color: $primary_color;
                font-style: normal;
            }
        }
        .item--description {
            line-height: 1.75;
        }
        &:hover {
            .item--icon i {
                @include transform(rotateY(360deg));
            }
        }
    }
    &.style2 {
        display: flex;
        flex-wrap: nowrap;
        .item--icon {
            line-height: 1;
            margin-top: 2px;
            margin-right: 13px;
            img {
                max-width: 38px;
            }
            i {
                color: $primary_color;
                font-size: 38px;
                @include transition(all 250ms linear 0ms);
                display: inline-block;
            }
        }
        .item--title {
            margin-bottom: 8px;
            font-size: 24px;
            font-weight: 600;
        }
        .item--description {
            line-height: 1.625;
            color: #000000;
        }
        &:hover {
            .item--icon i {
                @include transform(rotateY(360deg));
            }
        }
    }
    &.style3 {
        display: flex;
        flex-wrap: nowrap;
        .item--icon {
            line-height: 1;
            margin-top: 3px;
            margin-right: 45px;
            i {
                color: $primary_color;
                font-size: 60px;
                @include transition(all 250ms linear 0ms);
                display: inline-block;
            }
            img {
                max-width: 60px;
                @include transition(all 250ms linear 0ms);
            }
            @media #{$max-md} {
                margin-right: 25px;
                i {
                    font-size: 45px;
                }
                img {
                    max-width: 45px;
                }
            }
        }
        .item--title {
            margin-bottom: 8px;
            font-size: 24px;
            font-weight: 600;
            cite {
                color: $primary_color;
                font-style: normal;
            }
            @media #{$max-md} {
                font-size: 20px;
            }
        }
        .item--description {
            line-height: 1.625;
            color: #383838;
            max-width: 270px;
        }
        &:hover {
            .item--icon i, .item--icon img {
                @include transform(rotateY(360deg));
            }
        }
    }
}

.ct-fancy-box-layout2 {
    text-align: center;
    background-color: #eaeaea;
    padding: 47px 30px 49px;
    @include border-radius(3px);
    border: 1px solid #e7e7e7;
    @include box-shadow(0 10px 0 rgba(#000000, 0.18));
    @include transition(all 300ms linear 0ms);
    @media #{$max-md} {
        padding-left: 20px;
        padding-right: 20px;
    }
    &:hover {
        @include transform(translateY(-10px));
    }
    .item--icon {
        line-height: 1;
        margin-bottom: 18px;
        i {
            font-size: 65px;
            color: $primary_color;
        }
    }
    .item--title {
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 10px;
        @media #{$max-md} {
            font-size: 22px;
            br {
                display: none;
            }
        }
    }
    .item--description {
        color: #000000;
        line-height: 1.625;
        margin-bottom: 20px;
    }
    @media #{$min-xl} {
        .item--button a {
            min-width: 195px;
        }
    }
}

.ct-fancy-box-layout3 {
    overflow: hidden;
    position: relative;
    background-color: #ebf1f1;
    padding: 52px 40px 47px 45px;
    z-index: 1;
    @media #{$max-md} {
        padding: 42px 20px 37px 20px;
    }
    .item--icon-pbs {
        position: absolute;
        top: -11px;
        right: -11px;
        line-height: 1;
        font-size: 67px;
        color: #fff;
    }
    .item--icon {
        line-height: 1;
        margin-bottom: 8px;
        i {
            font-size: 30px;
            color: $primary_color;
            @include transition(.25s cubic-bezier(.24,.74,.58,1));
        }
    }
    .item--title {
        font-size: 26px;
        line-height: 1.34;
        margin-bottom: 17px;
        @include transition(.25s cubic-bezier(.24,.74,.58,1));
        @media #{$max-md} {
            font-size: 22px;
        }
    }
    .item--description {
        line-height: 1.625;
        color: #000;
        @include transition(.25s cubic-bezier(.24,.74,.58,1));
    }
    &:before {
        content: '';
        height: 3px;
        width: 100%;
        left: 0;
        bottom: 0;
        position: absolute;
        background-color: $primary_color;
        z-index: -1;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    &:hover {
        &:before {
            height: 100%;
        }
        .item--icon i, .item--title, .item--description {
            color: #fff;
        }
    }
}

.ct-fancy-box-layout4 {
    display: flex;
    flex-wrap: nowrap;
    background-color: #e7eaee;
    @include border-radius(8px);
    padding: 37px 40px 35px;
    @include box-shadow(0 9px 3px rgba(#01214a, 0.2));
    @media #{$max-lg} {
        padding-left: 30px;
        padding-right: 25px;
    }
    @media #{$max-md} {
        padding-left: 20px;
        padding-right: 15px;
    }
    .item--icon {
        line-height: 1;
        margin-right: 25px;
        position: relative;
        &:before {
            content: '';
            width: 105px;
            height: 19px;
            background-image: url(../images/icon-shadow.png);
            position: absolute;
            top: 60px;
            left: 50%;
            @include transform(translate(-50%, 0));
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            opacity: 0;
        }
        * {
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
        i {
            font-style: 65px;
            color: $primary_color;
        }
        img {
            max-width: 74px;
        }
        @media #{$max-lg} {
            margin-right: 15px;
            img {
                max-width: 55px;
            }
        }
    }
    .item--title {
        font-size: 24px;
        color: $third_color;
        margin-bottom: 11px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        @media #{$max-md} {
            font-size: 20px;
        }
    }
    .item--description {
        line-height: 1.625;
        margin-bottom: 16px;
        @media #{$max-md} {
            font-size: 15px;
        }
    }
    .item--button {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .btn {
            line-height: 43px;
            padding: 0 21px;
            font-size: 14px;
            @include box-shadow(0 5px 6px rgba(0, 0, 0, 0.17));
            margin-right: 27px;
            margin-bottom: 10px;
            @media #{$max-lg} {
                margin-top: 10px;
                padding-left: 18px;
                padding-right: 18px;
                margin-right: 15px;
                font-size: 14px;
            }
            i {
                margin-right: 4px;
            }
        }
        .btn-text {
            margin-bottom: 10px;
            @media #{$max-lg} {
                font-size: 14px;
            }
        }
    }
    &:hover {
        .item--icon {
            &:before {
                opacity: 1;
            }
            * {
                @include transform(rotate(14deg) translateY(-24px));
            }
        }
        .item--title {
            color: $secondary_color;
        }
    }
}

.ct-fancy-box-layout5 {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    .item--icon {
        line-height: 1;
        margin-bottom: 15px;
        i {
            font-size: 65px;
            color: $primary_color;
        }
    }
    .item--title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .item--description {
        line-height: 1.625;
        color: #000;
    }
    .ct-fancy-box-front {
        background-color: #fff;
        padding: 50px 25px 44px;
        @include box-shadow(0 1px 18px rgba(#000000, 0.11));
        backface-visibility: hidden;
        box-sizing: border-box;
        @include transition(all 0.35s ease);
    }
    .ct-fancy-box-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000000;
        @include box-shadow(0 1px 18px rgba(#000000, 0.11));
        padding: 40px 30px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        @include transform(rotateY(90deg));
        -o-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 0;
        box-sizing: border-box;
        @include transition(all 0.35s ease);
        .item--title {
            color: #fff;
            position: relative;
            padding-bottom: 21px;
            &:before {
                content: '';
                width: 31px;
                height: 3px;
                background-color: #fff;
                position: absolute;
                bottom: 0;
                left: 50%;
                @include transform(translate(-50%, 0));
            }
        }
        .item--description {
            color: #fff;
        }
    }
    &:hover {
        .ct-fancy-box-front {
            @include transform(rotateY(-180deg));
            opacity: 0;
        }
        .ct-fancy-box-back {
            opacity: 1;
            -webkit-transition-delay: 0.14s;
            -moz-transition-delay: 0.14s;
            transition-delay: 0.14s;
            @include transform(rotateY(0deg));
        }
    }
}

.ct-fancy-box-layout6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media #{$max-md} {
        justify-content: flex-start;
    }
    .item--icon {
        height: 67px;
        width: 67px;
        min-width: 67px;
        position: relative;
        @include border-radius(100%);
        margin-right: 26px;
        z-index: 1;
        @media #{$max-md} {
            margin-right: 16px;
            width: 55px;
            height: 55px;
            min-width: 55px;
        }
        i {
            font-size: 28px;
            color: #0e0e0e;
            @media #{$max-md} {
                font-size: 24px;
            }
        }
        * {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
        }
        &:before, &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include border-radius(100%);
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
        &:before {
            z-index: -1;
        }
        &:after {
            z-index: -2;
        }
    }
    .item--title {
        margin-bottom: 1px;
        font-weight: 700;
        color: #fff;
    }
    .item--description {
        color: #c7c7c7;
    }
    .item--holder {
        font-size: 15px;
        line-height: 24px;
        position: relative;
        @media #{$max-md} {
            font-size: 14px;
        }
        .item--link {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    .ct-fancy-box-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    &:hover .item--icon:after {
        @include transform(scale(1.5));
        opacity: 0;
    }
    &.style2 {
        .item--icon {
            width: 50px;
            height: 50px;
            min-width: 50px;
            i {
                font-size: 20px;
            }
            &:before {
                border-radius: 5px;
                opacity: 0.2;
            }
            &:after {
                display: none;
            }
        }
        &:hover .item--icon:before {
            opacity: 1;
        }
    }
}

.ct-fancy-box-layout7 {
    .item--icon {
        margin-right: 15px;
        font-size: 14px;
        line-height: 29px;
        min-width: 29px;
        width: 29px;
        height: 29px;
        @include border-radius(29px);
        color: #fff;
        @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        text-align: center;
        color: #000;
    }
    .item--title {
        font-size: 18px;
        margin-bottom: 0;
    }
    .item--description {
        font-size: 15px;
        line-height: 24px;
    }
    .item--holder {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 24px;
    }
}

.ct-mailchimp1 {
    .mc4wp-form {
        .mc4wp-response {
            font-size: 14px;
            line-height: 24px;
            margin-top: 15px;
            color: #999;
            p {
                margin-bottom: 0;
            }
        }
    }
    &.style1 {
        .mc4wp-form {
            position: relative;
            overflow: hidden;
            .mc4wp-form-fields {
                position: relative;
                overflow: hidden;
                input[type="email"], input[type="text"] {
                    border: none;
                    background-color: #eeeeee;
                    @include border-radius(0px);
                    height: 46px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #444444;
                    padding-right: 72px;
                }
                input[type="submit"] {
                    @include border-radius(0px);
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    height: 46px;
                    width: 62px;
                    padding: 0;
                    opacity: 0;
                    z-index: 3;
                }
                &:before, &:after {
                    font-weight: 400;
                    font-family: "Font Awesome 5 Pro";
                    height: 46px;
                    width: 62px;
                    font-size: 14px;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #fff;
                    text-align: center;
                    line-height: 46px;
                    z-index: 1;
                    overflow: hidden;
                    @media #{$max-md} {
                        width: 46px;
                    }
                }
                &:before {
                    content: '';
                    background-color: $primary_color;
                }
                &:after {
                    z-index: 2;
                    content: '\f1d8';
                }
                &:hover:after {
                    -o-animation: toTopFromBottom 0.3s forwards;
                    -ms-animation: toTopFromBottom 0.3s forwards;
                    -webkit-animation: toTopFromBottom 0.3s forwards;
                    animation: toTopFromBottom 0.3s forwards;
                }
            }
        }
    }
    &.style2 {
        .mc4wp-form {
            width: 281px;
            height: 39px;
            .mc4wp-form-fields {
                position: relative;
                input[type="email"], input[type="text"] {
                    border: none;
                    background-color: #ebeef1;
                    @include border-radius(2px);
                    height: 39px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #777777;
                    padding-right: 72px;
                    @include box-shadow(0 5px 6px rgba(#000000, 0.17));
                }
                input[type="submit"] {
                    @include border-radius(0px);
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 14px;
                    color: $dark_color;
                    line-height: 39px;
                    @include border-radius(2px);
                    padding: 0 11px;
                    background-color: $secondary_color;
                    &:hover, &:focus {
                        background-color: $primary_color;
                        color: #fff;
                    }
                }
            }
        }
        .mc4wp-response .mc4wp-alert {
            position: absolute;
            z-index: 1;
            top: 58px;
            width: 100%;
            background-color: #fff;
            padding: 20px;
            @include box-shadow(0 3 5px rgba(0,0,0,0.12));
        }
    }
}

.ct-icon1 {
    margin: 0;
    list-style: none;
    &.style1 {
        a {
            display: inline-block;
            i {
                display: inline-block;
                font-size: 17px;
                color: $primary_color;
                text-align: center;
                margin-right: 18px;
                margin-bottom: 8px;
                &.fa-facebook-f {
                    color: #16599b;
                }
                &.fa-dribbble {
                    color: #eb568f;
                }
                &.fa-twitter {
                    color: #03a9f4;
                }
                &.fa-behance {
                    color: #0d6fff;
                }
            }
            &:hover {
                @include transform(translateY(-4px));
            }
        }
    }
}

.ct-contact-info1 {
    list-style: none;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 24px;
    color: #666666;
    @include font-family-heading($heading_default_font);
    i {
        color: $primary_color;
    }
    li {
        display: flex;
        flex-wrap: nowrap;
        @media #{$max-md} {
            br {
                display: none;
            }
        }
        + li {
            margin-top: 10px;
        }
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .ct-contact-icon {
        display: inline-block;
        margin-right: 10px;
    }
}

.el-max-200 {
    max-width: 200px;
}

.ct-blog-grid-layout1 {
    .entry-featured {
        img {
            @include border-radius(6px);
            -webkit-filter: grayscale(85%);
            filter: grayscale(85%);
            @include transition(all 300ms linear 0ms);
        }
        + .entry-body {
            position: relative;
            z-index: 1;
            margin-top: -60px;
            padding: 0 30px;
            @media #{$max-lg} {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    }
    .entry-title {
        line-height: 1.3;
        color: #222;
        margin-bottom: 2px;
        @media #{$max-sm} {
            font-size: 18px;
        }
        a {
            color: inherit;
            &:hover {
                text-decoration: underline;
                color: #444;
            }
        }
    }
    .entry-readmore {
        display: none;
        a {
            font-size: 15px;
            line-height: 28px;
            font-weight: 700;
            @include font-family-heading($heading_default_font);
            color: $primary_color;
            @media #{$max-sm} {
                font-size: 14px;
            }
            i {
                display: initial;
            }
            &:hover {
                color: $secondary_color;
            }
        }
    }
    .entry-meta {
        margin-top: 2px;
        margin-bottom: 4px;
        @media #{$max-sm} {
            font-size: 13px;
        }
    }
    .entry-holder {
        background-color: #fff;
        @include border-radius(5px);
        @include box-shadow(0 13px 29px rgba(#000000, 0.1));
        padding: 20px 20px 22px 30px;
        @include transition(all 300ms linear 0ms);
        @media #{$max-sm} {
            padding-left: 20px;
        }
    }
    .grid-item-inner {
        margin-bottom: 60px;
        &:hover {
            .entry-featured img {
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }
            .entry-holder {
                @include box-shadow(0 20px 29px rgba(#000000, 0.2));
            }
        }
    }
}

.ct-blog-grid-layout2 {
    .item-date {
        position: absolute;
        bottom: 28px;
        left: 28px;
        height: 60px;
        width: 60px;
        z-index: 99;
        color: #fff;
        text-align: center;
        @include font-family-heading($heading_default_font);
        span {
            position: absolute;
            width: 100%;
            left: 0;
            &:nth-child(1) {
                background-color: $secondary_color;
                top: 0;
                height: 25px;
                line-height: 25px;
                font-size: 14px;
                font-weight: 500;
            }
            &:nth-child(2) {
                background-color: $primary_color;
                bottom: 0;
                height: 35px;
                line-height: 35px;
                font-size: 17px;
                font-weight: 700;
            }
        }
    }
    .entry-featured {
        position: relative;
        overflow: hidden;
        img {
            @include transition(4s cubic-bezier(.24,.74,.58,1));
        }
    }
    .entry-title {
        line-height: 1.3;
        margin-bottom: 14px;
        font-size: 20px;
        @media #{$max-sm} {
            font-size: 18px;
        }
        a:hover {
            color: $primary_color;
        }
    }
    .item--content {
        line-height: 1.625;
        margin-bottom: 11px;
    }
    .entry-body {
        background-color: #fff;
        padding: 24px 28px 21px;
    }
    .entry-meta {
        margin-bottom: 14px;
        border-bottom: 1px solid #f0f0f0;
        border-top: 1px solid #f0f0f0;
        padding: 6px 0;
        font-size: 13px;
        li {
            color: #666;
        }
    }
    .grid-item-inner {
        @include box-shadow(0 0 24px rgba(#000, 0.1));
        margin-bottom: 40px;
        &:hover {
            .entry-featured img {
                @include transform(scale(1.2));
            }
        }
    }
    .ct-grid-pagination {
        margin-top: 0;
    }
}

.ct-client1 {
    .client-image {
        text-align: center;
        img {
            width: auto;
        }
        a {
            display: inline-block;
            vertical-align: top;
            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
        }
    }
    .slick-track {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .ct-clients-list-inner {
        margin: 0 -15px;
        .slick-slide {
            padding: 0 15px;
        }
    }
    &.style1 {
        .client-image a {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            opacity: 0.5;
            &:hover {
                opacity: 1;
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }
        }
    }
    &.style2 {
        .client-image a {
            &:hover {
                opacity: 0.87;
                @include transform(scale(0.9));
            }
        }
    }
}

.ct-blog-carousel-layout1 {
    overflow: hidden;
    .item--title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 7px;
        @media #{$max-xs} {
            font-size: 18px;
        }
        a {
            color: inherit;
            &:hover {
                color: $primary_color;
            }
        }
    }
    .item--holder {
        background-color: #fff;
        width: 100%;
        max-width: 355px;
        position: absolute;
        bottom: 0px;
        left: 0;
        padding: 30px 30px 30px 35px;
        @include transition(all 260ms linear 0ms);
        @include transform(translateX(-100%));
        @media #{$max-md} {
            right: 30px;
            width: auto;
        }
        @media #{$max-sm} {
            padding-left: 20px;
            padding-right: 20px;    
        }
        @media #{$max-xs} {
            @include transform(translateX(0%));
        }
        .entry-meta {
            color: #474747;
            margin-bottom: 8px;
        }
    }
    .item--readmore {
        font-size: 14px;
        line-height: 24px;
        @include font-family-heading($heading_default_font);
        font-weight: 600;
        i {
            color: $primary_color;
            margin-left: 6px;
            font-weight: 900;
        }
        span {
            border-bottom: 1px solid #000000;
            @include transition(all 300ms linear 0ms);
        }
        a {
            color: #000000;
            &:hover {
                color: $primary_color;
                span {
                    border-color: $primary_color;
                }
            }
        }
    }
    .item--featured {
        position: relative;
        overflow: hidden;
        margin-bottom: 80px;
        img {
            @include transition(all 260ms linear 0ms);
            -webkit-filter: grayscale(85%);
            filter: grayscale(85%);
        }
    }
    .grid-item-inner {
        position: relative;
        overflow: hidden;
        &:hover {
            .item--featured img {
                @include transform(scale(1.12));
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }
            .item--holder {
                @include transform(translateX(0%));
            }
        }
    }
    .slick-list {
        margin-right: -200px;
        @media #{$max-lg} {
            margin: 0;
        }
    }
    .slick-arrow {
        height: 40px;
        width: 40px;
        border: none;
        @include box-shadow(none !important);
        color: #fff;
        background-color: #3e3e3e;
        margin: 0 5px;
        bottom: 20px;
        @media #{$max-lg} {
            bottom: 0;
        }
        &:after {
            display: none;
        }
        &:hover, &:focus {
            background-color: $primary_color;
            color: #fff;
        }
        &.slick-prev {
            margin-left: -27px;
        }
        &.slick-next {
            margin-left: 27px;
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        padding-bottom: 0;
        @media #{$max-lg} {
            padding-bottom: 65px;
        }
    }
}

.ct-blog-carousel-layout2 {
    .item--featured {
        position: relative;
        &:before, &:after {
            position: absolute;
            content: '';
            background-color: rgba(24,24,24,.6);
            left: 0;
            width: 100%;
            height: 0%;
            @include transition(.6s ease);
            z-index: 1;
            opacity: 0;
        }
        &:before {
            top: 0;
        }
        &:after {
            bottom: 0;
        }
        .item--overlay-more {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
            margin: auto;
            @include transition(.3s ease);
            @include transform(scale(0));
            opacity: 0;
            z-index: 9;
            a {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 50px;
                background-color: #fff;
                @include border-radius(50px);
                line-height: 50px;
                text-align: center;
                color: #000;
                font-size: 20px;
                font-weight: 400;
                @include transition(.3s ease);
                @include font-family-heading($heading_default_font);
                &:hover {
                    background-color: $primary_color;
                    color: #fff;
                }
            }
        }
    }
    .item--title {
        font-size: 20px;
        line-height: 26px;
        margin-top: 5px;
        margin-bottom: 0;
        a {
            color: inherit;
        }
    }
    .item--holder {
        background-color: #fff;
        padding: 30px 32px 36px;
        @media #{$max-lg} {
            padding-left: 25px;
            padding-right: 20px;
        }
    }
    .item--readmore {
        margin-top: 15px;
    }
    .grid-item-inner {
        @include box-shadow(0 0 24px rgba(#000, 0.1));
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        margin-bottom: 50px;
        &:hover {
            @include box-shadow(0 25px 24px rgba(#000, 0.2));
            .item--featured {
                &:before, &:after {
                    height: 100%;
                    opacity: 1;
                }
                .item--overlay-more {
                    @include transform(scale(1));
                    opacity: 1;
                    -webkit-transition-delay: 0.3s;
                    transition-delay: 0.3s;
                }
            }
            .item--title a {
                color: $primary_color;
                text-decoration: underline;
            }
        }
    }
    .ct-carousel-inner {
        overflow: hidden;
        margin: 0 -30px;
        .slick-list {
            padding: 0 30px;
        }
    }
    .slick-slide {
        @include transition(.2s cubic-bezier(.24,.74,.58,1));
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        @media #{$min-md} {
            padding-left: 225px;
            padding-bottom: 0;
            .slick-arrow {
                height: 86px;
                line-height: 86px;
                width: 86px;
                border-radius: 4px;
                box-shadow: none !important;
                margin: 0;
                @include transform(translate(0,0));
                top: 0;
                bottom: auto;
                z-index: 99;
                background-color: transparent;
                &:hover {
                    background-color: $secondary_color;
                }
                &.slick-prev {
                    left: 45px;
                    right: auto;
                    &:before {
                        content: '\f060';
                        font-size: 17px;
                    }
                }
                &.slick-next {
                    left: 141px;
                    right: auto;
                    &:before {
                        content: '\f061';
                        font-size: 17px;
                    }
                }
            }
        }
        @media #{$mm-lg4} {
            padding-left: 135px;
            .slick-arrow {
                width: 50px;
                line-height: 50px;
                height: 50px;
                &.slick-next {
                    left: 105px;
                }
            }
        }
        @media #{$max-sm} {
            padding-bottom: 65px;
            .slick-arrow {
                bottom: 10px;
            }
        }
    }
}

.ct-blog-carousel-layout3 {
    .item--featured {
        position: relative;
        overflow: hidden;
        margin-bottom: 23px;
        img {
            @include transition(all 300ms linear 0ms);
        }
        &:hover img {
            @include transform(scale(1.1));
        }
        .item--category {
            position: absolute;
            bottom: 14px;
            right: 13px;
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            font-size: 14px;
            font-weight: 500;
            color: #000;
            line-height: 27px;
            padding: 0 15px;
            a {
                color: inherit;
                &:hover {
                    color: inherit;
                }
            }
        }
    }
    .item--meta {
        list-style: none;
        font-size: 14px;
        color: #707070;
        display: flex;
        flex-wrap: wrap;
        text-transform: capitalize;
        margin: 0 0 6px;
        li {
            margin-right: 28px;
            i {
                color: $gradient_color_from;
                margin-right: 4px;
            }
            a {
                color: inherit;
                &:hover {
                    color: $primary_color;
                }
            }
        }
    }
    .item--title {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 9px;
        a {
            color: inherit;
            &:hover {
                color: $gradient_color_from;
            }
        }
    }
    .item--content {
        color: #000;
        line-height: 1.625;
        margin-bottom: 22px;
    }
    .grid-item-inner {
        padding: 21px 21px 53px 21px;
        background-color: #fff;
        margin-bottom: 30px;
        @include transition(all .25s cubic-bezier(.645,.045,.355,1));
        @include box-shadow(0 8px 25px rgba(#000000, 0.15));
        &:hover {
            @include transform(translateY(-20px));
            @include box-shadow(0 20px 24px rgba(#0c0c0c, 0.17));
        }
    }
    .slick-slide {
        margin-top: 20px;
    }
    .ct-carousel-inner {
        overflow: hidden;
        margin: 0 -30px;
        .slick-list {
            padding: 0 30px;
            margin: 0 -15px;
        }
    }
    .slick-slide {
        @include transition(.2s cubic-bezier(.24,.74,.58,1));
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    &.dark {
        .item--featured .item--category {
            background-color: $gradient_color_to3;
            background-image: none;
        }
        .item--meta li {
            color: #e4e4e4;
            i {
                color: $gradient_color_from3;
            }
        }
        .item--title {
            color: #fff;
        }
        .item--content {
            color: #e4e4e4;
        }
        .btn-arrow {
            .btn-arrow-icon {
                background-color: $gradient_color_from3;
                background-image: none;
                i:before {
                    border-color: #0e0e0e #0e0e0e transparent transparent;
                }
                i:after {
                    border-color: transparent #0e0e0e #0e0e0e transparent;
                }
            }
            .btn-arrow-text {
                color: #fff;
                &:before {
                    background-color: #3b3b3b;
                }
            }
            &:hover {
                .btn-arrow-icon {
                    background-color: $gradient_color_to3;
                }
            }
        }
        .grid-item-inner {
            background-color: #0e0e0e;
        }
    }
}

.ct-blog-carousel-layout4 {
    .item--featured {
        position: absolute;
        top: -60px;
        left: -60px;
        right: -60px;
        bottom: -60px;
        z-index: -1;
        @include border-radius(4px);
        overflow: hidden;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
    }
    .item--overlay {
        content: '';
        background-color: #eef3f8;
        position: absolute;
        top: -1px;
        right: -1px;
        bottom: -1px;
        left: -1px;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        @include border-radius(4px);
        z-index: -1;
    }
    .item--title {
        font-size: 22px;
        line-height: 34px;
        color: #000e29;
        margin-bottom: 9px;
        a {
            color: inherit;
            &:hover {
                color: $gradient_color_from4;
            }
        }
    }
    .item--holder {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 17px;
        .item--avatar {
            min-width: 55px;
            width: 55px;
            margin-right: 16px;
            img {
                @include border-radius(55px);
            }
        }
    }
    .item--meta {
        font-size: 16px;
        line-height: 24px;
        color: #000e29;
        font-family: "Nunito Sans";
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        a {
            font-weight: 700;
            border-bottom: 1px solid #000e29;
            color: inherit;
            display: inline-block;
            line-height: 1;
            text-transform: capitalize;
            &:hover {
                color: $gradient_color_from4;
                border-color: $gradient_color_from4 !important;
            }
        }
    }
    .item--content {
        font-family: "Nunito Sans";
        font-size: 17px;
        line-height: 28px;
        color: #293753;
        margin-bottom: 25px;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
    }
    .grid-item-inner {
        position: relative;
        z-index: 1;
        padding: 37px 32px;
        @include border-radius(5px);
        overflow: hidden;
        @media #{$max-xs} {
            padding: 25px 20px;
        }
        &:hover {
            .item--overlay {
                background-color: rgba(#000e29, 0.85);
            }
            .item--featured {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            .item--title {
                color: #fff;
                a {
                    color: inherit;
                    &:hover {
                        color: inherit;
                        text-decoration: underline;
                    }
                }
            }
            .item--meta {
                color: #fff;
                a {
                    border-color: #fff;
                }
            }
            .item--content {
                color: #c6cad2;
            }
        }
    }
    .slick-dots {
        margin-top: 40px;
        li {
            button {
                height: 16px;
                width: 16px;
                @include border-radius(16px);
                border: 2px solid $gradient_color_from4;
                background-color: transparent;
                &:before, &:after {
                    display: none;
                }
            }
            &.slick-active button, &:hover button {
                background-color: $gradient_color_from4 !important;
            }
        }
    }
}

.ct-blog-carousel-layout5 {
    .item--divider {
        height: 1px;
        width: 100%;
        background-color: #eaeaea;
        margin-bottom: 15px;
    }
    .item-date {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
        i {
            margin-right: 6px;
            color: lighten($primary_color_hex, 0.2);
            font-size: 15px;
        }
    }
    .item--content {
        font-size: 16px;
        line-height: 24px;
        color: #666;
        margin-bottom: 16px;
    }
    .item--title {
        font-size: 20px;
        line-height: 1.45;
        a {
            color: #0e0d0f;
            &:hover {
                color: $primary_color;
            }
        }
    }
    .item--featured {
        position: relative;
        overflow: hidden;
        img {
            width: 100%;
            @include transition(all 1.2s);
        }
    }
    .item--author {
        margin-right: 30px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        flex-grow: 1;
        img {
            width: 38px;
            min-width: 38px;
            height: auto;
            margin-right: 7px;
        }
        a {
            font-size: 14px;
            color: #0e0d0f;
            font-weight: 700;
            text-transform: capitalize;
        }
    }
    .item--readmore {
        a {
            font-size: 15px;
            font-weight: 500;
            color: #0e0d0f;
            display: inline-flex;
            align-items: center;
            i {
                margin: 0 4px;
                color: $primary_color;
                font-size: 18px;
                @include transition(all .25s cubic-bezier(.3,.3,0,.8));
            }
            &:hover i {
                transform: translateX(4px);
            }
        }
        span {
            text-decoration: underline;
            text-decoration-color: rgba(0,0,0,0.32);
        }
    }
    .item--meta {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .item--holder {
        padding: 20px 30px;
        @media #{$max-sm} {
            padding-left: 22px;
            padding-right: 22px;
        }
    }
    .grid-item-inner {
        background-color: #fff;
        margin: 30px 0 60px;
        @include box-shadow(0 0 21px rgba(#010148, 0.06));
        @include transition(all .25s cubic-bezier(.3,.3,0,.8));
        &:hover {
            @include box-shadow(0 24px 20px rgba(#000002, 0.12));
            .item--featured img {
                @include transform(scale(1.18));
            }
        }
    }
    .ct-slick-carousel {
        margin: 0 -15px 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
        overflow: hidden;
        .slick-list {
            overflow: visible;
        }
    }
    .slick-slide {
        @include transition(all 200ms linear 0ms);
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
}

.ct-heading {
    .ct-heading--inner {
        display: inline-block;
        position: relative;
    }
    .dot-shape {
        width: 39px;
        height: 39px;
        position: absolute;
        top: 10px;
        left: 0;
        i {
            height: 9px;
            width: 9px;
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            &:nth-child(2) {
                background-color: $primary_color !important;
                left: 15px; 
            }
            &:nth-child(3) {
                left: 30px;
            }
            &:nth-child(4) {
                top: 15px;
                left: 14px;
            }
            &:nth-child(5) {
                top: 15px;
                left: 30px;
            }
            &:nth-child(6) {
                background-color: $primary_color !important;
                top: 29px;
                left: 30px;
            }
        }
    }
    .item--sub-title {
        margin-top: -3px;
        font-size: 16px;
        font-weight: 700;
        color: $primary_color;
        .sub-dot-shape {
            position: absolute;
            top: 50%;
            right: 0;
            @include transform(translate(0, -50%));
            width: 32px;
            height: 13px;
            &:before {
                content: "\f105";
                font-family: 'Font Awesome 5 Pro';
                font-weight: 900;
                position: absolute;
                right: 0;
                top: calc(50% - 1px);
                line-height: 1;
                font-style: normal;
                font-size: 20px;
                transform: translate(0, -50%);
                @extend .text-gradient;
            }
            i {
                width: 5px;
                height: 5px;
                @include border-radius(5px);
                @extend .bg-gradient;
                position: absolute;
                top: 4px;
                &:nth-child(2) {
                    left: 8px;
                }
                 &:nth-child(3) {
                    left: 16px;
                }
            }
            &.ps-left {
                right: auto;
                left: 0;
                transform: translate(0, -50%) scaleX(-1);
            }
        }
        &.style-line {
            span {
                display: inline-block;
                position: relative;
                padding-left: 51px;
                &:before {
                    content: '';
                    height: 4px;
                    width: 40px;
                    background-color: $primary_color;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    @include transform(translate(0, -50%));
                }
            }
        }
        &.style3 {
            font-size: 17px;
            color: $gradient_color_from2;
            margin-bottom: 2px;
            &:before {
                content: '//';
                @extend .text-gradient;
                @include background-horizontal($gradient_color_to, $gradient_color_from);
                margin-right: 2px;
            }
        }
        &.style4 {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
            span {
                display: inline-flex;
                padding-right: 44px;
                position: relative;
            }
        }
        &.style5 {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
            span {
                display: inline-flex;
                padding-left: 44px;
                padding-right: 44px;
                position: relative;
            }
        }
    }
    .item--title {
        b {
            font-weight: inherit;
            color: $primary_color;
        }
        cite {
            font-style: normal;
            color: $secondary_color;
        }
        i {
            color: $primary_color;
            font-style: normal;
            font-weight: 300;
        }
        strong {
            font-weight: 700;
        }
    }
    h3.item--title {
        font-size: 54px;
        line-height: 1.0555555556;
        letter-spacing: -0.01em;
        @media #{$max-lg} {
            font-size: 40px;
        }
        @media #{$max-lg} {
            font-size: 36px;
            line-height: 1.2;
        }
        @media #{$max-xs} {
            font-size: 30px;
            line-height: 1.2;
        }
    }
    &.ct-heading-dot {
        .item--sub-title {
            padding-left: 58px;
        }
        .item--title {
            padding-left: 58px;
            position: relative;
        }
    }
    &.ct-heading-line {
        .line-divider {
            height: 6px;
            span {
                width: 45px;
                height: 6px;
                @include background-horizontal($gradient_color_from4, $gradient_color_to4);
                display: inline-block;
                margin: 0 auto;
                @include border-radius(3px);
                vertical-align: top;
            }
        }
        .item--title {
            padding-top: 9px;
        }
    }
}

.ct-contact-form-layout1 {
    &.style1 {
        .wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border-color: #dadce1;
                @include border-radius(6px);
                color: #444444;
                font-family: 'Lato', sans-serif;
                font-size: 14px;
                &:focus {
                    border-color: $primary_color;
                }
            }
        }
        .wpcf7-submit {
            line-height: 60px;
            &.btn-size-default {
                padding-left: 46px;
                padding-right: 46px;
                margin-top: 10px;
                line-height: 50px;
            }
        }
        textarea {
            height: 140px;
        }
        .input-filled > label {
            color: #000;
            font-size: 17px;
            margin-bottom: 6px;
            @media #{$max-md} {
                font-size: 15px;
            }
            + .wpcf7-form-control-wrap  {
                .wpcf7-form-control {
                    &:not(.wpcf7-submit) {
                        border-color: #d5dce8;
                        color: #6f6f6f;
                        @include font-family-heading($heading_default_font);
                        font-size: 15px;
                        &:focus {
                            border-color: $primary_color;
                        }
                    }
                }
                textarea {
                    height: 180px;
                }
            }
        }
    }
    .ct-range-slider {
        height: 21px;
        background-color: #fff;
        @include border-radius(21px);
        @include box-shadow(0 10px 18px rgba(#0e0e0e, 0.17));
        position: relative;
        margin-bottom: 38px;
        .ui-slider-range {
            position: relative;
            height: 21px;
            background-color: $secondary_color;
            @include border-radius(21px);
        }
        .ui-slider-handle {
            width: 34px;
            height: 34px;
            border: 2px solid #fff;
            @include border-radius(100%);
            background-color: $primary_color;
            position: absolute;
            top: -7px;
            margin-left: -17px;
            cursor: pointer;
        }
    }
    .ct-range-meta {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 6px;
        padding: 10px 7px 0 7px;
        .wpcf7-form-control-wrap {
            display: inline-block !important;
            margin: 0 !important;
            width: auto !important;
        }
        label {
            font-weight: 500;
            color: #000;
            flex-grow: 1;
            margin-right: 20px;
        }
        .ct-range-result {
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
            @include box-shadow(none !important);
            background-color: transparent !important;
            color: 16px !important;
            font-weight: 700 !important;
            color: $primary_color !important;
            min-width: 100px;
            max-width: 150px;
            text-align: right;
            height: auto !important;
            @media #{$max-sm} {
                min-width: 90px;
                max-width: 90px;
            }
        }
        + .ct-range-slider {
            margin-left: 7px;
            margin-right: 7px;
        }
    }
    .form-title {
        font-weight: 700;
        margin-bottom: 22px;
    }
    .ct-range-footer {
        margin-top: 8px;
        font-size: 15px;
        color: #000;
        padding-right: 7px;
        a {
            color: inherit;
            font-weight: 700;
            border-bottom: 1px solid #000;
            &:hover {
                color: $primary_color;
                border-bottom: none;
            }
        }
    }
    &.style2 {
        .wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border-color: #dfe6e5;
                @include border-radius(5px);
                color: #000000;
                font-size: 15px;
                height: 54px;
                @include box-shadow(0 10px 16px rgba(#0e0e0e, 0.11));
                &:focus {
                    @include box-shadow(0 10px 18px rgba(#0e0e0e, 0.4));
                }
            }
        }
        .input-filled {
            position: relative;
        }
        .wpcf7-form-control-wrap {
            margin-bottom: 19px;
        }
        .form-icon {
            position: absolute;
            top: 50%;
            left: 22px;
            @include transform(translate(0, -50%));
            color: #000;
            z-index: 1;
            + .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-submit) {
                padding-left: 48px;
            }
        }
        .wpcf7-submit {
            margin-right: 7px;
            padding-left: 26px;
            padding-right: 26px;
        }
    }
}

.ct-portfolio-grid1, .ct-portfolio-carousel1 {
    .item--featured img {
        @include transition(all 300ms linear 0ms);
    }
    .item--title {
        font-size: 18px;
        color: #fff;
        margin-bottom: 6px;
        font-weight: 600;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--category {
        font-size: 14px;
        color: #8d8d8d;
        font-weight: 600;
        @include font-family-heading($heading_default_font);
        a {
            color: inherit;
            &:hover {
                color: #fff;
            }
        }
    }
    .item--readmore {
        a {
            display: inline-block;
            font-size: 30px;
            color: #fff;
            @include font-family-heading($heading_default_font);
            height: 41px;
            width: 41px;
            line-height: 41px;
            text-align: center;
            background-color: $secondary_color;
            @include border-radius(100%);
            &:hover {
                background-color: $primary_color;
            }
        }
    }
    .item--holder {
        @include transition(all 300ms linear 0ms);
        opacity: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px 24px 28px 30px;
        z-index: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        &:before {
            content: '';
            width: 100%;
            left: 0;
            bottom: 0;
            height: calc(100% + 70px);
            height: -webkit-calc(100% + 70px);
            @include background-gradient-bottom(rgba(#000409, 0.95), rgba(#000409, 0));
            position: absolute;
            z-index: -1;
        }
        .item--meta {
            flex-grow: 1;
            margin-right: 20px;
        }
    }
    .ct-load-more {
        margin-top: 0;
    }
    .grid-item-inner {
        position: relative;
        overflow: hidden;
        @include border-radius(6px);
        margin-bottom: 46px;
        &:hover {
            .item--holder {
                opacity: 1;
            }
            .item--featured img {
                @include transform(scale(1.1));
            }
        }
    }
}

.ct-portfolio-grid2 {
    .item--holder {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 99;
        padding: 0;
        @include transition(all 300ms linear 0ms);
        @include transform(scaleX(0));
        opacity: 0;
        @media #{$max-lg} {
            padding-left: 20px;
            padding-right: 20px;
        }
        @media #{$max-xs} {
            padding-left: 30px;
            padding-right: 30px;
        }
        .item--holder-overlay {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.9;
            background-color: #000000;
            @include transition(all 300ms linear 0ms);
        }
        .item--title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #fff;
            @media #{$max-lg} {
                font-size: 18px;
            }
            a {
                color: inherit;
                &:hover {
                    color: inherit;
                }
            }
        }
        .item--category {
            font-size: 14px;
            color: #8d8d8d;
            font-weight: 600;
            @include font-family-heading($heading_default_font);
            a {
                color: inherit;
                &:hover {
                    color: inherit;
                }
            }
        }
        .item--readmore {
            position: absolute;
            bottom: 30px;
            right: 30px;
            line-height: 1;
            a {
                display: inline-block;
                font-size: 32px;
                color: #fff;
                @include font-family-heading($heading_default_font);
                height: 54px;
                width: 54px;
                line-height: 54px;
                text-align: center;
                background-color: $primary_color;
                @include border-radius(100%);
                &:hover {
                    background-color: $secondary_color;
                }
            }
        }
        .item--meta {
            position: absolute;
            top: 30px;
            left: 30px;
        }
    }
    .grid-item-inner {
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
        @include border-radius(7px);
        &:hover .item--holder {
            @include transform(scaleX(1));
            opacity: 1;
        }
    }
    .ct-load-more {
        margin-top: 0;
    }
    @media #{$min-lg} {
        .ct-grid-inner > .grid-item:nth-child(1) {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
            .item--holder {
                .item--meta {
                    top: 65px;
                    left: 50px;
                }
                .item--readmore {
                    bottom: 70px;
                    right: 40px;
                }
            }
        }
    }
}

.ct-portfolio-carousel1 {
    .grid-item-inner {
        margin-bottom: 0;
    }
    @media #{$min-lg} {
        .ct-slick-carousel[data-arrows="true"] {
            padding-bottom: 0;
            padding-left: 90px;
            padding-right: 90px;
            @media #{$max-lg} {
                padding-left: 80px;
                padding-right: 80px;
            }
            .slick-arrow {
                top: 50%;
                @include transform(translate(0, -50%));
                margin: 0;
                &.slick-prev {
                    left: 15px;
                }
                &.slick-next {
                    right: 15px;
                    left: auto;
                }
            }
        }
    }
}

.ct-portfolio-carousel2 {
    .item--number {
        font-size: 56px;
        line-height: 1;
        font-weight: 700;
        color: #fff;
        margin-right: 24px;
        @media #{$max-lg} {
            font-size: 48px;
        }
    }
    .item--category {
        font-size: 14px;
        color: #bfc0c0;
        letter-spacing: 0.1em;
        margin-bottom: 6px;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--title {
        margin-bottom: 0;
        font-size: 20px;
        color: #fff;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--holder {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 111px 50px 46px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        @include transition(all .22s cubic-bezier(.645,.045,.355,1));
        overflow: hidden;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @extend .bg-gradient;
            z-index: -1;
            @include transition(all .22s cubic-bezier(.645,.045,.355,1));
            opacity: 0;
        }
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
    }
    .item--icon {
        position: absolute;
        z-index: 88;
        line-height: 1;
        font-size: 46px;
        color: #fff;
        left: 50px;
        top: 35px;
        opacity: 0;
        @include transition(all .22s cubic-bezier(.645,.045,.355,1));
        @media #{$max-lg} {
            left: 30px;
        }
    }
    .item--readmore {
        position: absolute;
        top: 0;
        right: 0;
        @include transform(translateY(-100%));
        @include transition(all .22s cubic-bezier(.645,.045,.355,1));
        a {
            width: 80px;
            height: 80px;
            display: block;
            line-height: 80px;
            color: #000;
            background-color: #fff;
            font-size: 26px;
            text-align: center;
            i {
                display: inline-flex;
                @include transition(all .22s cubic-bezier(.645,.045,.355,1));
            }
            &:hover i {
                transform: rotate(45deg);
            }
        }
    }
    .grid-item-inner {
        position: relative;
        z-index: 1;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(#000, 0.7);
            @include transition(all .22s cubic-bezier(.645,.045,.355,1));
        }
        &:hover {
            .item--category {
                color: rgba(#fff, 0.86);
            }
            &:before {
                opacity: 0;
            }
            .item--holder {
                padding-bottom: 62px;
                &:before {
                    opacity: 0.78;
                }
            }
            .item--readmore {
                @include transform(translateY(0%));
                transition-delay: 0.2s;
            }
            .item--icon {
                opacity: 1;
                @include transform(rotateY(180deg));
            }
        }
    }
    .ct-carousel-inner {
        margin: 0 -0.5px;
        .slick-slide {
            padding: 0 0.5px;
        }
    }
}

.ct-portfolio-detail {
    margin-bottom: 0;
    list-style: none;
    li {
        font-size: 15px;
        color: #666666;
        + li {
            margin-top: 8px;
        }
        i {
            color: $primary_color;
            margin-right: 4px;
        }
        label {
            font-weight: 600;
            color: #222222;
        }
    }
}

.ct-service-grid1 {
    .item--holder {
        border: 1px solid #e1e1e1;
        background-color: #fafafa;
        @include border-radius(4px);
        text-align: center;
        padding: 21px 30px 30px;
        position: relative;
    }
    .item--featured {
        position: relative;
        overflow: hidden;
        @include border-radius(4px 4px 0 0);
        img {
            @include border-radius(4px 4px 0 0);
            @include transition(all 300ms linear 0ms);
        }
        + .item--holder {
            border-top: none;
            @include border-radius(0 0 4px 4px);
        }
    }
    .item--title {
        font-size: 20px;
        margin-bottom: 9px;
        a {
            color: inherit;
            @include transition(all 200ms linear 0ms);
            &:hover {
                color: inherit;
            }
        }
    }
    .item--readmore {
        a {
            width: 39px;
            background-color: #000000;
            height: 39px;
            line-height: 39px;
            font-size: 20px;
            color: #fff;
            font-weight: 500;
            position: absolute;
            bottom: -18px;
            border-radius: 39px;
            left: 0;
            right: 0;
            margin: auto;
            @include transform(translateY(34px));
            opacity: 0;
            visibility: hidden;
            &:hover {
                background-color: $secondary_color;
            }
        }
    }
    .item--content {
        font-size: 15px;
        color: #000000;
        line-height: 24px;
    }
    .grid-item-inner {
        margin-bottom: 52px;
        @include box-shadow(0 9px 3px rgba(#01214a, 0.2));
        @include transition(all 200ms linear 0ms);
        @include border-radius(4px);
        &:hover {
            @include box-shadow(0 24px 24px rgba(#01214a, 0.2));
            .item--featured img {
                @include transform(scale(1.15));
            }
            .item--title a {
                color: $secondary_color;
            }
            .item--readmore a {
                @include transform(translateY(0px));
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

.ct-service-grid2 {
    .item--icon {
        line-height: 1;
        margin-bottom: 20px;
        i {
            font-size: 65px;
            color: $primary_color;
        }
        i, img {
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            display: inline-block;
        }
    }
    .item--title {
        font-size: 18px;
        color: #fff;
        margin-bottom: 16px;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--content {
        color: #cdcdcd;
        font-size: 15px;
        line-height: 24px;
    }
    .item--readmore {
        a {
            position: absolute;
            bottom: -19px;
            width: 63px;
            height: 40px;
            background-color: $primary_color;
            @include border-radius(3px 3px 0 0);
            left: 0;
            right: 0;
            margin: auto;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            @include transform(scaleY(0));
            transform-origin: bottom center;
            -webkit-transform-origin: bottom center;
            &:hover {
                background-color: $secondary_color;
            }
            svg {
                fill: #fff;
                height: 22px;
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
        }
    }
    .ct-load-more {
        margin-top: -2px;
        .btn {
            padding: 0 22px;
        }
    }
    .grid-item-inner {
        background-color: #0e0e0e;
        border: 1px solid #252525;
        @include border-radius(5px);
        padding: 37px 30px 47px;
        text-align: center;
        position: relative;
        margin-bottom: 52px;
        z-index: 1;
        &:before {
            content: '';
            position: absolute;
            bottom: -19px;
            left: -1px;
            right: -1px;
            height: 0;
            background-color: #252525;
            @include border-radius(5px);
            z-index: -1;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
        &:hover {
            &:before {
                height: calc(100% + 20px);
                height: -webkit-calc(100% + 20px);
            }
            .item--icon {
                i, img {
                    @include transform(rotateY(360deg));
                    -webkit-transition-delay: 0.3s;
                    transition-delay: 0.3s;
                }
            }
            .item--readmore a {
                @include transform(scaleY(1));
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
        }
    }
}

.ct-service-grid3 {
    .item--icon {
        line-height: 1;
        margin-bottom: 14px;
        i {
            font-style: 65px;
            color: $primary_color;
        }
        * {
            display: inline-block;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
    }
    .item--title {
        font-size: 20px;
        margin-bottom: 12px;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--content {
        font-size: 15px;
        line-height: 24px;
        color: #000;
    }
    .item--readmore {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .grid-item-inner {
        background-color: #fafafa;
        border: 1px solid #e9e7e7;
        @include border-radius(5px);
        padding: 28px 30px 24px;
        text-align: center;
        margin-bottom: 44px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        position: relative;
        &:hover {
            @include box-shadow(0 29px 32px rgba(#000, 0.1));
            .item--title a {
                color: $primary_color;
            }
            .item--icon * {
                @include transform(rotateY(360deg));
            }
        }
    }
}

.ct-service-grid4 {
    .item--icon {
        width: 90px;
        height: 90px;
        min-width: 90px;
        @include border-radius(90px);
        @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        position: relative;
        margin-right: 22px;
        @media #{$max-lg} {
            width: 70px;
            height: 70px;
            min-width: 70px;
            margin-right: 15px;
        }
        * {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
        }
        img {
            max-height: 40px;
            width: auto;
            @media #{$max-lg} {
                max-height: 34px;
            }
        }
        i {
            font-size: 40px;
            color: #fff;
        }
    }
    .item--title {
        margin-top: -5px;
        margin-bottom: 10px;
        font-size: 20px;
        color: #fff;
        @media #{$max-lg} {
            font-size: 18px;
        }
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--content {
        font-size: 15px;
        line-height: 24px;
        color: #cdcdcd;
        padding-right: 5px;
        @media #{$max-lg} {
            padding-right: 0;
            font-size: 13px;
        }
    }
    .item-readmore {
        font-size: 14px;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        color: $gradient_color_from2;
        margin-top: 7px;
        display: none;
        a {
            display: inline-block;
            span {
                position: relative;
                @extend .text-gradient;
                @include background-horizontal($gradient_color_to2, $gradient_color_from2);
                &:before {
                    content: '';
                    width: 0;
                    @include transition(.3s cubic-bezier(.24,.74,.58,1));
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    height: 1px;
                    @include background-horizontal($gradient_color_to2, $gradient_color_from2);
                }
            }
            &:hover span:before {
                width: 100%;
            }
        }
        svg {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            fill: $gradient_color_from2;
        }
    }
    .grid-item-inner {
        @include border-radius(7px);
        background-color: #262626;
        padding: 40px 20px 33px 29px;
        margin-bottom: 55px;
        display: flex;
        flex-wrap: nowrap;
        position: relative;
        @media #{$max-lg} {
            padding-left: 24px;
        }
        &:before {
            content: '';
            width: 9px;
            height: 55px;
            @include background-gradient-bottom($gradient_color_from, $gradient_color_to);
            position: absolute;
            left: -5px;
            top: 50%;
            @include transform(translate(0, -50%));
        }
        &:after {
            content: '';
            border-style: solid;
            border-color: $gradient_color_from2 $gradient_color_from2 transparent transparent;
            border-width: 9px;
            position: absolute;
            top: 9px;
            right: 9px;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            opacity: 0;
            @include transform(scale(2));
        }
        &:hover:after {
            opacity: 1;
            @include transform(scale(1));
        }
    }
    .ct-load-more {
        margin-top: -10px;
    }
}

.ct-list {
    &.style1 {
        font-size: 18px;
        color: #000000;
        line-height: 26px;
        .ct-list-dot {
            width: 11px;
            height: 11px;
            display: inline-block;
            border: 4px solid $primary_color;
            @include border-radius(11px);
            position: absolute;
            top: 8px;
            left: 0;
        }
        .ct-list-item {
            padding-left: 25px;
            position: relative;
            + .ct-list-item {
                margin-top: 14px;
            }
        }
    }
    &.style2 {
        font-style: 16px;
        line-height: 1.625;
        color: #000000;
        font-weight: 600;
        @include font-family-heading($heading_default_font);
        .ct-list-dot:before {
            content: '\f101';
            font-family: 'Font Awesome 5 Pro';
            font-weight: 900;
            color: $primary_color;
            font-style: normal;
            position: absolute;
            top: 0;
            left: 0;
        }
        .ct-list-item {
            padding-left: 20px;
            position: relative;
            + .ct-list-item {
                margin-top: 9px;
            }
        }
    }
    &.style3 {
        @include font-family-heading($heading_default_font);
        font-weight: 600;
        color: #000000;
        .ct-list-dot:before {
            content: "\f111";
            font-family: "Flaticon";
            height: 29px;
            width: 29px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba($secondary_color_hex, 0.38);
            @include border-radius(29px);
            font-style: normal;
            font-weight: normal;
            line-height: 29px;
            text-align: center;
        }
        .ct-list-item {
            padding-left: 42px;
            position: relative;
            + .ct-list-item {
                margin-top: 12px;
            }
        }
    }
}

.ct-accordion {
    .ct-ac-content {
        display: none;
    }
    &.layout1 {
        .ct-ac-title {
            font-size: 18px;
            color: #222;
            @include transition(all 300ms linear 0ms);
            font-weight: 700;
            position: relative;
            cursor: pointer;
            @include font-family-heading($heading_default_font);
            a {
                padding: 23px 65px 23px 25px;
                display: block;
                color: inherit;
                &:before {
                    content: '\f107';
                    font-family: 'Font Awesome 5 Pro';
                    font-size: 16px;
                    position: absolute;
                    top: 50%;
                    @include transform(translate(0, -50%));
                    right: 35px;
                    color: #9ba2aa;
                    @include transition(all 300ms linear 0ms);
                }
                &:after {
                    content: '\f136';
                    font-family: 'Material-Design-Iconic-Font';
                    top: 50%;
                    @include transform(translate(0, -50%));
                    right: 30px;
                    height: 21px;
                    width: 21px;
                    line-height: 21px;
                    background-color: #9ba2aa;
                    color: #fff;
                    text-align: center;
                    position: absolute;
                    @include border-radius(21px);
                    font-size: 12px;
                    @include transition(all 300ms linear 0ms);
                    opacity: 0;
                }
            }
        }
        .ct-ac-content {
            color: #0e0e0e;
            line-height: 1.625;
            padding: 0 65px 23px 25px;
        }
        .ct-accordion-item {
            border: 1px solid #e6e6e6;
            @include transition(all 300ms linear 0ms);
            @include border-radius(0px);
            background-color: #fff;
            position: relative;
            &:before {
                content: '';
                height: 0;
                width: 6px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: -1px;
                margin: auto;
                background-color: $primary_color;
                @include transition(all 300ms linear 0ms);
                opacity: 0;
            }
            + .ct-accordion-item {
                margin-top: 19px;
            }
            &.active {
                border-color: #fff;
                @include box-shadow(0 0 25px rgba(#000000, 0.15));
                &:before {
                    height: 100%;
                    opacity: 1;
                }
                .ct-ac-title a {
                    padding-bottom: 4px;
                    &:before {
                        opacity: 0;
                    }
                    &:after {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

.ct-tabs--layout1 {
    .ct-tabs-title {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .ct-tab-title {
            font-size: 16px;
            color: #000000;
            font-weight: 600;
            @include font-family-heading($heading_default_font);
            cursor: pointer;
            border: 1px solid #e4e4e4;
            line-height: 38px;
            background-color: #ebf1f1;
            padding: 0 18px;
            margin-right: 5px;
            margin-bottom: 15px;
            @include transition(all 200ms linear 0ms);
            position: relative;
            display: inline-flex;
            align-items: center;
            @media #{$max-lg} {
                padding: 0 16px;
                font-size: 15px;
            }
            @media #{$max-md} {
                padding: 0px 10px;
                font-size: 13px;
            }
            svg {
                height: 16px;
            }
            &:before {
                content: '';
                opacity: 0;
                @include transition(all 200ms linear 0ms);
                width: 0;
                height: 0;
                position: absolute;
                left: 50%;
                @include transform(translate(-50%, 0));
                bottom: -20px;
                border-width: 10px;
                border-style: solid;
                border-color: $primary_color transparent transparent;
                @media #{$max-lg} {
                    bottom: -14px;
                    border-width: 7px;
                }
            }
            &.active {
                border-color: $primary_color;
                background-color: $primary_color;
                color: #fff;
                &:before {
                    opacity: 1;
                }
                svg {
                    fill: #fff;
                }
            }
            * {
                margin-right: 5px;
                @media #{$max-md} {
                    margin-right: 3px;
                }
            }
            &:first-child {
                @include border-radius(3px 0 0 3px);
            }
            &:last-child {
                margin-right: 0;
                @include border-radius(0 3px 3px 0);
            }
        }
    }
    .ct-tabs-content {
        padding-top: 15px;
        .ct-tab-content {
            display: none;
            p:last-child {
                margin-bottom: 0;
            }
        }
    }
    &.style2 {
        .ct-tabs-title .ct-tab-title {
            border-color: #ebf1f1;
            font-size: 17px;
            line-height: 50px;
            padding: 0 30px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            @media #{$max-md} {
                font-size: 14px;
                line-height: 44px;
                padding: 0 12px;
            }
            i {
                font-size: 24px;
                margin-right: 10px;
                @media #{$max-md} {
                    font-style: 14px;
                    margin-right: 6px;
                }
            }
            &.active {
                border-color: $primary_color;
            }
        }
        .ct-tabs-content {
            padding-top: 25px;
        }
    }
    &.style3 {
        .ct-tabs-title .ct-tab-title {
            border-color: #ebf1f1;
            font-size: 14px;
            line-height: 50px;
            padding: 0 28px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            min-width: 130px;
            justify-content: center;
            @media #{$max-md} {
                line-height: 44px;
                padding: 0 12px;
                min-width: auto;
            }
            &:before {
                border-width: 14px;
                bottom: -28px;
            }
            i {
                font-size: 18px;
                margin-right: 10px;
                @media #{$max-md} {
                    font-style: 14px;
                    margin-right: 6px;
                }
            }
            &.active {
                border-color: $primary_color;
            }
        }
        .ct-tabs-content {
            padding-top: 25px;
        }
    }
    &.style4 {
        .ct-tabs-title .ct-tab-title {
            background-color: #3e3e3e;
            border-color: #3e3e3e;
            color: #fff;
            i {
                color: $gradient_color_to3;
            }
            &.active {
                background-color: $gradient_color_from3;
                border-color: $gradient_color_from3;
                &:before {
                    border-color: $gradient_color_from3 transparent transparent;
                }
                i {
                    color: #fff;
                }
            }
        }
        .ct-contact-form-layout1.style2 {
            .form-title {
                color: #fff;
            }
            .ct-range-footer {
                color: #e4e4e4;
                a {
                    border-color: #e4e4e4;
                }
                a:hover {
                    color: $gradient_color_to3;
                    border-color: $gradient_color_to3;
                }
            }
            .ct-range-meta {
                label {
                    color: #fff;
                }
                .ct-range-result {
                    color: #fff !important;
                }
            }
            .ct-range-slider .ui-slider-range, .ct-range-slider .ui-slider-handle {
                background-color: $gradient_color_to3;
            }
            .wpcf7-submit {
                background-color: $gradient_color_from3;
            }
            .wpcf7-form-control:not(.wpcf7-submit) {
                border-color: #3e3e3e;
                background-color: #3e3e3e;
                color: #ffffff;
                &:focus {
                    border-color: $gradient_color_to3;
                }
            }
            .form-icon {
                color: $gradient_color_to3;
            }

}
    }
    &.style5 {
        .ct-tabs-title .ct-tab-title:not(.active) {
            background-color: #ebeef1;
        }
        .ct-contact-form-layout1 .ct-range-slider .ui-slider-range {
            @extend .bg-gradient;
        }
        .ct-contact-form-layout1 .ct-range-slider .ui-slider-handle {
            border: none;
            @extend .bg-gradient;
            &:focus, &:hover {
                outline: none;
                border: none;
                box-shadow: none;
            }
        }
        .ct-contact-form-layout1.style2 .wpcf7-form-control:not(.wpcf7-submit) {
            color: rgba(#000000, 0.57);
            font-family: inherit;
        }
        .ct-contact-form-layout1.style2 .form-icon {
            color: #b6b6b6;
        }
        .ct-contact-form-layout1.style2 .wpcf7-submit {
            @include background-gradient-button(to right, $gradient_color_from 0%, $gradient_color_to 51%, $gradient_color_from 100%);
            background-size: 200%, auto;
            border-radius: 0px;
            &:before, &:after {
                display: none;
            }
            &:hover, &:focus, &:active {
                color: #fff;
                background-position: right center;
            }
        }
    }
    &.style6 {
        .ct-tabs-title {
            border-top: 2px solid #efeff2;
            border-bottom: 2px solid #efeff2;
            justify-content: center;
            margin-bottom: 45px;
            .ct-tab-title {
                font-size: 16px;
                background-color: transparent;
                border: none;
                line-height: 74px;
                color: #080808;
                margin: 0 40px;
                &:before {
                    display: none;
                }
                &:after {
                    content: '';
                    width: 95px;
                    height: 6px;
                    @extend .bg-gradient;
                    position: absolute;
                    right: 0;
                    left: 0;
                    margin: auto;
                    bottom: -2px;
                    @include transition(all .25s cubic-bezier(.3,.3,0,.8));
                    transform: scaleX(0);
                    opacity: 0;
                }
                &.active:after {
                    transform: scaleX(1);
                    opacity: 1;
                }
            }
        }
    }
}

.ct-pricing-layout1 {
    .ct-pricing-body {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
        &.ct-pricing-hide {
            display: none;
        }
    }
    .ct-pricing-item {
        margin-bottom: 30px;
    }
    .pricing-1-column .ct-pricing-item {
        width: 100%;
        padding: 0 15px;
    }
    .pricing-2-column .ct-pricing-item {
        width: 50%;
        padding: 0 15px;
    }
    .pricing-3-column .ct-pricing-item {
        width: 33.33%;
        padding: 0 15px;
        @media #{$max-md} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }
    .pricing-4-column .ct-pricing-item {
        width: 25%;
        padding: 0 15px;
        @media #{$max-md} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }
    .pricing-5-column .ct-pricing-item {
        width: 20%;
        padding: 0 15px;
        @media #{$max-md} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }
    .ct-pricing-tab-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-bottom: 35px;
        .ct-pricing-tab-item {
            font-size: 18px;
            line-height: 28px;
            color: #0e0e0e;
            @include font-family-heading($heading_default_font);
            margin: 0 8px;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            cursor: pointer;
            padding-left: 29px;
            @media #{$max-xs} {
                font-size: 16px;
                padding-left: 24px;
            }
            &:before, &:after {
                content: '';
                position: absolute;
                top: 50%;
                @include transform(translate(0, -50%));
                @include transition(all 300ms linear 0ms);
            }
            &:before {
                left: 0;
                width: 18px;
                height: 18px;
                @include border-radius(18px);
                border: 2px solid #b8b5b5;
            }
            &:after {
                width: 6px;
                height: 6px;
                opacity: 0;
                @include border-radius(6px);
                left: 6px;
                background-color: $primary_color;
            }
            &.active {
                font-weight: 700;
                &:before {
                    border-color: $primary_color;
                }
                &:after {
                    opacity: 1;
                }
            }
            cite {
                font-size: 12px;
                font-weight: 700;
                color: #1a1e66;
                padding: 0 14px;
                background-color: #def7de;
                border-radius: 2px;
                line-height: 27px;
                font-style: normal;
                display: inline-block;
                @include font-family-default($body_default_font);
                margin-left: 10px;
                @media #{$max-xs} {
                    padding: 0 8px;
                }
            }
        }
    }
    .item-popular {
        @include font-family-default($body_default_font);
        font-size: 14px;
        font-weight: 700;
        color: $primary_color;
        min-height: 27px;
        margin-bottom: 5px;
    }
    .ct-pricing-title {
        font-size: 25px;
        margin: 0 0 3px;
        @media #{$max-lg} {
            font-size: 20px;
        }
    }
    .ct-pricing-subtitle {
        color: #666;
        margin-bottom: 11px;
    }
    .ct-pricing-price1 {
        font-size: 48px;
        line-height: 1;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        margin-bottom: 14px;
        @media #{$max-lg} {
            font-size: 36px;
        }
    }
    .ct-pricing-desc {
        font-size: 13px;
        line-height: 22px;
        color: #000;
        @include font-family-heading($heading_default_font);
        @media #{$min-xl} {
            padding: 0 30px;
        }
    }
    .ct-pricing-price2 {
        font-size: 18px;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        margin-bottom: 19px;
    }
    .ct-pricing-button {
        .btn {
            line-height: 40px;
            @include border-radius(0px);
            padding: 0 27px;
        }
    }
    .ct-pricing-icon {
        line-height: 1;
        margin-bottom: 11px;
        i {
            font-size: 64px;
            color: $primary_color;
        }
    }
    .ct-pricing-item-inner {
        background-color: #fff;
        padding: 34px 20px 40px;
        text-align: center;
        @include box-shadow(0 11px 35px rgba(#000000, 0.1));
        @media #{$max-lg} {
            padding-left: 15px;
            padding-right: 15px;
        }
        &.ct-pricing-featured {
            background-color: #0e0e0e;
            @include box-shadow(none);
            .ct-pricing-title, .ct-pricing-price1, .ct-pricing-price2 {
                color: #fff;
            }
            .ct-pricing-subtitle, .ct-pricing-desc {
                color: #faf7f0;
            }
        }
    }
}

.ct-testimonial-grid1, .ct-testimonial-carousel1 {
    .item-icon i {
        position: absolute;
        font-size: 110px;
        font-weight: 700;
        color: $primary_color;
        @include font-family-heading($heading_default_font);
        font-family: "Playfair Display";
        font-style: normal;
        top: -88px;
        left: 44px;
    }
    .item--image {
        max-width: 105px;
        margin: -74px auto 17px auto;
        position: relative;
        img {
            @include border-radius(105px);
        }
    }
    .item--title {
        font-size: 22px;
        color: #000a93;
        margin-bottom: 2px;
    }
    .item--position {
        font-size: 15px;
        color: #666666;
    }
    .item--description {
        font-size: 17px;
        line-height: 26px;
        color: #000000;
        margin-bottom: 12px;
    }
    .item--inner {
        position: relative;
        border: 1px solid #e1e1e1;
        background-color: #eff1f5;
        @include border-radius(5px);
        padding: 30px 40px 29px 40px;
        text-align: center;
        margin-top: 44px;
        margin-bottom: 46px;
        @include box-shadow(0 9px 3px rgba(#01214a, 0.2));
        @include transition(all 200ms linear 0ms);
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
        &:hover {
            @include transform(translateY(-16px));
        }
    }
}

.ct-testimonial-carousel1  {
    .slick-slide {
        margin-top: 30px;
    }
    .slick-dots {
        max-width: 550px;
        width: 100%;
        flex-wrap: nowrap;
        margin: 12px auto 0 auto;
        height: 13px;
        background-color: #e1e6ec;
        @include border-radius(13px);
        li {
            margin: 0;
            width: 50%;
            button {
                @include border-radius(13px);
                width: 100%;
                height: 13px;
                background-color: transparent;
                &:hover {
                    background-color: transparent;
                }
            }
            &.slick-active button, &.slick-active button:focus {
                background-color: $primary_color;
                @include box-shadow(0 0 10px rgba($primary_color_hex, 0.48));
            }
        }
    }
}

.ct-testimonial-carousel2 {
    .item-rating {
        font-size: 14px;
        color: #f5b011;
        margin-top: 18px;
    }
    .item-effect {
        width: 230px;
        height: 230px;
        position: absolute;
        bottom: -115px;
        right: -115px;
        background-color: rgba($primary_color_hex, 0.5);
        @include border-radius(100%);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        @include transform(scale(0));
        span {
            background-color: rgba($primary_color_hex, 0.5);
            position: absolute;
            top: 50%;
            left: 50%;
            @include border-radius(100%);
            @include transform(translate(-50%, -50%));
            &:nth-child(1) {
                width: 108px;
                height: 108px;
            }
            &:nth-child(2) {
                width: 176px;
                height: 176px;
            }
        }
    }
    .item--description {
        background-color: #fff;
        @include border-radius(13px 13px 13px 0px);
        color: #000000;
        @include box-shadow(0 7px 24px rgba(#02379c, 0.2));
        margin-bottom: 30px;
        position: relative;
        .item--description-inner {
            padding: 43px 36px 48px;
            position: relative;
            overflow: hidden;
            @include border-radius(13px 13px 13px 0px);
        }
        &:before {
            content: '';
            border-width: 20px;
            border-style: solid;
            border-color: #fff transparent transparent #fff;
            position: absolute;
            left: 0;
            bottom: -34px;
        }
    }
    .item--holder {
        display: flex;
        flex-wrap: nowrap;
        margin-left: 22px;
        .item--image {
            width: 67px;
            height: 67px;
            min-width: 67px;
            margin-right: 20px;
            @include border-radius(67px);
            border: 5px solid #fff;
            box-shadow: 0 7px 6px rgba(#000f2c, 0.19), 0 1px 27px rgba(#000000, 0.29) inset;
            -webkit-box-shadow: 0 7px 6px rgba(#000f2c, 0.19), 0 1px 27px rgba(#000000, 0.29) inset;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .item--title {
            margin-bottom: 9px;
            font-size: 22px;
        }
        .item--position {
            font-size: 14px;
            color: #000;
            line-height: 1.2;
            @include font-family-heading($heading_default_font);
        }
    }
    .item--inner {
        margin-top: 20px;
        &:hover .item-effect {
            @include transform(scale(1));
        }
    }
    .ct-slick-carousel {
        margin: 0 -30px 0 -30px;
        padding-left: 30px;
        padding-right: 30px;
        overflow: hidden;
        .slick-list {
            overflow: visible;
        }
    }
    .slick-slide {
        @include transition(all 200ms linear 0ms);
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        padding-bottom: 108px;
        .slick-arrow {
            bottom: 25px;
            width: 54px;
            height: 54px;
            line-height: 54px;
            @include box-shadow(0 7px 7px rgba(#000f2c, 0.18) !important);
            &:hover {
                @include box-shadow(0 6px 18px rgba(#020826, 0.35) !important);
            }
            &:before {
                font-family: 'Material-Design-Iconic-Font';
                font-weight: 400;
                font-size: 26px;
            }
            &.slick-prev:before {
                content: '\f2ff';
            }
            &.slick-next:before {
                content: '\f301';
            }
        }
    }
}

.ct-testimonial-carousel3  {
    .item--image {
        min-width: 244px;
        width: 244px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        @include background-gradient-rotate(-30deg, $gradient_color_from, $gradient_color_to);
        @include border-radius(20px 0 0 20px);
        position: relative;
        z-index: 1;
        @media #{$max-lg} {
            min-width: 200px;
            width: 200px;
        }
        @media #{$max-md} {
            width: 100%;
            min-width: 100%;
            @include border-radius(20px 20px 0 0px);
        }
        &:before {
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include border-radius(20px 0 0 20px);
            background-image: url(../images/bg-testimonial.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        img {
            border: 5px solid #fff;
            @include border-radius(150px);
        }
    }
    .item--title {
        font-size: 20px;
        margin-bottom: 7px;
        color: #fff;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--description {
        font-size: 16px;
        line-height: 24px;
        color: #c6c6c6;
        margin-bottom: 5px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--position {
        font-size: 15px;
        font-style: italic;
        @extend .text-gradient;
        @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        display: inline-block;
    }
    .item--content {
        padding: 22px 30px 27px;
    }
    .item-icon {
        height: 59px;
        width: 59px;
        min-width: 59px;
        background-color: #4d4d4d;
        position: relative;
        color: #fff;
        font-size: 60px;
        font-weight: 700;
        font-family: "Playfair Display";
        line-height: 59px;
        text-align: center;
        margin-right: 20px;
        span {
            @include transform(rotate(180deg));
            display: inline-block;
            position: relative;
            top: -8px;
        }
    }
    .item-rating {
        font-size: 14px;
        color: $gradient_color_from2;
        flex-grow: 1;
        text-align: right;
        padding-right: 50px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--meta {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .item--holder {
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        @include border-radius(0 20px 20px 0);
        position: relative;
        &:before {
            content: '';
            width: 9px;
            height: 110px;
            @include transform(translate(0, -50%));
            top: 50%;
            right: -1px;
            position: absolute;
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
        @media #{$max-md} {
            @include border-radius(0 0 20px 20px);
        }
    }
    .item--inner  {
        display: flex;
        flex-wrap: nowrap;
        background-color: #262626;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        @include border-radius(20px);
        position: relative;
        @media #{$max-md} {
            display: block;
        }
        &:before {
            content: '';
            background-color: #444444;
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: -12px;
            height: 12px;
            @include border-radius(0 0 8px 8px);
        }
        &:hover {
            @include transform(translateY(-18px));
            .item--holder {
                @include background-horizontal($gradient_color_to2, $gradient_color_from2);
                &:before {
                    background-color: #fff;
                    background-image: none;
                }
            }
            .item--title {
                color: #000;
            }
            .item--description {
                color: #262626;
            }
            .item--position {
                @include background-horizontal($gradient_color_to, $gradient_color_from);
            }
            .item-rating {
                color: #000;
                i {
                    font-weight: 400;
                }
            }
        }
    }
    .slick-slide {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .slick-dots {
        max-width: 550px;
        width: 100%;
        flex-wrap: nowrap;
        margin: 40px auto 0 auto;
        height: 13px;
        background-color: #393939;
        @include border-radius(13px);
        @media #{$max-sm} {
            max-width: 260px;
        }
        li {
            margin: 0;
            width: 50%;
            button {
                @include border-radius(13px);
                width: 100%;
                height: 13px;
                background-color: transparent;
                &:hover {
                    background-color: transparent;
                }
            }
            &.slick-active button, &.slick-active button:focus {
                @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            }
        }
    }
}

.ct-testimonial-carousel4 {
    .item--description, .item--position {
        font-family: "Nunito Sans";
        font-size: 17px;
        line-height: 26px;
        color: #000e29;
        margin-bottom: 17px;
    }
    .item--position {
        font-size: 16px;
        margin-bottom: 0;
    }
    .item--title {
        font-size: 22px;
        margin-bottom: 1px;
        @media #{$max-sm} {
            font-size: 18px;
        }
    }
    .item--image {
        width: 70px;
        min-width: 70px;
        margin-right: 28px;
        position: relative;
        z-index: 1;
        @media #{$max-sm} {
            margin-right: 22px;
        }
        &:before, &:after {
            content: '';
            z-index: -2;
            top: -9px;
            left: -9px;
            position: absolute;
            width: 88px;
            height: 88px;
        }
        &:before {
            @include background-gradient-bottom($gradient_from_hex4, $gradient_color_to4);
            @include border-radius(88px);
        }
        &:after {
            height: 150%;
            @include background-gradient-bottom(rgba(#fff, 0), rgba(#fff, 1));
            @include border-radius(0);
        }
        span {
            width: 82px;
            height: 82px;
            background-color: #fff;
            @include border-radius(82px);
            position: absolute;
            top: -6px;
            left: -6px;
            z-index: -1;
        }
        img {
            @include border-radius(70px);
        }
    }
    .item--holder {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .item--inner {
        padding: 40px 32px;
        background-color: #fff;
        @include border-radius(9px);
        position: relative;
        @include box-shadow(0 2px 25px rgba(#051c31, 0.07));
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        &:before {
            content: '';
            height: 6px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            @include background-horizontal($gradient_from_hex4, $gradient_color_to4);
            @include border-radius(9px 9px 0 0);
            opacity: 0;
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
        }
        &:hover {
            @include transform(translateY(-28px));
            @include box-shadow(0 25px 25px rgba(#051c31, 0.14));
            &:before {
                opacity: 1;
            }
        }
    }
    .slick-slide {
        margin-top: 30px;
    }
    .ct-slick-carousel {
        margin: 0 -50px 0 -50px;
        padding-left: 50px;
        padding-right: 50px;
        overflow: hidden;
        .slick-list {
            overflow: visible;
        }
    }
    .slick-slide {
        @include transition(all 200ms linear 0ms);
        margin-top: 30px;
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .slick-dots {
        li {
            button {
                height: 16px;
                width: 16px;
                @include border-radius(16px);
                border: 2px solid $gradient_color_from4;
                background-color: transparent;
                &:before, &:after {
                    display: none;
                }
            }
            &.slick-active button, &:hover button {
                background-color: $gradient_color_from4 !important;
            }
        }
    }
}

.item--social i:before {
    font-family: FontAwesome;
}
.ct-team-grid1, .ct-team-carousel1 {
    .item--image {
        max-width: 178px;
        margin: 0 auto 49px auto;
        position: relative;
        img {
            width: 100%;
            @include border-radius(178px);
        }
    }
    .item--social-btn {
        width: 44px;
        height: 44px;
        background-color: #0e0e0e;
        color: #fff;
        font-size: 16px;
        line-height: 44px;
        @include font-family-heading($heading_default_font);
        display: inline-block;
        @include border-radius(44px);
        @include box-shadow(0 10px 16px rgba(#000000, 0.26));
        @include transition(all 200ms linear 0ms);
        cursor: pointer;
        position: absolute;
        bottom: -22px;
        left: 0;
        right: 0;
        margin: auto;
        @include transition(all 300ms linear 0ms);
        &:before, &:after {
            @include transition(all 300ms linear 0ms);
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            font-weight: 400;
            font-family: 'Font Awesome 5 Pro';
        }
        &:before {
            content: '\f067';
        }
        &:after {
            content: '\f068';
        }
        &:hover {
            background-color: $primary_color;
        }
        &.active {
            @include box-shadow(0 11px 7px rgba($primary_color_hex, 0.26));
            background-color: $primary_color;
            &:before {
                opacity: 0;
            }
            &:after {
                opacity: 1;
            }
        }
    }
    .item--social {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        i {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-style: 18px;
            color: $primary_color;
            background-color: #fff;
            display: inline-block;
            @include border-radius(40px);
            @include box-shadow(0 10px 16px rgba(#000000, 0.26));
            &:before {
                display: inline-block;
            }
            &.fa-facebook {
                color: #16599b;
            }
            &.fa-twitter {
                color: #03a9f4;
            }
            &.fa-dribbble {
                color: #eb568f;
            }
        }
        a {
            position: absolute;
            @include transition(all 200ms linear 0ms);
            opacity: 0;
            &:hover i:before {
                -o-animation: toRightFromLeft 0.3s forwards;
                -ms-animation: toRightFromLeft 0.3s forwards;
                -webkit-animation: toRightFromLeft 0.3s forwards;
                animation: toRightFromLeft 0.3s forwards;
            }
            &:nth-child(2) {
                bottom: 6px;
                right: 10px;
            }
            &:nth-child(3) {
                bottom: 48px;
                right: -15px;
            }
            &:nth-child(4) {
                bottom: 100px;
                right: -15px;
            }
            &:nth-child(5) {
                bottom: 140px;
                right: 10px;
            }
            &:nth-child(6) {
                top: -20px;
                right: 0;
                left: 0;
                margin: auto;
            }
            &:nth-child(7), &:nth-child(8), &:nth-child(9), &:nth-child(10), &:nth-child(11) {
                display: none;
            } 
        }
        &.active a {
            opacity: 1;
            &:nth-child(3) {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
            &:nth-child(4) {
                -webkit-transition-delay: 0.15s;
                transition-delay: 0.15s;
            }
            &:nth-child(5) {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
            &:nth-child(6) {
                -webkit-transition-delay: 0.25s;
                transition-delay: 0.25s;
            }
        }
    }
    .item--title {
        margin-bottom: 7px;
        font-size: 22px;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .item--position {
        font-style: 17px;
        color: #737272;
        line-height: 1.2;
    }
    .item--description {
        margin-top: 19px;
        line-height: 1.625;
        color: #000000;
    }
    .item--inner {
        margin-bottom: 47px;
        border: 1px solid #ededed;
        background-color: #fff;
        @include border-radius(3px);
        padding: 37px 40px 40px;
        text-align: center;
        @include box-shadow(0 0 76px rgba(#000000, 0.1));
        position: relative;
        @include transition(all 200ms linear 0ms);
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
        &:before, &:after {
            content: '';
            height: 7px;
            @include border-radius(3px 3px 0 0);
            background-color: $primary_color;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            @include transition(all 200ms linear 0ms);
        }
        &:after {
            top: -1px;
            left: -1px;
            right: -1px;
            opacity: 0;
        }
        &:hover {
            border-color: #fff;
            @include box-shadow(0 8px 65px rgba(#000000, 0.25));
            &:before {
                opacity: 0;
            }
            &:after {
                opacity: 1;
            }
        }
    }
}

.ct-team-carousel1 {
    .item--inner  {
        margin: 60px 0 80px;
    }
    .ct-slick-carousel {
        margin: 0 -50px 0 -50px;
        padding-left: 50px;
        padding-right: 50px;
        overflow: hidden;
        .slick-list {
            overflow: visible;
        }
    }
    .slick-slide {
        @include transition(all 200ms linear 0ms);
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        padding-bottom: 0;
        .slick-arrow {
            width: 52px;
            height: 52px;
            line-height: 52px; 
            display: block;
            top: 50%;
            bottom: auto;
            @include transform(translate(0, -50%));
            z-index: 99;
            margin: 0;
            @media #{$max-sm} {
                opacity: 0;
            }
            &.slick-prev {
                left: 41px;
                right: auto;
                @media #{$max-lg} {
                    left: 82px;
                }
            }
            &.slick-next {
                left: auto;
                right: 41px;
                @media #{$max-lg} {
                    right: 82px;
                }
            }
        }
        &:hover .slick-arrow {
            opacity: 1;
        }
    }
}

.ct-team-carousel2 {
    .item--holder {
        background-color: #fff;
        @include border-radius(20px);
        padding: 34px 30px 116px 30px;
        @include box-shadow(0 8px 35px rgba(#000000, 0.12));
        text-align: center;
        position: relative;
        z-index: 1;
        &:before, &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            @include border-radius(20px);
            z-index: -1;
            opacity: 0;
        }
        &:before {
            @include background-gradient-bottom($gradient_color_from 40%, $gradient_color_to);
            z-index: -2;
        }
        &:after {
            background-image: url(../images/bg-team-item.png);
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
    .item--title {
        margin-bottom: 0;
        font-size: 22px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--position {
        font-size: 15px;
        color: $gradient_color_from;
        margin-bottom: 6px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--description {
        line-height: 1.625;
        color: #000;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--social {
        width: 40px;
        position: absolute;
        top: 50%;
        right: -20px;
        @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        @include border-radius(40px);
        padding: 22px 0;
        @include transform(translate(0, -50%) scaleY(0));
        transform-origin: 0 0 0;
        -webkit-transform-origin: 0 0 0;
        -ms-transform-origin: 0 0 0;
        -o-transform-origin: 0 0 0;
        @include transition(all 300ms linear 0ms);
        a {
            width: 40px;
            height: 34px;
            display: block;
            font-size: 16px;
            color: #000;
            text-align: center;
            line-height: 34px;
            &:hover {
                @include transform(translateX(4px));
            }
        }
        i {
            font-family: FontAwesome;
            font-weight: 400;
        }
    }
    .item--image {
        max-width: 178px;
        border: 5px solid $gradient_color_from;
        @include border-radius(178px);
        margin: -89px auto 0 auto;
        position: relative;
        z-index: 1;
        img {
            border: 6px solid #fff;
            @include border-radius(168px);
        }
        a {
            position: absolute;
            bottom: -23px;
            left: 0;
            right: 0;
            margin: auto;
            width: 47px;
            height: 47px;
            font-size: 18px;
            font-weight: 600;
            @include background-gradient-bottom($gradient_color_from, $gradient_color_to);
            color: #fff;
            @include border-radius(47px);
            text-align: center;
            line-height: 47px;
            @include font-family-heading($heading_default_font);
            overflow: hidden;
            opacity: 0;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            @include transform(translateY(40px));
            span {
                display: inline-block;
            }
            &:hover span {
                -o-animation: toTopFromBottom 0.3s forwards;
                -ms-animation: toTopFromBottom 0.3s forwards;
                -webkit-animation: toTopFromBottom 0.3s forwards;
                animation: toTopFromBottom 0.3s forwards;
            }
        }
    }
    .item--inner-team {
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .ct-progressbar {
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        opacity: 0;
    }
    .item--inner {
        margin-top: 150px;
        position: relative;
    }
    .slick-dots {
        margin-top: -5px;
        li {
            button {
                background-color: #696969;
                overflow: visible !important;
                &:before {
                    content: '';
                    width: 17px;
                    height: 17px;
                    @include border-radius(18px);
                    border: 2px solid $gradient_color_from;
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    opacity: 0;
                    @include transition(.3s cubic-bezier(.24,.74,.58,1));
                }
                &:after {
                    display: none;
                }
            }
            &.slick-active button {
                @include transform(scale(0.7));
                &:before {
                    @include transform(scale(1.6));
                    opacity: 1;
                }
            }
        }
    }
    .ct-carousel-inner {
        margin: 0 -40px;
        @media #{$max-md} {
            margin: 0 -15px;
        }
        .slick-slide {
            padding: 0 40px;
            opacity: 0;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            @media #{$max-md} {
                padding: 0 15px;
            }
            &.slick-active {
                opacity: 1;
            }
            &.slick-center {
                .item--image {
                    border-color: $gradient_color_from2;
                    a {
                        @include transform(translateY(0px));
                        opacity: 1;
                    }
                }
                .item--title, .item--description {
                    color: #fff;
                }
                .item--position {
                    color: #d0d0d0;
                }
                .item--holder {
                    text-align: left;
                    &:before, &:after {
                        opacity: 1;
                    }
                }
                .item--social {
                    @include transform(translate(0, -50%) scaleY(1));
                    opacity: 1;
                }
                .item--inner-team {
                    @include transform(translateY(-148px));
                }
                .ct-progressbar {
                    @include transform(translateY(-50px));
                    opacity: 1;
                }
            }
        }
        .slick-list {
            padding: 0 !important;
        }
    }
    .ct-progressbar1 {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        .ct-progress-bar {
            height: 7px;
            @include background-gradient-bottom($gradient_color_from, $gradient_color_to);
        }
    }
}

.ct-history1 {
    max-width: 970px;
    margin: 0 auto;
    padding-top: 34px;
    padding-bottom: 140px;
    position: relative;
    @media #{$max-sm} {
        padding-top: 114px;
    }
    &:before {
        content: '';
        width: 0;
        height: 100%;
        border-left: 1px dashed rgba(#fff, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .ct-history--start {
        text-align: center;
        line-height: 101px;
        width: 101px;
        height: 101px;
        color: #f6f6f6;
        font-size: 28px;
        font-weight: 700;
        @include border-radius(101px);
        background-color: $primary_color;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 99;
    }
    .ct-history--image {
        max-width: 140px;
        @include border-radius(140px);
        border: 2px solid #474747;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        img {
            @include border-radius(140px);
        }
    }
    .ct-history--meta {
        h3 {
            font-size: 26px;
            margin-bottom: 8px;
            color: #f6f6f6;
            font-weight: 600;
            @media #{$max-sm} {
                font-size: 18px;
            }
            @media #{$max-xs} {
                font-size: 16px;
            }
        }
        span {
            font-size: 18px;
            line-height: 26px;
            color: #bcbcbc;
            @media #{$max-sm} {
                font-size: 14px;
                line-height: 24px;
            }
            @media #{$max-xs} {
                font-size: 13px;
            }
        }
    }
    .ct-history--item {
        padding-right: 124px;
        position: relative;
        z-index: 1;
        margin-bottom: 21px;
        @media #{$max-sm} {
            padding-right: 40px;
        }
        &:before {
            content: '';
            height: 0;
            width: 114px;
            border-bottom: 1px dashed rgba(#fff, 0.3);
            position: absolute;
            top: 15px;
            right: 0;
            z-index: -1;
            @media #{$max-sm} {
                width: 30px;
            }
        }
        &:after {
            content: '';
            width: 21px;
            height: 21px;
            @include border-radius(21px);
            background-color: $primary_color;
            position: absolute;
            top: 4px;
            right: -11px;
        }
    }
    .ct-history--odd {
        .ct-history--item {
            text-align: right;
            &:nth-child(1) {
                margin-top: 80px;
            }
            &:nth-child(2) {
                margin-bottom: 43px;
            }
            &:nth-child(3) {
                margin-bottom: 98px;
            }
            &:nth-child(4) {
                margin-bottom: 92px;
            }
        }
    }
    .ct-history--even {
        .ct-history--item {
            padding-right: 0;
            padding-left: 124px;
            @media #{$max-sm} {
                padding-left: 40px;
            }
            &:before {
                right: auto;
                left: 0;
            }
            &:after {
                right: auto;
                left: -11px;
            }
            &:nth-child(1) {
                margin-bottom: 59px;
            }
            &:nth-child(2) {
                margin-bottom: 80px;
            }
            &:nth-child(4) {
                margin-bottom: 108px;
            }
        }
    }
    .ct-history--holder {
        display: flex;
        flex-wrap: wrap;
        > div {
            width: 50%;
        }
    }
}

.ct-image-animate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include transition(.3s cubic-bezier(.24,.74,.58,1));
    opacity: 0;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    @media #{$max-md} {
        display: none;
    }
    &.active {
        opacity: 1;
    }
    div {
        position: absolute;
    }
    .shape-animate1 {
        animation: animationFramesOne 15s infinite linear alternate;
    }
    .shape-animate2 {
        animation: animationFramesTwo 15s infinite linear alternate;
    }
    .shape-animate3 {
        animation: animationFramesThree 15s infinite linear alternate;
    }
    .shape-animate4 {
        animation: animationFramesFour 15s infinite linear alternate;
    }
}

.ct-progressbar1 {
    .ct-progress-bar {
        height: 9px;
        position: relative;
        width: 0;
        @include transition(width 1.4s ease);
        background-color: $primary_color;
        @include border-radius(0px);
    }
    .ct-progress-title {
        font-size: 17px;
        color: #0e0e0e;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        margin-bottom: 3px;
        display: block;
    }
    .ct-progress-percentage {
        font-size: 12px;
        color: #ffffff;
        min-width: 34px;
        font-weight: 700;
        line-height: 24px;
        background-color: #0e0e0e;
        @include font-family-heading($heading_default_font);
        position: absolute;
        top: -35px;
        right: -17px;
        text-align: center;
        &:before {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            @include transform(translate(-50%, 0));
            border-width: 5px;
            border-style: solid;
            border-color: #0e0e0e transparent transparent transparent;
        }
    }
    .ct-progress-holder {
        background-color: #ebebeb;
    }
    .ct-progress-item {
        + .ct-progress-item {
            margin-top: 23px;
        }
    }
    &.style2 {
        .ct-progress-bar {
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        }
    }
}

.ct-team-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    > div {
        margin-bottom: 20px;
    }
    .ct-team-image {
        max-width: 80px;
        margin-right: 18px;
        img {
            @include border-radius(80px);
        }
    }
    .ct-team-title {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .ct-team-position {
        font-size: 15px;
        line-height: 1.2;
        color: #000;
    }
    .ct-team-button {
        a:not(.btn-gradient) {
            padding: 0 27px;
            @include box-shadow(0 10px 16px rgba($primary_color_hex, 0.39) !important);
            i {
                margin-right: 6px;
            }
            &:hover {
                @include box-shadow(none !important);
            }
        }
        .btn-gradient {
            line-height: 53px;
            padding: 0 27px;
            i {
                margin-right: 6px;
            }
        }
    }
    .ct-team-meta {
        margin-right: 35px;
    }
}

.ct-feature-carousel1 {
    .item--counter {
        display: inline-block;
        background-color: $primary_color;
        color: #fff;
        font-size: 36px;
        line-height: 1;
        font-weight: 600;
        padding: 24px 15px;
        @include border-radius(12px);
        @include font-family-heading($heading_default_font);
        min-width: 150px;
        text-align: center;
        margin-right: 22px;
        background-image: url(../images/dot-light.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 14px;
        cite {
            font-size: 30px;
            font-style: normal;
            position: relative;
            display: inline-block;
            top: -15px;
        }
        @media #{$max-lg} {
            min-width: 100px;
            font-size: 30px;
            padding: 20px 12px;
            cite {
                font-size: 24px;
            }
        }
    }
    .item--holder {
        margin-bottom: 14px;
    }
    .ct-counter-number-suffix {
        margin-left: -7px;
    }
    .item--title {
        font-size: 24px;
        margin-bottom: 0;
        @media #{$max-lg} {
            font-size: 20px;
        }
    }
    .item--description {
        color: #000000;
    }
    .item--inner {
        padding: 17px 17px 3px 17px;
        background-color: #fff;
        @include border-radius(12px);
        @include box-shadow(0 15px 84px rgba(#000000, 0.18));
        margin-bottom: 60px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 465px;
        position: relative;
        @media #{$max-lg} {
            @include box-shadow(0 15px 34px rgba(#000000, 0.12));
            margin-bottom: 40px;
        }
        &:before {
            content: '';
            position: absolute;
            top: 20px;
            left: -44px;
            height: auto;
            width: auto;
            border-style: solid;
            border-color: transparent $primary_color $primary_color transparent;
            border-width: 22px;
            z-index: -1;
            @media #{$max-sm} {
                left: -30px;
                top: 17px;
            }
        }
        @media #{$max-lg} {
            margin-left: 30px !important;
        }
    }
    .ct-slick-carousel {
        margin: 0 -60px 0 -60px;
        padding-left: 60px;
        padding-right: 60px;
        .slick-list {
            padding: 0 60px 100px 60px;
            margin: 0 -60px;
            @media #{$max-lg} {
                padding-bottom: 80px;
            }
        }
    }
    .slick-slide {
        @include transition(all 200ms linear 0ms);
        opacity: 0;
        &.slick-active {
            opacity: 1;
        }
    }
    .slick-track {
       padding-top: 60px;
    }
    .ct-slick-carousel[data-vertical="true"] .slick-dots {
        @media #{$min-xl} {
            margin: 0;
            position: absolute;
            bottom: 188px;
            right: 50px;
            display: block !important;
            li {
                margin: 8px 0;
            }
        }
        @media #{$max-lg} {
            margin: 0;
        }
    }
}

.ct-award-carousel1 {
    .item--logo {
        line-height: 1;
        margin-right: 12px;
        min-width: 70px;
        @media #{$max-sm} {
            min-width: 50px;
            max-width: 60px;
        }
    }
    .item--image {
        img {
            width: 100%;
            opacity: 0;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
        }
    }
    .item--image-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        width: 100px;
        @include border-radius(3px);
        background-position: left center;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--title {
        margin-bottom: 0;
        font-size: 21px;
        line-height: 27px;
        font-weight: 400;
        color: #fff;
        max-width: 230px;
        @media #{$max-sm} {
            font-size: 18px;
        }
    }
    .item--holder {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 24px 30px 24px 35px;
        @media #{$max-sm} {
            padding-left: 20px;
            padding-right: 20px;
        }
        z-index: 1;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        @include transform(translateY(100%));
        opacity: 0;
        z-index: 99;
        &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 120%;
            @include background-gradient-bottom(#000 60%, rgba(#000, 0));
            z-index: -1;
        }
    }
    .item--inner {
        position: relative;
        overflow: hidden;
        @include border-radius(3px);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        margin-bottom: 60px;
    }
    .ct-carousel-inner {
        overflow: hidden;
        margin: 0 -55px;
        @media #{$max-sm} {
            margin: 0 -15px;
        }
        .slick-list {
            padding: 0 140px;
            margin-left: -100px;
            @media #{$max-lg} {
                padding: 0 55px;
                margin-left: 0;
            }
            @media #{$max-xs} {
                padding: 0;
            }
        }
        .slick-slide {
            padding: 0 9px;
            @media #{$max-sm} {
                padding: 0 15px;
            }
        }
    }
                
    .slick-slide {
        @include transform(scaleY(0.9));
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        &.slick-current.slick-active {
            @include transform(scaleY(1));
            .item--inner  {
                @include box-shadow(0 27px 29px rgba(#000000, 0.2));
                @media #{$max-xs} {
                    @include box-shadow(none);
                }
            }
            .item--holder {
                @include transform(translateY(0%));
                opacity: 1;
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
            .item--image-bg {
                width: 100%;
                background-position: center;
            }
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        padding-bottom: 0;
        .slick-arrow {
            width: 30px;
            height: 20px;
            @include box-shadow(none !important);
            background-color: transparent;
            margin: 0;
            @include transform(translate(0, 0));
            opacity: 0.2;
            z-index: 99;
            bottom: 24px;
            @media #{$max-lg} {
                bottom: 0;
            }
            &:before, &:after {
                display: none;
            }
            &:hover {
                opacity: 1;
            }
            &.slick-next {
                left: auto;
                right: 31px;
                background-image: url(../images/arrow-right.png);
                background-repeat: no-repeat;
                background-size: cover;
            }
            &.slick-prev {
                left: auto;
                right: 85px;
                background-image: url(../images/arrow-left.png);
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
}

.ct-award-wrap {
    position: relative;
    .ct-award-image {
        position: absolute;
        top: -26px;
        left: 0;
        z-index: 99;
        + .ct-award {
            margin-left: 190px;
            @media #{$max-lg} {
                margin-left: 0;
            }
        }
        @media #{$max-lg} {
            display: none;
        }
    }
}

.ct-offer-carousel1 {
    position: relative;
    .item--image {
        flex-grow: 1;
        min-height: 200px;
    }
    .item--title {
        font-size: 22px;
        color: $third_color;
        margin: 0 0 13px;
    }
    .item--description {
        font-style: 16px;
        line-height: 24px;
        color: #000;
        margin-bottom: 17px;
    }
    .item--button {
        a {
            display: block;
            line-height: 39px;
            @include box-shadow(0 5px 6px rgba(0, 0, 0, 0.17));
            i {
                margin-right: 4px;
                font-style: 14px;
            }
        }
    }
    .item--holder {
        padding: 23px 26px 33px 20px;
        max-width: 395px;
    }
    .item--inner {
        border: 1px solid #e7e7e7;
        background-color: #fff;
        @include box-shadow(0 12px 35px rgba(#01214a, 0.24));
        display: flex;
        flex-wrap: wrap;
        @media #{$max-sm} {
            flex-direction: column-reverse;
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        @media #{$min-md} {
            padding: 0 118px;
            .slick-arrow {
                top: 50%;
                bottom: auto;
                @include transform(translate(0, -50%));
                margin: 0;
                z-index: 99;
                height: 52px;
                width: 52px;
                @include box-shadow(none !important);
                background-color: #efefef;
                &:hover {
                    background-color: $third_color;
                }
                &.slick-prev {
                    left: 55px;
                    right: auto;
                }
                &.slick-next {
                    left: auto;
                    right: 55px;
                }
            }
        }
        @media #{$max-sm} {
            padding-bottom: 65px;
            .slick-arrow {
                bottom: 15px;
            }
        }
    }
    .ct-slick-carousel {
        margin: 0 -40px 0 -40px;
        padding-left: 40px;
        padding-right: 40px;
        overflow: hidden;
        .slick-list {
            overflow: visible;
            margin: 30px 0 50px;
        }
        .slick-slide {
            opacity: 0;
            @include transition(.3s cubic-bezier(.24,.74,.58,1));
            &.slick-active {
                opacity: 1;
            }
        }
    }
}

.ct-video-button {
    height: 52px;
    width: 52px;
    background-color: $primary_color;
    position: relative;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    @include border-radius(100%);
    z-index: 99;
    @include box-shadow(0 3px 9px rgba(#031f72, 0.21));
    i {
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
    }
    .line-video-animation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(#fff, 0.24);
        @include border-radius(60px);
        animation: squares 3s linear 0s infinite;
        -webkit-animation: squares 3s linear 0s infinite;
        -ms-animation: squares 3s linear 0s infinite;
        -o-animation: squares 3s linear 0s infinite;
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
        animation-play-state: running;
        opacity: 0;
        &.line-video-2 {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
        }
        &.line-video-3 {
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
            -o-animation-delay: 2s;
            animation-delay: 2s;
        }
    }
    &:hover, &:focus {
        color: #fff;
        .line-video-animation {
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
            animation-play-state: paused;
        }
    }
}

.ct-video-player {
    position: relative;
    .ct-video-button {
        &.style1 {
            height: 62px;
            width: 62px;
            background-image: none;
            color: #000a93;
            font-size: 15px;
            z-index: 1;
            background-color: transparent;
            &:before {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(#fff, 0.76);
                border-radius: 50%;
                animation: pulse-border2 1500ms ease-out infinite;
                -webkit-animation: pulse-border2 1500ms ease-out infinite;
                z-index: -2;
            }
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(#fff, 0.67);
                @include border-radius(100%);
                z-index: -1;
            }
            &:hover, &:focus {
                &:before {
                    -webkit-animation-play-state: paused;
                    -moz-animation-play-state: paused;
                    -o-animation-play-state: paused;
                    animation-play-state: paused;
                }
            }
        }
    }
    .ct-video-image-bg {
        min-height: 300px;
        width: 100%;
    }
    .ct-video-image-bg + .ct-video-button, img + .ct-video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
    }
    &.style2 {
        display: inline-flex;
        border-radius: 20px;
        overflow: hidden;
        img {
            border-radius: 20px 20px 30px 20px;
        }
        &:before {
            content: '';
            width: 210px;
            height: 210px;
            border-radius: 210px;
            background-color: #fff;
            position: absolute;
            bottom: -49px;
            right: -42px;
        }
        .ct-video-button {
            width: 58px;
            height: 58px;
            font-size: 14px;
            transform: translate(0,0);
            top: auto;
            bottom: 36px;
            left: auto;
            right: 44px;
            @extend .bg-gradient;
            z-index: 9;
            &:before {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation: pulse-border2 1500ms ease-out infinite;
                -webkit-animation: pulse-border2 1500ms ease-out infinite;
                z-index: -2;
                @extend .bg-gradient;
                opacity: 0.76;
            }
        }
    }
}

.ct-counter-layout1 {
    .item--icon {
        line-height: 1;
        margin-bottom: 9px;
        i {
            font-size: 32px;
            color: $primary_color;
        }
    }
    .ct-counter-title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        font-family: inherit;
    }
    .ct-counter-number {
        font-size: 30px;
        line-height: 1;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        color: #000000;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
    }
    .ct-counter-number-value {
        margin: 0 3px;
        display: inline-block;
    }
    .ct-counter-number-prefix, .ct-counter-number-suffix {
        font-size: 18px;
        position: relative;
        top: -4px;
    }
    .ct-counter-holder {
        background-color: #fff;
        border: 1px solid #e8ebec;
        padding: 24px 20px 20px;
        @include border-radius(4px);
        @include transition(all 300ms linear 0ms);
        margin-bottom: 20px;
        @media #{$max-sm} {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    .ct-counter-inner {
        text-align: center;
        &:hover .ct-counter-holder {
            @include box-shadow(0 18px 18px rgba(#000843, 0.15));
            @include transform(translateY(-13px));
        }
    }
}

.ct-counter-layout2 {
    .item--icon {
        line-height: 1;
        margin-bottom: 5px;
        i {
            @extend .text-gradient;
            @include background-horizontal($gradient_color_to2, $gradient_color_from2);
            font-size: 32px;
        }
    }
    .ct-counter-number-value {
        line-height: 1;
        color: #000;
        @include font-family-heading($heading_default_font);
        font-size: 38px;
        font-weight: 700;
    }
    .ct-counter-number-prefix, .ct-counter-number-suffix {
        color: $gradient_color_from;
        font-size: 20px;
        font-weight: 600;
        @include font-family-heading($heading_default_font);
        line-height: 1;
        position: absolute;
        top: -5px;
    }
    .ct-counter-number-prefix {
        left: -12px;
    }
    .ct-counter-number-suffix {
        right: -12px;
    }
    .ct-counter-number {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        position: relative;
    }
    .ct-counter-title {
        margin-bottom: 16px;
        font-size: 20px;
        @media #{$max-sm} {
            font-size: 18px;
        }
    }
    .ct-counter-desc {
        font-size: 16px;
        line-height: 24px;
        @media #{$max-sm} {
            font-size: 14px;
        }
    }
    .ct-counter-holder {
        width: 120px;
        height: 120px;
        min-width: 120px;
        margin-right: 35px;
        @include border-radius(120px);
        background-color: #171717;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 1;
        @media #{$max-sm} {
            margin-right: 20px;
        }
        .percentage {
            position: absolute;
            top: -10px;
            left: -10px;
        }
    }
    .ct-counter-content {
        margin-top: 5px;
    }
    .ct-counter-inner {
        display: flex;
        flex-wrap: nowrap;
        @media #{$max-sm} {
            margin-left: 10px;
        }
    }
}

.ct-counter-layout3 {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .ct-counter-number {
        font-size: 150px;
        color: #000e29;
        font-weight: 700;
        line-height: 1;
        @include font-family-heading($heading_default_font);
        display: inline-flex;
        align-items: flex-start;
        @media #{$max-xs} {
            font-size: 100px;
        }
    }
    .ct-counter-title {
        margin-top: -3px;
        margin-bottom: 0;
        font-size: 28px;
        color: #000e29;
        font-family: "Nunito Sans";
        font-weight: 600;
        @media #{$max-xs} {
            font-size: 24px;
        }
    }
    .ct-counter-number-suffix {
        font-size: 60px;
        color: $gradient_color_from4;
        position: relative;
        top: -17px;
    }
    &.style2 {
        .ct-counter-number {
            font-size: 55px;
            color: $primary_color;
            margin-bottom: 17px;
        }
        .ct-counter-title {
            font-weight: 500;
            font-size: 18px;
            line-height: 1.5555555;
        }
        .ct-counter-inner {
            text-align: center;
        }
        .ct-counter-number-suffix {
            font-size: inherit;
            top: 0;
        }
    }
}
.ct-tab-form1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -65px;
    @media #{$max-md2} {
        margin: 0;
    }
    .ct-tabs-title {
        width: 60%;
        padding: 0 53px 0 65px;
        display: flex;
        flex-wrap: wrap;
        margin-top: -12px;
        @media #{$max-md2} {
            width: 100%;
            padding: 0;
            margin-bottom: 45px;
        }
        @media #{$max-xs} {
            width: calc(100% + 12px);
            width: -webkit-calc(100% + 12px);
            margin-right: -12px;
        }
        .ct-tab-title {
            font-size: 18px;
            line-height: 30px;
            font-weight: 700;
            color: #000;
            padding: 14px 14px;
            text-align: left;
            width: calc(50% - 12px);
            width: -webkit-calc(50% - 12px);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: 12px;
            margin-top: 12px;
            @include border-radius(4px);
            background-color: #fff;
            cursor: pointer;
            @media #{$max-md} {
                font-size: 15px;
            }
            @media #{$max-xs} {
                font-size: 14px;
                line-height: normal;
            }
            img, * {
                margin-right: 15px;
                @media #{$max-md} {
                    margin-right: 10px;
                    max-width: 30px;
                }
                @media #{$max-xs} {
                    margin-bottom: 10px;
                }
            }
            position: relative;
            border-color: #000;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                @include border-radius(4px);
                border: 2px solid inherit;
                @include transition(.3s cubic-bezier(.24,.74,.58,1));
                opacity: 0;
            }
            &:hover, &.active {
                &:before {
                    opacity: 1;
                }
            }
        }
    }
    .ct-tabs-content {
        width: 40%;
        padding: 0 65px;
        position: relative;
        @media #{$max-md2} {
            width: 100%;
            padding: 0;
        }
        &:before {
            content: '';
            width: 0;
            height: 70%;
            border-left: 1px dashed #9c9c9c;
            position: absolute;
            top: 50%;
            @include transform(translate(0, -50%));
            left: 0;
            @media #{$max-md2} {
                display: none;
            }
        }
    }
    .ct-tab-content {
        display: none;
        &.active {
            display: block;
        }
    }
    .item-fancy-box {
        margin-bottom: 20px;
        .fancy-box-meta {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            .fancy-box-image {
                margin-right: 18px;
                min-width: 78px;
            }
            .fancy-box-title {
                font-weight: 700;
                margin-bottom: 0;
                font-size: 26px;
                line-height: auto;
                margin-bottom: 0;
            }
        }
        .fancy-box-desc {
            margin-top: 2px;
            color: #000;
        }
    }
    .wpcf7-form {
        .input-filled {
            position: relative;
            > .form-icon {
                left: 18px;
                position: absolute;
                top: 50%;
                @include transform(translate(0, -50%));
                z-index: 99;
                color: #666666;
                + .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-submit) {
                    padding-left: 45px;
                }
            }
        }
        .wpcf7-form-control {
            &:not(.wpcf7-submit) {
                height: 43px;
                border: 1px solid #cccccc;
                font-size: 15px;
                color: rgba(#000000, 0.6);
                @include border-radius(5px);
                @include font-family-default($body_default_font);
                &:focus {
                    border-color: $primary_color;
                }
            }
        }
        .wpcf7-form-control-wrap {
            margin-bottom: 9px;
        }
        .wpcf7-submit {
            margin-top: 6px;
        }
        .nice-select::after {
            color: #000;
            right: 18px;
            font-style: 14px;
        }
        .nice-select span.current {
            line-height: 29px;
        }
        .wpcf7-response-output {
            line-height: normal;
        }
    }
    .btn-icon {
        line-height: 63px;
        padding-left: 70px !important;
        i {
            height: 47px;
            width: 47px;
            line-height: 47px;
            font-size: 18px;
            left: 8px;
        }
    }
}

.ct-tab-form2 {
    display: flex;
    flex-wrap: wrap;
    .ct-tabs-title {
        width: 47%;
        border-right: 4px solid #e8edf1;
        padding-right: 80px;
        @media #{$max-lg} {
            padding-right: 60px;
        }
        @media #{$max-sm} {
            width: 100%;
            padding-right: 0;
            border-right: none;
        }
    }
    .ct-tab-number {
        color: #6b88a2;
        font-size: 24px;
        font-weight: 900;
        font-family: "Nunito Sans";
        display: flex;
        align-items: center;
        min-width: 56px;
        justify-content: center;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
    }
    .ct-tab-heading {
        @include font-family-heading($heading_default_font);
        font-size: 20px;
        line-height: 24px;
        display: flex;
        align-items: center;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        b {
            display: block;
        }
        @media #{$max-lg} {
            font-size: 18px;
        }
    }
    .ct-tab-icon {
        width: 89px;
        color: #fff;
        text-align: center;
        position: relative;
        line-height: 1;
        min-height: 70px;
        margin-right: 19px;
        z-index: 1;
        @media #{$max-sm} {
            width: 79px;
            margin-right: 15px;
        }
        &:before {
            content: '';
            background-color: #2a3e64;
            position: absolute;
            top: -16px;
            left: 0;
            width: 100%;
            height: calc(100% + 21px);
            height: -webkit-calc(100% + 21px);
            z-index: -1;
            @include border-radius(0 0 8px 8px);
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
        }
        &:after {
            content: '';
            position: absolute;
            top: -16px;
            left: -16px;
            border-width: 8px;
            border-style: solid;
            border-color: transparent #02060f #02060f transparent;
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
        }
        * {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
        }
        i {
            font-size: 55px;
            line-height: 1;
            margin-top: -4px;
            @media #{$max-sm} {
                font-size: 42px;
            }
            &.flaticon-v2-insurance-1, &.flaticon-v2-insurance-2 {
                margin-top: 1px;
            }
            &.flaticon-v2-protection {
                margin-left: 6px;
            }
        }
        img {
            max-width: 70px;
        }
    }
    .ct-tab-title {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        position: relative;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        &:before {
            content: '';
            height: 16px;
            width: 100%;
            max-width: 332px;
            position: absolute;
            top: -16px;
            left: 0;
            right: 0;
            margin: 0 auto;
            background-image: url(../images/tab-shadow.png);
            background-repeat: no-repeat;
            background-position: top center;
            overflow: hidden;
        }
        &:after {
            content: '';
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
            width: 0;
            height: 0;
            position: absolute;
            right: -22px;
            @include transform(translate(0, -50%));
            border-width: 11px;
            border-style: solid;
            border-color: transparent transparent transparent #000e29;
            top: 50%;
            opacity: 0;
        }
        + .ct-tab-title {
            margin-top: 44px;
        }
        &.active {
            @include transform(translateX(40px));
            background-color: #000e29;
            @media #{$max-lg} {
                @include transform(translateX(30px));
            }
            @media #{$max-sm} {
                @include transform(translateX(0px));
            }
            &:after {
                opacity: 1;
            }
            .ct-tab-number, .ct-tab-heading {
                color: #fff;
            }
            .ct-tab-icon {
                &:before {
                    background-color: $gradient_color_from4;
                }
                &:after {
                    border-color: transparent darken($gradient_from_hex4, 0.12) darken($gradient_from_hex4, 0.12) transparent;
                }
            }
        }
    }
    .ct-tabs-content {
        width: 53%;
        padding-left: 32px;
        @media #{$max-sm} {
            width: 100%;
            padding-left: 0;
            margin-top: 42px;
        }
    }
    .ct-tab-content {
        display: none;
        &.active {
            display: block;
        }
    }
    .item-fancy-box {
        margin-top: 10px;
        .fancy-box-image {
            line-height: 1;
            margin-bottom: 23px;
        }
        .fancy-box-title {
            margin-bottom: 8px;
            font-size: 32px;
            font-weight: 700;
            cite {
                color: $gradient_color_from4;
                font-style: normal;
                display: block;
            }
        }
        .fancy-box-desc {
            font-size: 18px;
            color: #000;
            font-family: "Nunito Sans";
            margin-bottom: 16px;
        }
    }
    .wpcf7-form {
        .input-filled {
            position: relative;
            > .form-icon {
                left: 18px;
                position: absolute;
                top: 50%;
                @include transform(translate(0, -50%));
                z-index: 99;
                color: #666666;
                + .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-submit) {
                    padding-left: 45px;
                }
            }
        }
        .wpcf7-form-control {
            &:not(.wpcf7-submit) {
                height: 50px;
                border: 1px solid #d6d6d6;
                font-size: 15px;
                color: #666666;
                @include border-radius(4px);
                font-family: "Nunito Sans";
                &:hover, &:focus {
                    border-color: $gradient_color_from4;
                }
            }
        }
        .wpcf7-form-control-wrap {
            margin-bottom: 9px;
        }
        .wpcf7-submit {
            margin-top: 6px;
        }
        .nice-select::after {
            color: #000;
            right: 18px;
            font-style: 14px;
        }
        .nice-select span.current {
            line-height: 37px;
        }
        .wpcf7-response-output {
            line-height: normal;
        }
        .wpcf7-submit {
            line-height: 48px;
            background-color: $gradient_color_from4;
            @include border-radius(4px);
            padding: 0 22px !important;
            font-size: 16px;
            font-weight: 600;
            i {
                width: auto;
                background-color: transparent;
                color: #fff;
                position: static;
                margin-right: 8px;
            }
            &:hover, &:focus {
              background-color: lighten($gradient_from_hex4, 0.08);
              i {
                color: #fff;
              }
            }
        }
    }
}

.ct-showcase1 {
    margin-top: 15px;
    @include transition(all 300ms linear 0ms);
    position: relative;
    .ct-showcase-image {
        @include box-shadow(0 0 15px rgba(#0a32e5, 0.19));
        @include transition(all 300ms linear 0ms);
        overflow: hidden;
        position: relative;
        label {
            @include box-shadow(0 6px 18px rgba(#000, 0.15));
            line-height: 33px;
            height: 33px;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            background-color: $primary_color;
            position: absolute;
            width: 180px;
            padding: 0 10px;
            @include transform(rotate(-45deg));
            top: 25px;
            left: -48px;
            @include font-family-heading($heading_default_font);
            text-align: center;
            text-transform: uppercase;
        }
    }
    .ct-showcase-meta {
        text-align: center;
        h3 {
            margin-top: 56px;
            margin-bottom: 0;
            font-size: 18px;
            @media #{$max-md} {
                font-size: 17px;
            }
            cite {
                font-size: 12px;
                background-color: $primary_color;
                border-radius: 3px;
                color: #fff;
                padding: 2px 9px;
                font-weight: 600;
                margin-left: 6px;
                position: relative;
                top: -2px;
                font-style: normal;
            }
        }
    }
    .ct-showcase-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(#000000, 0.49);
        z-index: 2;
        @include transition(all 300ms linear 0ms);
        opacity: 0;
    }
    .ct-showcase-link {
        font-size: 15px;
        font-weight: 600;
        line-height: 60px;
        padding: 0 40px;
        @include border-radius(60px);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        margin: 5px 10px;
        @media #{$max-xl} {
            padding: 0 24px;
            line-height: 51px;
        }
    }
    .ct-showcase-button {
        position: absolute;
        top: 50%;
        left: 0;
        padding: 0 20px;
        @include transform(translate(0%, -50%));
        margin-top: -60px;
        z-index: 3;
        opacity: 0;
        display: flex;
        flex-wrap: wrap;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        justify-content: center;
        width: 100%;
    }
    &:hover {
        @include transform(translateY(-5px));
        .ct-showcase-image {
            @include box-shadow(0 13px 29px rgba(#030018, 0.29));
        }
        .ct-showcase-overlay, .ct-showcase-button {
            opacity: 1;
        }
        .ct-showcase-button {
            margin-top: 0;
        }
    }
}

.col-line-right:before {
    content: '';
    width: 0;
    height: 80%;
    border-right: 1px dashed #d0d0d0;
    position: absolute;
    top: 50%;
    right: 0;
    @include transform(translate(0, -50%));
    @media #{$max-sm} {
        display: none;
    }
}

.ct-marker-search-form {
    .ct-marker-categories {
        display: flex;
        flex-wrap: wrap;
    }
    .btn-marker-category {
        margin-right: 4px;
        cursor: pointer;
        margin-bottom: 28px;
        background-color: #ebf1f1;
        line-height: 52px;
        font-size: 14px;
        font-weight: 600;
        color: #000000;
        @include font-family-heading($heading_default_font);
        min-width: 122px;
        padding: 0 28px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        text-align: center;
        position: relative;
        @media #{$max-sm} {
            line-height: 46px;
            min-width: inherit;
            padding: 0 13px;
            font-size: 13px;
        }
        &:before {
            content: '';
            opacity: 0;
            @include transition(all 200ms linear 0ms);
            width: 0;
            height: 0;
            position: absolute;
            left: 50%;
            @include transform(translate(-50%, 0));
            bottom: -22px;
            border-width: 12px;
            border-style: solid;
            border-color: $primary_color transparent transparent;
        }
        &.active {
            background-color: $primary_color;
            color: #fff;
            &:before {
                opacity: 1;
            }
        }
        &.cat-frist {
            @include border-radius(3px 0 0 3px);
        }
        &:last-child {
            @include border-radius(0 3px 3px 0);
        }
    }
    .ct-marker-search-meta {
        position: relative;
        max-width: 427px;
    }
    .ct-marker-search-input {
        border-color: #ecefee;
        height: 54px;
        padding-left: 33px;
        padding-right: 60px;
        font-size: 14px;
        color: #000000;
        @include border-radius(3px);
        @include box-shadow(0 14px 22px rgba(#000000, 0.12));
        &.input-empty {
            color: #e72452;
        }
        &:focus {
            border-color: $primary_color;
            color: #000000;
        }
    }
    .ct-marker-search-button {
        position: absolute;
        top: 0;
        right: 0;
        line-height: 54px;
        @include border-radius(0 3px 3px 0);
        padding: 0 20px;
        i {
            margin-left: 4px;
        }
    }
}

.ct-marker-search-results {
    .nice-select {
        height: 42px;
        font-size: 14px;
        color: #000;
        @include border-radius(3px);
        border-color: #dadce1;
        padding-left: 18px;
        padding-right: 32px;
        &:after {
            right: 10px;
            color: #444;
        }
        &.open:after {
            content: "\f106";
        }
        span.current {
            line-height: 28px;
        }
    }
    .ct-marker-search-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #dadce1;
        margin-bottom: 30px;
    }
    .results-limitation {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .ct-marker-search-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-grow: 1;
        font-size: 15px;
        color: #000;
        margin-right: 30px;
        margin-bottom: 10px;
    }
    .search-within-radius {
        margin-bottom: 10px;
    }
    .results-limitation {
        > label {
            margin-right: 6px;
        }
    }
    .results-counting {
        position: relative;
        padding-right: 10px;
        margin-right: 10px;
        &:before {
            content: '';
            width: 1px;
            height: 18px;
            background-color: #dadce1;
            position: absolute;
            top: 50%;
            right: 0;
            @include transform(translate(0, -50%));
        }
    }
    .ct-marker-item {
        display: flex;
        flex-wrap: nowrap;
        border-bottom: 1px solid #dadce1;
        padding-bottom: 24px;
        margin-bottom: 30px;
        .ct-marker-count {
            font-size: 16px;
            font-weight: 600;
            @include font-family-heading($heading_default_font);
            width: 36px;
            height: 36px;
            min-width: 36px;
            background-color: $primary_color;
            @include border-radius(36px);
            line-height: 36px;
            color: #fff;
            text-align: center;
            position: relative;
            margin-right: 30px;
            padding: 0;
            @media #{$max-sm} {
                margin-right: 15px;
            }
            span {
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
        }
        .ct-marker-distance {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            @include font-family-heading($heading_default_font);
            min-width: 100px;
            text-align: right;
            span {
                font-size: 60%;
                font-weight: 500;
                position: relative;
                top: -5px;
                color: #222;
            }
            &.distance-mobile {
                display: none;
            }
            @media #{$max-sm} {
                display: none;
                &.distance-mobile {
                    display: block;
                    margin-top: 6px;
                    text-align: left;
                }
            }
        }
        .ct-marker-info {
            flex-grow: 1;
            margin-right: 30px;
            @media #{$max-sm} {
                margin-right: 20px;
            }
            .ct-marker-title {
                font-size: 20px;
                margin-bottom: 9px;
            }
        }
        .ct-marker-meta {
            font-size: 14px;
            line-height: 26px;
            color: #383838;
            a {
                color: inherit;
                &:hover {
                    color: $primary_color;
                }
            }
            label {
                font-weight: 500;
                color: #000;
            }
        }
    }
    .ct-marker-pagination {
        a {
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 17px;
            @include border-radius(3px);
            border: 1px solid #dadce1;
            display: inline-block;
            color: #000;
            font-weight: 400;
            margin-right: 6px;
            &.disable {
                opacity: 0.5;
                cursor: no-drop;
            }
            &:not(.disable):hover {
                border-color: $primary_color;
                background-color: $primary_color;
                color: #fff;
            }
        }
    }
}

.ct-box-slider1 {
    padding-left: 32px;
    position: relative;
    @media #{$max-sm} {
        padding-left: 22px;
    }
    &:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
        @include background-gradient-bottom($gradient_color_from, $gradient_color_to);
    }
    span {
        font-size: 24px;
        @extend .text-gradient;
        @include background-horizontal($gradient_color_to2, $gradient_color_from2);
        display: inline-block;
        margin-bottom: 18px;
    }
}

.line-col1 {
    &:before {
        content: '';
        width: 0px;
        height: 50px;
        border-left: 1px dashed #bababa;
        position: absolute;
        top: 50%;
        left: 0;
        @include transform(translate(0, -50%));
        @media #{$max-lg} {
            display: none;
        }
    }
}

@media #{$max-sm} {
    .hide-dot-slider .hesperiden .tp-bullet {
        display: none !important;
    }
}

.ct-banner {
    &.layout-1, &.layout-2 {
        padding-right: 54px;
        padding-left: 46px;
        padding-bottom: 46px;
        position: relative;
        z-index: 1;
        @media #{$max-sm} {
            padding-right: 30px;
        }
        &:before {
            content: '';
            position: absolute;
            top: 40px;
            right: 114px;
            left: 0;
            bottom: 0;
            @include background-horizontal($gradient_color_from2, $gradient_color_to2);
            z-index: -1;
            @include box-shadow(0 0 33px rgba(#000000, 0.25) inset);
        }
        img {
            width: 100%;
        }
        .ct-banner-counter {
            position: absolute;
            top: 38px;
            right: 0;
            background-color: #fff;
            @include border-radius(20px);
            padding: 11px 25px 11px 14px;
            @include box-shadow(0 30px 24px rgba(#0c0c0c, 0.08));
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            .item--icon {
                width: 52px;
                height: 52px;
                min-width: 52px;
                position: relative;
                @include background-horizontal($gradient_color_to2, $gradient_color_from2);
                @include border-radius(100%);
                margin-right: 12px;
                i {
                    font-size: 22px;
                    color: #000000;
                }
                * {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    @include transform(translate(-50%, -50%));
                }
            }
            .ct-counter-number {
                font-size: 24px;
                line-height: 1;
                @include font-family-heading($heading_default_font);
                font-weight: 700;
                color: #000000;
                .ct-counter-number-suffix {
                    font-size: 18px;
                    font-weight: 600;
                    color: $gradient_color_from;
                    position: relative;
                    left: -2px;
                    top: -8px;
                }
            }
            .item-title {
                font-size: 16px;
                line-height: normal;
                color: #232323;
            }
        }
        .ct-banner-title {
            margin-bottom: 0;
            font-size: 17px;
            font-weight: 600;
            position: absolute;
            bottom: 13px;
            left: 170px;
            @media #{$max-lg} {
                font-size: 15px;
            }
            @media #{$max-md} {
                display: none;
            }
        }
        .ct-banner-number {
            font-size: 35px;
            line-height: 1;
            font-weight: 600;
            color: #fff;
            @include font-family-heading($heading_default_font);
            position: absolute;
            left: 27px;
            bottom: 16px;
        }
        .shape-angle {
            position: absolute;
            left: 0;
            bottom: 0;
            &:before, &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                border-width: 75px;
                border-style: solid;
            }
            &:before {
                border-color: transparent transparent #fff #fff;
                width: 150px;
                height: 150px;
            }
            &:after {
                border-color: transparent transparent $gradient_color_from $gradient_color_from;
                width: 130px;
                height: 130px;
                border-width: 65px;
            }
        }
    }
    &.layout-2 {
        padding-left: 90px;
        padding-bottom: 90px;
        @media #{$max-md} {
            padding-left: 40px;
            padding-bottom: 40px;
        }
        &:before, .shape-angle {
            display: none;
        }
        .ct-banner-layer1, .ct-banner-layer2 {
            position: absolute;
            z-index: -1;
            left: 0;
            img {
                width: auto;
            }
        }
        .ct-banner-layer1 {
            top: -40px;
            left: 50px;
            @media #{$max-md} {
                left: 0;
            }
        }
        .ct-banner-layer2 {
            bottom: 0;
            @media #{$max-md} {
                max-width: 150px;
            }
            @media #{$max-sm} {
                max-width: 100px;
            }
        }
    }
    &.layout-3 {
        position: relative;
        z-index: 1;
        margin-top: 42px;
        margin-left: 42px;
        display: inline-block;
        @media #{$max-lg} {
            margin-top: 30px;
            margin-left: 30px;
        }
        &:before {
            content: '';
            position: absolute;
            top: -42px;
            left: -42px;
            bottom: 76px;
            right: 120px;
            z-index: -1;
            background-color: #f1f1f1;
            @include border-radius(30px);
            @media #{$max-lg} {
                top: -30px;
                left: -30px;
                bottom: 46px;
                right: 90px;
            }
        }
        img {
            @include border-radius(30px);
            @include box-shadow(0 25px 18px rgba(#474746, 0.28));
        }
    }
}

#wpe_panel {
    ul.list {
        background-color: #fff !important;
        margin-bottom: 0px !important;
        li {
            padding: 6px 10px !important;
        }
    }
    .nice-select.form-control {
        padding: 0 10px !important;
        .current {
            line-height: 38px;
        }
    }
}

.h6-title-one {
    .item--sub-title span {
        @extend .text-gradient;
        display: inline-block;
        @include background-horizontal($gradient_from_hex4, $gradient_color_to4);
    }
    .item--title i {
        color: inherit;
    }
}

.ct-rate-star {
    font-size: 12px;
    position: relative;
    top: -1px;
    color: #eaab00;
    letter-spacing: -0.08em;
    margin-right: 4px;
}

.ct-cover-boxes1 {
    margin: 0 -30px 0 0;
    display: flex;
    flex-wrap: wrap;
    @media #{$max-lg} {
        margin: 0 -15px;
    }
    @media #{$max-sm} {
        display: block;
        flex-wrap: inherit;
    }
    .item--image {
        width: 100%;
        position: relative;
        @media #{$max-sm} {
            width: 100% !important;
        }
    }
    .item--icon {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        color: #fff;
        z-index: 1;
        font-weight: 400;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        &:before, &:after {
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
        }
        &:before {
            background-color: $gradient_color_from4;
        }
        &:after {
            opacity: 0;
            @include background-horizontal($gradient_from_hex4, $gradient_color_to4);
        }

}
    .item--title {
        margin-bottom: 12px;
        font-size: 22px;
        line-height: 30px;
        color: #fff;
        @media #{$max-md} {
            font-size: 18px;
        }
    }
    .item--readmore {
        margin-top: 17px;
        a {
            font-size: 14px;
            line-height: 24px;
            color: #fff;
            font-weight: 600;
            @include font-family-heading($heading_default_font);
            display: inline-flex;
            align-items: center;
            i {
                color: $gradient_color_to4;
                font-size: 24px;
                font-weight: 400;
                margin-left: 3px;
            }
            &:hover i {
                animation: icon-bounce-right 800ms ease-out infinite;
                -webkit-animation: icon-bounce-right 800ms ease-out infinite;
            }
        }
    }
    .item--content {
        overflow: hidden;
        position: relative;
        .item--content-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 25px 22px 20px;
            font-size: 16px;
            line-height: 24px;
            color: #a5a5a5;
            font-family: "Nunito Sans";
        }
    }
    .ct-cover-inner {
        border: 8px solid #fff;
        background-color: #000e29;
        display: flex;
        flex-wrap: wrap;
        width: 277px;
    }
    .ct-cover-item {
        width: 277px;
        display: none;
        margin-right: 30px;
        overflow: hidden;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        @include box-shadow(0 0 43px rgba(#000, 0.2));
        &:nth-child(1) {
            animation-delay: 50ms;
            -webkit-animation-delay: 50ms;
            display: block;
        }
        &:nth-child(2) {
            animation-delay: 100ms;
            -webkit-animation-delay: 100ms;
            display: block;
        }
        &:nth-child(3) {
            animation-delay: 150ms;
            -webkit-animation-delay: 150ms;
            display: block;
        }
        &.active {
            width: 554px;
            .ct-cover-inner {
                width: 554px;
            }
            .item--image {
                width: calc(50% - 8px);
                width: -webkit-calc(50% - 8px);
            }
            .item--content {
                width: 50%;
            }
            .item--icon {
                bottom: 50%;
                @include transform(translate(0, 50%));
                &:before {
                    opacity: 0;
                }
                &:after {
                    opacity: 1;
                }
            }
        }
        @media #{$max-lg} {
            width: 33.33% !important;
            margin-right: 0;
            padding: 0 15px;
            @include box-shadow(0 0 43px rgba(#000, 0));
            .ct-cover-inner {
                width: 100% !important;
                @include box-shadow(0 0 43px rgba(#000, 0.2));
                margin: 30px 0;
                display: block !important;
                flex-wrap: inherit;
                .item--content {
                    width: 100%;
                }
            }
            .item--content .item--content-inner {
                position: static;
            }
            &.active {
                width: 33.33%;
                .item--image, .item--content {
                    width: 100% !important;
                }
            }
        }
        @media #{$max-sm} {
            width: 100% !important;
            &.active {
                width: 100%;
            }
        }
    }
}

body:not(.elementor-editor-active) .ct-cover-boxes1 .ct-cover-item {
    &:hover {
        width: 554px;
        .ct-cover-inner {
            width: 554px;
        }
        .item--image {
            width: calc(50% - 8px);
            width: -webkit-calc(50% - 8px);
        }
        .item--content {
            width: 50%;
        }
        .item--icon {
            bottom: 50%;
            @include transform(translate(0, 50%));
            &:before {
                opacity: 0;
            }
            &:after {
                opacity: 1;
            }
        }
    }
}

.ct-fancy-box-grid1 {
    .item--icon {
        line-height: 1;
        margin-bottom: 12px;
        img {
            max-width: 54px;
        }
        i {
            font-size: 54px;
            color: $primary_color;
        }
    }
    .item--title {
        margin-bottom: 11px;
        font-size: 20px;
        color: #000e29;
        @media #{$max-md} {
            font-size: 18px;
        }
    }
    .item--desc {
        font-size: 16px;
        line-height: 24px;
        color: #000e29;
        font-family: "Nunito Sans";
        @media #{$max-md} {
            font-size: 14px;
        }
    }
    .item--inner {
        margin-bottom: 30px;
        &:hover .item--icon {
            animation: icon-bounce 800ms ease-out infinite;
            -webkit-animation: icon-bounce 800ms ease-out infinite;
        }
    }
}

.ct-tab-banner1 {
    display: flex;
    flex-wrap: wrap;
    .ct-tab-image {
        min-height: 427px;
        position: relative;
        &:before {
            content: '';
            background-color: rgba(#000308, 0.35);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    .ct-tab-box {
        position: absolute;
        top: -16px;
        left: 90px;
        background-color: #fff;
        padding: 27px 34px 28px;
        max-width: 382px;
        z-index: 99;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        font-family: "Nunito Sans";
        @media #{$max-lg} {
            left: 60px;
            max-width: 302px;
        }
        @media #{$max-sm} {
            top: 15px;
            left: 15px;
            max-width: 260px;
            padding: 24px 20px;
        }
        &:before {
            content: '';
            height: 6px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            @include background-horizontal($gradient_from_hex4, $gradient_color_to4);
        }
        .ct-box-title {
            font-family: "Kalam";
            font-size: 24px;
            line-height: 32px;
            font-weight: 400;
            color: #000e29;
            margin-bottom: 3px;
            padding-right: 10%;
            @media #{$max-lg} {
                padding-right: 0;
            }
        }
        .ct-box-subtitle {
            font-size: 18px;
            color: #6f6f6f;
            border-bottom: 1px solid #b6b6b6;
            display: inline-block;
            line-height: 1.2;
            margin-bottom: 8px;
            span {
                color: #000e29;
                font-weight: 700;
            }
        }
        .ct-box-content {
            font-size: 16px;
            line-height: 24px;
            color: #000e29;
            margin-bottom: 18px;
        }
    }
    .ct-tabs-title {
        width: 48%;
        @media #{$max-sm} {
            width: 100%;
        }
    }
    .ct-tabs-content {
        width: 52%;
        @media #{$max-sm} {
            width: 100%;
        }
        .ct-tab-content {
            display: none;
        }
    }
    .ct-tab-title {
        background-color: #000e29;
        @include transition(.4s cubic-bezier(.24,.74,.58,1));
        padding: 27px 30px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        cursor: pointer;
        position: relative;
        z-index: 99;
        @media #{$max-lg} {
            padding: 22px 20px;
        }
        &:before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
            right: 0px;
            border-style: solid;
            border-width: 10px;
            border-color: transparent transparent transparent #000e29;
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
            z-index: 1;
        }
        h4 {
            margin-bottom: 8px;
            font-size: 22px;
            color: #fff;
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
            @media #{$max-lg} {
                font-size: 20px;
            }
        }
        p {
            margin: 0;
            font-size: 16px;
            @media #{$max-lg} {
                font-size: 14px;
            }
            line-height: 24px;
            color: #ddd;
            font-family: "Nunito Sans";
            @include transition(.4s cubic-bezier(.24,.74,.58,1));
        }
        .ct-tab-icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            min-width: 80px;
            color: $gradient_color_to4;
            position: relative;
            text-align: center;
            z-index: 1;
            margin-right: 27px;
            @media #{$max-lg} {
                margin-right: 15px;
                width: 70px;
                height: 70px;
                line-height: 70px;
                min-width: 70px;
            }
            i {
                font-size: 42px;
                @media #{$max-lg} {
                    font-size: 36px;
                }
            }
            &:before, &:after {
                content: '';
                @include border-radius(80px);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
            }
            &:before {
                background-color: #2a3e64;
            }
            &:after {
                opacity: 0;
                @include background-horizontal($gradient_from_hex4, $gradient_color_to4);
            }
        }
        + .ct-tab-title {
            margin-top: 9px;
        }
        &.active {
            background-color: #fff;
            @include box-shadow(0 6px 70px rgba(#0c0c0c, 0.19));
            @include transform(translateX(36px));
            @media #{$max-sm} {
                @include transform(translateX(0px));
            }
            &:before {
                border-color: transparent transparent transparent #fff;
                right: -20px;
            }
            h4, p {
                color: #000e29;
            }
            .ct-tab-icon {
                color: #fff;
                &:before {
                    opacity: 0;
                }
                &:after {
                    opacity: 1;
                }
            }
        }
    }
}

.ct-process1 {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    .ct-process-divider {
        position: absolute;
        width: 140px;
        height: 3px;
        border-top: 3px dashed $gradient_color_from4;
        top: 50%;
        margin-left: -85px;
        @media #{$max-sm} {
            display: none;
        }
        &:before , &:after {
            content: '';
            height: 3px;
            width: 42px;
            position: absolute;
            top: -3px;
            z-index: 99;
        }
        &:before {
            left: 0;
            @include background-horizontal(rgba(#fff, 0.6), rgba(#fff, 0));
        }
        &:after {
            right: 0;
            @include background-horizontal(rgba(#fff, 0), rgba(#fff, 0.6));
        }
    }
    .item--icon {
        line-height: 1;
        margin-bottom: 29px;
        position: relative;
        i {
            font-size: 78px;
            color: $primary_color;
        }
        img {
            max-width: 78px;
            @include transition(.6s cubic-bezier(.24,.74,.58,1));
        }
    }
    .ct-process-title {
        font-size: 22px;
        margin-bottom: 16px;
        color: $gradient_color_from4;
    }
    .ct-process-description {
        font-size: 16px;
        line-height: 24px;
        color: #000e29;
        font-family: "Nunito Sans";
        padding: 0 10%;
        @media #{$max-lg} {
            padding: 0;
        }
    }
    .ct-process-item:hover {
        .item--icon img {
            @include transform(rotateY(360deg));
        }
    }
    @media #{$max-sm} {
        .ct-process-item {
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
            + .ct-process-item {
                margin-top: 45px;
            }
        }
    }
    &.ct-process-3-column {
        .ct-process-item {
            width: 33.33%;
            padding: 0 15px;
            @media #{$max-sm} {
                width: 100%;
            }
        }
    }
    &.ct-process-2-column {
        .ct-process-item {
            width: 50%;
            padding: 0 15px;
            @media #{$max-sm} {
                width: 100%;
            }
        }
    }
}

.ct-client-grid1 {
    overflow: hidden;
    .client-image {
        padding: 41px 20px;
        text-align: center;
        @media #{$max-sm} {
            padding: 30px 15px;
        }
        img {
            @include transition(all 300ms linear 0ms);
        }
        &:hover img {
            @include transform(scale(1.1));
        }
    }
    .client-item-inner {
        padding: 18px 22px 22px;
        background-color: #000000;
        @media #{$max-sm} {
            padding-left: 15px;
            padding-right: 15px;
        }
        .btn {
            line-height: 30px;
            padding: 0 10px;
            font-size: 13px;
            @include border-radius(3px);
        }
    }
    .client-desc {
        font-size: 16px;
        line-height: 22px;
        color: #cbcbcb;
        font-family: "Nunito Sans";
        margin-bottom: 11px;
        @media #{$max-sm} {
            font-size: 13px;
            line-height: 22px;
        }
    }
    .ct-grid-inner {
        margin: 0 -2px -1px 0;
        .grid-item {
            padding: 0;
            border-right: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
        }
    }
}

.ct-get-quote1 {
    background-color: #0e2a47;
    padding: 27px 40px;
    @include border-radius(5px);
    background-image: url(../images/bg-get-quote.png);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    @media #{$max-lg} {
        padding-left: 15px;
        padding-right: 15px;
    }
    @media #{$max-sm} {
        padding-left: 5px;
        padding-right: 5px;
    }
    .ct-quote-meta, .ct-quote-form {
        width: 50%;
        padding: 0 15px;
        @media #{$max-sm} {
            width: 100%;
        }
    }
    .ct-quote-meta {
        @media #{$max-sm} {
            margin-bottom: 32px;
        }
        h4 {
            margin-bottom: 12px;
            color: #fff;
            font-size: 24px;
            @media #{$max-lg} {
                font-size: 22px;
            }
        }
        p {
            font-size: 16px;
            font-family: "Nunito Sans";
            color: #bbb;
            line-height: 24px;
            margin-bottom: 0px;
            @media #{$max-lg} {
                font-size: 14px;
            }
            i {
                width: 22px;
                height: 21px;
                background-image: url(../images/like.png);
                background-position: center;
                background-repeat: no-repeat;
                display: inline-block;
                background-size: cover;
                margin-left: 15px;
                position: relative;
                bottom: -2px;
                @media #{$max-sm} {
                    display: none;
                }
            }
        }
    }
    .wpcf7-form .input-filled {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        @media #{$max-lg} {
            display: block;
        }
        .wpcf7-form-control-wrap {
            margin-bottom: 0;
            margin-right: 10px;
            width: auto;
            @media #{$max-lg} {
                margin-bottom: 10px;
                margin-right: 0;
            }
        }
        .wpcf7-form-control {
            &:not(.wpcf7-submit) {
                height: 46px;
                background-color: #2d465f;
                border-color: #2d465f;
                font-size: 15px;
                color: #b9cbdd;
                font-family: "Nunito Sans";
                padding: 0 22px;
                @include border-radius(3px);
            }
        }
        .btn-preset4 {
            line-height: 46px;
            padding: 0 23px;
            @include border-radius(3px);
            i {
                margin-right: 0;
            }
        }
    }
}

.ct-cta1 {
    background-color: #0e2a47;
    border-radius: 7px;
    padding: 0 55px 0 70px;
    position: relative;
    background-image: url(../images/bg-cta.png);
    display: flex;
    flex-wrap: wrap;
    @media #{$max-lg} {
        padding-right: 30px;
        padding-left: 30px;
    }
    @media #{$max-xs} {
        flex-direction: column-reverse;
        padding-left: 20px;
        padding-right: 20px;
    }
    &:before {
        content: '';
        width: 70px;
        height: 70px;
        @include border-radius(10px);
        position: absolute;
        bottom: -17px;
        left: 50%;
        @include transform(translate(-50%, 0) rotate(45deg));
        background-color: #0e2a47;
    }
    .item--title {
        color: #fff;
        font-weight: 400;
        font-size: 36px;
        line-height: 42px;
        @media #{$max-md} {
            font-size: 30px;
        }
        @media #{$max-xs} {
            font-size: 28px;
            line-height: 1.3;
        }
        b {
            font-weight: 700;
        }
    }
    .ct-cta-holder {
        margin-top: 42px;
        display: flex;
        flex-wrap: wrap;
        font-family: "Nunito Sans";
        font-weight: 700;
        color: #fff;
        align-items: center;
        @media #{$max-md} {
            margin-top: 32px;
        }
        .ct-cta-text {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: relative;
            margin: 0 25px;
            z-index: 1;
            font-size: 18px;
            @media #{$max-md} {
                display: none;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                @include border-radius(9px);
                @include background-gradient-bottom($gradient_from_hex4, $gradient_color_to4);
                @include transform(rotate(45deg));
                z-index: -1;
            }
            span {
                height: 140px;
                width: 3px;
                border-right: 3px dashed $gradient_color_from4;
                position: absolute;
                top: 50%;
                left: 18px;
                @include transform(translate(0, -50%));
                z-index: -2;
                &:before , &:after {
                    content: '';
                    height: 40px;
                    width: 3px;
                    position: absolute;
                }
                &:before {
                    top: 0;
                    @include background-gradient-bottom(rgba(#0e2a47, 0), #0e2a47);
                }
                &:after {
                    bottom: 0;
                    @include background-gradient-bottom(#0e2a47, rgba(#0e2a47, 0));
                }
            }
        }
        .ct-cta-label {
            display: block;
            font-size: 18px;
            span {
                border-bottom: 1px solid rgba(#fff, 0.4);
                line-height: 1;
                display: inline-block;
            }
        }
        a {
            font-size: 24px;
            line-height: 1.2;
            color: inherit;
            i {
                color: $gradient_color_from4;
                margin-right: 10px;
                display: inline-block;
            }
            &:hover i {
                animation: icon-bounce 800ms ease-out infinite;
                -webkit-animation: icon-bounce 800ms ease-out infinite;
            }
        }
    }
    @media #{$max-md} {
        .ct-cta-info {
            width: 100%;
            + .ct-cta-text + .ct-cta-info {
                margin-top: 22px;
            }
        }
    }
    .ct-cta-content {
        width: 65%;
        padding-top: 68px;
        padding-bottom: 60px;
        @media #{$max-xs} {
            width: 100%;
            padding-top: 32px;
        }
    }
    .ct-cta-image {
        width: 35%;
        margin-top: -65px;
        text-align: right;
        margin-bottom: 16px;
        @media #{$max-xs} {
            width: 100%;
            text-align: center;
        }
    }
}

.ct-menu-item {
    list-style: none;
    margin-bottom: 0;
    a {
        display: inline-block !important;
        cite {
            background-color: $primary_color;
            color: #fff;
            @include border-radius(18px);
            text-transform: capitalize;
            font-style: normal;
            font-size: 10px;
            padding: 0 5px;
            font-weight: 700;
            line-height: 16px;
            display: inline-block;
            margin-left: 4px;
            position: relative;
            top: -8px;
        }
    }
    i {
        font-size: 94%;
        margin-right: 4px;
        display: inline-block;
        min-width: 14px;
    }
}

.ct-logo {
    opacity: 1;
    a {
        display: inline-block;
    }
    img {
        width: auto;
    }
}

// Language Switcher
//--------------------------------------------------
.ct-language-switcher1 {
    font-size: 13px;
    color: #4e4e4e;
    position: relative;
    z-index: 99;
    a {
        color: inherit;
        &:hover {
            color: inherit;
        }
    }
    ul {
        margin: 0;
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        font-size: 14px;
        @media #{$max-xl} {
            left: auto;
            right: 0;
        }
        min-width: 160px;
        padding: 18px 24px;
        background-color: #fff;
        z-index: 99;
        @include box-shadow(0 18px 43px rgba(#5a5a5a, 0.14));
        @include border-radius(3px);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        transform: perspective(300px) rotateX(-90deg);
        transform-origin: 50% 0%;
        li {
            padding: 4px 0;
        }
        a {
            display: inline-flex;
            align-items: center;
            img {
                max-width: 21px;
                @include border-radius(21px);
                margin-right: 9px;
                @include box-shadow(0 2px 6px rgba(#000, 0.06));
            }
        }
    }
    .current--item {
        line-height: 46px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        cursor: pointer;
        img {
            max-width: 21px;
            @include border-radius(21px);
        }
        label {
            cursor: pointer;
            padding: 0 16px 0 9px;
            position: relative;
            svg {
                position: absolute;
                right: 0;
                top: 50%;
                @include transform(translate(0, -50%));
                height: 9px;
                @include transition(all .25s cubic-bezier(.3,.3,0,.8));
            }
        }
        &:hover label svg {
            @include transform(translate(0, -50%) scaleY(-1));
        }
    }
    &:hover {
        .current--item label:after {
            @include transform(scaleY(-1));
        }
        .current--item + ul {
            margin-top: 0;
            transform: perspective(300px) rotateX(0deg);
        }
    }
    &.dr-right ul {
        left: auto;
        right: 0;
    }
}
.ct-text-editor .ct-item--inner {
    display: inline-block;
    width: 100%;
}

body.rtl {
    .ct-language-switcher1 .current--item label {
        padding: 0 9px 0 16px;
        svg {
            right: auto;
            left: 0;
        }
    }
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: elements.scss

Server Info

System Features

User Info