/* DESCRIPTION:banner section */
    .innovation-banner {
        .service-banner-sub-menu-together {
            height: fit-content;
            width: 100%;
            display: flex;
            flex-direction: column;

            .service-hero-banner>* {
                position: relative;
                z-index: 2;
            }

            .service-hero-banner::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 1;
                border-radius: 0 0 0 10.41vw;
                pointer-events: none;
            }

            .innovatio-h1 {
                width: 90.8%;
                min-height: fit-content;
                max-height: 45.4vh;
            }

            .service-hero-banner {
                position: relative;
                border-radius: 0 0 0 10.41vw;
                background-size: cover !important;
                background-position: 80% 17% !important;
                background-repeat: no-repeat !important;
                box-shadow: 0px 0px 30px 0px rgba(0, 204, 255, 0.8);
                margin-bottom: 2.5%;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                min-height: 43.75vw;
                padding: 14.76% 3.34% 5.89%;
                flex: 1;

                .left-text-box {
                    display: flex;
                    /* gap: 2em; */
                    padding-left: 8.52%;
                    flex-direction: column;
                    justify-content: start;
                    align-items: flex-start;
                    text-align: left;

                    h1 {
                        margin-bottom: 1.97%;
                    }
                }
            }

            .service-scroll-menu {
                width: 100%;
                z-index: 5;

                .service-menu-dropdown-toggle {
                    display: none;
                }

                .service-menu-dropdown-toggle::after {
                    color: inherit !important;
                    content: "";
                    display: inline-block;
                    min-height: 16px;
                    aspect-ratio: 1;
                    margin: 0 10px;
                    vertical-align: middle;
                    background: url(/wp-content/uploads/2025/03/insurance-drop-down-white.svg);
                    background-size: contain;
                    transform: rotate(180deg);
                    background-repeat: no-repeat;
                    transition: transform 0.3s ease;
                }

                .service-menu-dropdown-container.open {
                    .service-scroll-list {
                        display: flex;
                        justify-content: flex-start;
                        gap: 5.6%;
                        flex-direction: row;
                        margin: 0;
                        padding: 0.63% 3.34%;
                        list-style: none;

                        li a {
                            text-decoration: none;
                        }
                    }
                }
            }

            .sticky-service-menu {
                position: fixed;
                top: 0;
                /* background-color: var(--adro-blue); */
            }

            .non-sticky-service-menu {
                position: none;
                /* background: linear-gradient(0deg, #1B4466 0%, #1B4466 100%); */
            }

            .carousel-controls {
                position: absolute;
                right: 0;
                top: 73.09%;
            }
        }

        @media screen and (orientation: portrait) {
            .service-banner-sub-menu-together {
                .service-hero-banner {
                    align-items: flex-start;
                    align-content: flex-start;
                    margin-bottom: 2.5em;

                    .left-text-box {
                        width: 100%;
                        padding-left: 0;
                    }
                }
            }
        }

        @media screen and (max-width: 1024px) {
            .service-banner-sub-menu-together {
                .innovatio-h1 {
                    width: 100%;
                }

                .carousel-controls {
                    position: absolute;
                    top: 84.83%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .service-scroll-menu {
                    .service-menu-dropdown-container .service-scroll-list {
                        li a {
                            font-size: 18px !important;
                        }
                    }
                }

                @media screen and (min-width: 768px) and (orientation: portrait) {
                    .service-hero-banner {
                        background-position: 97% center !important;
                    }
                }

                .service-hero-banner::before {
                    border-radius: 0 0 0 14.98vw;
                }

                .service-hero-banner {
                    border-radius: 0 0 0 14.98vw;
                    padding: 44.13% 4.8% 5.8%;
                    gap: 2.5em;
                    min-height: 84.34vh;

                    .left-text-box {
                        /* gap: 1.5em; */

                        h1 {
                            margin-bottom: 4.25%;
                        }

                        .custom-button {
                            min-width: 176px;
                        }
                    }
                }

                .service-scroll-menu {
                    .service-menu-dropdown-toggle {
                        display: block;
                        padding: 0.89em 2.23em;
                        box-shadow: 0px -2px 10.8px 0px rgba(0, 0, 0, 0.1);
                        font-size: 18px !important;
                    }

                    .service-menu-dropdown-container .service-scroll-list {
                        box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
                        display: none;
                    }

                    .service-menu-dropdown-container.open {
                        .service-menu-dropdown-toggle::after {
                            transform: rotate(0deg);
                        }

                        .service-scroll-list {
                            flex-direction: column;
                            position: absolute;
                            background-color: var(--adro-blue);
                            width: 100%;
                            padding: 1em 2.5em;

                            li {
                                padding: 0.34em 0;
                            }
                        }
                    }
                }
            }

            @media screen and (orientation: landscape) {
                @supports (-moz-appearance: none) {
                    height: -moz-max-content;
                    min-height: 78.68vh;
                }

                @media screen and (max-height: 650px) {
                    min-height: 100vh;
                }

                .service-hero-banner::before {
                    border-radius: 0 0 0 10.47vw;
                }

                .service-hero-banner {
                    border-radius: 0 0 0 10.47vw !important;
                    padding: 13.41% 6.79% 3.4% !important;
                    flex-wrap: nowrap !important;
                    gap: 0;
                    align-items: start !important;
                    margin-bottom: 3.36% !important;

                    .left-text-box {
                        width: 100%;
                        padding-left: 0;
                        justify-content: start;
                        gap: 1em;

                        h1 {
                            margin-bottom: 0px;
                        }
                    }
                }
            }
        }


        @media screen and (max-width: 767.5px) and (orientation: portrait) {
            .service-banner-sub-menu-together {
                .innovatio-h1 {
                    width: 100%;
                }

                .service-hero-banner::before {
                    border-radius: 0 0 0 25.64vw;
                }

                .service-hero-banner {
                    border-radius: 0 0 0 25.64vw;
                    padding: 59.75% 6.16%;
                    gap: 2.5em;
                    min-height: 84.125vh;
                    margin-bottom: 6%;
                    aspect-ratio: 390/673;

                    .left-text-box {
                        /* gap: 1em; */

                        h1 {
                            margin-bottom: 11.7%;
                        }
                    }
                }

                .service-scroll-menu {
                    .service-menu-dropdown-container.open {
                        .service-scroll-list {
                            padding: 4.12% 6.16%;

                            li {
                                padding: 0.38em 0;
                            }
                        }
                    }

                    .service-menu-dropdown-toggle {
                        padding: 0.89em 1.34em;
                        text-align: center;
                    }
                }

                .carousel-controls {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 88.8% !important;
                }
            }
        }
    }


    /* DESCRIPTION:text below banner */

    .below-innovation-banner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;
        text-align: center;
        position: relative;
        margin-bottom: 2.05%;
    }

    .text-below-innovation-banner {
        width: 45.84%;
        margin-bottom: 2.52% !important;
    }

    .text-below-innovation-heading {
        color: #fff;
        font-style: normal;
        font-weight: 500 !important;
        margin-bottom: 2.52% !important;
    }

    @media (max-height: 650px) {
        .below-innovation-banner {
            margin-bottom: 6.16%;
        }
    }

    /* Landscape Tablet */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .below-innovation-banner {
            margin-bottom: 3.96%;
        }

        .text-below-innovation-banner {
            width: 69.69%;
            margin-bottom: 3.96% !important;
        }

        /* .button-innovation {
margin-top: 3.96%;
} */
        .text-below-innovation-heading {
            margin-bottom: 5.76% !important;
        }
    }

    /* Portrait Tablet */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .below-innovation-banner {
            margin-bottom: 3.96%;
        }

        .text-below-innovation-banner {
            width: 71.23%;
            margin-bottom: 1.125em !important;
        }

        /* .button-innovation {
margin-top: 1.125em;
} */
        .text-below-innovation-heading {
            margin-bottom: 4.8% !important;
        }
    }

    /* Mobile */
    @media screen and (max-width: 767.5px) {
        .below-innovation-banner {
            padding: 6.2%;
            margin-bottom: 0;
        }

        .text-below-innovation-banner {
            width: 100%;
            margin-bottom: 9.6% !important;
        }

        .text-below-innovation-heading {
            margin-bottom: 7% !important;
        }
    }

    /* Mobile landscape with height constraints */
    @media (max-width: 767.5px) and (max-height: 650px) and (orientation: landscape) {
        .below-innovation-banner {
            margin-bottom: 6.16% !important;
        }

        .text-below-innovation-heading {
            margin-bottom: 7.03% !important;
        }
    }

    /* Color transition animation styles */
      .animated-text-transition {
        animation: containerFadeIn 0.3s ease-out 0.2s forwards;
        color: #FFFFFF5C;
    }

    .animated-text-transition .word {
        display: inline-block;
        color: #FFFFFF5C;
        animation: wordColorTransition 0.9s ease-out calc(var(--n) * 0.2s) forwards;
    }

    .animated-text-transition .word:last-child {
        margin-right: 0;
    }

    .animated-text-transition .color-ia .word {
        animation-name: colorIaTransition;
    }


    @keyframes containerFadeIn {
        to {
            opacity: 1;
        }
    }

    @keyframes wordColorTransition {
        to {
            color: white;
        }
    }

    @keyframes colorIaTransition {
        to {
            color: var(--adro-electric-blue);
        }
    }

    /* DESCRIPTION:Our innovation section */
    .innovation-section {

        .our-innovation-header {
            padding: 4.22% 3.34% 0;

            .main-header {
                margin-bottom: 1em;
            }
        }

        .card-section {
            display: grid;
            grid-template-columns: 2.02fr 0.98fr;
            gap: 1.67vw;
            padding: 2.45% 3.34% 2.82%;

            .main-card {
                border-radius: 20px;
                grid-row: 1 / 2;
                grid-column: 2 / 3;
                position: relative;
                overflow: hidden;
                padding: 7.66%;
                background-size: cover;
                background-position: center;
                text-align: center;
                display: flex;
                flex-direction: column;

                .main-card-title,
                .main-card-content {
                    color: var(--adro-deep-blue);
                    transition: opacity 0.3s ease, transform 0.3s ease;
                    opacity: 1;
                    transform: translateY(0);
                }

                .main-card-title {
                    text-transform: uppercase !important;
                    margin-bottom: 1.07em;
                }

                .main-card-scrollable {
                    overflow: auto;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }
            }

            /* Added for main-card zoom animation */
            .main-card.clicked {
                transform: scale(0);
                opacity: 0;
                filter: blur(1px);
                /* slight blur during exit */
                transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                    opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                    filter 0.5s ease;
            }

            .main-card.clicked-back {
                transform: scale(1);
                opacity: 1;
                filter: blur(0px);
                /* clear on return */
                transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
                    filter 0.8s ease;
            }


            .main-card.fade-out .main-card-title,
            .main-card.fade-out .main-card-content {
                opacity: 0;
                transform: translateY(10px);
            }

            .main-card.fade-in .main-card-title,
            .main-card.fade-in .main-card-content {
                opacity: 1;
                transform: translateY(0);
            }

            .main-card::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to bottom right, rgba(0, 204, 255, 0.90) 0%, rgba(0, 204, 255, 0.90) 100%);
                z-index: 1;
            }

            .main-card * {
                position: relative;
                z-index: 2;
            }

            .small-cards {
                width: 100%;
                display: grid;
                grid-row: 1 / 2;
                grid-column: 1 / 2;
                grid-template-rows: repeat(2, 1fr);
                grid-template-columns: repeat(2, 1fr);
                gap: 1.67vw;

                .card:nth-child(5) {
                    display: none;
                }

                .card {
                    background-size: cover;
                    background-position: center;
                    aspect-ratio: 576 / 320;

                    position: relative;
                    cursor: pointer;
                    border-radius: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .card-content {
                        z-index: 2;
                        width: 100%;
                        text-align: center;

                        .card-title {
                            padding: 8.33%;
                            margin: 0;
                            text-transform: uppercase !important;
                            transition: opacity 0.3s ease;
                        }
                    }
                }

                .card::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: 20px;
                    background: linear-gradient(0deg,
                            rgba(67, 102, 143, 0.14) -0.03%,
                            rgba(5, 8, 14, 0.56) 43.48%,
                            rgba(5, 8, 14, 0.56) 67.04%,
                            rgba(67, 102, 143, 0.14) 100%);
                    z-index: 1;
                }

                .card.clicked {
                    transform: scale(0);
                    opacity: 0;
                    filter: blur(1px);
                    /* slight blur during exit */
                    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                        opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                        filter 0.5s ease;

                    .card-title {
                        opacity: 0.75;
                    }
                }

                .card.clicked-back {
                    transform: scale(1);
                    opacity: 1;
                    filter: blur(0px);
                    /* clear on return */
                    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
                        filter 0.8s ease;
                }
            }
        }

        .button-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3.49%;
        }

        @media screen and (max-width: 767.5px),
        screen and (max-width:1024px) and (orientation:portrait) {
            .our-innovation-header {
                padding: 12.31% 6.16% 0;

                .main-header {
                    margin-bottom: 1.34em;
                }
            }

            .card-section {
                display: flex;
                flex-direction: column;
                padding: 0;
                gap: 0;

                .owl-stage-outer {
                    margin-bottom: 8.72%;
                }

                .main-card {
                    margin: 8.21% 6.16% !important;
                    padding: 8.21% 6.67%;
                    aspect-ratio: 342 / 344;

                    .main-card-title {
                        margin-bottom: 2.23em;
                    }
                }

                .small-cards {
                    margin-bottom: 15.39%;
                    display: block;
                }
            }
        }

        @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
            .card-section .small-cards .card {
                aspect-ratio: 510/320;
            }
        }

        @media screen and (max-width: 767.5px) {
            .button-box {
                margin-bottom: 18.49%;
            }
        }

        @media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
            .our-innovation-header {
                padding: 9.6% 4.8% 0;

                .main-header {
                    margin-bottom: 1em;
                }
            }

            .card-section {

                .owl-stage-outer {
                    margin-bottom: 3.84%
                }

                .main-card {
                    margin: 4.8% !important;
                    padding: 3.84% 5.28%;
                    aspect-ratio: 754/352;

                    .main-card-title {
                        margin-bottom: 0.67em;
                    }
                }

                .small-cards {
                    margin-bottom: 5.76%;
                }
            }

            .button-box {
                margin-bottom: 2.88%;
            }
        }
    }


    /* DESCRIPTION:our innovation focus */
    .our-innovation-focus {
        margin-bottom: 10.99vw;

        .section-header {
            padding: 5.37% 3.34% 0;

            .main-header {
                margin: 0;
            }
        }

        /* Initial hidden state for animation targets */
        .focus-item .item-header,
        .focus-item .video-container,
        .focus-item .content {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1.6s cubic-bezier(.26, .85, .44, .985),
                transform 1.6s cubic-bezier(.26, .85, .44, .985);
        }

        .focus-item .item-header.visible,
        .focus-item .video-container.visible,
        .focus-item .content.visible {
            opacity: 1;
            transform: translateY(0);
        }

        #playPauseBtn {
            display: none !important;
        }

        .focus-item {
            padding: 2.5% 3.34%;

            .item-header {
                margin-bottom: 1.5em;
            }

            .our_expertise_container {
                .portrait-only-header {
                    display: none;
                }

                display: flex;
                align-items: start;

                position: relative;
                justify-content: space-between;

                .video-container {
                    width: 66.09%;
                    aspect-ratio: 1.77;
                    position: relative;
                    overflow: hidden;
                    border-radius: 20px;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                }

                .video-container video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .content {
                    width: 30.37%;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                    margin-top: auto;
                    padding: 2.24% 0;
                    margin-bottom: auto;

                    .main-header {
                        margin-bottom: 1.17em;
                    }
                }
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            .focus-item {
                padding: 3.4%;

                .our_expertise_container {
                    .portrait-only-header {
                        margin-bottom: 1em;
                    }

                    .video-container {
                        width: 62.82%;
                        /* aspect-ratio: 1.39; */
                    }

                    .content {
                        width: 34.32%;

                        .main-header {
                            margin-bottom: 1.4em;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 767.5px),
        screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
            margin-bottom: 22.57vw;

            .section-header {
                padding: 5.37% 6.16% 0;

                .main-header {
                    text-align: center;
                }
            }

            .focus-item {
                padding: 8.21% 6.16%;

                .item-header {
                    margin-bottom: 1.34em;
                    text-align: center;
                }

                .our_expertise_container {
                    flex-direction: column;
                    align-items: center;

                    .portrait-only-header {
                        display: block;

                        margin-bottom: 1.34em;
                    }

                    .content {
                        width: 100%;
                        padding: 0;

                        .main-header {
                            display: none;
                        }
                    }

                    .video-container {
                        width: 100%;
                        /* aspect-ratio: 1.15; */
                        margin-bottom: 9.36%;
                    }
                }
            }

            @media screen and (min-width: 768px) and (max-width: 1024px) {
                margin-bottom: 12.71vw;

                .section-header {
                    padding: 12.48% 4.8% 0;
                }

                .focus-item {
                    padding: 4.8%;

                    .item-header {
                        margin-bottom: 1.67em;
                    }

                    .our_expertise_container {
                        padding: 0;

                        .portrait-only-header {
                            margin-bottom: 1em;
                        }

                        .video-container {
                            /* aspect-ratio: 1.72; */
                            margin-bottom: 5.31%;
                        }
                    }
                }
            }
        }
    }


    /* DESCRIPTION:quotes */
    .innovation-Quote {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .Quote {
        width: 100%;
        max-width: 1105px !important;
        font-size: clamp(2.5rem, 1.069rem + 2.234vw, 3.75rem) !important;
        margin: 0;
        font-style: italic;
    }

    .comma {
        color: #0cf;
    }

    .Quote-wrt {
        width: 100%;
        max-width: 821px !important;
        margin-top: 14px;
        font-size: clamp(1.125rem, 0.123rem + 1.564vw, 2rem) !important;
    }

    @media screen and (min-width: 1025px) {
        h2.Quote.large-size {
            font-size: clamp(2.5rem, 1.068rem + 2.235vw, 3.75rem) !important;
        }
    }

    @media screen and (min-device-width: 768px) and (max-device-width: 1024.9px) and (orientation: portrait) {
        .Quote {
            width: 562px !important;
            font-size: clamp(1.5rem, -1.489rem + 6.228vw, 2.5rem) !important;
        }

        .Quote-wrt {
            width: 369px !important;
            /* font-size: clamp(1rem, 0.626rem + 0.779vw, 1.125rem) !important; */
        }
    }

    @media screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation: portrait) {
        .Quote {
            width: 562px !important;
            font-size: clamp(1.5rem, -10.136rem + 24.242vw, 2.5rem) !important;
        }

        .Quote-wrt {
            width: 369px !important;
            /* font-size: clamp(1rem, -0.455rem + 3.03vw, 1.125rem) !important; */
        }
    }

    @media screen and (max-width: 767.5px) {
        .Quote {
            width: 342px !important;
            /* font-size: clamp(1.5rem, 1.5rem + 0vw, 1.5rem) !important; */
        }

        .Quote-wrt {
            width: 342px !important;
            font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
        }
    }


    /* DESCRIPTION:Why Partner with Adrosonic */
    .why-partner-with-adrosonic {
        padding-top: 8.7%;
        padding-bottom: 8.37%;

        .section-header-container {
            h2 {
                margin-bottom: 2.7%;
            }
        }

        .container {
            display: flex;
            gap: 11.2%;
            padding: 0 16.2%;
        }

        .left-column,
        .right-column {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .card {
            display: flex;
            align-items: center;
            padding: 2.1% 3.1%;
            border-radius: 20px;
            border: 1px solid #0cf;
            /* aspect-ratio: 72 / 11; */
            transition: all 0.3s ease;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            margin-bottom: 8.4%;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;

            svg {
                width: 6.31%;
            }
        }

        .card:active,
        .card:focus {
            background: none;
            outline: none;
            box-shadow: none;
        }

        .card {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .card.show {
            opacity: 1;
            transform: translateY(0);
        }

        .card.expanded {
            aspect-ratio: auto;
            flex-direction: column;
            align-items: flex-start;
            background: var(--adro-electric-blue);
            color: var(--adro-deep-blue);

            svg {
                rotate: 180deg;
            }
        }

        .expanded .inner-circle {
            background-color: var(--adro-deep-blue);
            color: var(--adro-electric-blue);
        }

        .expanded .outer-circle {
            border: 1px solid var(--adro-deep-blue);
        }

        .expanded path {
            fill: var(--adro-deep-blue);
        }

        .circle-wrapper {
            position: relative;
            width: 11.9%;
            aspect-ratio: 1/1;
            margin-right: 7.1%;
            flex-shrink: 0;
        }

        .outer-circle {
            width: 100%;
            height: 100%;
            border: 1px solid var(--adro-electric-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .inner-circle {
            width: 79.8%;
            aspect-ratio: 1/1;
            background-color: var(--adro-electric-blue);
            font-family: Roboto !important;
            color: var(--adro-deep-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .card-content {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .heading {
            flex: 1;
            margin-right: 13.4%;
        }

        .description {
            margin-top: 2.79%;
            margin-bottom: 2.3%;
            padding-left: 19%;
            padding-right: 11.5%;
            display: none;
        }

        .card.expanded .description {
            display: block;
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
            padding-top: 13.3%;
            padding-bottom: 14.7%;

            .section-header-container {
                h2 {
                    margin-bottom: 7.5%;
                }
            }

            .container {
                padding: 0 4.8%;
                gap: 2.1%;
            }

            .card {
                padding: 4.4% 6.4% 4.4% 3.3%;
                margin-bottom: 6.6%;

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

            .circle-wrapper {
                width: 14.47%;
                margin-right: 3.7%;
            }

            .inner-circle {
                width: 77.2%;
            }

            .heading {
                margin-right: 3.7%;
            }

            .description {
                margin-bottom: 2.5%;
                padding-left: 18.1%;
                padding-right: 11%;
            }
        }

        @media screen and (max-width: 767.5px) {
            padding-top: 18.3%;
            padding-bottom: 21%;

            .section-header-container {
                padding: 0 6.2%;

                h2 {
                    margin-bottom: 12%;
                    text-align: left;
                }
            }

            .container {
                flex-direction: column;
                padding: 0 6.2%;
            }

            .left-column,
            .right-column {
                flex: none;
                width: 100%;
            }

            .card {
                margin-bottom: 7.1%;
                padding: 4.8% 6.8%;

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

            .circle-wrapper {
                width: 16.34%;
                margin-right: 8.55%;
            }

            .inner-circle {
                width: 77.3%;
            }

            .heading {
                margin-right: 5.6%;
            }

            .description {
                margin-top: 2.79%;
                margin-bottom: 2.8%;
                padding-left: 25%;
                padding-right: 6.9%;
            }
        }
    }


    /* DESCRIPTION:How we do it */

    .how-we-do-it-container>* {
        position: relative;
        z-index: 1;
    }

    .how-we-do-it-container {
        padding: 0;
        position: relative;

        .section-header-container {
            h2 {
                margin-bottom: 4.5%;
            }
        }

        .how-we-do-it-container-inner {


            .owl-carousel {
                .owl-stage-outer {
                    padding-bottom: 3em;
                }

                .item {
                    cursor: pointer;
                    min-height: clamp(4.5rem, 1.495rem + 3.756vw, 6rem);
                    position: relative;
                    color: rgba(255, 255, 255, 0.5);
                    transition: transform 0.3s ease, color 0.3s ease;
                }

                .item::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: rgba(255, 255, 255, 0.5);
                    z-index: 1;
                }

                .item::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background-color: white;
                    z-index: 1;
                    transition: width 0.3s ease;
                }

                .item:hover:before,
                .item.current:before {
                    width: 100%;
                }

                .item:hover,
                .item.current {
                    color: #fff;
                }
            }

            .content-box {
                display: flex;
                padding: 0% 3.33%;

                /* aspect-ratio: 1792/543; */
                .graphic-container {
                    display: none;
                }
            }

            .content-box::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari, Opera */
            }

            .carousel-controls .owl-dots .owl-dot {
                margin: 6px 0;
                width: 2rem !important;
                background-color: transparent;
                border-radius: 0.25rem;
                cursor: pointer;
                pointer-events: auto;
                height: 2px !important;
            }
        }

        .content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 0 3.33%;
            margin-top: 1.4%;
            text-align: center;

            .text-container {
                text-align: center;
                width: 66.1%;
            }

            .cta {
                margin-top: 2.7%;
            }
        }

        .graphic-container {
            display: flex;
            width: 100%;

            .whole-graphic {
                position: absolute;
                width: 93.32%;

                svg {
                    width: 100%;
                }
            }

            .dot-graphic {}

            .circle-texts {
                position: absolute;
                width: 93.32%;
                top: 70%;
                display: flex;
                justify-content: center;

                .words {
                    flex: 1;
                    align-self: center;
                    text-align: center;
                    font-size: clamp(1rem, 0.429rem + 0.893vw, 1.5rem);
                }
            }

            .circle-graphics {
                width: 93.32%;
                position: absolute;
                top: 60%;
                display: flex;
                justify-content: center;

                .graphic {
                    flex: 1;
                    align-self: center;
                    text-align: center;
                    height: clamp(2.188rem, 0.045rem + 3.348vw, 4.063rem);

                }
            }
        }

        @media screen and (max-width: 1024px) {
            .how-we-do-it-container-inner {
                .carousel-controls .owl-dots {
                    border: none;
                    display: flex;
                    background: none;
                    gap: 32px;
                    justify-content: center;
                    padding: 0;
                }

                .carousel-controls .owl-dots .owl-dot {
                    width: 12px !important;
                    height: 12px !important;
                    border-radius: 50%;
                    /* background-color: black; */
                    border: 2px solid #00ccff !important;
                    display: block;
                    background: 0 0;
                    color: inherit;
                    padding: 0 !important;
                    font: inherit;
                }

                .carousel-controls .owl-dots .owl-dot.active {
                    background-color: #00ccff !important;
                    transform: scale(1.333);
                }
            }

            .content {
                .cta {
                    min-width: 280px;
                }
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            @media (orientation: landscape) {
                .how-we-do-it-container-inner {
                    .owl-carousel {
                        .item {
                            min-height: clamp(3.75rem, 2.395rem + 2.824vw, 4.5rem);
                        }

                        @media screen and (min-width: 1193.98px) and (max-width: 1194.5px),
                        screen and (min-width: 833.98px) and (max-width: 834.5px) {
                            .item {
                                min-height: 81px;
                            }
                        }
                    }

                    .content-box {
                        padding: 0% 3.36%;
                    }

                    .carousel-controls {
                        display: none;
                    }

                    .graphic-container {
                        /* display: flex; */
                        /* width: 100%; */

                        .whole-graphic {
                            /* position: absolute; */
                            /* width: 93.32%; */

                            svg {
                                /* width: 100%; */
                            }
                        }

                        /* .dot-graphic {} */

                        .circle-texts {
                            /* position: absolute; */
                            /* width: 93.32%; */
                            top: 73%;
                            /* display: flex; */
                            /* justify-content: center; */

                            .words {
                                /* flex: 1; */
                                /* align-self: center; */
                                /* text-align: center; */
                                font-size: clamp(0.688rem, -0.25rem + 1.953vw, 1rem);
                            }
                        }

                        .circle-graphics {
                            /* width: 93.32%; */
                            /* position: absolute; */
                            top: 63%;
                            /* display: flex; */
                            /* justify-content: center; */

                            .graphic {
                                /* flex: 1; */
                                /* align-self: center; */
                                /* text-align: center; */
                                height: clamp(1.563rem, -0.313rem + 3.906vw, 2.188rem);

                            }
                        }
                    }
                }
            }

            @media (orientation: portrait) {
                .section-header-container {
                    h2 {
                        margin-bottom: 8%;
                    }
                }

                .how-we-do-it-container-inner {
                    .owl-carousel {
                        .owl-stage-outer {
                            padding-bottom: 5%;
                        }
                    }

                    .content-box {
                        padding: 0% 4.8%;
                        margin-top: 0;
                        margin-bottom: 6.8%;

                        .content-image {
                            width: 186%;
                        }
                    }

                    .content-box {
                        overflow-x: auto;
                        overflow-y: hidden;
                        -webkit-overflow-scrolling: touch;
                        white-space: nowrap;
                        scrollbar-width: none;
                        /* Firefox */
                        cursor: grab;

                        .content-image {
                            max-width: none;
                        }
                    }
                }

                .content-box::-webkit-scrollbar {
                    display: none;
                }

                .content {
                    margin-top: 5.9%;

                    .cta {
                        margin-top: 5.2%;
                    }

                    .text-container {
                        width: 72.3%;
                    }
                }

                .graphic-container {
                    display: flex;
                    width: 186%;
                    flex-shrink: 0;
                    min-width: 186%;
                    height: auto;
                    position: relative;
                    left: 0;
                    top: 0;

                    .whole-graphic {
                        position: absolute;
                        width: 100%;

                        svg {
                            width: 100%;
                        }
                    }

                    .dot-graphic {
                        width: 100%;
                        flex-shrink: 0;
                    }

                    .circle-texts {
                        position: absolute;
                        width: 100%;
                        top: 60%;
                        display: flex;
                        justify-content: center;

                        .words {
                            flex: 1;
                            align-self: center;
                            text-align: center;
                            font-size: clamp(1.25rem, -0.25rem + 3.125vw, 1.75rem);
                        }
                    }

                    .circle-graphics {
                        width: 100%;
                        position: absolute;
                        top: 49%;
                        display: flex;
                        justify-content: center;

                        .graphic {
                            flex: 1;
                            align-self: center;
                            text-align: center;
                            height: clamp(2.75rem, 0.688rem + 4.297vw, 3.438rem);
                        }
                    }
                }
            }
        }

        @media (max-width: 767.5px) {
            padding: 6.16% 0 0%;

            .section-header-container {
                padding: 0 6.2%;

                h2 {
                    margin-bottom: 9.5%;
                    text-align: left;
                }
            }

            .how-we-do-it-container-inner {
                .owl-carousel {
                    .owl-stage-outer {
                        padding-bottom: 8.4%;
                    }

                    .item {
                        min-height: 3rem;
                    }
                }

                .content-box {
                    padding: 0 6.2%;
                    margin-top: 0;
                    margin-bottom: 9.3%;
                    overflow-x: auto;
                    overflow-y: hidden;
                    -webkit-overflow-scrolling: touch;
                    white-space: nowrap;
                    scrollbar-width: none;
                    cursor: grab;
                    position: relative;
                    box-sizing: border-box;

                    .content-image {
                        max-width: none;
                        width: 317.1%;
                        display: block;
                    }

                }

                .content-box::-webkit-scrollbar {
                    display: none;
                }
            }

            .content {
                padding: 0 6.3%;
                margin-top: 14%;

                .text-container {
                    width: 100%;
                }

                .cta {
                    margin-top: 9%;
                }
            }




            .graphic-container {
                display: flex;
                width: 317.1%;
                flex-shrink: 0;
                min-width: 317.1%;
                height: auto;
                position: relative;
                left: 0;
                top: 0;

                .whole-graphic {
                    position: absolute;
                    width: 100%;
                    /*                     left: 6.25%;  */

                    svg {
                        width: 100%;
                    }
                }

                .dot-graphic {
                    width: 100%;
                    flex-shrink: 0;
                }

                .circle-texts {
                    position: absolute;
                    width: 100%;
                    /*                     left: 6.25%;  */
                    top: 60%;
                    display: flex;
                    justify-content: center;

                    .words {
                        flex: 1;
                        align-self: center;
                        text-align: center;
                        font-size: clamp(0.75rem, 0.266rem + 2.581vw, 1.5rem);
                    }
                }

                .circle-graphics {
                    width: 100%;
                    /*                     left: 6.25%; */
                    position: absolute;
                    top: 49%;
                    display: flex;
                    justify-content: center;

                    .graphic {
                        flex: 1;
                        align-self: center;
                        text-align: center;
                        height: clamp(1.563rem, -0.043rem + 8.565vw, 4.063rem);
                    }
                }
            }
        }

        .cls-2,
        .b {
            opacity: 0.2;
            transition: opacity 0.1s infinite;
        }

        .cls-2.visible,
        .b.visible {
            opacity: 1;
        }
    }

    /* DESCRIPTION:space below how we do it */
    .space-below-how-we-do-it {
        height: 9.54vw;
    }

    .space-below-our-clients {
        height: 6.7vw;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .space-below-how-we-do-it {
            height: 16.30vw;
        }

        .space-below-our-clients {
            height: 15.47vw;
        }
    }

    @media screen and (max-width: 767.5px) {
        .space-below-how-we-do-it {
            height: 28.72vw;
        }

        .space-below-our-clients {
            height: 20.5vw;
        }
    }


    /* DESCRIPTION:our clients section */
    .service-our-clients-section {
        padding: 0 3.37%;

        .main-header {
            margin-bottom: 2.71%;
        }

        .service-our-clients-slide {
            padding-bottom: 7.21%;

            .main-container {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: space-between;

                .img-logo {
                    display: block;
                    margin: 0 auto;
                }

                .portrait-only {
                    display: none;
                }

                .landscape-only {
                    display: block;
                    width: 34.5%;
                    aspect-ratio: 5.95;
                }

                .box {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    text-align: left;
                }

                .left-box {
                    width: 59.41%;
                    padding-bottom: 0.45%;
                    padding-top: 2.69%;

                    .left-desc {
                        margin-bottom: 1em;
                    }

                    .logo-author-box {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;

                        .logo-img {}

                        .author-line {
                            width: 57.15%;
                        }
                    }
                }

                .separator {
                    width: 1px;
                    background-color: #fff;
                    height: inherit;
                    align-self: stretch;
                }

                .right-box {
                    width: 32.17%;
                    padding-top: 1.9%;

                    .how-we-help-header {
                        margin-bottom: 0.67em;
                    }

                    .how-we-help-line:first-of-type {
                        margin-bottom: 1.34em;
                    }
                }
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
        screen and (max-width: 767.5px) {
            .service-our-clients-slide {
                .main-container {
                    flex-direction: column;
                    align-items: center;

                    .portrait-only {
                        display: block;
                    }

                    .landscape-only {
                        display: none;
                    }

                    .box {
                        align-items: center;
                        text-align: center;
                    }

                    .left-box {
                        .left-desc {
                            font-style: italic;
                        }

                        .logo-author-box {
                            justify-content: center;
                        }

                        .author-line::before {
                            content: "";
                            display: inline-block;
                            margin-right: 1.3%;
                            aspect-ratio: 1;
                            vertical-align: sub;
                            background: url(/wp-content/uploads/2025/01/2.png);
                            background-size: contain;
                            background-repeat: no-repeat;
                        }
                    }
                }
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
            padding: 0% 5%;

            .main-header {
                margin-bottom: 1.2em;
            }

            .service-our-clients-slide {
                padding-bottom: 1em;

                .main-container {
                    .portrait-only {
                        width: 65%;
                    }

                    .box {
                        width: 100%;
                        padding: 0 3.21em;
                    }

                    .left-box {
                        padding-top: 1em;
                        padding-bottom: 0;

                        .logo-author-box {
                            .author-line {
                                width: 75.7%;
                            }
                        }

                        .author-line::before {
                            width: 4.8%;
                            margin-right: 0.39em;
                        }
                    }

                    .separator {
                        width: 100%;
                        height: 2px;
                        margin: 2.75em 0 3.25em;
                    }

                    .right-box {
                        padding-top: 0;

                        .how-we-help-header {
                            margin-bottom: 1em;
                        }

                        .how-we-help-line {
                            margin-bottom: 0.45em;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 767.5px) {
            padding: 0 6.41%;

            .main-header {
                text-align: center;
                margin-bottom: 1.34em;
            }

            .service-our-clients-slide {
                padding-bottom: 1em;

                .main-container {
                    padding: 0;

                    .portrait-only {
                        width: 73.48%;
                        margin-bottom: 2em;
                    }

                    .separator {
                        margin: 1.5em 0;
                        width: 100%;
                        height: 2px;
                    }

                    .box {
                        width: 100%;
                        padding: 0;
                    }

                    .right-box {
                        margin-top: 0;
                        padding-top: 0;

                        .how-we-help-header {
                            margin-bottom: 0.67em;
                        }

                        .how-we-help-line {
                            margin-bottom: 0.5em;
                        }
                    }

                    .left-box {
                        padding-top: 0;
                        padding-bottom: 0;

                        .left-desc {
                            margin-bottom: 1.78em;
                        }

                        .logo-author-box {
                            .author-line {
                                width: 67.97%;
                            }
                        }

                        .author-line::before {
                            width: 6.95%;
                            margin-right: 0.39em;
                        }
                    }
                }
            }
        }
    }


    /* DESCRIPTION:Custom HTML */

    .blog-content {
        padding: 0 3.33%;
    }