// Global Styles

.pxl-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    @media #{$max-lg3} {
        max-width: calc(100vw - 30px);
        padding: 0 15px;
    }
}

.pxl-container-1350 {
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1380 {
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1200 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1250 {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1290 {
    max-width: 1290px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1032 {
    max-width: 1032px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1068 {
    max-width: 1068px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1616 {
    max-width: 1616px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1620 {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1660 {
    max-width: 1660px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1550 {
    max-width: 1550px;
    width: 100%;
    margin: 0 auto;
}

.pxl-container-1225 {
    max-width: 1225px;
    width: 100%;
    margin: 0 auto;
}

.pxl-gray-image {
    opacity: 0.9;
    background: lightgray -539.778px 0px / 199.365% 100% no-repeat;
    mix-blend-mode: luminosity;
}

.pxl-gray-image-2 {
    position: relative;
    img {
        background: lightgray -137.427px 0px / 184.522% 100% no-repeat;
        mix-blend-mode: luminosity;
        position: relative;
        z-index: 2;
    }
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: #435358;
        z-index: 1;
    }
}

.ct-bg-project {
    background: lightgray 50% / cover no-repeat, #242d31;
}

// Custom style
.fancy-box-header {
    .ct-fancy-box-layout11 {
        padding: 0;
        flex-direction: row-reverse;
        gap: 12px;

        .item--icon {
            flex: 1;
            --x: 48px;
            width: var(--x);
            height: var(--x);
            min-width: var(--x);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            font-size: 20px;
            background-color: #d9d9d9;
            border-color: #d9d9d9;
            animation: ringing 3s ease-in-out infinite;

            &:before {
                background-color: #d9d9d9;
            }

            i {
                color: #242d31;
            }
        }

        .item--title {
            margin-bottom: 0;
            text-align: right;
        }
    }
}

.fancy-box-header-2 {
    .ct-fancy-box-layout11 {
        padding: 0;
        gap: 16px;

        .item--icon {
            flex: 1;
            --x: 48px;
            width: var(--x);
            height: var(--x);
            min-width: var(--x);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            font-size: 20px;
            background-color: $secondary-color;
            border-color: $secondary-color;
            animation: ringing 3s ease-in-out infinite;

            &:before {
                background-color: $secondary-color;
            }

            i {
                color: #fff;
            }
        }

        .item--title {
            margin-bottom: 0;
            text-align: left;
        }
    }
}

@keyframes ringing {
    20% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(10deg);
    }
    22% {
        transform: rotate(-10deg);
    }
    23% {
        transform: rotate(12deg);
    }
    24% {
        transform: rotate(-12deg);
    }
    25% {
        transform: rotate(12deg);
    }
    26% {
        transform: rotate(-12deg);
    }
    28% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    32% {
        transform: rotate(5deg);
    }
    34% {
        transform: rotate(-5deg);
    }
    36% {
        transform: rotate(2deg);
    }
    38% {
        transform: rotate(0deg);
    }
}

.bottom-header {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(36, 45, 49, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 0 0 6px 6px;
    @media #{$max-lg3} {
        padding: 0;
        margin: 0 15px;
    }
}

.button-bottom-header {
    .btn {
        border-radius: 0 0 6px 0;
        line-height: 64px;
        border: none;
        position: relative;
        margin-right: -1px;
        margin-bottom: -1px;
        box-shadow: none !important;
    }
}

.ct-icon-section-1 {
    position: relative;

    &:before {
        content: "";
        background-image: url("../images/Ellipse.png");
        position: absolute;
        top: 50%;
        right: -15px;
        transform: translateY(-50%);
        width: 96px;
        height: 405px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    &:after {
        content: "";
        background-image: url("../images/Ellipse.png");
        position: absolute;
        top: 50%;
        left: -105px;
        transform: translateY(-50%);
        width: 96px;
        height: 210px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    .ct-icon1 {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 12px;

        a {
            margin-right: 0;
        }

        i {
            margin: 0;
        }
    }
}

.bg-groovepaper {
    width: 100%;
    height: 100%;
    background-image: url("../images/groovepaper.webp");
    background-color: lightgray;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.consultancy-col-1 {
    width: 45% !important;
    @media #{$max-md2} {
        width: 100% !important;
    }
}

.consultancy-col-2 {
    width: 68% !important;
    max-width: 68% !important;
    position: absolute !important;
    right: 0 !important;
    top: 368px !important;
    @media #{$max-md2} {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
    }
}

.phone-call-consultancy {
    .ct-fancy-box-layout11 {
        display: flex;
        align-items: center;
        gap: 38px;
        @media #{$max-xs} {
            gap: 20px;
        }

        &:hover .item--icon {
            background-color: #242d31;

            i {
                color: #fff;
            }
        }

        .item--icon {
            width: 56px;
            height: 56px;
            min-width: 56px;
            @include border-radius(56px);
            background-color: #242d31;
            margin-right: 0;
            border: none;
            position: relative;
            animation: ringing 3s ease-in-out infinite;

            i {
                font-size: 24px;
            }

            &:before,
            &:after {
                content: "";
                position: absolute;
                border: 1px solid #242d31;
                background-color: transparent;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                top: -7px;
                left: -7px;
                transform: translate(0, 0);
                animation: call-pulse 1s linear infinite;
            }

            &:before {
                background-color: transparent;
            }

            &::after {
                animation-delay: 0.3s;
            }
        }

        .item--title {
            color: #5b5f60;
            font-family: "DM Sans", sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: -0.2px;
            margin-bottom: 0;
        }

        .item--description {
            color: #242d31;
            font-family: "DM Sans", sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.4;
            letter-spacing: -0.2px;
            text-decoration: underline;
        }
    }
}

@keyframes call-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.view-all-blogs-btn {
    position: relative;
    overflow: hidden;
    --bg-position: -50%;

    &:before {
        content: "";
        position: absolute;
        top: -50%;
        left: var(--bg-position);
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(#10151c, 0.1) 10px,
            rgba(#10151c, 0.1) 11px
        );
        pointer-events: none;
        z-index: 0;
        transition: left 0.5s ease;
    }

    > * {
        position: relative;
        z-index: 1;
    }
}

.ct-testi-section {
    .slick-track {
        margin-left: -250px;
        @media #{$max-sm} {
            margin-left: 0;
        }
    }
}

@keyframes zoomInFromBottomLeft {
    0% {
        opacity: 0;
        transform: scale(0.5) translate(-50px, 50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

.animate__zoomInFromBottomLeft {
    animation-name: zoomInFromBottomLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
    pointer-events: all;
}

.ct-avt-footer {
    img {
        border-radius: 8px;
        opacity: 0.9;
        background: lightgray -539.778px 0px / 199.365% 100% no-repeat;
        mix-blend-mode: luminosity;
    }
}

.ct-portfolio-section {
    .grid-item {
        &:nth-child(3),
        &:nth-child(4) {
            .item--title {
                color: #242d31;
            }

            .item--category {
                a {
                    border-color: rgba(91, 95, 96, 0.72);
                    color: rgba(91, 95, 96, 0.72);

                    &:hover {
                        border-color: #242d31;
                        background-color: #242d31;
                        color: #fff;
                    }
                }
            }
        }

        @media #{$max-md} {
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4) {
                .item--title {
                    color: #242d31;
                }

                .item--category {
                    a {
                        border-color: rgba(91, 95, 96, 0.72);
                        color: rgba(91, 95, 96, 0.72);

                        &:hover {
                            border-color: #242d31;
                            background-color: #242d31;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

.ct-counter-section-1 {
    .ct-counter-inner {
        text-align: left;
    }

    .ct-counter-number {
        justify-content: start;
    }

    .ct-counter-number-suffix {
        color: #596eff !important;
        font-size: 60px !important;
        font-weight: 500 !important;
        font-family: "Manrope", sans-serif !important;
        background-image: none !important;
        background-clip: initial !important;
        text-fill-color: initial !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
    }

    .ct-counter-title {
        max-width: 128px;
    }
}

.ct-blog-carousel-2 {
    .ct-blog-carousel-layout10 {
        .item--title,
        .item--meta li,
        .item--date span {
            font-family: "Manrope", sans-serif !important;
        }

        .item--featured img {
            filter: grayscale(0);
        }

        .item--category {
            color: $secondary-color;

            a {
                color: inherit;
            }
        }
    }
}

.ct-project-section {
    .ct-slick-slider .ct-carousel-inner .slick-slide {
        width: 1300px !important;
        @media #{$max-md2} {
            width: 100% !important;
            padding: 0 30px;
        }
    }
}

.ct-testi-section-2 {
    .ct-slick-carousel.slick-arrow-style2 .slick-arrow {
        width: 56px;
        height: 56px;
        border-radius: 56px;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(32, 32, 32, 0.2);
        backdrop-filter: blur(6px);

        &:before {
            font-size: 20px;
            color: #202020;
        }

        &:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(32, 32, 32, 0.2);
            backdrop-filter: blur(6px);
        }
    }

    .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"]
        .slick-arrow.slick-prev {
        left: -144px;
        @media #{$max-lg2} {
            left: -14px;
        }
    }

    .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"]
        .slick-arrow.slick-next {
        right: -144px;
        @media #{$max-lg2} {
            right: -14px;
        }
    }

    .ct-slick-carousel .slick-arrow:after {
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(32, 32, 32, 0.2);
        backdrop-filter: blur(6px);
        background-color: transparent !important;
        background-image: none !important;
    }
}

.ct-counter-custom {
    .ct-counter.ct-counter-layout11 .ct-counter-number-suffix {
        color: #2a2a2a !important;
        line-height: inherit;
    }
}

.ct-pseudo-section-1 {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: -40px;
        left: 20px;
        width: calc(100% - 40px);
        height: 40px;
        background-color: #f7f5ef;
    }

    @media #{$max-md2} {
        &:before {
            display: none;
        }
    }
}

.ct-pseudo-section-2 {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: -40px;
        left: 0;
        width: 100%;
        height: 40px;
        background-color: #cad1ff;
    }

    @media #{$max-md2} {
        &:before {
            display: none;
        }
    }
}

.ct-client-grid-footer {
    .col-xl-4,
    .col-lg-4,
    .col-md-4,
    .col-sm-6,
    .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.ct-text-shadow-section-1 {
    .sp-main {
        text-shadow: 0px 10px 0px rgba(#fff, 0.1), 0px 20px 0px rgba(#fff, 0.1);
    }
}

.ct-order-1 {
    @media #{$max-md2} {
        order: 1 !important;
    }
}

.ct-order-2 {
    @media #{$max-md2} {
        order: 2 !important;
    }
}

.ct-call-section {
    .ct-fancy-box {
        .item--icon {
            width: 52px;
            height: 52px;
            min-width: 52px;
            border-radius: 52px;
            line-height: 52px;
            margin-right: 16px;
            position: relative;
            animation: ringing 3s ease-in-out infinite;

            &:before,
            &:after {
                content: "";
                position: absolute;
                border: 1px solid $primary-color;
                background-color: transparent;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                top: -7px;
                left: -7px;
                transform: translate(0, 0);
                animation: call-pulse 1s linear infinite;
            }

            &:before {
                background-color: transparent;
            }

            &::after {
                animation-delay: 0.3s;
            }
        }

        .item--title {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            margin-top: 0;
            margin-bottom: 0;
        }

        .item--description {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            text-decoration: underline;
        }
    }
}

.ct-custom-heading {
    .ct-heading {
        position: relative;

        &:before {
            content: "";
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background-color: $third-color;
            left: -41px;
            top: -44px;
        }
    }
}

.ct-custom-heading-2 {
    .ct-heading {
        .item--title {
            .ct-text-highlight {
                display: inline-block;
                margin: 0;
                padding: 0;

                &:nth-child(1) {
                    color: $primary-color;
                }

                &:nth-child(2) {
                    color: $secondary-color;
                    margin-left: -12px;
                }
            }
        }
    }
}

.ct-custom-heading-2-1 {
    .ct-heading {
        .item--title {
            .ct-text-highlight {
                display: inline-block;
                margin: 0;
                padding: 0;

                &:nth-child(1) {
                    color: $secondary-color;
                }

                &:nth-child(2) {
                    color: $primary-color;
                    margin-left: -12px;
                }
            }
        }
    }
}

.ct-custom-section-finance {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: -68px;
        left: 0;
        width: 100%;
        height: 68px;
        background-image: url("../images/subtract.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    &:after {
        content: "";
        position: absolute;
        bottom: -68px;
        left: 0;
        width: 100%;
        height: 68px;
        background-image: url("../images/subtract.png");
        transform: rotate(180deg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.ct-custom-section-finance-2 {
    position: relative;
    background-image: url("../images/noise.webp");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;

    &:before {
        content: "";
        position: absolute;
        top: -68px;
        left: 0;
        width: 100%;
        height: 68px;

        background-image: url("../images/subtract-noise.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 1;
    }
}

.ct-custom-section-finance-3 {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -112px;
        left: 0;
        width: 100%;
        height: 112px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='112' viewBox='0 0 1920 112' fill='none'><path d='M0 109.429L1920 0V896H0V109.429Z' fill='%23024445'/></svg>");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

.ct-heading-custom-2 {
    position: relative;

    &:before,
    &:after {
        content: "";
        position: absolute;
        top: 110%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(240, 240, 240, 0.08);
        background-color: transparent;
    }

    &:before {
        width: 900px;
        height: 900px;
        animation: pulse-2 4s linear infinite;
    }

    &:after {
        width: 1200px;
        height: 1200px;
        animation: pulse-2 4s linear infinite;
    }
}

@keyframes pulse-2 {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.5;
    }
}

.ct-big-button {
    position: relative;

    &:before {
        content: "";
        width: 576.777px;
        height: 133px;
        transform: rotate(-21.343deg);
        display: block;
        border-radius: 576.777px;
        opacity: 0.4;
        background: var(--finance-beff-6-b, #beff6b);
        filter: blur(150px);
        position: absolute;
        top: -100%;
        left: 35%;
        @media #{$max-sm} {
            display: none;
        }
    }

    .btn.btn-round4 {
        --x: 123px;
        transform: rotate(-4deg);
        @media #{$max-sm} {
            --x: 60px;
        }

        .ct-button-text {
            box-shadow: 20px -20px 60px 0px rgba(190, 255, 107, 0.32) !important;
            padding: 0 60px;
            border-color: #fff;
            background-color: #fff;
            color: $primary-color;
            text-align: center;
            font-family: "Figtree", sans-serif;
            font-size: 84px;
            font-style: normal;
            font-weight: 800;
            letter-spacing: -3.36px;
            text-transform: uppercase;
            @media #{$max-sm} {
                font-size: 45px;
                padding: 0 40px;
            }
        }

        .ct-button-icon {
            font-size: 60px;
            box-shadow: 20px -20px 60px 0px rgba(190, 255, 107, 0.32) !important;
            @media #{$max-sm} {
                font-size: 35px;
            }
        }
    }
}

.ct-social-header-3 {
    ct-icon1.style4 a {
        width: 38px !important;
    }
}

.ct-bottom-header-3 {
    border-radius: 8px 0 0 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

.ct-menu-header-3 {
    li.menu-item-has-children > a::after {
        color: #beff6b !important;
    }
}

.ct-menu-header-4 {
    .ct-menu-item-marker {
        background-color: $secondary-color !important;
        color: $primary-color !important;

        &:before {
            border-color: $secondary-color transparent transparent transparent;
        }
    }
}

.ct-top-header-5,
.ct-bottom-header-5 {
    background: transparent !important;
}

.ct-top-header-5-container {
    width: 100%;
    height: 64px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1547 64'%3E%3Cpath d='M0 0H1547L1525.26 46.6675C1520.34 57.2401 1509.73 64 1498.07 64H48.9327C37.2694 64 26.6631 57.2401 21.7383 46.6675L0 0Z' fill='white'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    @media #{$max-xl} {
        height: 100%;
        background-size: 100% 100%;
        background-position: center;
    }
    @media #{$max-lg3} {
        background-image: none;
        background-color: #fff;
    }
}

.ct-bottom-header-5-container {
    width: 100%;
    height: 92px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1290' height='92' viewBox='0 0 1290 92' fill='none'%3E%3Cpath d='M35.5013 74.8554L0 0H1290L1254.5 74.8554C1249.53 85.3259 1238.98 92 1227.39 92H62.6073C51.0191 92 40.467 85.3258 35.5013 74.8554Z' fill='%23082BCD'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    @media #{$max-xl} {
        height: 72px;
        background-size: 100% 100%;
        background-position: center;
        background-image: none;
        background-color: $secondary-color;
    }
}

.ct-contact-info-header-5 {
    .ct-contact-info {
        display: flex;
        align-items: center;
        gap: 48px;
        li + li {
            margin-top: 0 !important;
        }
    }
}

.ct-bottom-header-5-menu {
    position: relative !important;
    height: 92px;
    z-index: 3 !important;
    @media #{$max-lg3} {
        height: 72px;
    }
    &:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 780px;
        width: 100%;
        height: 92px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='92' viewBox='0 0 780 92' fill='none'%3E%3Cpath d='M20.1509 70.2696L0 0H780L759.849 70.2696C756.16 83.1347 744.395 92 731.011 92H48.9886C35.6049 92 23.8401 83.1347 20.1509 70.2696Z' fill='%23080F3E'/%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 2 !important;
        @media #{$max-xl} {
            max-width: 100%;
            height: 100%;
            background-size: cover;
        }
        @media #{$max-lg3} {
            max-width: 100%;
            height: 100%;
            background-size: cover;
        }
    }
    &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 810px;
        width: 100%;
        height: 92px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='810' height='92' viewBox='0 0 810 92' fill='none'%3E%3Cpath d='M21.013 70.5622L0 0H810L788.987 70.5622C785.199 83.281 773.505 92 760.235 92H49.7652C36.4945 92 24.8006 83.281 21.013 70.5622Z' fill='white'/%3E%3C/svg%3E");
        z-index: 1;
        @media #{$max-xl} {
            max-width: 700px;
            height: 100%;
            background-size: 100% 100%;
        }
        @media #{$max-lg3} {
            max-width: 750px;
            height: 100%;
            background-size: 100% 100%;
        }
    }
}

.ct-btn-custom-home-5 {
    .ct-button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
    }
    .ct-button-text {
        margin-right: 10px;
    }
}

.ct-btn-custom-home-5-2 {
    .ct-button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
    }
    .ct-button-text {
        margin-right: 10px;
    }
}

.ct-custom-form-home-6 {
    background: linear-gradient(
        180deg,
        rgba($gradient-color-from, 0.4) 0%,
        rgba($gradient-color-to, 0.4) 100%
    );
    backdrop-filter: blur(25px);
}

// Slider Revolution
.ct-dot-color {
    color: #beff6b;
}

.ct-rs-sub-title {
    .item--sub-title {
        color: #ffcd4c !important;
    }
}

rs-layer-wrap {
    &:has(.ct-rs-button-round4) {
        @media screen and (max-width: 1024px) and (min-width: 993px) {
            top: 390px !important;
        }
        @media screen and (max-width: 960px) and (min-width: 800px) {
            top: 380px !important;
        }
        @media screen and (max-width: 580px) and (min-width: 480px) {
            top: 320px !important;
        }
    }
}

.ct-rs-button-round4 {
    display: flex;
    align-items: center;

    &:hover {
        span {
            background-color: #fff;
            border-color: #fff;
            color: #005153;

            i {
                transform: rotate(45deg);
            }
        }
    }

    span {
        border-radius: 100px;
        border: 1px solid #fff;
        background: rgba(0, 81, 83, 0.1);
        height: 52px;
        color: #fff;
        font-family: "Figtree", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 28px;
        transition: all 0.3s linear 0ms;
    }

    i {
        display: inline-flex;
        width: 52px;
        height: 52px;
        padding: 16px;
        font-size: 16px !important;
        align-items: center;
        justify-content: center;
        border-radius: 26px;
        background: #beff6b;
        color: #005153;
        transform: rotate(0deg);
        transition: all 0.3s linear 0ms;
    }
}

.ct-slider-home-3 {
    rs-bullets {
        @media #{$max-lg3} {
            display: none;
        }

        .tp-bullet {
            width: 8px !important;
            height: 8px !important;
            background-color: #4a7172 !important;
            border: none !important;

            &.selected {
                background-color: #beff6b !important;
            }
        }
    }
}

rs-group-wrap {
    @media screen and (max-width: 1280px) and (min-width: 1024px) {
        left: 30px !important;
    }
}

#ct-custom-slider-5 {
    rs-layer-wrap {
        &:has(.ct-rs-image-5-1) {
            position: absolute;
            top: 0 !important;
            left: 0 !important;
        }
    }
    rs-layer-wrap {
        &:has(.ct-rs-image-5-2) {
            position: absolute;
            bottom: 0 !important;
            left: 0 !important;
        }
    }
    .tp-bullets {
        @media #{$max-md2} {
            transform: translate(-115px, -50%) !important;
        }
        @media screen and (max-width: 580px) {
            transform: translate(-80px, -50%) !important;
        }
    }
    .tp-bullet {
        --x: 60px;
        position: relative;
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
        background-color: transparent !important;
        background: transparent !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-color: transparent !important;
        @include transition(all 0.3s linear 0ms);
        @media #{$max-md2} {
            width: 50px !important;
            height: 50px !important;
        }
        &:hover {
            color: $primary-color !important;
        }
        &.selected {
            border-color: $primary-color !important;
            &:before {
                color: $primary-color !important;
            }
        }
        &:before {
            content: "";
            position: absolute !important;
            display: block;
            color: rgba(#080f3e, 0.5);
            font-family: "DM Serif Text", serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        &:nth-child(1) {
            &:before {
                content: "01" !important;
            }
        }
        &:nth-child(2) {
            top: var(--x) !important;
            &:before {
                content: "02" !important;
            }
        }
        &:nth-child(3) {
            top: calc(var(--x) * 2) !important;
            &:before {
                content: "03" !important;
            }
        }
        &:nth-child(4) {
            top: calc(var(--x) * 3) !important;
            &:before {
                content: "04" !important;
            }
        }
    }
    rs-layer-wrap {
        &:has(.sr-button-5) {
            @media screen and (min-width: 2000px) {
                left: -14px;
                top: 360px !important;
            }
            @media screen and (max-width: 1024px) and (min-width: 768px) {
                left: -14px !important;
                top: 360px !important;
            }
            @media #{$max-xsx} {
                top: 320px !important;
            }
            @media screen and (max-width: 360px) {
                top: 280px !important;
            }
        }
    }
    rs-layer-wrap {
        &:has(.ct-sr-phone-call) {
            @media screen and (min-width: 2000px) {
                left: 250px !important;
                top: 370px !important;
            }
            @media screen and (max-width: 1024px) and (min-width: 768px) {
                top: 370px !important;
            }
            @media #{$max-xsx} {
                left: 220px !important;
                top: 330px !important;
            }
            @media screen and (max-width: 360px) {
                left: 0 !important;
                top: 370px !important;
            }
        }
    }
    rs-layer-wrap {
        &:has(.ct-sr-phone-call-label) {
            @media screen and (min-width: 2000px) {
                left: 330px !important;
                top: 370px !important;
            }
            @media screen and (max-width: 1024px) and (min-width: 768px) {
                top: 365px !important;
                left: 330px !important;
            }
            @media #{$max-xsx} {
                left: 280px !important;
                top: 330px !important;
                .ct-sr-phone-call-label {
                    font-size: 14px !important;
                }
            }
            @media screen and (max-width: 360px) {
                left: 70px !important;
                top: 370px !important;
            }
        }
    }
    rs-layer-wrap {
        &:has(.ct-sr-phone-call-number) {
            @media screen and (min-width: 2000px) {
                left: 330px !important;
                top: 390px !important;
            }
            @media screen and (max-width: 1024px) and (min-width: 768px) {
                left: 330px !important;
                top: 385px !important;
            }
            @media #{$max-xsx} {
                left: 280px !important;
                top: 350px !important;
                .ct-sr-phone-call-number {
                    font-size: 20px !important;
                }
            }
            @media screen and (max-width: 360px) {
                left: 70px !important;
                top: 390px !important;
            }
        }
    }
}

.ct-custom-list-4 {
    .ct-list-item {
        display: inline-flex;
        align-items: center;
    }

    .ct-list-icon {
        i {
            font-size: 20px !important;
            color: $primary-color !important;
        }
    }
}

.ct-choose-section-2 {
    position: relative;
    z-index: 3;

    .elementor-container {
        position: relative;
        z-index: 3;
        background-color: #e6efee;
        border-radius: 20px;
    }

    &::before {
        content: "";
        position: absolute;
        top: -32px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 32px + 32px);
        border-radius: 20px 20px 0px 20px;
        height: 406px;
        background-color: $secondary-color;
        z-index: 1;
        @media #{$max-xxl} {
            width: calc(100vw - 32px);
        }
        @media #{$max-xs} {
            display: none;
        }
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -52px;
        right: -32px;
        width: 511px;
        height: 486px;
        border-radius: 20px;
        background-color: $primary-color;
        z-index: 2;
        @media #{$max-xxl} {
            right: -16px;
        }
        @media #{$max-xs} {
            display: none;
        }
    }
}

.ct-video-player-4 {
    border: none;

    .ct-video-image-bg {
        border-radius: 0px 20px 20px 0px;
        @media #{$max-md2} {
            border-radius: 0px 0px 20px 20px;
        }
    }
}

.ct-team-custom-4 {
    .slick-track {
        width: 1400px !important;
        margin-right: -100px !important;

        @media (max-width: 600px) {
            width: 100%;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }
    }

    .slick-slide {
        width: 360px !important;
        margin: 0 15px !important;

        @media (max-width: 600px) {
            width: 100%;
            margin: 0 !important;
        }
    }
}

.ct-custom-image-4 {
    position: relative;

    .ct-image-bg {
        position: relative;
        z-index: 5;
        border-radius: 20px;
    }

    &:before {
        content: "";
        position: absolute;
        width: 408px;
        height: 466px;
        bottom: -52px;
        left: -52px;
        border-radius: 20px;
        background-color: $primary-color;
        @media #{$max-xl} {
            left: -16px;
            bottom: -16px;
        }
    }
}

.ct-custom-faq-4 {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        width: 634px;
        height: 497px;
        background-color: $primary-color;
        top: -52px;
        right: -52px;
    }
}

.sr-button-5 {
    line-height: 60px !important;
    height: 60px !important;
    .btn {
        line-height: 60px !important;
        height: 60px !important;
        border-radius: 0 !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        .ct-button-text {
            text-transform: uppercase;
            font-family: "DM Serif Text", serif;
            font-size: 18px;
            font-weight: 600;
        }
        .ct-button-icon {
            display: inline-flex;
            align-items: center;
        }
    }
}

.ct-sr-phone-call {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #1e79fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: transparent;
        border: 3px solid #1e79fb;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.ct-custom-button-5 {
    .ct-button-icon {
        display: flex;
        height: 60px;
        align-items: center;
    }
    .ct-button-text {
        margin-right: 8px;
    }
}

.ct-custom-heading-home-5 {
    .item--title {
        .sp-main {
            text-wrap: nowrap;
            @include background-gradient-bottom(
                rgba($gradient_color_to, 0.08),
                rgba($gradient_color_from, 0.08)
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

.ct-column-home-6 {
    border-radius: 90px 0px 0px 0px;
    background: #0a1123;
    position: relative;
    z-index: 2;
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 90px 0px 0px 0px;
        background: #0a1123;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
    &:after {
        content: "";
        position: absolute;
        width: 97px;
        height: calc(100% - 70px);
        border-radius: 300px 300px 0px 0px;
        background: linear-gradient(
            180deg,
            $gradient-color-from 0%,
            $gradient-color-to 100%
        );
        bottom: 0;
        left: -12px;
        z-index: -1;
    }
}

.ct-custom-header-home-7 {
    background: rgba(193, 203, 205, 0.10);
    backdrop-filter: blur(7.5px);
}

.ct-custom-header-home-7-1 {
    background: rgba(#000, 0.30);
    backdrop-filter: blur(7.5px);
}

.ct-cart-home-7 {
    .ct-icon1 {
        a {
            display: flex;
        }
    }
}

// Case Heading
.ct-heading {
    .item--title {
        &.st-stroke {
            -webkit-text-stroke-width: 1.5px;
            -webkit-text-stroke-color: black;
            -webkit-text-fill-color: transparent;
            text-wrap: nowrap;
        }
    }

    .item--sub-title {
        &.style13 {
            color: #242d31;
            text-transform: capitalize;
            font-size: 15px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            padding: 8px 20px;
            border-radius: 4px;
            border: 1px solid rgba(36, 45, 49, 0.24);
            position: relative;
            margin-bottom: 16px;

            &:before,
            &:after {
                content: "";
                width: 4px;
                height: 4px;
                background-color: #242d31;
                @include border-radius(50%);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                opacity: 1;
            }

            &:before {
                left: 8px;
            }

            &:after {
                right: 8px;
            }
        }

        &.style14 {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            text-transform: uppercase;
            position: relative;
            border-radius: 4px;
            background: rgba(74, 113, 114, 0.16);
            padding: 8px 12px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 12px;
        }

        &.style15 {
            color: $primary-color;
            font-family: "Libre Baskerville";
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.62;
            text-transform: uppercase;
            position: relative;
            margin-bottom: 15px;

            &::after {
                content: "";
                position: absolute;
                bottom: 4px;
                left: 0;
                width: 100%;
                height: 8px;
                background-color: $secondary-color;
                z-index: -1;
            }
        }
    }

    &.item-st-line-bottom2 {
        .ct-heading-divider {
            margin-top: 20px;

            span {
                display: block;
                width: 100%;
                height: 1px;
                background-color: rgba(#fff, 0.2);
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 38px;
                    height: 2px;
                    background-color: $primary-color;
                }
            }
        }
    }
}

// Case Search Form
.ct-search-form {
    .ct-searchform-wrap {
        min-width: 506px;
        height: 48px;
        border-radius: 6px;
        background-color: #fff;
        display: inline-flex;
        align-items: center;
        padding: 7px 8px;
        font-family: "DM Sans", sans-serif;
        font-size: 14px;
        @media #{$max-lg3} {
            min-width: 300px;
        }
    }

    .ct-search-field {
        background-color: transparent;
        border: none;
        padding: 0;
        color: #242d31;
        padding: 0 12px;

        &::placeholder {
            color: rgba(101, 101, 101, 0.4);
        }
    }

    .ct-search-submit {
        color: #242d31;
        line-height: 34px;
        font-size: 16px;
        font-weight: 500;
        padding: 0;
        margin-left: 10px;
        background-color: #ebd37f;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0 14px;
        font-size: 14px;
        box-shadow: none;
        @include transition(all 0.3s linear 0ms);

        &:hover {
            background-color: #242d31;
            color: #fff;
        }
    }
}

// Case Menu
.ct-nav-menu {
    &.style7 {
        .ct-main-menu {
            > li {
                margin: 0 26px;

                &.menu-item-has-children {
                    > a {
                        &:after {
                            content: "\F13D";
                            font-family: "flaticon-v7";
                            font-weight: 400;
                            font-size: 8px;
                            color: $primary-color;
                        }
                    }

                    &:hover {
                        > a:after {
                            transform: rotate(180deg);
                        }
                    }
                }

                > a {
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }

    &.style8 {
        .ct-main-menu {
            > li {
                margin: 0 25px;

                &.menu-item-has-children {
                    > a {
                        &:after {
                            content: "\F13D";
                            font-family: "flaticon-v7";
                            font-weight: 400;
                            font-size: 8px;
                            color: #fff;
                        }
                    }

                    &:hover {
                        > a {
                            span {
                                color: $secondary-color;
                            }

                            &:after {
                                transform: rotate(180deg);
                                color: $secondary-color;
                            }
                        }
                    }
                }
            }
        }
    }

    &.style9 {
        .ct-main-menu {
            > li {
                > a {
                    color: #fff;
                    font-family: "DM Serif Text";
                    font-size: 18px;
                    font-weight: 400;
                    @include transition(all 0.3s linear 0ms);
                    &:before {
                        display: none;
                    }
                    span {
                        position: relative;
                        line-height: 1.78;
                        &:before,
                        &:after {
                            content: "";
                            position: absolute;
                            width: 0;
                            height: 2px;
                            background-color: $primary-color;
                            @include transition(all 0.3s linear 0ms);
                        }
                        &:before {
                            top: 0;
                            left: 0;
                        }
                        &:after {
                            bottom: 0;
                            right: 0;
                        }
                    }
                }
                &.menu-item-has-children {
                    > a {
                        &:after {
                            content: "\F13D";
                            font-family: "flaticon-v7";
                            font-weight: 400;
                            font-size: 8px;
                            color: #fff;
                        }
                        &:hover {
                            color: $primary-color;
                            &:after {
                                transform: rotate(180deg);
                            }
                            span {
                                &:before,
                                &:after {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.style10 {
        .ct-main-menu {
            > li {
                margin: 0 26px;

                &.menu-item-has-children {
                    > a {
                        span {
                            position: relative;
                            &:before {
                                content: "";
                                position: absolute;
                                width: 0%;
                                height: 2px;
                                background-color: $primary-color;
                                @include transition(all 0.3s linear 0ms);
                                bottom: -8px;
                                left: auto;
                                right: 0;
                            }
                        }
                        &:after {
                            content: "\F13D";
                            font-family: "flaticon-v7";
                            font-weight: 400;
                            font-size: 8px;
                            color: inherit;
                        }
                    }
                }

                > a.ct-onepage-active,
                &:hover > a,
                &.current_page_item:not(.menu-item-type-custom) > a,
                &.current-menu-item:not(.menu-item-type-custom) > a,
                &.current-menu-parent > a,
                &.current_page_ancestor:not(.menu-item-type-custom) > a,
                &.current-menu-ancestor:not(.menu-item-type-custom) > a {
                    span {
                        color: $primary-color;
                        &:before {
                            width: 100%;
                            left: 0;
                            right: auto;
                        }
                    }
                    &:after {
                        transform: rotate(180deg);
                        color: $primary-color;
                    }
                }

                > a {
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }
}

// Case Mouse Scroll
.ct-mouse-scroll {
    scroll-behavior: smooth;

    .ct-mouse-scroll__link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }

    .ct-mouse {
        width: 24px;
        height: 36px;
        border-radius: 18px;
        border: 1px solid #fff;
        position: relative;

        &:before {
            content: "";
            width: 4px;
            height: 6px;
            background-color: #fff;
            @include border-radius(4px);
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            animation: mouse-scroll 1.5s ease-in-out infinite;
        }
    }

    .ct-mouse-scroll__link-text {
        color: #fff;
        font-family: "DM Sans", sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }
}

@keyframes mouse-scroll {
    0% {
        top: 8px;
    }
    50% {
        top: 16px;
    }
    100% {
        top: 8px;
    }
}

// Case Blur Block
.ct-blur-block {
    .ct-blur-block__inner {
        display: flex;
    }

    .ct-blur-block__item {
        width: 27px;
        min-height: 500px;
        background: linear-gradient(
            270deg,
            rgba(32, 32, 32, 0.06) 0%,
            rgba(255, 255, 255, 0.04) 100%
        );
        backdrop-filter: blur(6px);
    }
}

// Case Fancy Box
.ct-fancy-box {
    &.ct-fancy-box-layout23 {
        display: block;
        padding: 72px 64px 69px 64px;
        background: linear-gradient(
            180deg,
            #fff 0%,
            rgba(#fff, 0.9) 30%,
            rgba(#fff, 0.7) 60%,
            rgba(#fff, 0) 100%
        );
        @include transition(all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms);
        position: relative;
        z-index: 1;
        @media #{$max-lg3} {
            padding: 72px 30px 69px 30px;
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                #fff9e5 0%,
                rgba(#fff9e5, 0.9) 30%,
                rgba(#fff9e5, 0.7) 60%,
                rgba(#fff9e5, 0) 100%
            );
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: -1;
        }

        &:hover {
            &:after {
                opacity: 1;
            }
        }

        .item--icon {
            margin-bottom: 35px;
        }

        .item--title {
            color: #242d31;
            font-family: "DM Sans", sans-serif;
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.27;
            margin-bottom: 32px;
        }

        .item--description {
            color: #5b5f60;
            font-family: "DM Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.55;
        }
    }

    &.ct-fancy-box-layout24 {
        border-radius: 0px 0px 12px 12px;
        border-bottom: 4px solid rgba(91, 95, 96, 0.32);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        padding: 60px 40px 50px 56px;
        transform: translateY(0px);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &:hover {
            transform: translateY(-10px);

            .item--icon {
                i,
                svg {
                    transform: rotateY(360deg);
                }
            }
        }

        @media #{$max-xxl} {
            padding: 60px 30px 50px 30px;
        }

        .item--icon {
            margin-bottom: 52px;

            i,
            svg {
                transform: rotateY(0deg);
                transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }
        }

        .item--title {
            color: #242d31;
            font-family: "DM Sans", sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 20px;
            max-width: 230px;
        }

        .item--description {
            color: #5b5f60;
            font-family: "DM Sans", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.55;
        }
    }

    &.ct-fancy-box-layout26 {
        border-radius: 6px;
        border: 1px solid rgba(0, 81, 83, 0.24);
        background: #fff;
        padding: 36px;
        position: relative;
        overflow: hidden;
        max-width: 280px;
        width: 100%;
        @media #{$max-sm} {
            max-width: 100%;
        }

        &:hover {
            .item--icon {
                transform: scale(1.5) rotate(-5deg);
            }
        }

        .item--sub-title {
            color: #ffcd4c;
            font-family: "Inter", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            position: relative;
            margin-bottom: 36px;

            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: -36px;
                width: 32px;
                height: 1px;
                background-color: #ffcd4c;
                transform: translateY(-50%);
            }
        }

        .item--icon {
            position: absolute;
            top: 36px;
            right: -12px;
            transform: scale(1) rotate(0deg);
            transition: all 0.3s ease-in-out;
        }

        .item--title {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.48px;
            margin-bottom: 20px;
            max-width: 100px;
        }

        .item--description {
            color: #4a7172;
            font-family: "Figtree", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
        }
    }

    &.ct-fancy-box-layout27 {
        width: 222px;
        background-color: rgba($primary-color, 0.1);
        @include transition(all 0.3s linear 0ms);
        border-radius: 5px;
        padding: 24px 20px;
        position: relative;
        @media #{$max-md2} {
            width: 100%;
        }

        &:hover {
            background-color: rgba($primary-color, 1);

            .item--icon {
                svg,
                i {
                    color: $secondary-color;
                }
            }

            .item--icon-big {
                svg,
                i {
                    color: rgba(#fff, 0.05);
                    opacity: 1;
                    transform: scale(1) rotate(0deg);
                }
            }

            .item--title {
                color: #fff;
            }

            .item--description {
                color: #fff;
            }
        }

        .item--icon {
            margin-bottom: 15px;
            position: relative;
            z-index: 2;

            svg,
            i {
                color: $primary-color;
                font-size: 40px;
                width: 40px;
                height: 40px;
                @include transition(all 0.3s linear 0ms);
            }
        }

        .item--icon-big {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            svg,
            i {
                color: rgba($primary-color, 0.1);
                font-size: 178px;
                width: 178px;
                height: 178px;
                opacity: 0;
                transform: scale(1.5) rotate(-5deg);
                @include transition(all 0.3s linear 0ms);
            }
        }

        .item--title {
            color: #151818;
            font-family: "Libre Baskerville";
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 26px;
            margin-bottom: 12px;
            z-index: 2;
            position: relative;
        }

        .item--description {
            color: #444848;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.667;
            z-index: 2;
            position: relative;
        }
    }

    &.ct-fancy-box-layout28 {
        .item--inner {
            position: relative;
            @media #{$max-xs} {
                width: calc(100vw - 30px);
                min-height: 350px;
                height: 100%;
            }
        }

        .background-number {
            &.background-number-1 {
                color: $primary-color;
            }

            &.background-number-2 {
                color: $secondary-color;
            }

            &.background-number-3 {
                color: $third-color;
            }

            @media #{$max-xsx} {
                svg {
                    display: none;
                }
            }
        }

        .item--body {
            width: 298px;
            height: 298px;
            border-radius: 50%;
            background-color: #f2f3f3;
            position: absolute;
            top: 50%;
            right: 28px;
            transform: translateY(-50%);
            text-align: center;
            padding: 36px 30px;
            @media #{$max-xsx} {
                right: 50%;
                transform: translate(50%, -50%);
            }
        }

        .item--icon {
            margin-bottom: 10px;

            &.item--icon-1 {
                color: $primary-color;
            }

            &.item--icon-2 {
                color: $secondary-color;
            }

            &.item--icon-3 {
                color: $third-color;
            }
        }

        .item--title {
            color: #fff;
            font-family: "Libre Baskerville";
            font-size: 17px;
            font-style: normal;
            font-weight: 700;
            line-height: 30px;
            width: 100%;
            text-align: center;
            background-color: $primary-color;
            padding: 12px 0;
            position: relative;
            margin-bottom: 15px;

            &:before {
                content: "";
                position: absolute;
                top: 50%;
                right: -56px;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-left: 56px solid $primary-color;
                border-top: 54px solid transparent;
                @media #{$max-xsx} {
                    display: none;
                }
            }

            &.item--title-1 {
                background-color: $primary-color;

                &:before {
                    border-left: 56px solid $primary-color;
                }
            }

            &.item--title-2 {
                background-color: $secondary-color;

                &:before {
                    border-left: 56px solid $secondary-color;
                }
            }

            &.item--title-3 {
                background-color: $third-color;

                &:before {
                    border-left: 56px solid $third-color;
                }
            }
        }

        .item--description {
            max-width: 225px;
            color: #444848;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.57;
        }

        &.style2 {
            .item--body {
                background-color: #0a1123;
            }
            .item--title-1 {
                background: linear-gradient(180deg, #2af598 0%, #009efd 100%);
                &:before {
                    content: "";
                    position: absolute;
                    width: 56px;
                    height: 54px;
                    background: linear-gradient(180deg, #2af598, #009efd);
                    border: none;
                    clip-path: polygon(0 0, 0 100%, 100% 100%);
                }
            }
            .item--title-2 {
                background: linear-gradient(180deg, #ac32e4 0%, #7523f4 100%);
                &:before {
                    content: "";
                    position: absolute;
                    width: 56px;
                    height: 54px;
                    background: linear-gradient(180deg, #ac32e4, #7523f4);
                    border: none;
                    clip-path: polygon(0 0, 0 100%, 100% 100%);
                }
            }
            .item--title-3 {
                background: linear-gradient(90deg, #1efeff 0%, #2fb8fc 100%);
                &:before {
                    content: "";
                    position: absolute;
                    width: 56px;
                    height: 54px;
                    background: linear-gradient(90deg, #2fb8fc, #4c41f6);
                    border: none;
                    clip-path: polygon(0 0, 0 100%, 100% 100%);
                }
            }
            .item--description {
                color: rgba(#fff, 0.8);
            }
        }
    }

    &.ct-fancy-box-layout29 {
        .item--icon {
            width: 76px;
            height: 76px;
            margin-bottom: 32px;
        }
        .item--title {
            color: #090919;
            font-family: "DM Serif Text";
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.42;
            margin-bottom: 18px;
        }
        .item--description {
            color: #53535e;
            font-family: "Roboto";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
        }
        @media #{$max-xsx} {
            text-align: center;
            .item--icon {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
            }
        }
        &.style2 {
            padding: 30px;
            border-radius: 10px;
            background: linear-gradient(
                180deg,
                rgba($gradient-color-from, 0) 0%,
                rgba($gradient-color-to, 0) 100%
            );
            @include transition(all 0.3s linear 0ms);
            &:hover {
                background: linear-gradient(
                    180deg,
                    rgba($gradient-color-from, 0.1) 0%,
                    rgba($gradient-color-to, 0.1) 100%
                );
            }
            .item--icon {
                margin-bottom: 36px;
            }
            .item--title {
                color: #fff;
                font-family: Unbounded;
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 1.4;
                margin-bottom: 24px;
            }
            .item--description {
                color: rgba(#fff, 0.7);
                font-family: Roboto;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
            }
        }
    }
}

// Case List
.ct-list {
    &.style8 {
        margin-left: 0;

        .ct-list-item {
            display: flex;
            align-items: center;

            .ct-list-icon {
                display: none;
            }

            .ct-list-meta {
                padding-left: 30px;
                position: relative;

                &:before {
                    content: "\f14a";
                    font-family: "Font Awesome 5 Pro";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5b5f60;
                    font-size: 18px;
                    font-weight: 400;
                }
            }

            .ct-list-desc {
                color: #242d31;
                font-family: "DM Sans", sans-serif;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
            }

            + .ct-list-item {
                margin-top: 24px;
            }
        }
    }

    &.style9 {
        .ct-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ct-list-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .ct-list-meta {
            .ct-list-desc {
                color: #202020;
                font-family: "Manrope", sans-serif;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                letter-spacing: 0.18px;
            }
        }
    }

    &.style10 {
        margin-left: 0;

        .ct-list-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ct-list-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: $primary-color;
        }

        .ct-list-meta {
            .ct-list-desc {
                color: $primary-color;
                font-family: "Figtree", sans-serif;
                font-size: 18px;
                font-weight: 500;
            }
        }
    }

    &.style11 {
        margin-left: 0;
        .ct-list-item {
            + ct-list-item {
                margin-top: 24px;
            }
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .ct-list-icon {
            width: 24px;
            height: 24px;
            color: $secondary-color;
        }
        .ct-list-desc {
            color: #fff;
            font-family: Unbounded;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.556;
            letter-spacing: 0.18px;
        }
    }
}

// Case Counter
.ct-counter {
    &.ct-counter-layout3 {
        &.style4 {
            text-align: left;

            .ct-counter-holder {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .ct-counter-number {
                justify-content: flex-start;
                font-size: 44px;
                font-weight: 500;
                letter-spacing: -0.44px;
                color: #242d31;
                margin-bottom: 0;

                .ct-counter-number-suffix,
                .ct-counter-number-prefix {
                    color: $primary-color;
                    background-image: none;
                    -webkit-background-clip: initial;
                    -webkit-text-fill-color: initial;
                    font-size: 25px;
                }
            }

            .ct-counter-title {
                color: #5b5f60;
                font-family: "DM Sans", sans-serif;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.556;
            }
        }
    }
}

// Case Service Carousel
.ct-service-carousel16 {
    $primary-color-1: #d8f4dc;
    $secondary-color-1: #4db15b;
    $primary-color-2: #d6e9f5;
    $secondary-color-2: #338ac2;
    $primary-color-3: #ead1dd;
    $secondary-color-3: #d24287;
    --x: 80px;

    position: relative;

    .item-circles {
        position: absolute;
        top: -110px;
        right: -110px;
        width: 240px;
        height: 240px;
        pointer-events: none;
        z-index: 1;

        .item-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            border: 2px solid var(--circle-color, #fff);
            opacity: 0.3;
            animation: circle-pulse 2.5s ease-in-out infinite;

            @for $i from 1 through 5 {
                &.item-circle-#{$i} {
                    $sizes: 37px, 88px, 138px, 189px, 240px;
                    $size: nth($sizes, $i);
                    width: $size;
                    height: $size;
                    animation-delay: 0.2s * ($i - 1);
                }
            }
        }
    }

    .carousel-item {
        &:nth-child(1) {
            .grid-item-inner {
                --primary-color: #{$primary-color-1};
                --secondary-color: #{$secondary-color-1};
                background: var(--primary-color);
                border-bottom: 4px solid var(--secondary-color);

                .item-circle {
                    border-color: #{$secondary-color-1};
                }
            }
        }

        &:nth-child(2) {
            .grid-item-inner {
                --primary-color: #{$primary-color-2};
                --secondary-color: #{$secondary-color-2};
                background: var(--primary-color);
                border-bottom: 4px solid var(--secondary-color);

                .item-circle {
                    border-color: #{$secondary-color-2};
                }
            }
        }

        &:nth-child(3) {
            .grid-item-inner {
                --primary-color: #{$primary-color-3};
                --secondary-color: #{$secondary-color-3};
                background: var(--primary-color);
                border-bottom: 4px solid var(--secondary-color);

                .item-circle {
                    border-color: #{$secondary-color-3};
                }
            }
        }

        .grid-item-inner {
            padding: 52px 44px 44px 44px;
            border-radius: 16px;
            position: relative;
            overflow: hidden;

            &:hover {
                .item--icon {
                    img {
                        transform: translate(
                            calc(-50% + var(--x) / 2),
                            calc(-50% + var(--x) / 2)
                        );
                    }
                }
            }

            .grid-item-holder {
                position: relative;
                z-index: 2;
            }
        }

        .item--icon {
            position: relative;

            &:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: var(--x);
                height: var(--x);
                background: rgba(255, 255, 255, 0.6);
                @include border-radius(50%);
            }

            img {
                z-index: 5;
                position: relative;
                transform: translate(0, 0);
                transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }
        }

        .item--title {
            margin-top: 70px;
            margin-bottom: 20px;
            color: #242d31;
            font-family: "DM Sans", sans-serif;
            font-size: 26px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.23;

            a {
                color: inherit;
            }
        }

        .item--content {
            color: #5b5f60;
            font-family: "DM Sans", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.55;
            margin-bottom: 24px;
        }

        .entry-readmore {
            position: relative;
            display: inline-flex;
            align-items: center;
            overflow: hidden;
            height: 40px;
            min-width: 40px;
            @include transition(all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94));

            .btn-plus-readmore {
                --x: 40px;
                width: var(--x);
                height: var(--x);
                background-color: transparent;
                @include border-radius(50%);
                border: 1px solid var(--secondary-color);
                position: absolute;
                left: 0;
                top: 0;
                cursor: pointer;
                z-index: 2;
                @include transition(
                    all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
                );

                &:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 16px;
                    height: 2px;
                    background-color: var(--secondary-color);
                    @include border-radius(4px);
                    @include transition(
                        all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
                    );
                }

                &:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    height: 16px;
                    width: 2px;
                    background-color: var(--secondary-color);
                    @include border-radius(4px);
                    @include transition(
                        all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
                    );
                }
            }

            .btn-readmore {
                display: inline-flex;
                padding: 0;
                justify-content: center;
                align-items: center;
                border-radius: 4px;
                border: 1px solid var(--secondary-color);
                font-family: "DM Sans", sans-serif;
                line-height: 38px;
                height: 40px;
                font-size: 16px;
                font-weight: 500;
                color: var(--secondary-color);
                @include transition(
                    all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
                );
                box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.12);
                width: 40px;
                max-width: 40px;
                padding-left: 0;
                padding-right: 0;
                overflow: hidden;
                white-space: nowrap;
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;

                &:hover {
                    background-color: var(--secondary-color);
                    color: #fff;
                }
            }

            &:hover {
                min-width: 115px;

                .btn-plus-readmore {
                    opacity: 0;
                    transform: rotate(90deg) scale(0.5);
                    visibility: hidden;
                }

                .btn-readmore {
                    width: 100%;
                    max-width: 200px;
                    padding: 0 18px;
                    opacity: 1;
                }
            }
        }
    }
}

.ct-service-carousel17 {
    .grid-item-holder {
        position: relative;
        overflow: hidden;

        &:hover {
            .item--featured {
                &:before {
                    opacity: 0;
                    transform: translateY(20px);
                }
            }

            .btn-readmore {
                opacity: 0;
                transform: scale(0);
            }

            .item--icon {
                opacity: 0;
            }

            .item--title {
                opacity: 0;
            }

            .item--content {
                opacity: 0;
            }

            .item--overlay {
                opacity: 1;
                transform: scale(1);
                visibility: visible;

                .item--icon-overlay {
                    opacity: 1;
                    transform: translateY(0);
                }

                .item--title {
                    opacity: 1;
                    transform: translateY(0);
                }

                .item--content {
                    opacity: 1;
                    transform: translateY(0);
                }

                .item-readmore {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
    }

    .item--featured {
        position: relative;
        height: 484px;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(#000, 0) 48.55%,
                $primary-color 100%
            );
            z-index: 1;
            opacity: 1;
            transform: translateY(0);
            @include transition(all 0.3s linear 0ms);
        }
    }

    .btn-readmore {
        position: absolute;
        top: 0;
        right: 0;
        width: 66px;
        height: 66px;
        opacity: 1;
        transform: scale(1);
        transform-origin: top right;
        background-color: $secondary-color;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 7px solid #f2f3f3;
        color: #fff;
        @include transition(all 0.3s linear 0ms);
    }

    .item--icon {
        position: absolute;
        left: 0;
        top: 220px;
        width: 118px;
        height: 84px;
        border-radius: 0px 15px 15px 0px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(7.5px);
        padding-right: 16px;
        display: flex;
        align-items: center;
        justify-content: end;
        opacity: 1;
        @include transition(all 0.3s linear 0ms);
    }

    .item--holder {
        position: absolute;
        bottom: 40px;
        left: 40px;
        right: 40px;
        z-index: 3;
    }

    .item--title {
        color: #fff;
        font-family: "Libre Baskerville";
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.42;
        margin-bottom: 15px;
        opacity: 1;
        @include transition(all 0.3s linear 0ms);

        a {
            color: inherit;
        }
    }

    .item--content {
        color: #fff;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.57;
        opacity: 1;
        @include transition(all 0.3s linear 0ms);
    }

    .item--overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transform: scale(0);
        transform-origin: bottom left;
        @include transition(all 0.3s linear 0ms);

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            height: 100%;
        }

        &:before {
            left: 0;
            background-color: rgba($secondary-color, 0.9);
        }

        &:after {
            right: 0;
            background-color: rgba($primary-color, 0.9);
        }
    }

    .item--icon-overlay {
        width: 94px;
        height: 94px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #151818;
        backdrop-filter: blur(7.5px);
        position: relative;
        z-index: 6;
        opacity: 0;
        transform: translateY(20px);
        @include transition(all 0.3s linear 0ms);
    }

    .item--holder-overlay {
        position: relative;
        z-index: 6;

        .item--title {
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s linear 0.2s;
        }

        .item--content {
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s linear 0.3s;
        }
    }

    .item-readmore {
        position: relative;
        z-index: 6;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s linear 0.4s;

        a {
            color: #fff;
            text-transform: uppercase;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            display: flex;
            align-content: center;
            justify-content: center;
            gap: 10px;
            position: relative;
            line-height: 52px;
            padding: 0 25px;
            border-radius: 5px;

            span,
            svg,
            i {
                position: relative;
                z-index: 6;
                display: flex;
                align-items: center;
            }
        }

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            height: 100%;
        }

        &:before {
            left: 0;
            background-color: $primary-color;
            border-radius: 5px 0px 0px 5px;
        }

        &:after {
            right: 0;
            background-color: $secondary-color;
            border-radius: 0px 5px 5px 0px;
        }
    }

    button.slick-arrow {
        width: 62px !important;
        height: 62px !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        &:after {
            display: none !important;
        }

        &.slick-next {
            background-color: $secondary-color !important;

            &:before {
                content: "" !important;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M18.5926 15.1481H3.6667C3.36219 15.1481 3.07016 15.0271 2.85484 14.8118C2.63952 14.5965 2.51855 14.3045 2.51855 14C2.51855 13.6954 2.63952 13.4034 2.85484 13.1881C3.07016 12.9728 3.36219 12.8518 3.6667 12.8518H18.5926C18.8971 12.8518 19.1892 12.9728 19.4045 13.1881C19.6198 13.4034 19.7408 13.6954 19.7408 14C19.7408 14.3045 19.6198 14.5965 19.4045 14.8118C19.1892 15.0271 18.8971 15.1481 18.5926 15.1481Z' fill='%23056251'/%3E%3Cpath d='M17.4444 22.037C17.2933 22.0379 17.1435 22.0089 17.0036 21.9518C16.8637 21.8947 16.7365 21.8105 16.6292 21.7041C16.5216 21.5973 16.4361 21.4703 16.3779 21.3304C16.3196 21.1905 16.2896 21.0404 16.2896 20.8889C16.2896 20.7373 16.3196 20.5872 16.3779 20.4473C16.4361 20.3074 16.5216 20.1804 16.6292 20.0737L22.7144 14L16.6292 7.92628C16.413 7.71008 16.2915 7.41685 16.2915 7.1111C16.2915 6.9597 16.3213 6.80979 16.3793 6.66992C16.4372 6.53005 16.5221 6.40296 16.6292 6.29591C16.7362 6.18886 16.8633 6.10394 17.0032 6.04601C17.1431 5.98807 17.293 5.95825 17.4444 5.95825C17.7501 5.95825 18.0433 6.07971 18.2595 6.29591L25.1484 13.1848C25.256 13.2915 25.3415 13.4185 25.3998 13.5584C25.458 13.6983 25.4881 13.8484 25.4881 14C25.4881 14.1516 25.458 14.3016 25.3998 14.4415C25.3415 14.5815 25.256 14.7084 25.1484 14.8152L18.2595 21.7041C18.1523 21.8105 18.025 21.8947 17.8851 21.9518C17.7453 22.0089 17.5955 22.0379 17.4444 22.037Z' fill='%23056251'/%3E%3C/svg%3E");
                width: 27px;
                height: 27px;
                background-size: contain;
            }
        }

        &.slick-prev {
            &:before {
                content: "" !important;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M9.40737 12.8519L24.3333 12.8519C24.6378 12.8519 24.9298 12.9729 25.1452 13.1882C25.3605 13.4035 25.4814 13.6955 25.4814 14C25.4814 14.3046 25.3605 14.5966 25.1452 14.8119C24.9298 15.0272 24.6378 15.1482 24.3333 15.1482L9.40737 15.1482C9.10287 15.1482 8.81083 15.0272 8.59551 14.8119C8.38019 14.5966 8.25922 14.3046 8.25922 14C8.25922 13.6955 8.38019 13.4035 8.59551 13.1882C8.81083 12.9729 9.10287 12.8519 9.40737 12.8519Z' fill='%23056251'/%3E%3Cpath d='M10.5556 5.96297C10.7067 5.9621 10.8565 5.99106 10.9964 6.0482C11.1363 6.10534 11.2635 6.18953 11.3708 6.29594C11.4784 6.40267 11.5639 6.52966 11.6221 6.66957C11.6804 6.80948 11.7105 6.95955 11.7105 7.11112C11.7105 7.26269 11.6804 7.41276 11.6221 7.55267C11.5639 7.69259 11.4784 7.81957 11.3708 7.92631L5.28564 14L11.3708 20.0737C11.587 20.2899 11.7085 20.5831 11.7085 20.8889C11.7085 21.0403 11.6787 21.1902 11.6207 21.3301C11.5628 21.4699 11.4779 21.597 11.3708 21.7041C11.2638 21.8111 11.1367 21.8961 10.9968 21.954C10.8569 22.0119 10.707 22.0417 10.5556 22.0417C10.2499 22.0417 9.95666 21.9203 9.74046 21.7041L2.85157 14.8152C2.74396 14.7085 2.65854 14.5815 2.60025 14.4416C2.54196 14.3016 2.51195 14.1516 2.51195 14C2.51195 13.8484 2.54196 13.6984 2.60025 13.5585C2.65854 13.4185 2.74396 13.2916 2.85157 13.1848L9.74046 6.29594C9.84774 6.18953 9.97498 6.10534 10.1149 6.0482C10.2548 5.99106 10.4045 5.9621 10.5556 5.96297Z' fill='%23056251'/%3E%3C/svg%3E");
                width: 27px;
                height: 27px;
                background-size: contain;
            }
        }
    }
}

@keyframes circle-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.05;
    }
}

.ct-service-carousel18 {
    .ct-slick-carousel {
        padding-bottom: 0;
    }
    .slick-arrow {
        width: 62px;
        height: 62px;
        border-radius: 0;
        box-shadow: none;
        position: absolute;
        bottom: 0;
        left: 0;
        &:after {
            display: none;
        }
        &.slick-prev {
            background-color: #5a6267;
            margin-bottom: 77px;
            &:before {
                content: "";
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M9.40737 12.8519L24.3333 12.8519C24.6378 12.8519 24.9298 12.9729 25.1452 13.1882C25.3605 13.4035 25.4814 13.6955 25.4814 14C25.4814 14.3046 25.3605 14.5966 25.1452 14.8119C24.9298 15.0272 24.6378 15.1482 24.3333 15.1482L9.40737 15.1482C9.10287 15.1482 8.81083 15.0272 8.59551 14.8119C8.38019 14.5966 8.25922 14.3046 8.25922 14C8.25922 13.6955 8.38019 13.4035 8.59551 13.1882C8.81083 12.9729 9.10287 12.8519 9.40737 12.8519Z' fill='white'/%3E%3Cpath d='M10.5555 5.96297C10.7066 5.9621 10.8564 5.99106 10.9963 6.0482C11.1362 6.10534 11.2634 6.18953 11.3707 6.29594C11.4783 6.40267 11.5637 6.52966 11.622 6.66957C11.6803 6.80948 11.7103 6.95955 11.7103 7.11112C11.7103 7.26269 11.6803 7.41276 11.622 7.55267C11.5637 7.69259 11.4783 7.81957 11.3707 7.92631L5.28552 14L11.3707 20.0737C11.5869 20.2899 11.7084 20.5831 11.7084 20.8889C11.7084 21.0403 11.6785 21.1902 11.6206 21.3301C11.5627 21.4699 11.4778 21.597 11.3707 21.7041C11.2637 21.8111 11.1366 21.8961 10.9967 21.954C10.8568 22.0119 10.7069 22.0417 10.5555 22.0417C10.2498 22.0417 9.95654 21.9203 9.74034 21.7041L2.85145 14.8152C2.74384 14.7085 2.65842 14.5815 2.60013 14.4416C2.54184 14.3016 2.51183 14.1516 2.51183 14C2.51183 13.8484 2.54184 13.6984 2.60013 13.5585C2.65842 13.4185 2.74384 13.2916 2.85145 13.1848L9.74034 6.29594C9.84762 6.18953 9.97485 6.10534 10.1147 6.0482C10.2546 5.99106 10.4044 5.9621 10.5555 5.96297Z' fill='white'/%3E%3C/svg%3E");
                width: 27px;
                height: 27px;
                background-size: contain;
                background-repeat: no-repeat;
            }
        }
        &.slick-next {
            background-color: $primary-color;
            margin-left: -40px;
            &:before {
                content: "";
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M18.5926 15.1481H3.6667C3.36219 15.1481 3.07016 15.0271 2.85484 14.8118C2.63952 14.5965 2.51855 14.3045 2.51855 14C2.51855 13.6954 2.63952 13.4034 2.85484 13.1881C3.07016 12.9728 3.36219 12.8518 3.6667 12.8518H18.5926C18.8971 12.8518 19.1892 12.9728 19.4045 13.1881C19.6198 13.4034 19.7408 13.6954 19.7408 14C19.7408 14.3045 19.6198 14.5965 19.4045 14.8118C19.1892 15.0271 18.8971 15.1481 18.5926 15.1481Z' fill='white'/%3E%3Cpath d='M17.4445 22.037C17.2934 22.0379 17.1436 22.0089 17.0037 21.9518C16.8638 21.8947 16.7366 21.8105 16.6293 21.7041C16.5217 21.5973 16.4363 21.4703 16.378 21.3304C16.3197 21.1905 16.2897 21.0404 16.2897 20.8889C16.2897 20.7373 16.3197 20.5872 16.378 20.4473C16.4363 20.3074 16.5217 20.1804 16.6293 20.0737L22.7145 14L16.6293 7.92628C16.4131 7.71008 16.2916 7.41685 16.2916 7.1111C16.2916 6.9597 16.3215 6.80979 16.3794 6.66992C16.4373 6.53005 16.5222 6.40296 16.6293 6.29591C16.7363 6.18886 16.8634 6.10394 17.0033 6.04601C17.1432 5.98807 17.2931 5.95825 17.4445 5.95825C17.7502 5.95825 18.0435 6.07971 18.2597 6.29591L25.1486 13.1848C25.2562 13.2915 25.3416 13.4185 25.3999 13.5584C25.4582 13.6983 25.4882 13.8484 25.4882 14C25.4882 14.1516 25.4582 14.3016 25.3999 14.4415C25.3416 14.5815 25.2562 14.7084 25.1486 14.8152L18.2597 21.7041C18.1524 21.8105 18.0251 21.8947 17.8853 21.9518C17.7454 22.0089 17.5956 22.0379 17.4445 22.037Z' fill='white'/%3E%3C/svg%3E");
                width: 27px;
                height: 27px;
                background-size: contain;
                background-repeat: no-repeat;
            }
        }
    }
    .grid-item-inner {
        &:hover {
            .item--holder {
                bottom: 0;
            }
            .item--content {
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 24px;
            }
            .btn-readmore {
                background-color: #223035;
                svg {
                    color: #fff;
                    transform: rotate(45deg);
                }
            }
            .btn-readmore-text {
                opacity: 1;
                transform: translateY(0);
                height: 52px;
            }
        }
    }
    .item--featured {
        height: 528px;
    }
    .item--image {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: lightgray 50% / cover no-repeat;
            mix-blend-mode: luminosity;
            transition: all 0.3s linear 0ms;
            position: relative;
            z-index: 2;
        }
        &:after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: $primary-color;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        &:before {
            content: "";
            position: absolute;
            background: linear-gradient(
                180deg,
                rgba(36, 43, 48, 0) 0%,
                rgba(36, 43, 48, 0.75) 55.37%,
                #242b30 100%
            );
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 354px;
            z-index: 3;
        }
    }
    .item--holder {
        position: absolute;
        z-index: 4;
        bottom: 20px;
        left: 45px;
        right: 15px;
        transition: all 0.3s linear 0ms;
    }
    .item--icon {
        margin-bottom: 20px;
        svg {
            width: 60px;
            height: 60px;
            fill: #fff;
            transition: all 0.3s linear 0ms;
        }
    }
    .item--title {
        color: #fff;
        font-family: Livvic;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.33;
        margin-bottom: 17px;
        a {
            color: inherit;
        }
    }
    .item--content {
        margin: 0;
        color: rgba(#fff, 0.8);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 91px);
        margin-bottom: 0;
        @include transition(all 0.3s linear 0ms);
    }
    .btn-readmore {
        width: 52px;
        height: 52px;
        background-color: #fff;
        color: $primary-color;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0px;
        right: 0px;
        @include transition(all 0.3s linear 0ms);
        z-index: 8;
        svg {
            width: 30px;
            height: 30px;
            color: $primary-color;
            transform: rotate(0deg);
            transition: all 0.3s linear 0ms;
        }
    }
    .btn-readmore-text {
        color: #fff;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        width: 100%;
        background-color: #5a6267;
        padding: 0 15px;
        height: 0px;
        display: flex;
        align-items: center;
        justify-content: start;
        opacity: 0;
        transform: translateY(52px);
    }
}

// Case Counter
.ct-counter {
    &.ct-counter-layout11 {
        .ct-counter-holder {
            display: flex;
            flex-direction: row-reverse;
            gap: 16px;
            justify-content: start;
        }

        .ct-counter-number {
            display: flex;
            color: #242d31;
            font-family: "DM Sans", sans-serif;
            font-size: 80px;
            font-style: normal;
            font-weight: 600;
            letter-spacing: -0.8px;
            line-height: 0.85;
            text-transform: uppercase;
        }

        .ct-counter-number-prefix,
        .ct-counter-number-suffix {
            color: #ebd37f;
            line-height: 1;
            font-family: Inter;
            font-size: 45px;
            font-style: normal;
            font-weight: 400;
            display: flex;
            align-items: end;
        }

        .ct-counter-title {
            margin-top: 20px;
            max-width: 112px;
            color: #5b5f60;
            font-family: "DM Sans", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.333;
        }
    }

    &.ct-counter-layout12 {
        .ct-counter-holder {
            display: inline-flex;
            align-items: center;
            gap: 20px;
        }

        .ct-counter-number {
            display: inline-flex;
            align-items: center;
            padding: 16px 17px 16px 0;
            border-right: 1px solid rgba($primary-color, 0.2);
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 26px;
            text-transform: uppercase;
        }

        .ct-counter-title {
            color: #4a7172;
            font-family: "Figtree", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
            max-width: 180px;
        }
    }
}

// Case Semi Circle Chart
.ct-semi-circle-chart {
    position: relative;
    @media #{$max-md2} {
        width: 90vw;
    }

    .ct-semi-circle-chart-inner {
        position: relative;
        z-index: 1;

        .ct-semi-chart-1 {
            position: absolute;
            bottom: 0;
            left: 0;

            .ct-semi-circle-chart-title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 30px;
            }

            @media #{$max-md2} {
                img {
                    width: 45vw;
                    object-fit: contain;
                }
            }
            @media screen and (max-width: 360px) {
                .ct-semi-circle-chart-title {
                    font-size: 16px;
                    bottom: 20px;
                }
            }
        }

        .ct-semi-chart-2 {
            position: absolute;
            bottom: 0;
            left: 0;

            .ct-semi-circle-chart-title {
                position: absolute;
                left: calc(100% - 90px);
                bottom: 30px;
            }

            @media #{$max-lg3} {
                width: 73%;
            }
            @media #{$max-md2} {
                img {
                    width: 65vw;
                    object-fit: contain;
                }
                .ct-semi-circle-chart-title {
                    left: calc(100% - 80px);
                }
            }
            @media #{$max-xsx} {
                .ct-semi-circle-chart-title {
                    left: calc(100% - 60px);
                }
            }
            @media screen and (max-width: 360px) {
                .ct-semi-circle-chart-title {
                    left: calc(100% - 50px);
                    font-size: 16px;
                    bottom: 20px;
                }
            }
        }

        .ct-semi-chart-3 {
            position: absolute;
            bottom: 0;
            left: 0;

            .ct-semi-circle-chart-title {
                position: absolute;
                left: calc(100% - 120px);
                bottom: 30px;
            }

            @media #{$max-md2} {
                img {
                    width: 90vw;
                    object-fit: contain;
                }
                .ct-semi-circle-chart-title {
                    left: calc(100% - 100px);
                }
            }
            @media #{$max-xsx} {
                .ct-semi-circle-chart-title {
                    left: calc(100% - 80px);
                }
            }
            @media screen and (max-width: 360px) {
                .ct-semi-circle-chart-title {
                    font-size: 16px;
                    bottom: 20px;
                    left: calc(100% - 60px);
                }
            }
        }
    }

    .ct-semi-circle-chart-title {
        color: #5b5f60;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .ct-semi-circle-chart-tooltip-trigger {
        position: absolute;
        right: 0;
        bottom: 35px;
        pointer-events: all;
        @media screen and (max-width: 360px) {
            bottom: 25px;
        }

        > span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #242d31;
            position: relative;
            z-index: 10;
            display: block;
            cursor: pointer;

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.3);
                border-radius: 50%;
                background: rgba(#242d31, 0.15);
                animation: ripple 1s ease-out infinite;
            }

            &:before {
                width: 20px;
                height: 20px;
                z-index: 4;
                animation-delay: 0s;
            }

            &:after {
                width: 32px;
                height: 32px;
                z-index: 3;
                animation-delay: 0.8s;
            }
        }
    }

    .ct-semi-circle-tooltip-arrow {
        position: absolute;
        z-index: 99;
        pointer-events: none;
        width: 222px;
        height: 425px;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        visibility: hidden;

        svg {
            width: 100%;
            height: 100%;
        }

        &.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    .ct-semi-circle-tooltip-content {
        position: absolute;
        top: -150px;
        z-index: 101;
        display: none;
        width: 296px;
        max-width: 296px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16) inset,
            0px 0px 32px 0px rgba(0, 0, 0, 0.12);
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        visibility: hidden;
        @media #{$max-xsx} {
            width: 100%;
            max-width: 60vw;
            top: -180px;
        }
    }

    .ct-semi-circle-tooltip-content.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ct-semi-circle-tooltip-content-header {
        border-bottom: 1px solid rgba(#5b5f60, 0.16);
        padding: 16px;
        color: #ffc825;
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;

        i {
            color: rgba(#242d31, 0.2);

            &:first-child {
                transform: rotate(180deg);
            }
        }
    }

    .ct-semi-circle-tooltip-content-body {
        padding-top: 33px;
        text-align: center;
        @media #{$max-xsx} {
            padding-top: 20px;
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    .ct-semi-circle-tooltip-content-value {
        color: #242d31;
        font-family: "DM Sans", sans-serif;
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 13px;
        @media #{$max-xsx} {
            font-size: 24px;
            margin-bottom: 10px;
        }
    }

    .ct-semi-circle-tooltip-content-text {
        color: #5b5f60;
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 20px;
        @media #{$max-xsx} {
            font-size: 14px;
            margin-bottom: 15px;
        }
    }
}

@keyframes ripple {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.5);
    }
    60% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

// Case Portfolio Grid
.ct-portfolio-grid7 {
    .ct-grid-inner {
        height: auto !important;
    }

    .grid-item {
        position: static !important;
        height: auto !important;
        margin-bottom: 52px;
    }

    .grid-item-inner {
        transform: translateY(0);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &:hover {
            transform: translateY(-10px);

            .item--featured {
                img {
                    filter: grayscale(0%);
                }

                .item-blur-block {
                    .item-blur-block-item {
                        opacity: 1;
                        transform: translateX(0);
                    }
                }
            }
        }

        .item--featured {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            padding: 16px;
            margin-bottom: 28px;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 2px;
                border-radius: 20px;
                background: linear-gradient(
                    to bottom,
                    rgba(#fff, 0),
                    rgba(76, 87, 92, 0.2)
                );
                -webkit-mask: linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                z-index: 1;
            }

            .item--featured--wrapper {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
            }

            img {
                border-radius: 20px;
                filter: grayscale(100%);
                @include transition(all 0.6s cubic-bezier(0.4, 0, 0.2, 1));
                width: 100%;
                max-height: 488px;
                object-fit: cover;
            }

            .item-blur-block {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                z-index: 5;
                border-radius: 20px;
                overflow: hidden;

                .item-blur-block-left,
                .item-blur-block-right {
                    display: flex;
                }

                .item-blur-block-left {
                    .item-blur-block-item {
                        &:first-child {
                            border-radius: 20px 0 0 20px;
                        }
                    }
                }

                .item-blur-block-right {
                    .item-blur-block-item {
                        &:last-child {
                            border-radius: 0 20px 20px 0;
                        }
                    }
                }

                .item-blur-block-item {
                    width: 23px;
                    height: 100%;
                    background: linear-gradient(
                        270deg,
                        rgba(32, 32, 32, 0.06) 0%,
                        rgba(255, 255, 255, 0.04) 100%
                    );
                    backdrop-filter: blur(6px);
                    opacity: 0;
                    transform: translateX(10px);
                    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                    @media #{$max-xsx} {
                        width: 15px;
                    }
                }
            }

            .read-more {
                position: absolute;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                background-color: #242d31;
                border: 1px solid #fff;
                overflow: hidden;
                z-index: 10;
                opacity: 0;
                transform: scale(0);
                visibility: hidden;
                transition: all 0.3 linear 0ms;
                pointer-events: none;

                &.active {
                    opacity: 1;
                    transform: scale(1);
                    visibility: visible;
                    pointer-events: auto;
                }

                &.fading-out {
                    visibility: visible;
                    pointer-events: none;
                }

                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(
                        circle,
                        rgba(235, 211, 127, 0.2) 0%,
                        rgba(36, 45, 49, 0) 70%
                    );
                }

                &:after {
                    content: "";
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background-color: #f7e194;
                    border: 1px solid #fff;
                    transition: transform 0.2s ease;
                }

                .read-more-text {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    animation: rotate 10s linear infinite;
                    pointer-events: none;

                    svg {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;

                        text {
                            font-size: 9.8px;
                            font-family: "DM Sans", sans-serif;
                            font-weight: 500;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            fill: #fff;
                        }

                        path {
                            fill: none;
                        }
                    }
                }

                .arrow-icon {
                    svg {
                        position: relative;
                        display: block;
                        z-index: 10;
                        transition: transform 0.2s ease;
                    }
                }

                &:hover {
                    &:after {
                        transform: scale(1.1);
                    }

                    .arrow-icon svg {
                        transform: scale(1.1);
                    }
                }
            }
        }

        .item--title {
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 33px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.18;
            letter-spacing: -0.34px;
            margin-bottom: 24px;

            a {
                color: inherit;
            }
        }

        .item--category {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;

            a {
                border-radius: 4px;
                border: 1px solid rgba(217, 217, 217, 0.72);
                color: rgba(217, 217, 217, 0.72);
                font-family: "DM Sans", sans-serif;
                line-height: 34px;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                letter-spacing: 1px;
                text-transform: uppercase;
                display: inline-flex;
                padding: 0 16px;
                justify-content: center;
                align-items: center;
                @include transition(all 0.6s cubic-bezier(0.4, 0, 0.2, 1));

                &:hover {
                    background-color: rgba(255, 255, 255, 1);
                    border-color: rgba(255, 255, 255, 1);
                    color: #242d31;
                }
            }
        }
    }
}

.ct-portfolio-grid8 {
    .grid-item {
        margin-bottom: 106px;
    }
    .grid-item-inner {
        position: relative;
        &:hover {
            .item--featured {
                img {
                    filter: grayscale(0%);
                }
            }
            .item--readmore {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            .item-holder--inner {
                &:before {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
    }
    .item--featured {
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            filter: grayscale(100%);
            @include transition(all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
        }
    }
    .item--readmore {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid $primary-color;
        opacity: 0;
        @include transition(all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
        svg {
            width: 26px;
            height: 26px;
            color: $primary-color;
        }
    }
    .item--holder {
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: -66px;
        z-index: 5;
    }
    .item-holder--inner {
        position: relative;
        width: 100%;
        height: 100%;
        background: #0a1123;
        border-radius: 0px 10px 10px 10px;
        padding: 30px 30px 30px 25px;
        &:before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0;
            width: calc(100% + 10px);
            height: 100%;
            background-color: $primary-color;
            border-radius: 0px 10px 10px 10px;
            z-index: -1;
            bottom: -10px;
            opacity: 0;
            transform: translateY(-10px);
            @include transition(all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
        }
    }
    .item--category {
        color: $primary-color;
        font-family: Unbounded;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 2.14;
        text-transform: uppercase;
        margin-bottom: 8px;
        a {
            color: inherit;
        }
    }
    .item--title {
        color: #fff;
        font-family: Unbounded;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.42;
        text-transform: uppercase;
        margin-bottom: 0;
        a {
            color: inherit;
        }
    }
}

// Case Testimonial Carousel
.ct-testimonial-carousel23 {
    .item--inner {
        border-radius: 8px;
        border: 1px solid rgba(42, 52, 66, 0.12);
        background: #fff;
        padding: 40px;
        @media #{$max-xs} {
            padding: 40px 20px;
        }
    }

    .item--header {
        display: flex;
        justify-content: space-between;
        @media #{$max-xs} {
            flex-direction: column-reverse;
            align-items: center;
            gap: 15px;
        }
    }

    .item--logo {
        position: relative;

        svg {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
        }
    }

    .item--holder {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media #{$max-xs} {
            align-items: center;
            text-align: center;
        }
    }

    .item--title {
        color: #242d31;
        font-family: "DM Sans", sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.28;
        margin-bottom: 0;
    }

    .item--position {
        color: #5b5f60;
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
    }

    .item--rating {
        display: flex;
        align-items: center;
        gap: 4px;

        i {
            color: rgba(255, 160, 89, 1);
            font-size: 14px;
        }

        @media #{$max-xs} {
            margin-top: 5px;
            justify-content: center;
        }
    }

    .item--divider {
        opacity: 0.2;
        background: #212326;
        height: 1px;
        width: 100%;
        margin: 44px 0;
    }

    .item--description {
        color: #242d31;
        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.6;
        font-style: italic;

        .item--quote {
            color: rgba(255, 160, 89, 1);
        }
    }

    .slick-dots {
        li {
            button {
                width: 6px;
                height: 6px;
                border-radius: 6px;
                border: 1px solid #212326;
                opacity: 0.4;
                background: #212326;
            }

            &.slick-active {
                button {
                    width: 4px;
                    height: 4px;
                    border-radius: 4px;
                    opacity: 1;
                    position: relative;

                    &:before {
                        content: "";
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        border-radius: 12px;
                        border: 1px solid #212326;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }
}

.ct-testimonial-carousel24 {
    .item--inner {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 15px rgba(0, 0, 0, 0.11);
        margin: 20px 0;
        padding: 40px 70px 40px 40px;
        display: flex;
        gap: 60px;
        @media #{$max-md} {
            flex-direction: column;
            gap: 20px;
        }
        @media #{$max-sm} {
            padding: 40px 20px;
        }

        .item--left {
            @media #{$max-md} {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .item--image {
                height: 400px;
                width: 336px;

                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    border-radius: 12px;
                }
            }
        }

        .item--right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 32px 0;
            @media #{$max-sm} {
                margin: 0;
            }

            .item--description {
                color: #3b3b3b;
                font-family: "Manrope", sans-serif;
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.5;
                letter-spacing: 0.24px;
                @media #{$max-sm} {
                    font-size: 18px;
                    margin-bottom: 15px;
                }
            }

            .item--holder {
                display: flex;
                justify-content: space-between;
                @media #{$max-sm} {
                    flex-direction: column;
                    gap: 20px;
                }

                .item--meta {
                    .item--title {
                        color: #3b3b3b;
                        font-family: "Manrope", sans-serif;
                        font-size: 24px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 1.667;
                        letter-spacing: 0.24px;
                        margin-bottom: 0;
                    }

                    .item--position {
                        color: #3b3b3b;
                        font-family: "Manrope", sans-serif;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 1.556;
                        letter-spacing: 0.18px;
                    }
                }

                .item--rating {
                    display: flex;
                    align-items: end;
                    margin-bottom: 12px;

                    i {
                        color: #fb995a;
                    }
                }
            }
        }
    }
}

.ct-testimonial-carousel25 {
    .item--inner {
        box-shadow: 0 1px 15px rgba(0, 0, 0, 0.11);
        margin: 20px 0;
        border-radius: 12px;
        background: #fff;
        padding: 52px 52px 40px 52px;
        @media #{$max-sm} {
            padding: 30px;
        }
    }

    .item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @media #{$max-sm} {
            flex-direction: column;
            gap: 20px;
        }
    }

    .item-header--left {
        display: flex;
        align-items: center;
        gap: 16px;
        @media #{$max-sm} {
            flex-direction: column;
            text-align: center;
            gap: 20px;
        }
    }

    .item--image {
        width: 64px;
        height: 64px;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .item--title {
        color: $primary-color;
        font-family: "Figtree", sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.27;
        letter-spacing: -0.22px;
        margin-bottom: 0;
    }

    .item--position {
        color: #4a7172;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.556;
        letter-spacing: -0.18px;
    }

    .item-divider {
        background-color: rgba($primary-color, 0.2);
        height: 1px;
        width: 100%;
        margin: 32px 0;
    }

    .item--rating {
        font-size: 16px;
        color: #fcc153;
        margin-bottom: 20px;
    }

    .item--description {
        color: $primary-color;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.56;
    }

    .slick-dots {
        li {
            button {
                background-color: rgba($primary-color, 0.4);
            }

            &.slick-active {
                button {
                    transform: scale(1);
                    background-color: $primary-color;
                    position: relative;

                    &:before {
                        content: "";
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        border: 1px solid $primary-color;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }
}

.ct-testimonial-carousel26 {
    .item--icon {
        svg {
            width: 88px;
            height: 88px;
            color: $secondary-color;
            margin-bottom: 30px;
        }
    }

    .item--sub-title {
        color: #fff;
        font-family: "Libre Baskerville";
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.333;
        letter-spacing: -0.6px;
        margin-bottom: 30px;
    }

    .item--description {
        color: rgba(#fff, 0.5);
        font-family: "Inter";
        font-size: 20px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .item-holder {
        display: flex;
        align-items: center;
        gap: 18px;
        @media #{$max-xsx} {
            flex-direction: column;
            gap: 12px;
        }
    }

    .item--image {
        width: 67px;
        height: 67px;
        border-radius: 50%;
        border: 2px solid $secondary-color;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    }

    .item--title {
        color: #fff;
        font-family: "Libre Baskerville";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: -0.4px;
        margin-bottom: 0;
        @media #{$max-xsx} {
            text-align: center;
        }
    }

    .item--position {
        color: $secondary-color;
        font-family: "Inter";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        @media #{$max-xsx} {
            text-align: center;
        }
    }

    button.slick-arrow {
        width: 62px !important;
        height: 62px !important;
        border-radius: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        transform: unset !important;
        @media #{$max-xsx} {
            bottom: -80px !important;
        }

        &.slick-next {
            right: 62px !important;
            background-color: $secondary-color !important;
            color: #151818 !important;
            @media #{$max-xsx} {
                right: calc(50% - 31px) !important;
                transform: translateX(50%) !important;
            }

            &:after {
                background-color: $secondary-color !important;
                background-image: unset !important;
                border-radius: 0 !important;
            }

            &:before {
                content: "";
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M18.5926 15.1488H3.6667C3.36219 15.1488 3.07016 15.0279 2.85484 14.8126C2.63952 14.5972 2.51855 14.3052 2.51855 14.0007C2.51855 13.6962 2.63952 13.4041 2.85484 13.1888C3.07016 12.9735 3.36219 12.8525 3.6667 12.8525H18.5926C18.8971 12.8525 19.1892 12.9735 19.4045 13.1888C19.6198 13.4041 19.7408 13.6962 19.7408 14.0007C19.7408 14.3052 19.6198 14.5972 19.4045 14.8126C19.1892 15.0279 18.8971 15.1488 18.5926 15.1488Z' fill='%23151818'/%3E%3Cpath d='M17.4444 22.0378C17.2933 22.0386 17.1435 22.0097 17.0036 21.9525C16.8637 21.8954 16.7365 21.8112 16.6292 21.7048C16.5216 21.5981 16.4361 21.4711 16.3779 21.3312C16.3196 21.1912 16.2896 21.0412 16.2896 20.8896C16.2896 20.738 16.3196 20.588 16.3779 20.4481C16.4361 20.3081 16.5216 20.1812 16.6292 20.0744L22.7144 14.0007L16.6292 7.92702C16.413 7.71082 16.2915 7.41758 16.2915 7.11183C16.2915 6.96044 16.3213 6.81053 16.3793 6.67066C16.4372 6.53079 16.5221 6.4037 16.6292 6.29665C16.7362 6.18959 16.8633 6.10468 17.0032 6.04674C17.1431 5.9888 17.293 5.95898 17.4444 5.95898C17.7501 5.95898 18.0433 6.08044 18.2595 6.29665L25.1484 13.1855C25.256 13.2923 25.3415 13.4193 25.3998 13.5592C25.458 13.6991 25.4881 13.8492 25.4881 14.0007C25.4881 14.1523 25.458 14.3024 25.3998 14.4423C25.3415 14.5822 25.256 14.7092 25.1484 14.8159L18.2595 21.7048C18.1523 21.8112 18.025 21.8954 17.8851 21.9525C17.7453 22.0097 17.5955 22.0386 17.4444 22.0378Z' fill='%23151818'/%3E%3C/svg%3E");
                width: 28px;
                height: 28px;
                background-size: contain;
            }
        }

        &.slick-prev {
            left: auto !important;
            right: 0px !important;
            background-color: $primary-color !important;
            color: #fff !important;
            @media #{$max-xsx} {
                right: calc(50% + 31px) !important;
                transform: translateX(50%) !important;
            }

            &:after {
                background-color: $primary-color !important;
                background-image: unset !important;
                border-radius: 0 !important;
            }

            &:before {
                content: "";
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M9.40737 12.8512L24.3333 12.8512C24.6378 12.8512 24.9298 12.9721 25.1452 13.1874C25.3605 13.4028 25.4814 13.6948 25.4814 13.9993C25.4814 14.3038 25.3605 14.5959 25.1452 14.8112C24.9298 15.0265 24.6378 15.1475 24.3333 15.1475L9.40737 15.1475C9.10287 15.1475 8.81083 15.0265 8.59551 14.8112C8.38019 14.5959 8.25922 14.3038 8.25922 13.9993C8.25922 13.6948 8.38019 13.4028 8.59551 13.1874C8.81083 12.9721 9.10287 12.8512 9.40737 12.8512Z' fill='white'/%3E%3Cpath d='M10.5556 5.96224C10.7067 5.96137 10.8565 5.99033 10.9964 6.04747C11.1363 6.1046 11.2635 6.18879 11.3708 6.29521C11.4784 6.40194 11.5639 6.52893 11.6221 6.66884C11.6804 6.80875 11.7105 6.95882 11.7105 7.11039C11.7105 7.26196 11.6804 7.41203 11.6221 7.55194C11.5639 7.69185 11.4784 7.81884 11.3708 7.92557L5.28564 13.9993L11.3708 20.073C11.587 20.2892 11.7085 20.5824 11.7085 20.8882C11.7085 21.0396 11.6787 21.1895 11.6207 21.3293C11.5628 21.4692 11.4779 21.5963 11.3708 21.7034C11.2638 21.8104 11.1367 21.8953 10.9968 21.9533C10.8569 22.0112 10.707 22.041 10.5556 22.041C10.2499 22.041 9.95666 21.9196 9.74046 21.7034L2.85157 14.8145C2.74396 14.7077 2.65854 14.5807 2.60025 14.4408C2.54196 14.3009 2.51195 14.1508 2.51195 13.9993C2.51195 13.8477 2.54196 13.6976 2.60025 13.5577C2.65854 13.4178 2.74396 13.2908 2.85157 13.1841L9.74046 6.29521C9.84774 6.18879 9.97498 6.1046 10.1149 6.04747C10.2548 5.99033 10.4045 5.96137 10.5556 5.96224Z' fill='white'/%3E%3C/svg%3E");
                width: 28px;
                height: 28px;
                background-size: contain;
            }
        }
    }
}

.ct-testimonial-carousel27 {
    .item--icon {
        svg {
            width: 72px;
            height: 72px;
            color: $primary-color;
            margin-bottom: 30px;
        }
    }
    .item--description {
        color: #fff;
        font-family: "Unbounded";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.67;
        letter-spacing: 0.24px;
        margin-bottom: 52px;
    }
    .item-holder {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 22.5px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .item--image {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        position: relative;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            background: linear-gradient(
                180deg,
                $gradient-color-from 0%,
                $gradient-color-to 100%
            );
            border-radius: 50%;
            z-index: -1;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    }
    .item--title {
        color: $primary-color;
        font-family: Unbounded;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.55;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    .item--position {
        color: #fff;
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.62;
        text-transform: uppercase;
    }
    .slick-dots {
        position: absolute;
        right: 10px;
        margin: 0;
        bottom: 65px;
    }
}

.ct-testimonial-carousel28 {
    .item--inner {
        background-color: rgba($primary-color, 0.08);
        padding: 24px 56px 24px 24px;
        display: flex;
        gap: 50px;
        @media #{$max-xsx} {
            flex-direction: column;
            gap: 20px;
            padding: 24px 20px;
            align-items: center;
        }
    }
    .item--image {
        width: 240px;
        height: 392px;
        background-color: #f7f5ef;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: lightgray 50% / cover no-repeat;
            mix-blend-mode: luminosity;
            position: absolute;
            bottom: 0;
        }
    }
    .item--holder {
        flex: 1;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media #{$max-xsx} {
            align-items: center;
            text-align: center;
        }
    }
    .item--rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 30px;
        @media #{$max-xsx} {
            justify-content: center;
        }
        i {
            color: #fc6917;
            font-size: 14px;
        }
    }
    .item--description {
        color: rgba($primary-color, 0.8);
        font-family: Poppins;
        font-size: 23px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.52;
        letter-spacing: -0.23px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-meta {
        margin-top: auto;
        margin-bottom: 24px;
        @media #{$max-xsx} {
            margin-top: 20px;
        }
    }
    .item--title {
        color: $primary-color;
        font-family: Livvic;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 12px;
    }
    .item--position {
        color: rgba($primary-color, 0.722);
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }
    .slick-dots {
        li {
            &.slick-active {
                button {
                    background-color: rgba($primary-color, 1);
                    background-image: none;
                    transform: scale(1) !important;
                }
            }
            button {
                width: 8px;
                height: 8px;
                border-radius: 0;
                background-color: rgba($primary-color, 0.16);
                background-image: none;
            }
        }
    }
}

// Case Blog Carousel
.ct-blog-carousel-layout10 {
    .grid-item-inner {
        &:hover {
            .item--featured {
                img {
                    filter: grayscale(0%);
                }
            }

            .item--title {
                a {
                    background-size: 100% 1px;
                }
            }
        }
    }

    .item--featured {
        position: relative;
        border-radius: 0px 0px 16px 16px;
        border-bottom: 4px solid #cecece;
        overflow: hidden;
        @media #{$max-lg3} {
            min-height: 300px;
        }

        img {
            border-radius: 0px 0px 16px 16px;
            object-fit: cover;
            width: 100%;
            height: 100%;
            filter: grayscale(100%);
            @include transition(all 0.6s cubic-bezier(0.4, 0, 0.2, 1));
        }
    }

    .item--date {
        position: absolute;
        top: 24px;
        left: 24px;
        display: inline-flex;
        flex-direction: column;

        span {
            &:first-child {
                $bg-color: $primary-color;
                $border-color: darken($bg-color, 15%);
                border-radius: 0px 0px 6px 6px;
                border-bottom: 2px solid $border-color;
                background: $bg-color;
                width: 80px;
                min-height: 52px;
                color: #242d31;
                font-family: "DM Sans", sans-serif;
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                z-index: 5;
            }

            &:last-child {
                border-radius: 0px 0px 6px 6px;
                border-bottom: 2px solid #fff;
                background: rgba(255, 255, 255, 0.72);
                backdrop-filter: blur(4px);
                color: #242d31;
                font-family: "DM Sans", sans-serif;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                width: 80px;
                min-height: 26px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    background: rgba(255, 255, 255, 0.72);
                    backdrop-filter: blur(4px);
                    height: 6px;
                    width: 80px;
                    top: -6px;
                    left: 0;
                    z-index: -1;
                }
            }
        }
    }

    .item--body {
        margin-top: 28px;
    }

    .item--meta {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 16px;

        li {
            color: #5b5f60;
            font-family: "DM Sans", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.56;
            letter-spacing: 0.72px;
            text-transform: capitalize;

            a {
                color: inherit;
            }
        }
    }

    .item--title {
        color: #242d31;
        font-family: "DM Sans", sans-serif;
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.38;
        letter-spacing: -0.26px;

        a {
            color: inherit;
            position: relative;
            display: inline;
            background-image: linear-gradient(#242d31, #242d31);
            background-position: 0% 100%;
            background-repeat: no-repeat;
            background-size: 0% 1px;
            @include transition(
                background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1)
            );
        }
    }
}

.ct-blog-carousel-layout11 {
    .grid-item-inner {
        &:hover {
            .item--title {
                a {
                    background-size: 100% 1px;
                }
            }
        }

        .item--featured {
            margin-bottom: 28px;

            .item--image {
                position: relative;
                max-width: 419px;
                width: 100%;
                height: 360px;
                border-radius: 0 0 12px 12px;
                border-bottom: 4px solid $primary-color;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    filter: grayscale(100%);
                    mix-blend-mode: luminosity;
                    border-radius: 0 0 12px 12px;
                    position: absolute;
                    inset: 0;
                    z-index: 2;
                    border-bottom: 4px solid $primary-color;
                }

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background-color: #0c6c71;
                    border-radius: 0 0 12px 12px;
                    z-index: 1;
                    border-bottom: 4px solid $primary-color;
                }
            }

            .item--meta {
                border-radius: 0px 0px 12px 12px;
                background: #0e5f61;
                padding: 16px 20px;
                position: relative;
                color: #fff;
                font-family: "Figtree", sans-serif;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.5;
                letter-spacing: -0.32px;
                display: flex;
                align-items: center;
                gap: 8px;

                cite {
                    color: #beff6b;
                }

                &:before {
                    content: "";
                    position: absolute;
                    top: -15px;
                    left: 0;
                    width: 100%;
                    height: 15px;
                    background: #0e5f61;
                }

                .item--author {
                    span {
                        color: rgba(#fff, 0.6);
                    }
                }
            }
        }

        .item--title {
            color: #fff;
            font-family: "Figtree", sans-serif;
            font-size: 26px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.23;
            letter-spacing: -0.52px;
            margin-bottom: 28px;

            a {
                color: inherit;
                position: relative;
                display: inline;
                background-image: linear-gradient(#fff, #fff);
                background-position: 0% 100%;
                background-repeat: no-repeat;
                background-size: 0% 1px;
                @include transition(
                    background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1)
                );
            }
        }

        .btn-readmore {
            color: #fff;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.36px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(#fff, 0.4);

            svg {
                width: 24px;
                height: 24px;
                color: #beff6b;
                transform: translateX(0px);
                transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            &:hover {
                svg {
                    transform: translateX(4px);
                }
            }
        }
    }
}

.ct-blog-carousel-layout12 {
    .grid-item-inner {
        &:hover {
            .item--title {
                a {
                    background-size: 100% 2px;
                }
            }

            .item--meta {
                svg {
                    color: $secondary-color;
                }
            }

            .btn-readmore {
                color: $secondary-color;

                svg {
                    color: $secondary-color;
                }
            }
        }
    }

    .item--featured {
        height: 392px;
        border-radius: 10px 10px 0px 0px;
        margin-bottom: 30px;

        img {
            border-radius: 10px 10px 0px 0px;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .item--title {
        color: #151818;
        font-family: "Libre Baskerville";
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.42;

        a {
            color: inherit;
            position: relative;
            display: inline;
            background-image: linear-gradient(#151818, #151818);
            background-position: 0% 90%;
            background-repeat: no-repeat;
            background-size: 0% 2px;
            @include transition(
                background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1)
            );
        }
    }

    .item--divider {
        width: 100%;
        height: 1px;
        background-color: rgba(#151818, 0.5);
        margin: 20px 0;
    }

    .item--holder {
        color: #444848;
        font-family: "Inter";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        svg {
            color: #151818;
            @include transform(all 0.3s linear 0ms);
        }
    }

    .item--meta {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-readmore {
        color: inherit;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        @include transform(all 0.3s linear 0ms);

        span {
            text-transform: uppercase;
        }
    }
}

.ct-blog-carousel-layout13 {
    .grid-item-inner {
        &:hover {
            .item--holder {
                border-bottom: 2px solid $primary-color;
                border-right: 2px solid $primary-color;
                border-left: 2px solid $primary-color;
            }
            .item--title {
                a {
                    background-size: 100% 1px;
                }
            }
            .btn-readmore {
                span {
                    color: $primary-color;
                }
                svg {
                    transform: rotate(45deg);
                }
            }
        }
    }

    .item--featured {
        height: 336px;
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .item--title {
        color: #fff;
        font-family: "Unbounded";
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.36;
        margin-bottom: 20px;
        a {
            color: inherit;
            position: relative;
            display: inline;
            background-image: linear-gradient(#fff, #fff);
            background-position: 0% 90%;
            background-repeat: no-repeat;
            background-size: 0% 1px;
            @include transition(
                background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1)
            );
        }
    }

    .item--holder {
        background: linear-gradient(180deg, #1a2236 0%, #00071a 100%);
        padding: 20px 25px 25px 25px;
        flex-direction: column;
        border-bottom: 2px solid transparent;
        border-right: 2px solid transparent;
        border-left: 2px solid transparent;
        @include transition(all 0.3s linear 0ms);
    }

    .item--meta {
        display: flex;
        align-items: center;
        gap: 31px;
        margin-bottom: 20px;
        div {
            color: $primary-color;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: "Unbounded";
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42;
            text-transform: capitalize;
            a {
                color: inherit;
                &:hover {
                    color: inherit;
                }
            }
        }
    }

    .btn-readmore {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        span {
            color: #fff;
            font-family: "Unbounded";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.42;
            text-transform: uppercase;
            @include transition(all 0.3s linear 0ms);
        }

        svg {
            color: $primary-color;
            transform: rotate(0deg);
            @include transition(all 0.3s linear 0ms);
        }
    }
}

.ct-blog-carousel-layout14 {
    .grid-item-inner {
        background-color: #f4f5f5;
        padding: 12px 12px 48px 12px;
        &:hover {
            .item--title {
                a {
                    background-size: 100% 1px;
                }
            }
        }
    }
    .item--featured {
        position: relative;
        height: 395px;
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            background: lightgray -203.822px 0px / 153.934% 100% no-repeat;
            mix-blend-mode: luminosity;
            @include transition(all 0.3s linear 0ms);
        }
    }
    .item--meta {
        display: flex;
        width: 80px;
        height: 96px;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f4f5f5;
        z-index: 4;
        .item--date {
            text-align: center;
        }
        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 96px solid rgba(#201d1e, 0.08);
            border-left: 80px solid transparent;
            top: 0px;
            right: 0;
        }
        .day {
            color: $primary-color;
            text-align: center;
            font-family: Poppins;
            font-size: 32px;
            font-weight: 600;
            line-height: 32px;
        }
        .month {
            color: #435358;
            text-align: center;
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1.12px;
            line-height: 14px;
            text-transform: uppercase;
        }
    }
    .item--holder {
        padding-top: 48px;
        padding-left: 28px;
        padding-right: 18px;
    }
    .item--category {
        padding-left: 15px;
        color: #525a5f;
        font-family: Poppins;
        font-size: 15px;
        font-weight: 500;
        position: relative;
        margin-bottom: 30px;
        &:before {
            content: "";
            width: 4px;
            height: 4px;
            background-color: #525a5f;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        a {
            color: inherit;
        }
    }
    .item--title {
        color: $primary_color;
        font-family: Livvic;
        font-size: 28px;
        font-weight: 500;
        line-height: 1.21;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        a {
            color: inherit;
            position: relative;
            display: inline;
            background-image: linear-gradient($primary_color, $primary_color);
            background-position: 0% 90%;
            background-repeat: no-repeat;
            background-size: 0% 1px;
            @include transition(
                background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1)
            );
        }
    }
    .item--button {
        margin-top: 60px;
        position: relative;
        display: flex;
        justify-content: center;
        &:before,
        &:after {
            content: "";
            position: absolute;
            width: calc(50% - 46px - 15px);
            height: 1px;
            background-color: rgba(#242b30, 0.2);
            top: 50%;
            transform: translateY(-50%);
        }
        &:before {
            left: 15px;
        }
        &:after {
            right: 15px;
        }
    }
    .btn-readmore {
        width: 68px;
        height: 68px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: $primary-color;
        color: #fff;
        position: relative;
        border-radius: 50%;
        svg {
            width: 24px;
            height: 24px;
            color: #fff;
            transform: rotate(0deg);
            @include transition(all 0.3s linear 0ms);
        }
        &:before {
            content: "";
            position: absolute;
            width: 92px;
            height: 92px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(34, 48, 53, 0.2);
        }
    }
}

.ct-social-footer {
    .ct-icon1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;

        a {
            i {
                width: 52px;
                height: 52px;
                line-height: 52px;
                background-color: #0e5f61;
                border-radius: 50%;
                margin: 0;
            }
        }
    }
}

.ct-contact-info-footer-3 {
    .item--inner {
        float: right;
        @media #{$max-md2} {
            float: left;
        }
    }

    .ct-contact-icon {
        display: none;
    }

    .item--title {
        color: rgba(#fff, 0.72);
        text-align: right;
        font-family: "Figtree", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        @media #{$max-md2} {
            text-align: left;
        }
    }

    .item--content {
        color: #fff;
        text-align: right;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        @media #{$max-md2} {
            text-align: left;
        }
    }
}

.ct-link-footer-3 {
    .ct-link-items li + li {
        margin-left: 56px !important;

        &:before {
            display: none !important;
        }
    }
}

.ct-custom-heading-4 {
    writing-mode: sideways-lr;
    text-orientation: mixed;
}

.ct-custom-service-4 {
    .slick-track {
        padding: 44px 0 44px 29px;
        background: #f2f3f3;
        @media #{$max-md2} {
            padding: 44px 0 44px 0;
        }
    }

    button.slick-arrow {
        bottom: 33px !important;
        left: 12.4% !important;
        transform: none !important;
        @media #{$max-xsx} {
            left: 50% !important;
            transform: translateX(-50%) !important;
        }
    }

    .slick-prev {
        margin-left: -22px !important;
    }
}

.ct-custom-contact-info-header-4 {
    .ct-contact-info {
        display: flex;
        align-items: center;
        gap: 30px;

        li + li {
            margin-top: 0;
        }
    }
}

.ct-column-header-1 {
    position: relative !important;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        right: -96px;
        width: 0;
        height: 0;
        border-top: 96px solid #fff;
        border-right: 96px solid transparent;
    }
}

.ct-custom-social-4 {
    li {
        a {
            writing-mode: sideways-lr;
            text-orientation: mixed;
        }
    }
}

.ct-fancy-box-process-4 {
    .item--inner {
        @media screen and (max-width: 1280px) and (min-width: 1025px) {
            width: 100%;
            min-height: 350px;
            margin: 0 auto;
            .background-number {
                display: none;
            }
            .item--body {
                right: 50% !important;
                transform: translate(50%, -50%) !important;
            }
        }
    }
}

.ct-custom-business-5 {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        width: 2204px;
        height: 967px;
        border-radius: 100%;
        opacity: 0.04;
        background: $primary_color;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.ct-custom-hidden-sidebar-6 {
    .ct-icon-hidden-sidebar {
        .item--inner {
            background: linear-gradient(
                180deg,
                $gradient-color-from 0%,
                $gradient-color-to 100%
            );
        }
    }
}

// Case Heading
.ct-heading {
    &.item-st-line-bottom2 {
        .ct-heading-divider {
            margin-top: 20px;

            span {
                display: block;
                width: 100%;
                height: 1px;
                background-color: rgba(#fff, 0.2);
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 38px;
                    height: 2px;
                    background-color: $primary-color;
                }
            }
        }
    }
}

// Case Contact Form 7
.ctf7-footer-sub-mail {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(#fff, 0.2);

    p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .wpcf7-form-control-wrap {
        margin-bottom: 0;

        input {
            height: 20px;
            background: transparent;
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            border: none;
            padding: 0;

            &::placeholder {
                color: rgba(#fff, 0.72);
            }
        }
    }

    button {
        height: 20px;
        padding: 0 12px;
        color: $primary-color;
        border-radius: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.ctf7-footer-sub-mail-2 {
    p {
        display: flex;
        align-items: center;
    }

    .wpcf7-form-control-wrap {
        margin-bottom: 0;
        flex: 1;

        input {
            height: 46px;
            background-color: #292d39;
            padding: 0 20px;
            color: #fff;
            font-family: "Manrope", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            border-radius: 46px 0 0 46px;
            border: none;
            outline: none;

            &::placeholder {
                color: rgba(#fff, 0.72);
            }
        }
    }

    button {
        width: 46px;
        height: 46px;
        border-radius: 0 46px 46px 0;
        background-color: $primary-color;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.ct-ctf-footer-4 {
    p {
        display: flex;
        align-items: center;
    }

    .wpcf7-form-control-wrap {
        margin-bottom: 0;
        flex: 1;

        input {
            background-color: rgba(#fff, 0.15);
            padding: 0 20px;
            color: #fff;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 300;
            height: 46px;
            border: none;
            outline: none;
        }
    }

    button {
        width: 46px;
        height: 46px;
        background-color: $secondary-color;
        background-image: unset;
        border-radius: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.ct-ctf-footer-6 {
    p {
        display: flex;
        align-items: center;
    }

    .wpcf7-form-control-wrap {
        margin-bottom: 0;
        flex: 1;

        input {
            background-color: rgba(#fff, 0.15);
            padding: 0 20px;
            color: #fff;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            height: 46px;
            border: none;
            outline: none;
            border-radius: 50px 0 0 50px;
        }
    }

    button {
        width: 46px;
        height: 46px;
        border-radius: 0 50px 50px 0;
        background-color: $primary-color;
        background-image: unset;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        svg {
            color: #0a1123;
        }
    }
}

.ct-ctf-faq4 {
    .input-icon {
        p {
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            background-color: rgba(#fff, 0.1);
            padding: 15px 0;
            margin-bottom: 10px;
            position: relative;

            .wpcf7-form-control-wrap {
                margin-bottom: 0;
            }

            svg {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 12px;
            }

            .wpcf7-form-control-wrap {
                width: 100%;
                padding-left: 45px;
            }

            input {
                background: transparent;
                border: none;
                outline: none;
                width: 100%;
                height: 30px;
                line-height: 30px;
                border-left: 1px solid rgba(#d9d9d9, 0.2);
            }
        }
    }

    .ct-range-meta {
        margin-top: 20px;
        padding: 0px;

        p {
            margin-bottom: 0px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        label {
            color: #fff;
            font-family: "Inter";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
        }

        span {
            color: #ffb966;
            text-align: right;
            font-family: "Libre Baskerville";
            font-size: 14px;
            font-style: normal;
            font-weight: 700;

            input {
                color: #ffb966 !important;
            }
        }

        .ct-range-result {
            color: #ffb966 !important;
        }

        + .ct-range-slider {
            margin: 0;
            margin-bottom: 30px;
        }
    }

    .ct-range-slider {
        height: 20px;
        border-radius: 3px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: transparent;
    }

    .ui-slider-range {
        height: 12px !important;
        border-radius: 3px 30px 30px 3px !important;
        background: $secondary-color !important;
        margin: 3px 4px 3px 4px;
    }

    .ui-slider-handle {
        display: none !important;
    }

    p {
        margin: 0;
    }

    input[type="submit"] {
        width: 100%;
        margin: 0;
        padding: 0;
        height: 60px;
        background: $secondary-color;
        color: #151818;
        font-family: "Inter", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
    }

    .wpcf7-spinner {
        display: none;
    }

    .wpcf7-select {
        height: 60px;
        background: rgba(#fff, 0.1);
        color: rgba(#fff, 0.7);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        border: none;
        outline: none;

        ul.list {
            background: #000;
            color: #fff;
            font-family: Inter;

            .option {
                background-color: rgba(#fff, 0.1);

                &.selected {
                    color: #fff;
                    font-family: Inter;
                    background-color: rgba(#fff, 0.1);
                }
            }
        }
    }
}

.ct-ctf7-contact-5 {
    .item-input {
        height: 60px;
        border: 1px solid rgba(8, 15, 62, 0.15);
        margin-bottom: 10px;
        p {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            height: 100%;
        }
        svg {
            margin: 5px 12px;
        }
        input {
            border: none;
            outline: none;
            color: rgba(#080f3e, 0.7);
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            padding: 0 15px;
            border-left: 1px solid rgba(#53535e, 0.2);
            height: 30px;
        }
    }
    .wpcf7-form-control-wrap {
        margin-bottom: 0;
    }
    p {
        margin-bottom: 0;
    }
    .wpcf7-textarea {
        height: 136px;
        resize: none;
        color: rgba(#080f3e, 0.7);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 29px;
    }
    button {
        color: #fff;
        font-family: "DM Serif Text";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        text-transform: uppercase;
        width: 100%;
        height: 60px;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.ct-ctf-footer-5 {
    @extend .ct-ctf-footer-4;
    button {
        background-color: $primary-color !important;
    }
}

.ct-ctf7-contact-6 {
    .item-input {
        &:has(.wpcf7-not-valid) {
            border-color: #f13c3c !important;
        }
        height: 60px;
        border: 1px solid rgba(8, 15, 62, 0.15);
        background: linear-gradient(
            180deg,
            rgba($gradient-color-from, 0.3) 0%,
            rgba($gradient-color-to, 0.3) 100%
        );
        margin-bottom: 10px;
        p {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            height: 100%;
        }
        svg {
            margin: 5px 12px;
        }
        .wpcf7-form-control-wrap {
            position: relative;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 1px;
                height: 30px;
                opacity: 0.7;
                background: linear-gradient(
                    180deg,
                    $gradient-color-from 0%,
                    $gradient-color-to 100%
                );
            }
        }
        input {
            border: none;
            outline: none;
            color: rgba(#fff, 0.7);
            background: transparent;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            padding: 0 15px;
            height: 30px;
        }
    }
    .wpcf7-form-control-wrap {
        margin-bottom: 0;
    }
    p {
        margin-bottom: 0;
    }
    .wpcf7-textarea {
        height: 136px;
        resize: none;
        margin-bottom: 24px;
        border: 1px solid rgba(8, 15, 62, 0.15);
        background: linear-gradient(
            180deg,
            rgba($gradient-color-from, 0.3) 0%,
            rgba($gradient-color-to, 0.3) 100%
        );
        color: rgba(#fff, 0.7);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        padding: 15px;
    }
    button {
        background: $primary-color;
        font-family: "Unbounded";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        text-transform: uppercase;
        color: #00071a;
        width: 100%;
        height: 60px;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.ct-ctf-contact-7 {
    p {
        margin-bottom: 0;
    }
    .wpcf7-spinner {
        display: none;
    }
    .input {
        p {
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 15px;
            height: 62px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.02);
            padding: 0 20px;
        }
        margin-bottom: 20px;
    }
    .wpcf7-form-control-wrap {
        margin-bottom: 0;
    }
    .wpcf7-form-control:not(.wpcf7-textarea):not(.wpcf7-submit) {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        padding: 0;
        height: 62px;
        line-height: 62px;
        color: #fff;
        font-family: Roboto;
        font-size: 16px;
        &::placeholder {
            color: rgba(#fff, 0.5);
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0.16px;
        }
    }
    textarea.wpcf7-form-control {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.02);
        padding: 20px;
        color: #fff;
        font-family: Roboto;
        font-size: 16px;
        height: 152px;
        margin-bottom: 20px;
        &::placeholder {
            color: rgba(#fff, 0.5);
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0.16px;
        }
    }
    .wpcf7-submit {
        width: 100%;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background: #fff;
        color: $primary_color;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        text-transform: uppercase;
        padding: 0 !important;
        margin: 0 !important;
    }
}

// Case Text Marquee
.pxl-text-marquee1 {
    font-size: 64px;
    line-height: 1.2;
    font-weight: 600;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;

    .pxl-item--icon {
        width: 56px;
        height: 56px;
        border-radius: 56px;
        background-color: $primary-color;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 12px;
    }

    .pxl-item--text {
        padding: 0 22px;
    }

    .pxl-item--inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
    }

    .pxl-item--marquee {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        position: relative;
    }
}

// Rotating Read More Button

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

// Case Banner
.ct-banner6 {
    .ct-banner-imge {
        position: relative;
        @media #{$max-sm} {
            display: flex;
            flex-direction: column-reverse;
            align-items: start !important;
        }
        @media #{$max-md2} {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img:nth-child(1) {
            width: 528px;
            height: 680px;
            border-radius: 12px;
            object-fit: cover;
        }

        .ct-banner-imge2 {
            width: 400px;
            height: 420px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            position: absolute;
            bottom: -80px;
            left: -172px;
            @media #{$max-xl} {
                left: -52px;
            }
            @media #{$max-lg3} {
                left: 0px;
            }
            @media #{$max-sm} {
                width: 100%;
            }

            img {
                width: 400px;
                height: 420px;
                object-fit: cover;
                border-radius: 12px;
                mask-image: url("data:image/svg+xml,%3Csvg width='400' height='420' viewBox='0 0 400 420' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='52' height='420' rx='26' fill='black'/%3E%3Crect x='58' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='116' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='174' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='232' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='290' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='348' width='52' height='420' rx='26' fill='black'/%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='400' height='420' viewBox='0 0 400 420' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='52' height='420' rx='26' fill='black'/%3E%3Crect x='58' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='116' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='174' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='232' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='290' width='52' height='420' rx='26' fill='black'/%3E%3Crect x='348' width='52' height='420' rx='26' fill='black'/%3E%3C/svg%3E");
                mask-size: 100% 100%;
                -webkit-mask-size: 100% 100%;
                mask-repeat: no-repeat;
                -webkit-mask-repeat: no-repeat;
                @media #{$max-sm} {
                    width: 100%;
                }
            }

            div {
                width: 52px;
                height: 420px;
                flex-shrink: 0;
                border-radius: 100px;
            }
        }

        .ct-banner-counter {
            position: absolute;
            top: 62px;
            left: -115px;
            @media #{$max-xl} {
                left: -52px;
            }
            @media #{$max-lg3} {
                left: 0px;
            }
            @media #{$max-md2} {
                left: 10%;
            }
            @media #{$max-sm} {
                position: relative;
                top: 0;
                left: 0;
            }

            .counter-title {
                color: #3b3b3b;
                font-family: "Manrope", sans-serif;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: 0.18px;
                text-transform: uppercase;
                opacity: 0.52;
            }

            .counter-number {
                color: #202020;
                font-family: "Manrope", sans-serif;
                font-size: 80px;
                font-style: normal;
                font-weight: 800;
                letter-spacing: -3.2px;
                line-height: 1;
            }
        }
    }
}

.ct-banner7 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 754px;
    @media #{$max-xl} {
        background-image: none !important;
    }

    .ct-logo {
        position: relative;

        img {
            max-height: 56px;
            position: absolute;
            left: 52px;
            top: 20px;
        }

        @media #{$max-xl} {
            display: none;
        }
    }

    .ct-banner-image {
        position: relative;

        img {
            position: absolute;
            top: 160px;
            right: 40px;
            width: 520px;
            height: 594px;
            object-fit: cover;
            border-radius: 24px 24px 0px 0px;
            z-index: 5;
            @media #{$max-lg2} {
                right: 0;
            }
        }

        svg {
            position: absolute;
            top: 114px;
            right: 504px;
            z-index: 2;
            @media #{$max-lg2} {
                top: 115px;
                right: 465px;
            }
        }

        .ct-banner-tooltip-trigger {
            position: absolute;
            top: 525px;
            left: 56.5%;
            @media #{$max-xl} {
                left: 49.3%;
            }
            @media #{$max-lg3} {
                left: 44.5%;
            }
            @media #{$max-md} {
                left: 55.7%;
            }
            @media #{$max-sm} {
                left: 52.5%;
            }

            span {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #fff;
                position: relative;
                z-index: 10;
                display: block;
                cursor: pointer;
                @media #{$max-sm} {
                    display: none;
                }

                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) scale(0.3);
                    border-radius: 50%;
                    background: rgba(#fff, 0.15);
                    animation: ripple 1s ease-out infinite;
                }

                &:before {
                    width: 20px;
                    height: 20px;
                    z-index: 4;
                    animation-delay: 0s;
                }

                &:after {
                    width: 32px;
                    height: 32px;
                    z-index: 3;
                    animation-delay: 0.8s;
                }
            }
        }

        .ct-banner-tooltip-arrow {
            svg {
                position: absolute;
                top: 380px !important;
                right: 376px !important;
                z-index: 5;
                @media #{$max-lg2} {
                    right: 350px !important;
                }
            }

            @media #{$max-sm} {
                display: none;
            }
        }

        .ct-banner-tooltip-content {
            position: absolute;
            top: 300px !important;
            right: 510px !important;
            z-index: 12;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 240px;
            border-radius: 12px;
            display: inline-flex;
            flex-direction: column;
            @media #{$max-lg2} {
                right: 486px !important;
            }
            @media #{$max-sm} {
                top: unset !important;
                right: auto !important;
                left: 0 !important;
                bottom: -800px !important;
            }
        }

        .ct-banner-tooltip-title {
            padding-top: 28px;
            padding-bottom: 23px;
            width: 100%;
            text-align: center;
            color: #202020;
            font-family: "Manrope", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.18px;
            border-bottom: 1px solid rgba(32, 32, 32, 0.12);

            span {
                color: $primary-color;
            }
        }

        .ct-banner-tooltip-body {
            padding-top: 16px;
            padding-bottom: 24px;
            padding-left: 24px;
            padding-right: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .counter-number {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .couter-holder {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: $secondary-color;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.32) inset;
            filter: drop-shadow(4px 8px 20px rgba(0, 0, 0, 0.25));
            color: #fff;
            font-family: "Manrope", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 800;
            letter-spacing: -0.14px;
        }

        .couter-title {
            color: #202020;
            font-family: "Manrope", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.16px;
        }
    }
}

.ct-banner8 {
    .ct-banner-inner {
        width: 825px;
        height: 796px;
        border-radius: 20px;
        position: relative;
        @media #{$max-sm} {
            width: calc(100% - 30px);
            height: auto;
        }
        @media #{$max-xsx} {
            width: 100%;
            height: 600px;
        }

        .ct-banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            z-index: 5;
            position: relative;
        }

        &:after {
            content: "";
            width: 511px;
            height: 486px;
            background-color: $secondary-color;
            position: absolute;
            bottom: -67px;
            right: -60px;
            border-radius: 20px;
            @media #{$max-sm} {
                bottom: -30px;
                right: -30px;
            }
            @media #{$max-xsx} {
                display: none;
            }
        }
    }

    .item-holder {
        width: 374px;
        height: 225px;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0px 20px;
        background: $primary-color;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        @media #{$max-xsx} {
            width: 300px;
            height: 150px;
        }
    }

    .item-client-list {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        @media #{$max-xsx} {
            margin-bottom: 12px;
        }

        .item-client {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: relative;
            border: 1.5px solid #fff;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
                z-index: 1;
            }

            &:last-child {
                &:before {
                    content: "";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    border-radius: 50%;
                    background-color: rgba(#000, 0.7);
                }

                .counter-number {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    @include transform(translate(-50%, -50%));
                    z-index: 5;
                    color: #fff;
                    font-family: "Libre Baskerville";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 700;

                    .couter-holder {
                        display: flex;
                        align-items: center;
                    }
                }
            }

            + .item-client {
                margin-left: -10px;
            }
        }
    }

    .item-text {
        display: flex;
        align-items: center;

        .counter-number,
        h2 {
            color: #fff;
            font-family: "Libre Baskerville";
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.42;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;

            .couter-holder {
                display: flex;
                align-items: center;
            }

            @media #{$max-xsx} {
                font-size: 24px;
            }
        }
    }
}

.ct-banner9 {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
    .ct-banner--inner {
        display: flex;
        gap: 25px;
        position: relative;
        z-index: 2;
        max-width: 603px;
        margin: 0 auto;
        width: 100%;
        @media #{$max-sm} {
            gap: 15px;
        }
    }
    &:before {
        content: "";
        position: absolute;
        top: 0;
        right: -50px;
        width: 837px;
        height: 837px;
        background-image: url("../images/bg-banner-9.webp");
        @media #{$max-sm} {
            width: 100%;
            height: 100%;
            right: 0;
        }
    }
    .ct-banner-left,
    .ct-banner-right {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 25px;
        @media #{$max-md2} {
            width: 100%;
        }
        @media #{$max-sm} {
            gap: 15px;
        }
        img {
            position: relative;
            z-index: 2;
        }
    }
    .ct-banner-image-2 {
        position: relative;
    }
    .ct-banner-counter {
        position: absolute;
        padding: 24px 0;
        right: 15px;
        top: 15px;
        bottom: 15px;
        background-color: $primary_color;
        width: 71px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        @media #{$max-sm} {
            display: none;
        }
    }
    .counter-holder {
        writing-mode: sideways-lr;
        text-orientation: mixed;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .counter-number {
        color: #fff;
        font-family: "DM Serif Text";
        font-size: 52px;
        font-style: normal;
        font-weight: 900;
        line-height: 1.19;
        letter-spacing: -1.04px;
        display: flex;
        align-items: center;
    }
    .counter-title {
        color: #fff;
        font-family: "DM Serif Text";
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.36;
        letter-spacing: 1.1px;
    }
    .ct-banner-counter-2 {
        display: none;
        @media #{$max-sm} {
            display: flex;
            padding: 0 10px;
            background-color: $primary-color;
        }
        .counter-holder {
            writing-mode: unset;
        }
    }
}

.ct-banner10 {
    .ct-banner--inner {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ct-banner-image {
        &:nth-child(1) {
            img {
                border-radius: 50% 50% 0 50%;
                object-fit: cover;
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
            }
        }
        &:nth-child(2) {
            img {
                border-radius: 50% 50% 50% 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
            }
        }
        &:nth-child(3) {
            img {
                border-radius: 50% 0 50% 50%;
                object-fit: cover;
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
            }
        }
        &:nth-child(4) {
            img {
                border-radius: 0 50% 50% 50%;
                object-fit: cover;
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
            }
        }
    }
}

// Custom animations for ct-banner10
@keyframes slideInUpRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUpLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDownRight {
    from {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDownLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.slideInUpRight {
    animation-name: slideInUpRight;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.slideInUpLeft {
    animation-name: slideInUpLeft;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.slideInDownRight {
    animation-name: slideInDownRight;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.slideInDownLeft {
    animation-name: slideInDownLeft;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

// Case Accordion
.ct-accordion {
    &.layout4 {
        display: flex;
        width: 100%;
        gap: 12px;
        @media #{$max-md2} {
            flex-direction: column;
        }

        .ct-accordion-item {
            border-radius: 8px;
            border: 1px solid rgba(32, 32, 32, 0.16);
            min-height: 620px;
            background-color: #fff;
            @include transition(all 0.3s linear 0ms);
            display: flex;
            @media #{$max-md2} {
                min-height: 100%;
                flex-direction: column;
            }

            &.active {
                background-color: #202020;

                .ct-ac-title {
                    a {
                        .ct-ac-title-text {
                            span {
                                color: #fff;
                            }
                        }

                        .icon-wrapper {
                            svg {
                                g {
                                    opacity: 1;
                                }

                                path {
                                    fill: $primary-color !important;
                                }
                            }

                            i {
                                color: $primary-color !important;
                            }
                        }
                    }
                }
            }

            .ct-ac-title {
                display: flex;
                flex-direction: column;
                padding: 28px 24px;
                transition: all 0.3s ease;
                text-align: center;
                height: 100%;
                @media #{$max-md2} {
                    width: 100%;
                    padding: 12px 24px;
                }
                @media #{$max-sm} {
                    padding: 12px;
                }

                a {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-decoration: none;
                    height: 100%;
                    justify-content: space-between;
                    @media #{$max-md2} {
                        flex-direction: row-reverse;
                        align-items: center;
                        justify-content: space-between;
                    }

                    .ct-icon-accordion-readmore {
                        border-radius: 28px;
                        border: 1px solid rgba(32, 32, 32, 0.12);
                        width: 36px;
                        height: 72px;
                        @media #{$max-md2} {
                            width: 72px;
                            height: 36px;
                            display: inline-flex;
                            justify-content: end;
                        }
                        @media #{$max-sm} {
                            width: 36px;
                            height: 36px;
                        }

                        .ct-icon-accordion-inner {
                            width: 36px;
                            height: 36px;
                            border-radius: 28px;
                            border: 1px solid rgba(32, 32, 32, 0.12);
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: -1px;
                            margin-left: -1px;
                            @media #{$max-md2} {
                                margin-right: -1px;
                            }

                            svg {
                                width: 16px;
                                height: 16px;
                                @media #{$max-md2} {
                                    transform: rotate(90deg);
                                }
                            }
                        }
                    }

                    .ct-ac-title-text {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        gap: 20px;
                        @media #{$max-md2} {
                            flex-direction: row-reverse;
                            align-items: center;
                        }

                        .icon-wrapper {
                            width: 52px;
                            height: 52px;
                        }

                        span {
                            writing-mode: vertical-lr;
                            transform: rotate(180deg);
                            color: #202020;
                            font-family: "Manrope", sans-serif;
                            font-size: 20px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 32px;
                            @media #{$max-md2} {
                                writing-mode: horizontal-tb;
                                transform: rotate(0deg);
                            }
                            @media #{$max-sm} {
                                font-size: 18px;
                            }
                        }

                        .icon-wrapper {
                            svg {
                                path {
                                    fill: #202020;
                                }
                            }

                            i {
                                color: #202020;
                            }
                        }
                    }
                }
            }

            .ct-accordion-image {
                margin-top: 15px;

                img {
                    max-width: 100%;
                    height: auto;
                }
            }

            .ct-ac-content {
                padding: 28px 28px 28px 0;
                @media #{$max-md2} {
                    padding: 0 24px 28px 24px;
                }
                @media #{$max-sm} {
                    padding: 0 12px 28px 12px;
                }
            }

            .ct-ac-title-content {
                padding-top: 8px;
                color: #fff;
                font-family: "Manrope", sans-serif;
                font-size: 28px;
                font-style: normal;
                font-weight: 700;
                line-height: 32px;
                letter-spacing: -0.56px;
                max-width: 190px;
                @media #{$max-md2} {
                    max-width: 100%;
                }
            }

            .ct-ac-content-body {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 28px;
                @media #{$max-lg2} {
                    margin-top: 15px;
                    align-items: start;
                    flex-direction: column-reverse;
                }
                @media #{$max-md2} {
                    margin-top: 15px;
                    flex-direction: row;
                }
                @media #{$max-sm} {
                    flex-direction: column-reverse;
                }
            }

            .ct-ac-content-body-icon {
                width: 48px;
                height: 48px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 24px;
                background-color: $primary-color;
            }

            .ct-ac-content-body-text {
                max-width: 295px;
                color: #fff;
                font-family: "Manrope", sans-serif;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.5;
                letter-spacing: 0.16px;
            }

            .ct-ac-content-image {
                height: 390px;
                width: 100%;
                border-radius: 8px;
                @media #{$max-md2} {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                img {
                    max-width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 8px;
                }
            }
        }
    }

    &.layout5 {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .ct-ac-title {
            padding: 20px;
            background: rgba(21, 24, 24, 0.05);
            @include transition(all 0.3s linear 0ms);

            &.active {
                background: $primary-color;

                .ct-ac-title-left {
                    svg {
                        color: #fff;
                    }

                    span {
                        color: #fff;
                    }
                }

                .ct-ac-title-arrow {
                    svg {
                        color: $secondary-color;
                        transform: rotate(90deg);
                    }
                }
            }
        }

        .ct-ac-title-text {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ct-ac-title-left {
            display: flex;
            align-items: center;
            gap: 10px;

            svg {
                color: $primary-color;
                @include transition(all 0.3s linear 0ms);
            }

            span {
                color: #151818;
                font-family: "Libre Baskerville";
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                @include transition(all 0.3s linear 0ms);
            }
        }

        .ct-ac-title-arrow {
            svg {
                color: #151818;
                transform: rotate(0deg);
                @include transition(all 0.3s linear 0ms);
            }
        }

        .ct-ac-content {
            padding-top: 15px;
            padding-bottom: 5px;

            p {
                color: #444848;
                font-family: "Inter";
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.62;
                margin-bottom: 0;
            }
        }
    }

    &.layout6 {
        .ct-accordion-item {
            &.active {
                @include background-gradient-bottom(
                    rgba($gradient-color-to, 0.1),
                    rgba($gradient-color-from, 0.1)
                );
                padding: 24px 30px 22px 24px;
                .ct-ac-icon {
                    &:before {
                        opacity: 0.2;
                    }
                }
                .ct-ac-icon-accordion {
                    top: 0px;
                    right: -10px;
                    transform: none;
                    .icon-accordion-inner {
                        &:before {
                            background: $primary-color;
                        }
                    }
                    span {
                        &:before {
                            background: $primary-color;
                            transform: translate(-50%, -50%) rotate(90deg);
                        }
                        &:after {
                            background: $primary-color;
                        }
                    }
                }
            }
            background: linear-gradient(
                180deg,
                rgba($gradient-color-to, 0.05) 0%,
                rgba($gradient-color-from, 0) 100%
            );
            padding: 24px;
            @include transition(all 0.3s linear 0ms);
            + .ct-accordion-item {
                margin-top: 15px;
            }
        }
        .ct-ac-title-text {
            display: flex;
            gap: 25.6px;
            position: relative;
        }
        .ct-ac-meta {
            flex: 1;
        }
        span {
            color: #fff;
            font-family: "Unbounded", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.55;
        }
        .ct-ac-content {
            margin-top: 22px;
            color: #fff;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.57;
            p {
                margin-bottom: 0;
            }
        }
        .ct-ac-icon {
            width: 34px;
            height: 34px;
            position: relative;
            &:before {
                content: "";
                position: absolute;
                width: 22.806px;
                height: 46.861px;
                flex-shrink: 0;
                border-radius: 10px;
                opacity: 0.05;
                background: linear-gradient(
                    180deg,
                    $gradient-color-to 0%,
                    $gradient-color-from 100%
                );
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(29.777deg);
                @include transition(all 0.3s linear 0ms);
            }
        }
        .ct-ac-icon-accordion {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            .icon-accordion-inner {
                width: 20px;
                height: 20px;
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border-radius: 50%;
                @include transition(all 0.3s linear 0ms);
                &:before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: 50%;
                    padding: 2px;
                    background: linear-gradient(
                        180deg,
                        $gradient-color-from,
                        $gradient-color-to
                    );
                    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                        linear-gradient(#fff 0 0);
                    -webkit-mask-composite: xor;
                    mask-composite: exclude;
                    pointer-events: none;
                }
            }
            span {
                width: 10px;
                height: 10px;
                position: relative;
                z-index: 5;
                &:before {
                    content: "";
                    position: absolute;
                    height: 100%;
                    width: 2px;
                    background: linear-gradient(
                        180deg,
                        $gradient-color-from,
                        $gradient-color-to
                    );
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(0deg);
                    border-radius: 2px;
                    @include transition(all 0.3s linear 0ms);
                }
                &:after {
                    content: "";
                    position: absolute;
                    height: 2px;
                    width: 100%;
                    background: linear-gradient(
                        180deg,
                        $gradient-color-from,
                        $gradient-color-to
                    );
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 2px;
                    @include transition(all 0.3s linear 0ms);
                }
            }
        }
    }

    &.layout7 {
        .ct-accordion-item {
            + .ct-accordion-item {
                margin-top: 15px;
            }
            &.active {
                .ct-ac-title-text {
                    background: linear-gradient(
                        180deg,
                        #2af598 0%,
                        #009efd 100%
                    );
                }
                .ct-ac-title-left {
                    span {
                        color: #00071a;
                    }
                }
                .ct-ac-title-arrow {
                    svg {
                        transform: rotate(90deg);
                        path {
                            fill: #00071a;
                        }
                    }
                }
            }
        }
        .ct-ac-title-text {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(
                180deg,
                rgba(42, 245, 152, 0.2) 0%,
                rgba(0, 158, 253, 0.2) 100%
            );
            backdrop-filter: blur(15px);
            padding: 18px 20px;
            @include transition(all 0.3s linear 0ms);
        }
        .ct-ac-content {
            color: #fff;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.62;
            margin-top: 15px;
            margin-bottom: 5px;
        }
        .ct-ac-title-left {
            display: flex;
            align-items: center;
            gap: 10px;
            svg {
                width: 20px;
                height: 20px;
                color: $primary-color;
            }
            span {
                color: #fff;
                font-family: Unbounded;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.62;
                @include transition(all 0.3s linear 0ms);
            }
        }
        .ct-ac-title-arrow {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            svg {
                width: 22px;
                height: 22px;
                transform: rotate(0deg);
                @include transition(all 0.3s linear 0ms);
            }
        }
    }

    &.layout8 {
        .ct-accordion-item {
            + .ct-accordion-item {
                margin-top: 15px;
            }
        }
        .ct-ac-title {
            padding: 20px;
            border: 1px dashed $primary_color;
            @include transition(all 0.3s linear 0ms);
            &.active {
                border-style: solid;
                .ct-ac-title-icon {
                    background: rgba($primary_color, 1);
                    span {
                        &:before {
                            background-color: #fff;
                        }
                        &:after {
                            background-color: #fff;
                            transform: translate(-50%, -50%) rotate(90deg);
                        }
                    }
                }
            }
        }
        .ct-ac-title-text {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .ct-ac-title-left {
            color: $primary_color;
            font-family: Poppins;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.5;
        }
        .ct-ac-title-icon {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba($primary_color, 0.15);
            @include transition(all 0.3s linear 0ms);
            span {
                width: 8px;
                height: 8px;
                position: relative;
                &:before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 1.5px;
                    background-color: $primary_color;
                    border-radius: 1.5px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(0deg);
                    @include transition(all 0.3s linear 0ms);
                }
                &:after {
                    content: "";
                    position: absolute;
                    width: 1.5px;
                    height: 100%;
                    border-radius: 1.5px;
                    background-color: $primary_color;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(0deg);
                    @include transition(all 0.3s linear 0ms);
                }
            }
        }
        .ct-ac-content {
            color: $primary_color;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.62;
            margin-top: 15px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
    }

    &.layout9 {
        padding-left: 30px;
        .ct-accordion-wrapper {
            position: relative;
            padding-left: 47px;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 1px;
                height: calc(100% - 28px);
                background-color: $primary-color;
            }
        }
        .ct-accordion-item {
            position: relative;
            + .ct-accordion-item {
                margin-top: 25px;
            }
            &.active {
                .ct-ac-title {
                    &:before {
                        transform: translateY(-50%) scale(0);
                    }
                }
                .ct-ac-icon {
                    opacity: 1;
                    transform: translateY(-50%) scale(1);
                }
                .ct-accordion-icon {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }
        .ct-ac-title {
            position: relative;
            &:before {
                --x: 15px;
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%) scale(1);
                left: calc((var(--x) / 2 + 47px) * -1);
                width: var(--x);
                height: var(--x);
                border-radius: 50%;
                background-color: $primary-color;
                @include transition(all 0.3s linear 0ms);
            }
        }
        .ct-ac-icon {
            position: absolute;
            left: calc((72px) * -1);
            top: 50%;
            transform: translateY(-50%) scale(0);
            opacity: 0;
            width: 52px;
            height: 52px;
            @include transition(all 0.3s linear 0ms);
            .ct-ac-icon-wrapper {
                width: 52px;
                height: 52px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: $primary-color;
                position: relative;
                z-index: 3;
                @include transition(all 0.3s linear 0ms);
                svg {
                    width: 30px;
                    height: 30px;
                    path {
                        fill: #fff;
                    }
                }
                &:before {
                    content: "";
                    position: absolute;
                    width: 62px;
                    height: 62px;
                    border-radius: 50%;
                    background-color: transparent;
                    border: 1px solid $primary-color;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    @include transition(all 0.3s linear 0ms);
                }
            }
        }
        .ct-ac-title-text {
            color: $primary-color;
            font-family: Livvic;
            font-size: 22px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.36;
        }
        .ct-ac-content {
            margin-top: 15px;
            color: #525a5f;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.62;
        }
    }
}

// Case Text Box
.ct-text-box {
    &.ct-text-box-layout2 {
        .ct-text-box-header {
            padding: 0 32px;
        }

        .item--title {
            color: #242d31;
            font-family: "Manrope", sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 12px;
        }

        .item--description {
            color: #3b3b3b;
            font-family: "Manrope", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
            margin-bottom: 81px;
        }

        .item--sub-title {
            --x: 52px;
            position: absolute;
            left: calc(50% - var(--x) / 2);
            top: calc(calc(var(--x) / 2) * -1);
            display: inline-flex;
            width: var(--x);
            height: var(--x);
            border-radius: var(--x);
            align-items: center;
            justify-content: center;
            background-color: $primary-color;
            color: #fff;
            font-family: "Manrope", sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
        }

        .ct-text-box-semi-circle {
            --x: 330px;
            width: var(--x);
            height: calc(var(--x) / 2);
            border-radius: 200px 200px 0px 0px;
            border-top: 1px dashed $primary-color;
            border-right: 1px dashed $primary-color;
            border-left: 1px dashed $primary-color;
            position: relative;
            background: linear-gradient(
                180deg,
                rgba($primary-color, 0.12) 0%,
                rgba($primary-color, 0) 100%
            );
            @media #{$max-xl} {
                width: 100%;
            }
            @media #{$max-md2} {
                width: 100%;
                height: calc(100vw / 2);
                max-height: 250px;
                border-radius: 250px 250px 0px 0px;
            }
            @media #{$max-md} {
                width: 100%;
                height: calc(100vw / 2);
                max-height: 200px;
                border-radius: 200px 200px 0px 0px;
            }
        }
    }

    &.ct-text-box-layout3 {
        padding: 24px 32px 24px 16px;
        display: flex;
        align-items: center;
        gap: 40px;
        position: relative;
        background-color: #ecf3f4;
        overflow: hidden;
        @media #{$max-xs} {
            flex-direction: column;
            text-align: center;
        }

        .bg-layer {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }

        &:hover .bg-layer {
            opacity: 0.2;
        }

        .item--sub-title {
            color: rgba($primary-color, 0.16);
            font-family: "Figtree", sans-serif;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.8px;
            position: relative;
            z-index: 2;
        }

        .item--title {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.27;
            letter-spacing: -0.44px;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
        }

        .item--description {
            color: #4a7172;
            font-family: "Figtree", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
            position: relative;
            z-index: 2;
        }
    }
}

// Case Portfolio Carousel
.ct-portfolio-carousel6 {
    .grid-item-inner {
        display: flex;
        gap: 80px;
        @media #{$max-md2} {
            flex-direction: column;
        }
    }

    .item--holder {
        margin-top: 60px;
        @media #{$max-md2} {
            margin-top: 0;
        }
    }

    .item--category {
        height: 28px;
        padding: 0 12px;
        border-radius: 4px;
        background-color: $secondary-color;
        color: #fff;
        font-family: "Manrope", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0.14px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        a {
            color: inherit;
        }
    }

    .item--title {
        color: #202020;
        font-family: "Manrope", sans-serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.8px;
        margin-bottom: 20px;

        a {
            color: inherit;
        }
    }

    .item--readmore {
        &:hover {
            a {
                background-color: $primary-color;
                color: #fff;

                i {
                    background-color: #3b3b3b;
                    color: #fff;
                    transform: rotate(45deg);
                }
            }
        }

        a {
            height: 48px;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            border-radius: 100px;
            border: 1px solid rgba($primary-color, 0.32);
            padding: 0 6px 0 24px;
            color: #202020;
            font-family: "Manrope", sans-serif;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.16px;
            @include transition(all 300ms linear 0ms);

            i {
                font-size: 18px;
                width: 36px;
                height: 36px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 36px;
                background-color: $primary-color;
                color: #3b3b3b;
                @include transition(all 300ms linear 0ms);
            }
        }
    }

    .item--excerpt {
        max-width: 410px;
        color: #3b3b3b;
        font-family: "Manrope", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.556;
        letter-spacing: 0.18px;
        margin-bottom: 40px;
    }
}

.ct-portfolio-carousel7 {
    .grid-item-inner {
        position: relative;
        max-height: 900px;
        min-height: 900px;
        height: 100%;
    }

    .item--featured {
        position: relative;

        img {
            width: 100%;
            background: linear-gradient(
                    0deg,
                    rgba(0, 0, 0, 0.04) 0%,
                    rgba(0, 0, 0, 0.04) 100%
                ),
                lightgray 0px -10px / 100% 142.222% no-repeat;
            mix-blend-mode: multiply;
            min-height: 900px;
            object-fit: cover;
            @media #{$max-sm} {
                width: 100%;
                height: 100%;
            }
        }

        &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            z-index: 1;
            background-color: $primary-color;
            opacity: 0.2;
        }
    }

    .item-wrapper {
        max-width: 1320px;
        width: 100%;
        margin: 0 auto;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        @media #{$max-lg3} {
            width: calc(100% - 30px);
        }
    }

    .item--holder {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        border-radius: 12px;
        padding: 36px;
        max-width: 480px;
        width: 100%;
        height: 548px;
        background-image: url('data:image/svg+xml,<svg width="480" height="548" viewBox="0 0 480 548" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M468 0C474.627 0 480 5.37258 480 12V536C480 542.627 474.627 548 468 548H12C5.37258 548 0 542.627 0 536V12C0 5.37258 5.37258 0 12 0H468ZM48 256C41.3726 256 36 261.373 36 268V500C36 506.627 41.3726 512 48 512H432C438.627 512 444 506.627 444 500V268C444 261.373 438.627 256 432 256H48Z" fill="white"/></svg>');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        @media #{$max-sm} {
            width: calc(100vw - 30px);
            max-width: none;
            padding: 24px;
        }
    }

    .item--category {
        border-radius: 4px;
        background: #ffcd4c;
        color: $primary_color;
        font-family: "Figtree", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 1px;
        text-transform: uppercase;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        margin-bottom: 16px;

        a {
            color: inherit;
        }

        @media #{$max-sm} {
            margin-top: 70px;
            font-size: 12px;
            margin-bottom: 8px;
        }
    }

    .item--title {
        color: $primary_color;
        font-family: "Figtree", sans-serif;
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.11;
        letter-spacing: -0.72px;
        margin-bottom: 20px;
        @media #{$max-sm} {
            font-size: 28px;
            line-height: 1.25;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            margin-bottom: 12px;
        }

        a {
            color: inherit;
        }
    }

    .item--excerpt {
        color: #4a7172;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.56;
        margin-bottom: 34px;
        @media #{$max-sm} {
            font-size: 16px;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }
    }

    .item--body {
        height: 256px;
        width: 100%;
        background-color: transparent;
        border-radius: 12px;
        position: relative;
        @media #{$max-sm} {
            height: 170px;
        }
    }

    .item--readmore {
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        width: calc(100% - 48px);
        height: 52px;

        a {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            width: 100%;
            height: 100%;
            padding: 0 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(4px);
            @include transition(all 300ms linear 0ms);

            &:hover {
                background: rgba(255, 255, 255, 0.8);
            }
        }
    }

    .slick-dots {
        margin: 0;
        display: inline-flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        position: absolute;
        right: 72px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 56px;
        padding: 28px 0;
        @include transition(all 300ms linear 0ms);
        border: 2px solid rgba(#fff, 0.2);
        border-radius: 45px;
        background-color: rgba(#fff, 0.12);
        backdrop-filter: blur(4px);
        @media #{$max-sm} {
            bottom: 30px;
            right: 50%;
            height: 56px;
            width: fit-content;
            padding: 0 12px;
            transform: translate(50%, 0);
            flex-direction: row;
            justify-content: center;
            top: auto;
        }

        li {
            button {
                background-color: rgba(#fff, 0.42);
                @include transition(all 300ms linear 0ms);
            }

            &.slick-active {
                button {
                    background-color: #beff6b;
                }
            }
        }
    }
}

.ct-portfolio-carousel8 {
    .slick-list {
        margin: 0 -800px;
        @media #{$max-md2} {
            margin: 0 15px;
        }
        @media #{$max-xsx} {
            margin: 0 15px;
            padding: 0 15px !important;
        }
    }

    .slick-slide {
        position: relative;
        .item--featured {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(
                    180deg,
                    rgba(#000, 0) 59.3%,
                    rgba($primary-color, 0.4) 86.98%
                );
                opacity: 0;
                transform: translateY(20px);
                @include transition(all 500ms linear 0ms);
                z-index: 1;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: relative;
                z-index: 0;
            }
        }

        .item--holder {
            position: absolute;
            bottom: 60px;
            left: 60px;
            right: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 4;
            @media #{$max-sm} {
                bottom: 15px;
                left: 15px;
                right: 15px;
            }
        }

        .item--meta {
            display: inline-flex;
            flex-direction: column;
            opacity: 0;
            transform: translateY(20px);
            @include transition(all 600ms ease-out 100ms);
        }

        .item--readmore {
            opacity: 0;
            transform: translateX(-20px);
            @include transition(all 600ms ease-out 200ms);
        }

        &.slick-current {
            .item--featured {
                &::before {
                    opacity: 1;
                    transform: translateY(0);
                    transition-delay: 50ms;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .item--meta {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 150ms;
            }
            .item--readmore {
                opacity: 1;
                transform: translateX(0);
                transition-delay: 250ms;

                @media #{$max-xsx} {
                    opacity: 0;
                    transform: translateX(0);
                }
            }
        }
    }

    .item--title {
        display: inline-flex;
        padding: 0 20px;
        height: 60px;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        color: #090919;
        font-family: "DM Serif Text", serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        margin-bottom: 0;
        @include transition(all 300ms linear 0ms);
        @media #{$max-xsx} {
            padding: 10px;
        }
    }

    .item--category {
        height: 44px;
        border-radius: 10px;
        background-color: $primary-color;
        color: #fff;
        font-family: Roboto;
        font-size: 18px;
        a {
            color: inherit;
        }
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        @include transition(all 300ms linear 0ms);
        @media #{$max-xsx} {
            padding: 0 15px;
            height: 30px;
        }
    }
}

.ct-portfolio-carousel9 {
    .ct-image-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: linear-gradient(
                    0deg,
                    rgba(0, 0, 0, 0.3) 0%,
                    rgba(0, 0, 0, 0.3) 100%
                ),
                lightgray 50% / cover no-repeat;
            mix-blend-mode: luminosity;
            position: relative;
            z-index: 2;
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: $primary-color;
            z-index: 1;
        }
    }
    .carousel-item {
        &:hover {
            .item--category {
                background-color: rgba(#fff, 1);
                color: $primary-color;
            }
            .item--image {
                opacity: 1;
                &:before {
                    opacity: 1;
                    transform: translateY(0);
                }
                img {
                    transform: scale(1.05);
                    @include transition(all 500ms linear 0ms);
                }
            }
            .item--title {
                margin-bottom: 24px;
            }
            .item--excerpt {
                height: auto;
                overflow: visible;
                opacity: 1;
                transform: translateY(0);
                @include transition(all 300ms linear 0ms);
            }
            .item--readmore {
                span, i {
                    background: linear-gradient(90deg, #F3BC21 0%, #F98326 69.79%, #E86515 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
    .slick-list {
        padding: 0 !important;
        z-index: 6;
    }
    .slick-slide {
        + .slick-slide {
            border-left: 1px solid rgba(193, 203, 205, 0.5);
        }
    }
    .grid-item-inner {
        position: relative;
        max-height: 1040px;
        min-height: 1040px;
        height: 100%;
    }
    .item--image {
        position: absolute;
        bottom: 0;
        top: 0;
        left: -15px;
        right: -15px;
        z-index: 3;
        overflow: hidden;
        opacity: 0;
        @include transition(all 500ms linear 0ms);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1);
            @include transition(all 500ms linear 0ms);
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba($primary-color, 0) 0%,
                rgba($primary-color, 0.7) 69.22%,
                #253435 100%
            );
            box-shadow: 0px 0px 100px 10px #000;
            z-index: 1;
            @include transition(all 500ms linear 0ms);
        }
    }
    .item--holder {
        position: absolute;
        right: 50px;
        left: 50px;
        bottom: 50px;
        z-index: 5;
        @media #{$max-xl} {
            left: 30px;
            right: 30px;
        }
    }
    .item--category {
        height: 34px;
        display: inline-flex;
        padding: 0 20px;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(7.5px);
        color: #fff;
        font-family: Livvic;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        @include transition(all 300ms linear 0ms);
        a {
            color: inherit;
        }
    }
    .item--title {
        color: #fff;
        font-family: Livvic;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.167;
        margin-bottom: 0;
        @include transition(all 300ms linear 0ms);
        a {
            color: inherit;
        }
    }
    .item--excerpt {
        color: #fff;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.444;
        margin-bottom: 20px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
        @include transition(all 300ms linear 0ms);
    }
    .item--readmore {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        span {
            font-family: Roboto;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.33;
            background: linear-gradient(90deg, #fff 0%, #fff 69.79%, #fff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            @include transition(all 300ms linear 0ms);
        }
        .item--readmore-divider {
            width: 1px;
            height: 16px;
            background-color: rgba(#fff, 0.2);
        }
        i {
            font-size: 16px;
            background: linear-gradient(90deg, #fff 0%, #fff 69.79%, #fff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            @include transition(all 300ms linear 0ms);
        }
    }
}

// Case Team Carousel
.ct-team-carousel11 {
    .slick-slide {
        &:nth-child(odd) {
            margin-bottom: 60px;
        }

        &:nth-child(even) {
            margin-top: 32px;
        }

        &:hover {
            .item--link {
                svg {
                    transform: rotate(45deg);
                }
            }

            .item--image {
                &:before {
                    opacity: 1;
                    transform: translateY(0);
                }

                .item--holder {
                    .item--title {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    .item--position {
                        transform: translateY(0);
                        opacity: 1;
                        transition-delay: 100ms;
                    }
                }
            }
        }
    }

    .item--inner {
        position: relative;
    }

    .item--link {
        --x: 56px;
        position: absolute;
        left: 50%;
        bottom: calc(calc(var(--x) / 2) * -1);
        transform: translateX(-50%);
        width: var(--x);
        height: var(--x);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--x);
        background-color: $secondary-color;
        color: #fff;
        @include transition(all 300ms linear 0ms);

        svg {
            transform: rotate(0deg);
            @include transition(all 200ms linear 0ms);
        }
    }

    .item--image {
        position: relative;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
        }

        &:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            border-radius: 0px 0px 12px 12px;
            background: linear-gradient(
                180deg,
                rgba($secondary-color, 0) 0%,
                rgba($secondary-color, 0.74) 57.16%,
                $secondary-color 100%
            );
            opacity: 0;
            transform: translateY(50px);
            @include transition(all 300ms linear 0ms);
        }

        .item--holder {
            position: absolute;
            bottom: 52px;
            left: 50%;
            transform: translateX(-50%);

            .item--title {
                color: #fff;
                text-align: center;
                font-family: "Manrope", sans-serif;
                font-size: 20px;
                font-style: normal;
                font-weight: 800;
                line-height: 24px;
                letter-spacing: -0.4px;
                margin-bottom: 4px;
                opacity: 0;
                transform: translateY(10px);
                transition: all 300ms linear 0ms;

                a {
                    color: inherit;
                }
            }

            .item--position {
                color: #fff;
                text-align: center;
                font-family: "Manrope", sans-serif;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
                letter-spacing: -0.16px;
                opacity: 0;
                transform: translateY(10px);
                transition: all 300ms linear 0ms;
            }
        }
    }
}

.ct-team-carousel12 {
    .item--wrapper {
        position: relative;
        @include transition(all 300ms linear 0ms);

        &:hover {
            .item--holder {
                background-color: $primary-color;
            }

            .item--link {
                background-color: $secondary-color;
                color: $primary-color;
            }

            .item--social {
                li {
                    a {
                        color: $secondary-color;
                        border-color: $secondary-color;

                        &:hover {
                            background-color: $secondary-color;
                            color: $primary-color;
                        }
                    }
                }
            }

            .item--title {
                color: #fff;
            }

            .item--position {
                color: rgba(#fff, 0.7);
            }
        }
    }

    .item--image {
        position: absolute;
        left: 57px;
        top: -70px;
        max-width: 302px !important;
        width: 100% !important;
        height: 390px !important;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media #{$max-sm} {
            max-width: 80% !important;
        }
        @media #{$max-xsx} {
            right: 15px;
        }
    }

    .item--holder {
        margin-top: 70px;
        width: 293px;
        height: 403px;
        background-color: #e6efee;
        @include transition(all 300ms linear 0ms);
        @media #{$max-xsx} {
            width: calc(100% - 30px);
        }
    }

    .item--link {
        width: 57px;
        height: 57px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #151818;
        color: #e6efee;
        @include transition(all 300ms linear 0ms);
    }

    .item--social {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-top: 30px;
        margin-bottom: 36px;
        gap: 20px;
        list-style: none;

        li {
            a {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background-color: transparent;
                border: 1px solid #151818;
                color: #151818;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                @include transition(all 300ms linear 0ms);
            }
        }
    }

    .item--title {
        color: #151818;
        font-family: "Libre Baskerville";
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0;
        margin-left: 57px;
        @include transition(all 300ms linear 0ms);

        a {
            color: inherit;
            @include transition(all 300ms linear 0ms);
        }
    }

    .item--position {
        color: rgba(#444848, 0.7);
        font-family: "Inter";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        margin-left: 57px;
        @include transition(all 300ms linear 0ms);
    }
}

.ct-team-carousel13 {
    .slick-slide {
        opacity: 0.6;
        @include transition(all 300ms linear 0ms);
        &.slick-current {
            opacity: 1;
            .item--wrapper {
                &:before {
                    opacity: 0.3;
                }
            }
        }
    }
    .item--wrapper {
        width: 100%;
        height: 590px;
        position: relative;
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.2;
            background: linear-gradient(
                180deg,
                rgba($gradient-color-to, 0) 0%,
                $gradient-color-from 100%
            );
            box-shadow: 0px 10px 40px 0px rgba(158, 255, 83, 0.2);
            @include transition(all 300ms linear 0ms);
        }
    }
    .item--image {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 5;
        img {
            width: 100%;
            object-fit: contain;
            position: absolute;
            bottom: 0;
        }
    }
    .item--holder {
        position: absolute;
        bottom: 30px;
        right: 30px;
        left: 30px;
        z-index: 6;
    }
    .item--title {
        color: #fff;
        text-align: center;
        font-family: Unbounded;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.42;
        text-transform: uppercase;
        margin-bottom: 8px;
        a {
            color: #fff;
        }
    }
    .item--position {
        color: $primary-color;
        text-align: center;
        font-family: Unbounded;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 2.14;
    }
}

.ct-team-carousel14 {
    .ct-slick-carousel {
        padding-bottom: 0;
    }
    .slick-arrow {
        width: 62px !important;
        height: 62px !important;
        border-radius: 0 !important;
        background-color: $primary-color !important;
        border: none !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        @include transition(all 300ms linear 0ms);
        z-index: 10;
        &:hover {
            background-color: $primary-color !important;
        }
        &:before {
            content: "" !important;
        }
        &:after {
            display: none !important;
        }
        &.slick-prev {
            left: 24px;
            &:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M9.40743 12.8519L24.3334 12.8519C24.6379 12.8519 24.9299 12.9729 25.1452 13.1882C25.3605 13.4035 25.4815 13.6955 25.4815 14C25.4815 14.3046 25.3605 14.5966 25.1452 14.8119C24.9299 15.0272 24.6379 15.1482 24.3334 15.1482L9.40743 15.1482C9.10293 15.1482 8.81089 15.0272 8.59557 14.8119C8.38025 14.5966 8.25928 14.3046 8.25928 14C8.25928 13.6955 8.38025 13.4035 8.59557 13.1882C8.81089 12.9729 9.10293 12.8519 9.40743 12.8519Z' fill='white'/%3E%3Cpath d='M10.5556 5.96297C10.7067 5.9621 10.8565 5.99106 10.9964 6.0482C11.1363 6.10534 11.2635 6.18953 11.3708 6.29594C11.4784 6.40267 11.5638 6.52966 11.6221 6.66957C11.6804 6.80948 11.7104 6.95955 11.7104 7.11112C11.7104 7.26269 11.6804 7.41276 11.6221 7.55267C11.5638 7.69259 11.4784 7.81957 11.3708 7.92631L5.28558 14L11.3708 20.0737C11.587 20.2899 11.7084 20.5831 11.7084 20.8889C11.7084 21.0403 11.6786 21.1902 11.6207 21.3301C11.5627 21.4699 11.4778 21.597 11.3708 21.7041C11.2637 21.8111 11.1366 21.8961 10.9968 21.954C10.8569 22.0119 10.707 22.0417 10.5556 22.0417C10.2498 22.0417 9.9566 21.9203 9.7404 21.7041L2.85151 14.8152C2.74389 14.7085 2.65848 14.5815 2.60019 14.4416C2.5419 14.3017 2.51189 14.1516 2.51189 14C2.51189 13.8484 2.5419 13.6984 2.60019 13.5585C2.65848 13.4185 2.74389 13.2916 2.85151 13.1848L9.7404 6.29594C9.84768 6.18953 9.97491 6.10534 10.1148 6.0482C10.2547 5.99106 10.4045 5.9621 10.5556 5.96297Z' fill='white'/%3E%3C/svg%3E");
                background-position: center;
                background-size: 100%;
                width: 28px;
                height: 28px;
            }
        }
        &.slick-next {
            right: 24px;
            &:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M18.5925 15.1481H3.66658C3.36207 15.1481 3.07004 15.0271 2.85472 14.8118C2.6394 14.5965 2.51843 14.3045 2.51843 14C2.51843 13.6954 2.6394 13.4034 2.85472 13.1881C3.07004 12.9728 3.36207 12.8518 3.66658 12.8518H18.5925C18.897 12.8518 19.1891 12.9728 19.4044 13.1881C19.6197 13.4034 19.7407 13.6954 19.7407 14C19.7407 14.3045 19.6197 14.5965 19.4044 14.8118C19.1891 15.0271 18.897 15.1481 18.5925 15.1481Z' fill='white'/%3E%3Cpath d='M17.4444 22.037C17.2933 22.0379 17.1435 22.0089 17.0036 21.9518C16.8637 21.8947 16.7365 21.8105 16.6292 21.7041C16.5216 21.5973 16.4361 21.4703 16.3779 21.3304C16.3196 21.1905 16.2896 21.0404 16.2896 20.8889C16.2896 20.7373 16.3196 20.5872 16.3779 20.4473C16.4361 20.3074 16.5216 20.1804 16.6292 20.0737L22.7144 14L16.6292 7.92628C16.413 7.71008 16.2915 7.41685 16.2915 7.1111C16.2915 6.9597 16.3213 6.80979 16.3793 6.66992C16.4372 6.53005 16.5221 6.40296 16.6292 6.29591C16.7362 6.18886 16.8633 6.10394 17.0032 6.04601C17.1431 5.98807 17.293 5.95825 17.4444 5.95825C17.7501 5.95825 18.0433 6.07971 18.2595 6.29591L25.1484 13.1848C25.256 13.2915 25.3415 13.4185 25.3998 13.5584C25.458 13.6983 25.4881 13.8484 25.4881 14C25.4881 14.1516 25.458 14.3016 25.3998 14.4415C25.3415 14.5815 25.256 14.7084 25.1484 14.8152L18.2595 21.7041C18.1523 21.8105 18.025 21.8947 17.8851 21.9518C17.7453 22.0089 17.5955 22.0379 17.4444 22.037Z' fill='white'/%3E%3C/svg%3E");
                background-position: center;
                background-size: 100%;
                width: 28px;
                height: 28px;
            }
        }
    }
    .item--inner {
        position: relative;
        &:hover {
            .item--share {
                background-color: transparent;
                border-color: #fff;
            }
            .item--social {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
    .item--image {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        min-height: 522px;
        @include transition(all 300ms linear 0ms);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: lightgray -339.452px -2px / 204.121% 106.897% no-repeat;
            mix-blend-mode: luminosity;
            position: relative;
            z-index: 2;
            @include transition(all 300ms linear 0ms);
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: #435358;
            z-index: 1;
        }
        @media #{$max-md2} {
            min-height: auto;
        }
    }
    .item--holder {
        background: rgba(90, 98, 103, 0.5);
        backdrop-filter: blur(10px);
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        z-index: 3;
    }
    .item--title {
        color: #fff;
        font-family: Livvic;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.33;
        margin-bottom: 8px;
        a {
            color: inherit;
        }
    }
    .item--position {
        color: #fff;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.625;
    }
    .item--share {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-color: $primary-color;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        @include transition(all 300ms linear 0ms);
        svg {
            width: 24px;
            height: 24px;
            color: #fff;
        }
    }
    .item--social {
        position: absolute;
        bottom: 149px;
        right: 45px;
        display: flex;
        flex-direction: column;
        gap: 13px;
        opacity: 0;
        z-index: 3;
        transform: translateY(10px);
        @include transition(all 300ms linear 0ms);
        a {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background-color: $primary-color;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            @include transition(all 300ms linear 0ms);
            i {
                color: #fff;
                font-size: 20px;
            }
            &:hover {
                background-color: #fff;
                border-color: #fff;
                i {
                    color: $primary-color;
                }
            }
        }
    }
}

// Case Client Grid
.ct-client-grid2 {
    .grid-item {
        padding: 0 7.5px !important;
        margin-bottom: 15px !important;
    }

    .client-image {
        width: 100%;
        height: 62px;
        border-radius: 5px;
        border: 1px solid #24293a;
        background: #181c2a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        @include transition(all 400ms cubic-bezier(0.4, 0, 0.2, 1));
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -110%;
            width: 100%;
            height: 100%;
            background: rgba($primary-color, 0.1);
            transform: skewX(-25deg);
            transition: all 500ms ease;
            z-index: 1;
        }

        img {
            filter: brightness(1);
            transform: scale(1);
            @include transition(all 400ms cubic-bezier(0.4, 0, 0.2, 1));
            z-index: 2;
            position: relative;
        }

        &:hover {
            border-radius: 8px;
            border: 1px solid lighten($primary-color, 10%);
            background: $primary-color;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

            &:before {
                left: 100%;
            }

            img {
                filter: brightness(0);
                transform: scale(1.08);
            }
        }
    }
}

// Case Icon
.ct-icon1 {
    &.style5 {
        a {
            i {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background-color: transparent;
                border: 1px solid rgba(#ffffff, 0.5);
                color: rgba(#ffffff, 0.5);
                @include transition(all 300ms linear 0ms);
            }

            &:hover {
                i {
                    color: #1e1f33;
                    border-color: $secondary-color;
                    background-color: $secondary-color;
                }
            }
        }
    }
}

// Case Button
.btn {
    &.btn-round4 {
        --x: 52px;
        box-shadow: none !important;
        background-color: transparent;
        padding: 0;
        color: $primary-color;
        font-family: "Figtree", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: 0.16px;
        @include transition(all 300ms linear 0ms);
        line-height: var(--x);

        &:hover {
            .ct-button-text {
                border-color: $primary-color;
                background-color: $primary-color;
                color: #fff;
            }

            .ct-button-icon {
                transform: rotate(45deg);
            }
        }

        .ct-button-text {
            line-height: var(--x);
            padding: 0 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            border: 1px solid $primary-color;
            background-color: transparent;
            @include transition(all 300ms linear 0ms);
        }

        .ct-button-icon {
            line-height: var(--x);
            width: var(--x);
            height: var(--x);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            background-color: $secondary-color;
            color: $primary-color;
            transform: rotate(0deg);
            font-size: 20px;
            @include transition(all 300ms linear 0ms);
        }

        i {
            margin-left: 0;
        }
    }

    &.btn-icon-box {
        line-height: 60px;
        color: #151818;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
        background-color: $secondary-color;
        background-image: none !important;
        position: relative;

        &:has(.ct-align-icon-right) {
            padding: 0 66px 0 30px;
        }

        &:has(.ct-align-icon-left) {
            padding: 0 30px 0 66px;
        }

        &:hover {
            .ct-button-icon {
                width: calc(100% - 14px) !important;
                border-radius: 5px !important;

                &.ct-align-icon-right {
                    right: 7px;
                }

                &.ct-align-icon-left {
                    left: 7px;
                }
            }
        }

        .ct-button-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            background-color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: $secondary-color;
            font-size: 20px;
            @include transition(all 300ms linear 0ms);

            &.ct-align-icon-right {
                right: 0;
                border-radius: 5px 0px 0px 5px;
            }

            &.ct-align-icon-left {
                left: 0;
                border-radius: 0px 5px 5px 0px;
            }
        }
    }
}

// Case Service Grid
.ct-service-grid18 {
    .grid-item {
        margin-bottom: 30px;
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .grid-item-inner {
        background-color: #0e5f61;
        background-image: none;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 12px;
        padding: 40px;
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        will-change: transform;
        max-height: 440px;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background: linear-gradient(
                180deg,
                rgba(#0e5f61, 1) 0%,
                #0e5f61 100%
            );
            transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        &:hover {
            transform: translateY(-5px);

            &:before {
                background: linear-gradient(
                    180deg,
                    rgba(#0e5f61, 0) 0%,
                    #0e5f61 100%
                );
            }

            .item--featured {
                height: 86px;
            }

            .item--icon {
                margin-top: 14px;
            }

            .item--thumbnail {
                img {
                    width: 10px;
                    height: 10px;
                    opacity: 0;
                    transform: scaleY(0);
                }
            }

            .item-readmore {
                opacity: 1;
                transform: scale(1);
                max-height: 200px;
                padding-top: 28px;
            }
        }
    }

    .item--featured {
        display: flex;
        justify-content: space-between;
        margin-bottom: 36px;
        height: 152px;
        position: relative;
        z-index: 5;
        transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .item--icon {
        margin-top: 0;
        display: flex;
        align-items: end;
        margin-bottom: 8px;
        transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .item--thumbnail {
        width: 152px;
        height: 152px;
        border-radius: 8px;
        overflow: hidden;
        transform: scale3d(1, 1, 1);
        transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
            transform: scaleX(1);
            transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform, opacity;
        }
    }

    .item--title {
        color: #fff;
        font-family: "Figtree", sans-serif;
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.115;
        letter-spacing: -0.64px;
        max-width: 150px;
        margin-bottom: 16px;
        position: relative;
        z-index: 5;

        a {
            color: inherit;
        }
    }

    .item--content {
        color: #f0f7f3;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.556;
        position: relative;
        z-index: 5;
    }

    .item-readmore {
        opacity: 0;
        transform: scale(0);
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        position: relative;
        z-index: 5;
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);

        a {
            display: flex;
            align-items: center;
        }

        span {
            padding: 0 20px;
            border-radius: 100px;
            border: 1px solid #fff;
            background-color: transparent;
            height: 38px;
            color: #fff;
            font-family: "Figtree", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.14px;
            transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
        }

        .item-readmore-icon {
            display: flex;
            width: 38px;
            height: 38px;
            border-radius: 100px;
            justify-content: center;
            align-items: center;
            background-color: #beff6b;
            transition: transform 0.5s ease;

            svg {
                width: 16px;
                height: 16px;
            }
        }
    }
}

.ct-service-grid19 {
    .grid-item {
        padding: 0;
    }

    .grid-item-inner {
        padding: 32px;
        position: relative;
        z-index: 2;
        .item--top,
        .item--bottom {
            position: absolute;
            width: 142px;
            height: 146px;
            z-index: 1;
            color: $primary-color;
            z-index: 1;
        }
        .item--top {
            top: 0;
            right: 0;
            transform: scale(0);
            opacity: 0;
            transform-origin: bottom left;
            @include transition(all 0.3s linear 0.2s);
        }
        .item--bottom {
            bottom: 0;
            left: 0;
            transform: scale(0);
            opacity: 0;
            transform-origin: top right;
            @include transition(all 0.3s linear 0.2s);
        }
        &:hover {
            .item--top,
            .item--bottom {
                transform: scale(1);
                opacity: 1;
            }
            .item--featured {
                .item--index {
                    -webkit-text-stroke-color: $primary-color;
                }
                .item-readmore {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            .item--title {
                color: $primary-color;
            }
        }
    }

    .item--featured {
        width: 100%;
        height: 162px;
        position: relative;
        margin-bottom: 18px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .item--index {
            position: absolute;
            top: 0;
            left: 0;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #fff;
            font-family: "DM Serif Text";
            color: transparent;
            font-size: 222px;
            font-style: normal;
            font-weight: 700;
            line-height: 148px;
            @include transition(all 300ms linear 0ms);
        }

        .item-readmore {
            position: absolute;
            right: 0;
            bottom: -21px;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s linear 0s;
            a {
                width: 42px;
                height: 42px;
                display: block;
            }
        }
    }
    .item--title {
        color: #000;
        font-family: "DM Serif Text";
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.38;
        margin-bottom: 8px;
        @include transition(all 300ms linear 0ms);
        a {
            color: inherit;
        }
    }
    .item--content {
        color: #53535e;
        font-family: "Roboto";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.71;
    }
}

.ct-service-grid20 {
    .grid-item {
        margin-bottom: 30px;
    }
    .grid-item-inner {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        transition: all 0.3s ease;
        &:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            @include background-gradient-bottom(
                $gradient_color_from,
                $gradient_color_to
            );
            z-index: 5;
        }
    }
    .item--featured {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                106deg,
                rgba(0, 7, 26, 0.9) 10.32%,
                rgba(0, 6, 24, 0.74) 32.72%,
                rgba(#000, 0) 51.95%
            );
            z-index: 3;
        }
    }
    .item--icon {
        position: absolute;
        top: 55px;
        left: 30px;
        z-index: 5;
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .item--icon-inner {
        position: relative;
        width: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 40px;
            height: 65px;
            border-radius: 5px;
            opacity: 0.2;
            @include background-gradient-bottom(
                $gradient_color_from,
                $gradient_color_to
            );
            z-index: 1;
        }
        img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            position: relative;
            z-index: 2;
        }
    }
    .item--holder {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 30px;
        z-index: 5;
        opacity: 1 !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .item--holder-2 {
        display: flex;
        position: absolute;
        bottom: -100px;
        left: 0;
        right: 0;
        z-index: 5;
        opacity: 0;
        transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .item--title {
        color: #fff;
        font-family: Unbounded;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.36;
        margin-bottom: 15px;
        a {
            color: inherit;
        }
    }
    .item--content {
        color: var(--ffffff, #fff);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
    }
    .item--meta {
        flex: 1;
        background-color: #00071a;
        display: flex;
        flex-direction: column;
        padding-top: 20px;
    }
    .item-readmore {
        background-color: $primary-color;
        color: #00071a;
        width: 44px;
        padding: 30px 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        span {
            font-family: Unbounded;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            text-transform: uppercase;
            writing-mode: sideways-lr;
        }
    }

    .grid-item-inner:hover {
        .item--featured {
            height: 137px;
            transform: translateY(-20px);

            img {
                object-position: top;
            }
        }
        .item--icon {
            top: 35px;
        }
        .item--holder {
            bottom: -100%;
            opacity: 0;
        }
        .item--holder-2 {
            bottom: 3px;
            opacity: 1;
        }
    }
}

// Case Pricing
.ct-pricing-layout7 {
    border-radius: 12px;
    background: #f0f7f3;
    padding: 44px;
    @media #{$max-xs} {
        padding: 24px;
    }

    .item--icon {
        width: 92px;
        height: 92px;
        background-color: #fff;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
    }

    .pricing-title {
        color: $primary-color;
        font-family: "Figtree", sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: -0.4px;
    }

    .pricing-price {
        font-family: "Figtree", sans-serif;
        display: flex;
    }

    .pricing-price-currency {
        color: #ffcd4c;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: start;
    }

    .pricing-price-number {
        color: $primary-color;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -1.12px;
    }

    .pricing-price-constant {
        color: #4a7172;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.36px;
        display: flex;
        align-items: end;
        margin-bottom: 8px;
    }

    .pricing-divider {
        width: 100%;
        height: 1px;
        background-color: rgba($primary-color, 0.2);
        margin: 36px 0;
    }

    .pricing-feature {
        list-style: none;
        margin-bottom: 40px;

        li {
            display: flex;
            align-items: center;
            gap: 12px;

            svg {
                width: 24px;
                height: 24px;
                color: $primary-color;
            }

            span {
                color: #4a7172;
                font-family: "Figtree", sans-serif;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 28px;
            }

            + li {
                margin-top: 24px;
            }
        }
    }

    .pricing-button {
        a {
            width: 100%;
            border-radius: 6px;
            height: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #4a7172;
            color: #fff;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 1;
        }
    }
}

.ct-pricing-layout8 {
    width: 460px;
    padding: 100px 115px;
    text-align: center;
    background-color: #000;
    border-radius: 10px 10px 230px 230px;
    position: relative;
    @media #{$max-lg3} {
        width: 100%;
        padding: 100px;
    }
    @media #{$max-sm} {
        width: 100%;
        margin: 0 auto;
    }
    @media #{$max-xsx} {
        width: calc(100vw - 30px) !important;
        display: block;
        padding: 100px 45px;
    }
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(#000, 0.5);
        border-radius: 10px 10px 230px 230px;
        z-index: 2;
    }
    .pricing-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px 10px 230px 230px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px 10px 230px 230px;
            filter: grayscale(1);
        }
    }
    .pricing-price-number {
        color: #fff;
        font-family: "DM Serif Text", serif;
        font-size: 70px;
        line-height: 1;
        font-weight: 600;
        margin-bottom: 10px;
        position: relative;
        z-index: 3;
    }
    .pricing-title {
        color: #fff;
        font-family: "Roboto";
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 0;
        position: relative;
        z-index: 3;
    }
    .pricing-divider {
        width: 100%;
        height: 1px;
        background-color: rgba(#fff, 0.2);
        margin: 40px 0;
        position: relative;
        z-index: 3;
    }
    .pricing-feature {
        list-style: none;
        margin-bottom: 0;
        position: relative;
        z-index: 3;
        li {
            display: flex;
            align-items: center;
            gap: 15px;
            + li {
                margin-top: 10px;
            }
        }
        i {
            color: $primary_color;
        }
        span {
            color: #fff;
            font-family: "Roboto";
            font-size: 16px;
            font-weight: 400;
        }
    }
}

// Case Fancy Box Carousel
.ct-fancy-box-carousel2 {
    .slick-slide {
        position: relative;

        &:hover {
            &:after {
                opacity: 1;
            }
        }

        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            opacity: 0;
            transition: opacity 0.3s linear 0ms;
            background: linear-gradient(
                180deg,
                rgba($primary-color, 0) 0%,
                rgba($primary-color, 0.08) 100%
            );
        }

        &:nth-child(1) {
            border-radius: 0px 24px 0 0;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0px;
                width: calc(100% + 1px);
                height: 24px;
                border-top: 1px solid rgba(#4a7172, 0.32);
                border-right: 1px solid rgba(#4a7172, 0.32);
                border-radius: 0px 24px 0 0;
            }

            &:after {
                background: linear-gradient(
                    0deg,
                    rgba($primary-color, 0) 0%,
                    rgba($primary-color, 0.08) 100%
                );
                border-radius: 0px 24px 0 0;
            }
        }

        &:nth-child(2) {
            border-radius: 0 0 24px 24px;

            &:before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: calc(100% - 24px);
                border-left: 1px solid rgba(#4a7172, 0.32);
                border-bottom: 1px solid rgba(#4a7172, 0.32);
                border-right: 1px solid rgba(#4a7172, 0.32);
                border-radius: 0 0 24px 24px;
            }

            &:after {
                border-radius: 0 0 24px 24px;
            }
        }

        &:nth-child(3) {
            border-radius: 24px 24px 0 0;

            &:before {
                content: "";
                position: absolute;
                top: 0;
                left: -1px;
                width: calc(100% + 2px);
                height: 24px;
                border-top: 1px solid rgba(#4a7172, 0.32);
                border-left: 1px solid rgba(#4a7172, 0.32);
                border-right: 1px solid rgba(#4a7172, 0.32);
                border-radius: 24px 24px 0 0;
            }

            &:after {
                background: linear-gradient(
                    0deg,
                    rgba($primary-color, 0) 0%,
                    rgba($primary-color, 0.08) 100%
                );
                border-radius: 24px 24px 0 0;
            }
        }

        &:nth-child(4) {
            border-radius: 0 0 0 24px;

            &:before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: calc(100% - 24px);
                border-bottom: 1px solid rgba(#4a7172, 0.32);
                border-left: 1px solid rgba(#4a7172, 0.32);
                border-radius: 0 0 0 24px;
            }

            &:after {
                border-radius: 0 0 0 24px;
            }
        }
    }

    .item--inner {
        padding: 48px 17px;

        .item--title {
            color: $primary-color;
            font-family: "Figtree", sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.556;
            margin-bottom: 16px;
        }

        .item--description {
            color: #4a7172;
            font-family: "Figtree", sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.556;
        }
    }
}

// Case Client Counter
.ct-client-counter1 {
    .ct-client-counter-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    .ct-client-counter-item {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        + .ct-client-counter-item {
            margin-left: -15px;
        }

        &:last-child {
            position: relative;

            &:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                backdrop-filter: blur(6px);
                background-color: rgba($primary-color, 0.1);
                z-index: 1;
            }
        }

        .item-counter {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            z-index: 5;
        }

        .couter-holder {
            color: #fff;
            font-family: "Figtree", sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            letter-spacing: -0.4px;
            display: flex;
            align-items: center;
        }
    }

    .ct-client-counter-title {
        margin-top: 20px;
        color: #fff;
        font-family: "Figtree", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.33;
        letter-spacing: -0.36px;
        max-width: 214px;
    }
}

// Case Video Player
.ct-video-player {
    &.video-player-style16 {
        .ct-video-image-bg + .ct-video-button {
            position: absolute;
            top: 50%;
            width: 94px !important;
            height: 94px !important;
            font-size: 28px !important;
            left: -47px !important;
            transform: translateY(-50%) !important;
            border: 14px solid #e6efee;

            span {
                display: none;
            }

            @media #{$max-md2} {
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
            }
        }
    }
    .ct-video-button {
        &.style17 {
            height: 60px;
            width: 60px;
            @include background-gradient-bottom(
                $gradient_color_to,
                $gradient_color_from
            );
            font-size: 20px;
            z-index: 3;
            color: #00071a;
            .line-video-animation {
                display: none;
            }
            &:before {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba($gradient_color_from, 0.8);
                border-radius: 50%;
                animation: pulse-border 1500ms ease-out infinite;
                -webkit-animation: pulse-border 1500ms ease-out infinite;
                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;
                }
            }
        }
    }
    &.video-player-style18 {
        .ct-video-button {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: rgba(34, 48, 53, 0.2);
            background-image: unset;
            border: 1.5px solid #fff;
            backdrop-filter: blur(7.5px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            span.play-text {
                color: #fff;
                font-family: Poppins;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 34px;
            }
        }
    }
}

/* Case Tab */
.ct-tabs {
    &.type-vertical3 {
        display: flex;
        gap: 63px;
        @media #{$max-sm} {
            flex-direction: column;
            gap: 20px;
        }

        .ct-tabs-title {
            display: inline-flex;
            flex-direction: column;
            gap: 10px;
            @media #{$max-sm} {
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        }

        .ct-tab-title {
            width: 187px;
            height: 56px;
            border-radius: 5px;
            opacity: 0.7;
            background: #fff;
            padding: 15px 20px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #444848;
            font-family: "Libre Baskerville";
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            border: 1px solid transparent;
            position: relative;
            @include transition(all 0.3s linear 0ms);

            &:hover,
            &.active {
                border-color: #000;

                .ct-tab-arrow {
                    opacity: 1;
                    transform: translate(0px, -50%);
                }
            }
        }

        .ct-tab-arrow {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #151818;
            position: absolute;
            top: 50%;
            right: -21px;
            transform: translate(-10px, -50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: $secondary-color;
            opacity: 0;
            @include transition(all 0.3s linear 0ms);
            @media #{$max-sm} {
                display: none;
            }
        }

        .ct-tab-content {
            display: none;
        }
    }
    &.type-vertical4 {
        display: flex;
        gap: 30px;
        justify-content: space-between;
        @media #{$max-sm} {
            flex-direction: column-reverse;
            gap: 20px;
        }
        .ct-tabs-title {
            margin-top: 61px;
            display: inline-flex;
            flex-direction: column;
            gap: 30px;
        }
        .ct-tab-title {
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(#080f3e, 0.1);
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            @include transition(all 0.3s linear 0ms);
            span {
                color: #5c5c65;
                font-family: "DM Serif Text";
                font-size: 28px;
                font-style: normal;
                font-weight: 600;
                line-height: 42px;
                padding-left: 0;
                @include transition(all 0.3s linear 0ms);
            }
            svg {
                width: 42px;
                height: 42px;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                @include transition(all 0.3s linear 0ms);
            }
            &:hover,
            &.active {
                span {
                    padding-left: 57px;
                    color: $primary_color;
                }
                border-color: $primary_color;
                svg {
                    opacity: 1;
                }
            }
        }
        .ct-tab-content {
            display: none;
        }
    }
}

// Case Progress Bar
.ct-progressbar8 {
    .ct-progress-bar {
        height: 14px;
        position: relative;
        width: 0;
        @include transition(width 1.4s ease);
        background-color: $primary_color;
        @include border-radius(9px);
        top: 3px;
        left: 3px;
        &:before {
            content: "";
            position: absolute;
            top: 55%;
            left: -5px;
            width: calc(100% + 51px);
            height: 22px;
            background-color: transparent;
            border: 1px solid $primary_color;
            transform: translateY(-50%);
            @include border-radius(11px);
            @media #{$max-sm} {
                top: 50%;
                width: calc(100% + 10px);
            }
        }
    }
    .ct-progress-title {
        color: #090919;
        font-family: "DM Serif Text";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.78;
    }
    .ct-progress-percentage {
        font-size: 15px;
        color: $primary_color;
        font-weight: 600;
        font-family: "DM Serif Text";
        position: absolute;
        top: 50%;
        right: -36px;
        transform: translateY(-50%);
        line-height: 1;
    }
    .ct-progress-holder {
        height: 22px;
    }
    .ct-progress-item {
        + .ct-progress-item {
            margin-top: 13px;
        }
    }
    &.style2 {
        .ct-progress-meta {
            margin-bottom: 12px;
        }
        .ct-progress-title {
            color: $primary-color;
            font-family: Unbounded;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.875;
            text-transform: uppercase;
        }
        .ct-progress-bar {
            @include background-gradient-bottom(
                $gradient_color_to,
                $gradient_color_from
            );
            z-index: 10;
            position: relative;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: -5px;
                width: calc(100% + 53px);
                height: 24px;
                @include background-gradient-bottom(
                    $gradient_color_to,
                    $gradient_color_from
                );
                -webkit-mask: linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                border: none;
                transform: translateY(-50%);
                @include border-radius(12px);
                padding: 1px;
            }
        }
        .ct-progress-percentage {
            background: var(
                --Linear,
                linear-gradient(
                    90deg,
                    #00f2fe 0%,
                    #03effe 2.1%,
                    #24d2fe 29.3%,
                    #3cbdfe 55.4%,
                    #4ab0fe 79.6%,
                    #4facfe 100%
                )
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: Unbounded;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            right: -44px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
        }
    }
}

// Case Blog Grid
.ct-blog-grid-layout6 {
    .grid-item {
        &:nth-child(odd) {
            .grid-item-inner {
                flex-direction: row-reverse;
                @media #{$max-sm} {
                    flex-direction: column;
                }
            }
            .item--featured {
                img {
                    border-radius: 0px 250px 250px 0px;
                    @media #{$max-sm} {
                        border-radius: 12px;
                    }
                }
            }
            .item--date {
                left: -42px;
                right: auto;
                border-radius: 250px 0px 250px 250px;
                @media #{$max-sm} {
                    left: 0;
                    top: 0;
                    width: 100px;
                    height: 100px;
                    border-radius: 12px 250px 250px 250px;
                }
            }
        }
        + .grid-item {
            margin-top: 52px;
        }
    }
    .grid-item-inner {
        display: flex;
        align-items: center;
        gap: 67px;
        @media #{$max-sm} {
            flex-direction: column;
            gap: 20px;
        }
    }
    .item--featured {
        position: relative;
        @media #{$max-md2} {
            width: 50%;
        }
        @media #{$max-sm} {
            width: 100%;
        }
        img {
            width: 751px;
            height: 440px;
            object-fit: cover;
            border-radius: 250px 0px 0px 250px;
            @media #{$max-sm} {
                width: 100%;
                border-radius: 12px;
            }
            @media #{$max-md2} {
                width: 100%;
                height: 300px;
            }
        }
    }
    .item--date {
        content: "";
        position: absolute;
        top: 0;
        right: -42px;
        background-color: $secondary_color;
        width: 110px;
        height: 100px;
        border-radius: 0px 250px 250px 250px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        @media #{$max-sm} {
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            border-radius: 12px 250px 250px 250px;
        }
        .item--date-inner {
            display: flex;
            flex-direction: column;
        }
        span {
            color: #fff;
            font-family: "DM Serif Text";
            font-size: 22px;
            line-height: 24px;
            font-weight: 400;
            text-transform: capitalize;
            &:first-child {
                font-size: 34px;
                font-weight: 600;
                line-height: 1.17;
            }
        }
    }
    .item--body {
        flex: 1;
    }
    .item--title {
        color: #090919;
        font-family: "DM Serif Text";
        font-size: 36px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.11;
        margin-bottom: 24px;
        a {
            color: inherit;
            @include transition(all 300ms linear 0ms);
        }
    }
    .item--content {
        color: #53535e;
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.62;
        margin-bottom: 32px;
    }
    .item--readmore {
        a {
            &.btn {
                line-height: 54px;
                height: 54px;
                border-radius: 0px;
                box-shadow: unset;
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }
            span {
                color: #fff;
                font-family: "DM Serif Text";
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                text-transform: uppercase;
            }
        }
    }
}

// Case Testimonial Grid
.ct-testimonial-grid5 {
    .ct-grid-inner {
        align-items: flex-start;
        height: 702px !important;
        @media #{$max-md2} {
            height: auto !important;
            min-height: 800px !important;
        }
        @media #{$max-xsx} {
            height: auto !important;
            min-height: 1000px !important;
        }
    }
    .grid-item {
        &:nth-child(1) {
            margin-bottom: 30px;
        }
        &:nth-child(2) {
            @media #{$max-md2} {
                margin-bottom: 30px;
            }
        }
        &:nth-child(1),
        &:nth-child(2) {
            .item--inner {
                background-color: rgba(#080f3e, 0.04);
                padding: 30px;
            }
        }
        &:nth-child(3) {
            top: 50% !important;
            right: 0 !important;
            left: auto !important;
            transform: translateY(-50%) !important;
            @media #{$max-md2} {
                top: 576px !important;
                right: auto !important;
                left: 0 !important;
                transform: translateY(0) !important;
            }
            @media #{$max-sm} {
                top: 630px !important;
            }
            @media #{$max-xsx} {
                top: 680px !important;
            }
            .item--inner {
                background: var(--ffffff, #fff);
                box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
                padding: 40px;
                max-width: 560px;
                width: 100%;
                height: fit-content;
                margin-left: auto;
                @media #{$max-md2} {
                    margin-left: 0;
                    max-width: 100%;
                    background: rgba(8, 15, 62, 0.04);
                    box-shadow: none;
                    padding: 20px;
                }
            }
            .item-icon {
                svg {
                    width: 84px;
                    height: 84px;
                    @media #{$max-md2} {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
            .item--text {
                font-size: 30px;
                font-weight: 700;
                line-height: 1.333;
                text-transform: uppercase;
                margin-bottom: 20px;
                @media #{$max-md2} {
                    font-size: 20px;
                }
            }
            .item--description {
                font-size: 18px;
                line-height: 1.667;
                margin-bottom: 32px;
                @media #{$max-md2} {
                    font-size: 16px;
                }
            }
            .item--holder {
                gap: 20px;
            }
            .item--image {
                width: 65px;
                height: 65px;
                border: 1px solid $primary_color;
                @media #{$max-md2} {
                    width: 46px;
                    height: 46px;
                    border: none;
                }
            }
            .item--title {
                font-size: 22px;
                font-weight: 900;
                text-transform: uppercase;
                line-height: 1.36;
                @media #{$max-md2} {
                    font-size: 16px;
                }
            }
            .item--position {
                font-size: 18px;
                @media #{$max-md2} {
                    font-size: 12px;
                }
            }
        }
    }
    .item--inner {
    }
    .item-icon {
        color: $primary-color;
        margin-bottom: 15px;
    }
    .item--text {
        color: #080f3e;
        font-family: "DM Serif Text";
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .item--description {
        color: #5e5c5c;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.62;
        margin-bottom: 30px;
    }
    .item--holder {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .item--image {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    }
    .item--title {
        color: #090919;
        font-family: "DM Serif Text";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.62;
        margin-bottom: 0;
    }
    .item--position {
        color: $primary-color;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.667;
    }
}

// Case Icon Hidden Sidebar
.ct-icon-hidden-sidebar {
    &.style4 {
        .item--inner {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background-color: #080f3e;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            .icon-line {
                width: 20px;
                height: 3px;
                background-color: #fff;
                border-radius: 3px;
                position: relative;
                &:before,
                &:after {
                    content: "";
                    width: 20px;
                    height: 3px;
                    background-color: #fff;
                    border-radius: 3px;
                    position: absolute;
                    left: 0;
                }
                &:before {
                    top: -6px;
                }
                &:after {
                    bottom: -6px;
                }
            }
        }
    }

    &.style5 {
        .item--inner {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 62px;
                height: 62px;
                transform: translate(-50%, -50%);
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 50%;
                z-index: -1;
            }
            .icon-line {
                width: 24px;
                height: 2px;
                background-color: $primary-color;
                border-radius: 2px;
                position: relative;
                &:before,
                &:after {
                    content: "";
                    width: 24px;
                    height: 2px;
                    background-color: $primary-color;
                    border-radius: 2px;
                    position: absolute;
                    left: 0;
                }
                &:before {
                    top: -6px;
                }
                &:after {
                    bottom: -6px;
                }
            }
        }
    }
}

// Case Award List
.ct-award-list {
    .ct-award-item {
        display: flex;
        align-items: center;
        padding: 35px 0;
        @media #{$max-md2} {
            justify-content: space-between;
            gap: 20px;
        }
        @media #{$max-xsx} {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
        &:first-child {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        + .ct-award-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        &:hover {
            .ct-award-item--title {
                color: $primary-color;
                &:after {
                    width: 100%;
                }
            }
            .ct-award-item--arrow {
                &:after {
                    @include background-gradient-bottom(
                        $gradient_color_to,
                        $gradient_color_from
                    );
                }

                i {
                    background: none;
                    -webkit-background-clip: initial;
                    -webkit-text-fill-color: initial;
                    color: #00071a;
                }
            }
        }
    }
    .ct-award-item-col-1 {
        width: 52.5%;
        flex: 0 0 52.5%;
        display: flex;
        align-items: center;
        gap: 42px;
        @media #{$max-md2} {
            width: 50%;
            flex: 0 0 50%;
            gap: 20px;
        }
        @media #{$max-xsx} {
            width: 100%;
            flex: 0 0 100%;
        }
    }
    .ct-award-item-col-2 {
        width: 44%;
        flex: 0 0 44%;
        display: flex;
        align-items: center;
        gap: 72px;
        @media #{$max-md2} {
            gap: 20px;
            width: 40%;
            flex: 0 0 40%;
        }
        @media #{$max-xsx} {
            width: 100%;
            flex: 0 0 100%;
        }
    }
    .ct-award-item--image {
        width: 254px;
        height: 66px;
        border-radius: 8px;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @media #{$max-md2} {
            width: 50%;
        }
    }
    .ct-award-item--title {
        color: #fff;
        font-family: Unbounded;
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.81;
        position: relative;
        a {
            color: inherit;
            @include transition(all 300ms linear 0ms);
        }
        &:after {
            content: "";
            position: absolute;
            bottom: 4px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: $primary-color;
            @include transition(all 300ms linear 0ms);
        }
        @media #{$max-md2} {
            font-size: 18px;
            flex: 1;
            &:after {
                display: none;
            }
        }
    }
    .ct-award-item--year {
        color: $primary-color;
        font-family: Unbounded;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.81;
    }
    .ct-award-item--description {
        max-width: 340px;
        color: rgba(255, 255, 255, 0.8);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.71;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ct-award-item--arrow {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #00071a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        @media #{$max-xsx} {
            width: 100%;
            border-radius: 8px;
            height: 42px;
        }
        &:before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            @include background-gradient-bottom(
                $gradient_color_to,
                $gradient_color_from
            );
            border-radius: 50%;
            z-index: -2;
            @include transition(all 300ms linear 0ms);
            @media #{$max-xsx} {
                border-radius: 8px;
            }
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #00071a;
            border-radius: 50%;
            z-index: -1;
            @include transition(all 300ms linear 0ms);
            @media #{$max-xsx} {
                border-radius: 8px;
            }
        }

        i {
            @include background-gradient-bottom(
                $gradient_color_to,
                $gradient_color_from
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 30px;
            @include transition(all 300ms linear 0ms);
        }
    }
}

// Case Scroll Down
.ct-scroll-down {
    &:hover {
        .ct-scroll-down__link {
            gap: 32px;
            @media #{$max-md2} {
                gap: 22px;
            }
        }
        .ct-scroll-down__link-text {
            color: #fff;
        }
        .ct-scroll-down__icon {
            &:before {
                background: linear-gradient(
                    0deg,
                    rgba($gradient-color-to, 1),
                    rgba($gradient-color-from, 1)
                );
            }
        }
    }
    .ct-scroll-down__link {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        scroll-behavior: smooth;
        @include transition(all 300ms linear 0ms);
        @media #{$max-md2} {
            flex-direction: row;
        }
    }
    .ct-scroll-down__link-text {
        color: #b1b6c0;
        font-family: Unbounded;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.9375;
        letter-spacing: 3.2px;
        text-transform: uppercase;
        writing-mode: sideways-rl;
        @include transition(all 300ms linear 0ms);
        @media #{$max-md2} {
            writing-mode: initial;
        }
    }
    .ct-scroll-down__icon {
        width: 80px;
        height: 80px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 80px;
            padding: 1px;
            background: linear-gradient(
                0deg,
                rgba($gradient-color-to, 0.5),
                rgba($gradient-color-from, 0.5)
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        &:after {
            content: "";
            position: absolute;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            opacity: 0.05;
            filter: drop-shadow(0px 13px 69px rgba(84, 104, 133, 0.09));
        }
        i {
            background: linear-gradient(
                90deg,
                $gradient-color-from 0%,
                $gradient-color-to 100%
            );
            background-clip: text;
            color: transparent;
            animation: pulse-icon-scroll-down 2.5s cubic-bezier(0.4, 0, 0.2, 1)
                infinite;
        }
    }
}

@keyframes pulse-icon-scroll-down {
    0%,
    100% {
        transform: translateY(-4px) rotate(90deg) scale(1);
    }
    50% {
        transform: translateY(4px) rotate(90deg) scale(1.05);
    }
}

// Case Social Text
.ct-social-text {
    .ct-social-text__item {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 50px;
        @media #{$max-md2} {
            gap: 20px;
        }
    }
    span {
        font-family: Unbounded;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        writing-mode: sideways-lr;
        background: linear-gradient(
            180deg,
            $gradient-color-to 0%,
            $gradient-color-from 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    i {
        background: linear-gradient(
            180deg,
            $gradient-color-to 0%,
            $gradient-color-from 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}