/* DESCRIPTION:Banner Section CSS */
.about-us-banner {
    height: 83.5vh;
}

.banner-area {
    width: 100%;
    height: 93.2%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 0px 0px 150px 150px;
    box-shadow: 0px 0px 30px 0px #00F3F0;
    overflow: hidden;
}

.about-us-banner-stmt {
    max-width: 1552px;
    margin: 0 9.5%;
    text-align: left;
    line-height: normal;
}

/* Media Query for Landscape Tablets (768px - 1280px) */
@media screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: landscape) {
    .about-us-banner-stmt {
        margin: 0 2.5rem;
    }
}

/* Media Query for Portrait Tablets (768px - 1280px) */
@media screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait) {
    .about-us-banner-stmt {
        margin: 0 2.5rem;
        width: 90.39%;
        height: 22%;
    }
}

/* Media Query for Mobile (Max Width 767px) */
@media screen and (max-width: 767px) {
    .about-us-banner {
        height: 816px;
    }

    .banner-area {
        border-radius: 0px 0px 0px 150px !important;
        height: 80% !important;
    }

    .about-us-banner-stmt {
        margin: 0 6.4%;

    }
}

/* DESCRIPTION:text below about us  */

.about-us-below-banner-sec {
    display: flex;
    justify-content: center;
    align-items: center;
}

.we-belive {
    max-width: 100%;
    text-align: center;
    z-index: 1;
}

.belive-heading {
    height: auto;
    margin: 3rem auto 3.0625rem auto;
    font-weight: 500;
}

.belive {
    line-height: normal;
    width: 45.85%;
    text-align: center;
    margin: auto;
    height: auto;
}

.belive span {
    font-weight: 600;
}

/* Animation styles with proper font-weight handling */
.animated-text-transition {
    animation: containerFadeIn 0.6s ease-out 0.4s forwards;
    color: #FFFFFF5C;
}

.animated-text-transition .word {
    display: inline-block;
    color: #FFFFFF5C;
    animation: wordColorTransition 1.5s ease-out calc(var(--n) * 0.3s) forwards;
    /* Inherit all properties but default to paragraph font-weight */
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    /* Default paragraph weight */
    line-height: inherit;
    letter-spacing: inherit;
}

/* Words inside .color-ia spans get the heavier weight */
.animated-text-transition .color-ia .word {
    animation-name: colorIaTransition;
    animation-duration: 1.5s;
    animation-delay: calc(var(--n) * 0.3s);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    font-weight: 600;
    /* Span weight */
}

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

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

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

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

/* Your original responsive styles unchanged */
@media screen and (min-width:768px) and (max-width:1024.9px) {
    @media (orientation:landscape) {
        .belive-heading {
            margin: 1.5rem auto;
            height: auto;
        }

        .belive {
            line-height: normal;
            width: 70%;
            margin-left: 32.5rem;
            margin: auto;
            text-align: center;
            height: auto;
        }
    }

    @media (orientation: portrait) {
        .belive-heading {
            margin: 1.5rem auto;
            height: auto;
        }

        .belive {
            line-height: normal;
            width: 75.7%;
            margin: auto;
            text-align: center;
            height: auto;
        }

        .belive span {
            font-weight: 500;
        }

        /* Responsive font-weight for highlighted words */
        .animated-text-transition .color-ia .word {
            font-weight: 500;
        }
    }
}

@media screen and (max-width: 767.5px) {
    .belive-heading {
        width: 100%;
        margin: auto auto 1.5rem;
        height: auto;
    }

    .belive {
        line-height: normal;
        width: 100%;
        margin: 0;
        padding: 0 1.5rem;
        text-align: center;
        height: auto;
    }

    .belive strong {
        color: #00bfff;
    }
}

/* DESCRIPTION:OUR Commitments */

.about-us-our-commitment {
    padding: 2.93% 0 9.17% 0;

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

    .brand-pillars {
        display: flex;
        flex-wrap: wrap;
        gap: 2.18%;
        padding: 0 3.33%;
        justify-content: center;
    }

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

    .card-container.visible {
        opacity: 1;
        transform: translateY(0);
    }


    /* 	.brand-pillars .card-container {
 	 opacity: 0;
 	 transform: translateY(30px);
 	 will-change: transform, opacity;
	  transition: none;
	}

	.brand-pillars .card-container.show {
	  opacity: 1;
 	 transform: translateY(0);
 	 transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	} */


    .card-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18.2466%;
        min-height: 504px;
        /* aspect-ratio: 109/168; */
        transition: all 1s ease;
    }

    .card {
        width: 100%;
        min-height: 403px;
        /* aspect-ratio: 327/403; */
        position: absolute;
        top: 20.1%;

        background-color: transparent;
        text-align: center;
        padding: 0 7.9% 2% 7.9%;
        overflow: hidden;
        border-radius: 20px;
        transition: all 1s ease;
        border: 2px solid var(--adro-light-seagreen);
        /* Default border color */
    }

    .circle {
        position: absolute;
        top: 0;
        width: 65.2%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .card-content {
        margin-top: 47.8%;
    }

    .toggle-icon {
        cursor: pointer;
        display: none;
    }

    .card-content h3 {
        margin-bottom: 5.9%;
    }

    @media screen and (min-width: 768px) and (max-width: 949.5px) and (orientation: landscape) {
        .card {
            top: 14%;
            min-height: 287px;

        }

        .card-container {
            min-height: 327px;
        }
    }

    @media screen and (min-width: 950px) and (max-width: 1023.5px) and (orientation: landscape) {
        .card {
            top: 14.3%;
            min-height: 315px;
        }

        .card-container {
            min-height: 366px;
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1100.5px) {
        .card {
            top: 16%;
            min-height: 292px;
        }

        .card-container {
            min-height: 354px;
        }
    }

    @media screen and (min-width: 1101px) and (max-width: 1280.5px) {
        .card {
            top: 18.5%;
            min-height: 300px;
        }

        .card-container {
            min-height: 366px;
        }
    }

    @media screen and (min-width: 1281px) and (max-width: 1365.5px) {
        .card {
            top: 19%;
            min-height: 313px;
        }

        .card-container {
            min-height: 385px;
        }
    }

    @media screen and (min-width: 1366px) and (max-width: 1500.5px) {
        .card {
            top: 22%;
            min-height: 293px;
        }

        .card-container {
            min-height: 372px;
        }
    }

    @media screen and (min-width: 1500px) and (max-width: 1600px) {
        .card {
            top: 21.1%;
            min-height: 300px;
        }

        .card-container {
            min-height: 400px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
    (max-width: 767.5px) {
        .heading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

        .toggle-icon {
            cursor: pointer;
            display: block;
        }

        .card-container {
            min-height: unset;
        }

        .card {
            min-height: unset;
        }

        .card-content {
            h3 {
                margin-bottom: 0px;
            }

            p {
                opacity: 0;
                max-height: 0;
                overflow: hidden;
                transition: opacity 1s ease, max-height 1s ease;
            }
        }

        .card-container.active {
            .toggle-icon {
                transform: rotate(180deg);
            }

            .card-content {
                p {
                    opacity: 1;
                    max-height: 500px;
                }
            }
        }
    }

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

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

        .brand-pillars {
            padding: 0 4.8%;
            gap: 9.2%;
        }

        .left-column,
        .right-column {
            width: 45.4%;
        }

        .card-container {
            width: 100%;
            aspect-ratio: 171/100;
            margin-bottom: 11.8%;
        }

        .heading-container {
            margin-bottom: 2.6%;
        }

        .card {
            aspect-ratio: 171/68;
            top: 31.5%;
            padding: 0 4.3%;
        }

        .circle {
            width: 37.5%;
        }

        .card-content {
            margin-top: 23.6%;
        }

        .card-container.active {
            aspect-ratio: 342 / 345;

            .card {
                aspect-ratio: 342 / 282;
                top: 18.5%;
            }
        }
    }

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

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

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

        .brand-pillars {
            padding: 0 6.2%;
            gap: 0%;
        }

        .card-container {
            width: 100%;
            aspect-ratio: 171/100;
            margin-bottom: 24px;
        }

        .card {
            top: 32.2%;
            aspect-ratio: 171/68;
            padding: 0 4% 2% 4%;
        }

        .circle {
            width: 37.5%;
        }

        .card-content {
            margin-top: 25.4%;
        }

        .heading-container {
            margin-bottom: 2.1%;

            h3 {
                font-size: 24px !important;
            }
        }

        .card-container.active {
            aspect-ratio: 342 / 345;

            .card {
                aspect-ratio: 342 / 280;
                top: 17.5%;
            }
        }
    }
}

/* DESCRIPTION:OUR People */
.about-our-people {
    .owl-item {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .owl-item.active {
        opacity: 1;
    }

    position: relative;

    .header-subheader {
        padding: 0 3.34%;

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

        .description {
            margin-bottom: 1.25em;
        }

    }

    .only-progress-circle {
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* height: 100%; */
        overflow: hidden;
        padding-left: 11.15%;
        padding-right: 4.38%;
        /*align-items: center;*/

        .progress-wrapper {
            position: relative;
            width: 45.39%;
            aspect-ratio: 1;

            .circle-chart {
                width: 100%;
                height: 100%;
                transform: rotate(-90deg);

                .circle-bg {
                    fill: none;
                    stroke: #e6e6e6;
                    stroke-width: 1px;
                }

                .circle-progress {
                    fill: none;
                    stroke: var(--adro-yellow);
                    stroke-width: 2px;
                    stroke-linecap: round;
                    stroke-dasharray: 364.42;
                    stroke-dashoffset: 364.42;
                    transition: stroke-dashoffset 3s linear;
                }

            }
        }

        .empty-right {
            width: 49.76%;
        }
    }

    .leader-card {
        display: flex;
        justify-content: space-between;
        padding-left: 11.15%;
        padding-right: 4.38%;
        /* align-items: center; */

        .leader-img {
            width: 45.39%;

            .progress-wrapper {
                position: relative;
                aspect-ratio: 1/1;

                .circle-content {
                    width: 91%;
                    aspect-ratio: 1;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    /*  background-image: url('/wp-content/uploads/2025/03/leader-image.png'); */
                    background-size: cover;
                    background-position: center;
                }
            }

        }

        .leader-info {
            width: 49.76%;

            .leader-name {
                margin-bottom: 0.34em;
            }

            .leader-designation {
                margin-bottom: 2em;
            }

            .leader-note {
                margin-bottom: 1em;
                font-style: italic;
            }

            .cta-button {

                background-color: var(--adro-deep-blue);
            }

            .cta-button:hover {

                background-color: rgba(0, 204, 255, 0.50);
            }

        }
    }

    .carousel-controls {
        margin-top: 2.4%;
    }

    @media screen and (max-width:767.5px),
    screen and (max-width:1024px) and (orientation:portrait) {
        .leader-card {
            flex-direction: column;

            .leader-info {
                width: auto;

                .cta-button {
                    display: block;
                    margin: auto;
                }
            }
        }

        .only-progress-circle {
            flex-direction: column;

            .empty-right {
                width: auto;
                height: 100%;
            }
        }
    }

    @media screen and (max-width:767.5px) {
        .header-subheader {
            padding: 0 6.16%;

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

            .description {
                margin-bottom: 1.78em;
            }

        }

        .only-progress-circle {

            padding: 0 6.16%;

            .progress-wrapper {
                width: 100%;
                margin-bottom: 2.19em;

                .circle-chart {
                    .circle-bg {
                        stroke-width: 1px;
                    }

                    .circle-progress {
                        stroke-width: 2px;
                    }
                }
            }
        }

        .leader-card {
            padding: 0 6.16%;

            .leader-img {
                width: 100%;
                margin-bottom: 2.19em;
            }

            .leader-info {

                .leader-name {
                    margin-bottom: 0.34em;
                }

                .leader-designation {
                    margin-bottom: 0.89em;
                }

                .leader-note {
                    margin-bottom: 2.9em;
                }
            }
        }

        .carousel-controls {
            margin-top: 8.21%;
        }
    }

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

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

            .description {
                margin-bottom: 0.625em;
            }

        }

        .only-progress-circle {

            padding: 0 4.8%;

            .progress-wrapper {
                width: 74.28%;
                margin-bottom: 3.0625em;
                margin-left: auto;
                margin-right: auto;

                .circle-chart {
                    .circle-bg {
                        stroke-width: 1px;
                    }

                    .circle-progress {
                        stroke-width: 2px;
                    }
                }
            }
        }

        .leader-card {
            padding: 0 4.8%;

            .leader-img {
                width: 74.28%;
                margin-bottom: 3.0625em;
                margin-left: auto;
                margin-right: auto;
            }

            .leader-info {

                .leader-name {
                    margin-bottom: 0.275em;
                }

                .leader-designation {
                    margin-bottom: 0.875em;
                }

                .leader-note {
                    margin-bottom: 0.86em;
                }
            }
        }

        .carousel-controls {
            margin-top: 5.8%;
        }
    }

    @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {

        .header-subheader {
            padding: 0 3.36%;

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

            .description {
                margin-bottom: 0.625em;
            }

        }

        .only-progress-circle {
            padding-left: 7.15%;

            .progress-wrapper {
                width: 37%;
            }

            .empty-right {
                width: 59.76%;
            }
        }

        .leader-card {
            padding-left: 7.15%;

            .leader-img {
                width: 37%;
            }

            .leader-info {
                width: 59.76%;
            }
        }
    }
}

/* DESCRIPTION:About Us Gradient Section */

.about-us-grad1 {
    .gradient {
        opacity: 0;
        transform: scaleX(0);
        /* start squashed */
        transform-origin: left;
        /* grow from the left edge */
        transition: transform 1s ease, opacity 1s ease;
    }

    .gradient.active {
        opacity: 1;
        transform: scaleX(1);
        /* expand to full width */
    }

    /* Remove delays — all animate together */
    .gradient-1,
    .gradient-2,
    .gradient-3 {
        transition-delay: 0s;
    }

    .gradient-container-about-us-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 224 / 67;
        position: relative;
    }

    .button-mob-tab {
        display: none !important;
    }

    .bg {
        position: absolute;
        width: 93.3%;
        height: 100%;
        display: flex;
        z-index: 1;
    }

    .gradient {
        height: 65%;
        position: absolute;

    }

    .gradient-1 {
        width: 57.61%;
        height: 64.3%;
        background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);
        left: 1%;
        top: 22.5%;
        z-index: 1;
    }

    .gradient-2 {
        width: 66.1%;
        height: 55.21%;
        background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        top: 10.4%;
        left: 8.5%;
        z-index: 2;
    }

    .gradient-3 {
        width: 50.92%;
        height: 55.1%;
        background: linear-gradient(270deg, #03B7B7 0%, rgba(2, 67, 67, 0.09) 100%);
        top: 20.8%;
        left: 49.2%;
        z-index: 3;
    }


    .content {
        position: absolute;
        top: 20%;
        left: 0;
        width: 50%;
        color: white;
        z-index: 2;
    }

    .content h2 {

        width: 107.6%;
        text-align: left;
        margin-top: 5.56%;
        margin-left: 20.7%;
        margin-bottom: 1.9%;
    }

    .content p {

        width: 112.5%;
        text-align: left;
        margin-left: 20.7%;
        margin-top: 0;
        height: auto;
    }

    .button-container {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 3;
        margin: 0 8% 0 0;
    }

    .join-btn {
        border: none;
        background: #1A2C47;
        width: 100%;
        height: auto;
        min-width: 248px;
        padding: 1%;
        align-items: center;
        border-radius: 50px;
        cursor: pointer;

    }

    .join-btn:hover {
        background: transparent;
        border: 2px solid #1A2C47;
        color: #1A2C47;
    }

    @media screen and (max-width:1280px) {
        .join-btn {
            max-width: 280px;
            height: 48px;
            min-width: 160px;
        }
    }

}

@media screen and (min-device-width: 768px) and (max-device-width: 1024.9px) and (orientation: landscape) {
    .about-us-grad1 {
        .gradient-container-about-us-1 {
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 224 / 77;
            position: relative;
        }

        .button-mob-tab {
            display: none !important;
        }

        .bg {
            position: absolute;
            width: 95%;
            height: 100%;
            display: flex;
            z-index: 1;
        }

        .gradient {
            height: 100%;
            position: absolute;

        }

        .gradient-1 {
            width: 57.6%;
            height: 67%;
            left: 0;
            top: 22.5%;
            z-index: 1;
        }

        .gradient-2 {
            width: 66.1%;
            height: 58.21%;
            top: 10.4%;
            left: 8.5%;
            z-index: 2;
        }

        .gradient-3 {
            width: 50.59%;
            height: 56.9%;
            top: 20.8%;
            left: 49.2%;
            z-index: 3;
        }

        .content {
            position: absolute;
            top: 20%;
            left: 5%;
            width: 50%;
            color: white;
            z-index: 2;
        }

        .content h2 {
            width: 130%;
            height: auto;
            text-align: left;
            margin-top: 1.5rem;
            margin-left: 1.0625rem;

        }

        .content p {
            width: 132%;
            height: auto;
            text-align: left;
            margin-left: 1.125rem;

        }

        .button-container {
            position: absolute;
            top: 50%;
            right: 4%;
            transform: translateY(-50%);
            z-index: 3;
            margin: 0;
        }

        .join-btn {
            border: none;
            background: #1A2C47;
            font-size: clamp(1rem, 1.25vw, 1.5rem);
            width: 100%;
            height: auto;
            padding: 1%;
            align-items: center;
            border-radius: 50px;
            cursor: pointer;

        }

        .join-btn:hover {
            background: transparent;
            border: 2px solid #1A2C47;
            color: #1A2C47;
        }

    }

}

/* portrait */
@media screen and (min-device-width: 768px) and (max-device-width: 1024.9px) and (orientation: portrait) {
    .about-us-grad1 {
        .gradient-container-about-us-1 {
            margin: 0 !important;
            overflow: hidden !important;
            aspect-ratio: 417/144 !important;
        }

        .gradient-1 {
            width: 76.4% !important;
            height: 15rem !important;
            left: 10.2% !important;
            top: 2% !important;
            background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        }

        .gradient-2 {
            width: 55.8% !important;
            height: 15.4375rem !important;
            top: 18.4% !important;
            left: 0 !important;
            background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);
            z-index: 2;
        }

        .gradient-3 {
            width: 47.3% !important;
            height: 14rem !important;
            top: 16%;
            left: 52.5%;
            z-index: 3;
        }

        .bg {
            position: absolute;
            width: 95%;
            height: 100%;
            display: flex;
            z-index: 1;
            margin: 0 2.5rem 0 2.5rem;
        }

        .content {
            position: absolute;
            top: 20%;
            left: 0;
            width: 50%;
            color: white;
            z-index: 2;
        }

        .content h2 {

            width: 146.9%;
            height: auto;
            text-align: left;
            margin-top: 7.2%;
            margin-left: 23.75%;
            margin-bottom: 5.1%;
            font-weight: 500;
        }

        .content p {

            width: 151.3%;
            height: auto;
            text-align: left;
            margin-left: 23.75%;
            margin-top: 0;
        }

        .button-container {
            display: none !important;
        }

        .button-mob-tab {
            display: block !important;
            margin: 2.5rem auto 2.5rem auto;
            text-align: center;
        }

        .join-btn {

            border: 2px solid #0CF;
            font-size: 1.125rem;
            border-radius: 50px;
            /* width: 33.59%; */
            height: 3rem;
            cursor: pointer;

        }

        .join-btn:hover {
            background: rgba(0, 204, 255, 0.50) !important;
            color: #fff !important;
            border: 2px solid #0CF;
        }
    }
}

@media screen and (max-width: 767.5px) {
    .about-us-grad1 {
        .gradient-container-about-us-1 {
            margin: 0 !important;
            overflow: hidden !important;
            width: clamp(320px, 100%, 767.5px);
            aspect-ratio: 237 / 240;
        }

        .gradient-2 {
            width: 56%;
            height: 64.32%;
            top: 20% !important;
            left: 0 !important;
            background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);

        }

        .gradient-1 {
            width: 79.5%;
            height: 59.76%;
            left: 10% !important;
            top: 13.1% !important;
            background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        }

        .gradient-3 {
            width: 49.67%;
            height: 57.23%;
            top: 23%;
            left: 50.1% !important;
            z-index: 3 !important;
        }

        .content {
            position: absolute;
            top: 23%;
            text-align: center;
            left: 0;
            width: auto;
            color: white;
            z-index: 2;
        }

        .content h2 {

            width: 87.7% !important;
            text-align: center !important;
            margin: 14px auto 16px auto;
            font-weight: 500;
        }

        .content p {

            width: 69% !important;
            text-align: left !important;
            height: auto !important;
            margin: auto;
        }

        .button-container {
            display: none !important;
        }

        .button-mob-tab {
            display: block !important;
            text-align: center;
            margin: 0 auto 60px auto;
        }

        .join-btn {
            background: #1A2C47;
            border: 2px solid #0cf !important;
            color: white;
            padding: 8px 18px;
            height: 3rem;
            /* width: 72%; */
            font-size: clamp(18px, 1.79vw + 10.28px, 24px) !important;
            border-radius: 50px !important;
            cursor: pointer;

        }

        .join-btn:hover {
            background: rgba(0, 204, 255, 0.50) !important;
            color: #fff !important;
            border: 2px solid #0CF;
        }

        .bg {
            width: 95%;
            height: 100%;
            flex-wrap: wrap;
            margin: 0 1rem 0 1rem;
        }
    }
}


/* DESCRIPTION:Counters */
.about-us-counters-container {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 40/11;
    position: relative;
    padding-left: 3.33% !important;
    padding-right: 3.33% !important;

    .content {
        z-index: 2;
        width: 100%;
        margin-bottom: 4%;
    }

    .number-container {
        display: flex;
        justify-content: space-evenly;
        align-items: start;
    }

    .items {
        width: 23.66%;
        text-align: center;
    }

    .counter {
        color: var(--ADROSONIC-White-Base, #fff);
        text-align: center;
        font-family: Roboto !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-wrap: nowrap;
    }

    .counter-text {
        color: white;
        margin-top: 5.6%;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    /* landscape */
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
        margin: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 199 / 64 !important;

        /* .counter-text {
            padding-left: 18% !important;
            padding-right: 18% !important;
          } */

        .items {
            width: 22.27% !important;
        }
    }

    /* portrait */
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
        padding: 0 4.8% !important;
        overflow: hidden !important;
        aspect-ratio: 417 / 344 !important;

        .counter-text {
            margin-top: 4.4%;
        }

        .items {
            margin-bottom: 5.4%;
            width: 49%;
        }
    }

    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
    screen and (max-width: 767.5px) {
        .number-container {
            flex-wrap: wrap;
        }

        .content {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 767.5px) {
        padding: 0 6.3% !important;
        overflow: hidden !important;
        aspect-ratio: 195 / 212 !important;

        .counter-text {
            padding-left: 0;
            padding-right: 0;
            margin-top: 5%;
        }

        .items {
            width: 47.9% !important;
            margin-bottom: 11.8%;
        }
    }

    /* font sizes */
    @media screen and (min-width: 1921px) {
        .counter {
            font-size: 120px !important;
        }

        .counter-text {
            font-size: 24px !important;
        }
    }

    @media screen and (min-width: 1441px) and (max-width: 1920.5px) {
        .counter {
            font-size: clamp(6rem, 1.487rem + 5.01vw, 7.5rem) !important;
        }

        .counter-text {
            font-size: 24px !important;
        }
    }

    @media screen and (min-width: 1195px) and (max-width: 1440.5px) {
        .counter {
            font-size: clamp(5.5rem, 3.061rem + 3.265vw, 6rem) !important;
        }

        .counter-text {
            font-size: clamp(1.25rem, 0.031rem + 1.633vw, 1.5rem) !important;
        }
    }

    @media screen and (min-width: 835px) and (max-width: 1194.5px) {
        .counter {
            font-size: 88px !important;
        }

        .counter-text {
            font-size: clamp(1.125rem, 0.834rem + 0.557vw, 1.25rem) !important;
        }
    }

    @media screen and (min-width: 391px) and (max-width: 834.5px) {
        .counter {
            font-size: clamp(2.25rem, -0.619rem + 11.738vw, 5.5rem) !important;
        }

        .counter-text {
            font-size: clamp(1rem, 0.89rem + 0.451vw, 1.125rem) !important;
        }
    }

    @media screen and (min-width: 391px) and (max-width: 900px) and (orientation: landscape) {
        .counter {
            font-size: 50px !important;
        }

        .counter-text {
            font-size: 18px !important;
        }
    }

    @media screen and (max-width: 390.5px) {
        .counter {
            font-size: 36px !important;
        }

        .counter-text {
            font-size: 16px !important;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

/* DESCRIPTION:OUR Approach */
.our-approach-header-box {
    padding: 0 3.34%;
    padding-top: 4vw;

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

    .sub-header {
        text-align: start;
        margin-bottom: 1.75em !important;
    }

    @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
        padding: 0 3.36%;
        padding-top: 8vw;
    }

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

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

        .sub-header {
            margin-top: 0;
            margin-bottom: 2.5em !important;
        }
    }

    @media screen and (max-width:767.5px) {

        padding: 0 6.16%;
        padding-top: 15vw;

        .sub-header {
            margin-bottom: 0.75em !important;
        }
    }
}

.approach-section {
    padding-bottom: 3%;

    @media screen and (min-width:1281px) {
        .approach-box {
            margin-left: 2.1%;
        }
    }

    position: relative;

    .approach-box {
        width: 58.63%;

        .poly-box {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .poly-box.show {
            opacity: 1;
            transform: translateY(0);
        }

        .poly-box {
            display: flex;
            align-items: end;
            padding: 0.5% 0;

            .poly {
                position: relative;
                flex: 1;
                justify-content: center;
                display: flex;

                svg {
                    vertical-align: bottom;
                    width: 100%;
                    height: auto;
                }

                .trapezium {
                    width: 100%;
                    height: 100%;
                    display: block;
                    fill: transparent;
                    transition: fill 0.4s ease;
                    z-index: 2;

                    path {
                        cursor: pointer;
                    }
                }

                .number {
                    color: #fff;
                    transition: color 0.4s ease;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 2;
                    transform: translate(-50%, -50%);

                    font-size: clamp(0.625rem, 0.192rem + 1.923vw, 2.5rem) !important;
                }

                .space-overlay-div {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: flex;

                    .slight-curv-div {
                        width: clamp(0.063rem, 0.025rem + 0.188vw, 0.25rem);
                    }

                    .border-bottom-div {
                        flex: 1;
                        background-position: bottom right;
                        height: clamp(0.063rem, 0.05rem + 0.063vw, 0.125rem);
                        align-self: end;
                        background-repeat: no-repeat;
                        position: relative;
                        border-bottom-left-radius: 2px;
                    }
                }
            }

            .poly.active {
                .number {
                    color: var(--adro-deep-blue);
                }
            }

            .txt {
                height: 100%;
                border-bottom: clamp(0.081rem, 0.073rem + 0.044vw, 0.125rem) solid #c2d0d8;
                display: inline-block;
                position: relative;
                background-repeat: no-repeat;
                background-position: bottom right;

                .txt {
                    height: clamp(0.001rem, -0.021rem + 0.096vw, 0.094rem);
                    align-self: end;
                    position: absolute;
                    width: 100%;

                }

                .linkbtn {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    position: relative;
                    z-index: 1;
                    text-decoration: none;
                    padding: 2% 1%;

                    span {
                        font-size: clamp(0.625rem, 0.192rem + 1.923vw, 2.5rem) !important;
                    }

                    svg {
                        width: 85%;
                    }
                }

                .linkbtn.active {
                    i svg {
                        transform: rotate(180deg);
                    }
                }
            }

            .icon-box {
                cursor: pointer;
                width: 6.37%;
                display: flex;
                aspect-ratio: 1;

                .icon {
                    background: #C2D0D8;
                    border-radius: 6px;
                    border-bottom-left-radius: 0;
                    transform: rotate(45deg);
                    transform: rotate(45deg) translate(-2px, 1px);
                    display: flex;
                    padding: 13%;
                    transform-origin: bottom left;
                    aspect-ratio: 1;
                    justify-content: center;

                    img {
                        object-fit: contain;
                        max-width: 100%;
                        min-height: 100%;
                        transform: rotate(-45deg);
                    }

                }
            }
        }

        .poly-box6 {
            .empty-space-box {
                width: 31.11%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='2' viewBox='0 0 130 2'><path d='M0 1 L130 1' stroke='%23B074FF' stroke-width='1.9' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' fill='none'/></svg>");
            }

            .txt {
                width: 50.29%;
                border-color: var(--adro-magenta);
            }

            .icon-box {
                .icon {
                    background: var(--adro-magenta);
                }
            }

            .poly {
                border-color: var(--adro-magenta);
            }

            .linkbtn.active {
                color: var(--adro-magenta);

                svg path {
                    stroke: var(--adro-magenta);
                }
            }

            .poly.active .trapezium {
                fill: var(--adro-magenta);
            }
        }

        .poly-box5 {
            .empty-space-box {
                width: 25.44%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='2' viewBox='0 0 260 2'><path d='M0.607 1 L260 1' stroke='%2378A0F5' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter' fill='none' stroke-miterlimit='10'/></svg>");

            }

            .txt {
                width: 44.71%;
            }

            .txt {
                border-color: var(--adro-lilac);
            }

            .icon-box {
                .icon {
                    background: var(--adro-lilac);
                }
            }

            .poly {
                border-color: var(--adro-lilac);
            }

            .linkbtn.active {
                color: var(--adro-lilac);

                svg path {
                    stroke: var(--adro-lilac);
                }
            }

            .poly.active .trapezium {
                fill: var(--adro-lilac);
            }
        }

        .poly-box4 {
            .empty-space-box {
                width: 19.86%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='385' height='2' viewBox='0 0 385 2'><path d='M0 1 L385 1' stroke='%2303B7B7' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter' fill='none' stroke-miterlimit='10'/></svg>");
            }

            .txt {
                width: 39.12%;
            }

            .txt {
                border-color: var(--adro-light-seagreen);
            }

            .icon-box {
                .icon {
                    background: var(--adro-light-seagreen);
                }
            }

            .poly {
                border-color: var(--adro-light-seagreen);
            }

            .linkbtn.active {
                color: var(--adro-light-seagreen);

                svg path {
                    stroke: var(--adro-light-seagreen);
                }
            }

            .poly.active .trapezium {
                fill: var(--adro-light-seagreen);
            }
        }

        .poly-box3 {
            .empty-space-box {
                width: 14.28%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='509' height='2' viewBox='0 0 509 2'><path d='M0 1 L509 1' stroke='%2300CCFF' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter' fill='none' stroke-miterlimit='10'/></svg>");
            }

            .txt {
                width: 33.45%;
            }

            .txt {
                border-color: var(--adro-electric-blue);
            }

            .icon-box {
                .icon {
                    background: var(--adro-electric-blue);
                }
            }

            .poly {
                border-color: var(--adro-electric-blue);
            }

            .linkbtn.active {
                color: var(--adro-electric-blue);

                svg path {
                    stroke: var(--adro-electric-blue);
                }
            }

            .poly.active .trapezium {
                fill: var(--adro-electric-blue);
            }
        }

        .poly-box2 {
            .empty-space-box {
                width: 8.66%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='635' height='2' viewBox='0 0 635 2'><path d='M0 1 L635 1' stroke='%2323E4BA' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter' fill='none' stroke-miterlimit='10'/></svg>");
            }

            .txt {
                width: 27.90%;
            }

            .txt {
                border-color: var(--adro-electric-green);
            }

            .icon-box {
                .icon {
                    background: var(--adro-electric-green);
                }
            }

            .poly {
                border-color: var(--adro-electric-green);
            }

            .linkbtn.active {
                color: var(--adro-electric-green);

                svg path {
                    stroke: var(--adro-electric-green);
                }
            }

            .poly.active .trapezium {
                fill: var(--adro-electric-green);
            }
        }

        .poly-box1 {
            .empty-space-box {
                width: 3.11%;
            }

            .border-bottom-div {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='2' viewBox='0 0 760 2'><path d='M0.202 1 L760 1' stroke='%23B2C0C8' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter' fill='none' stroke-miterlimit='10'/></svg>");
            }

            .txt {
                width: 22.28%;
            }

            .poly {
                border-color: #C2D0D8;
            }

            .poly.active .trapezium {
                fill: #C2D0D8;
            }

            .linkbtn.active {
                color: #C2D0D8;

                svg path {
                    stroke: #C2D0D8;
                }
            }
        }
    }

    .popup.active {
        opacity: 1;
        visibility: visible;
    }

    .popup {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
        position: absolute;
        z-index: 2;
        left: auto;
        top: 50%;
        right: 3.35%;
        transform: translateY(-35%);
        width: 26.2%;
        max-width: 450px;
        height: auto;
        background-color: transparent;
        color: #000;

        .close {
            position: absolute;
            right: 1.5em;
            top: 1.5em;
            background: inherit;
            cursor: pointer;
        }
    }

    .popup-content {
        background-color: #03B7B7;
        padding: 14.91% 6.96% 16.5%;
        border-radius: 20px;
        width: 100%;
        max-width: 100%;
        position: relative;

        ul {
            margin: 0;
        }
    }

    .list {
        padding-left: 20px;
        padding-right: 20px;
    }

    .list li {
        margin-bottom: 1px;
    }

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

        .approach-box {
            width: auto;

            .poly-box {
                padding: 0.49% 0;

                .txt {
                    .linkbtn {
                        svg {
                            height: 46%;
                            width: 46%;
                        }
                    }
                }
            }
        }



        .popup {
            width: 32.38%;
            left: 7.92%;
            margin: 0 !important;
            transform: translateY(-50%);

            .close {
                right: 1em;
                top: 1em;

                svg {
                    width: 16px;
                }
            }
        }

        .popup-content {
            padding: 19.26% 5.95% 11.1%;
        }
    }

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

        .approach-box {
            width: auto;

            .poly-box {
                padding: 0.29% 0;

                .txt {
                    .linkbtn {
                        svg {
                            height: 40%;
                            width: 40%;
                        }
                    }
                }

                .icon-box {
                    width: 7.37%;

                    .icon {
                        border-radius: 2px;
                    }
                }
            }

            .poly-box6 {
                .empty-space-box {
                    width: 29.11%;
                }
            }

            .poly-box5 {
                .empty-space-box {
                    width: 23.44%;
                }
            }

            .poly-box4 {
                .empty-space-box {
                    width: 17.86%;
                }
            }

            .poly-box3 {
                .empty-space-box {
                    width: 12.28%;
                }
            }

            .poly-box2 {
                .empty-space-box {
                    width: 6.66%;
                }
            }

            .poly-box1 {
                .empty-space-box {
                    width: 1.11%;
                }
            }
        }

        .popup {
            width: 60.77%;
            left: 6.16%;
            margin: 0 !important;
            transform: translateY(-45%);

            .close {
                right: 1em;
                top: 1em;

                svg {
                    width: 16px;
                }
            }
        }

        .popup-content {
            padding: 18.57% 5.49% 10.13%;
        }
    }

    @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
        .popup-content {
            padding: 9.55%;

            .close {
                top: 1em;
                right: 1em;

                svg {
                    width: 80%;
                    height: 80%;
                    margin-left: 20%;
                }
            }
        }

        .approach-box {
            .poly-box {
                .txt {
                    .linkbtn {
                        padding: 1%;

                        svg {
                            width: 55%;
                        }
                    }
                }

                .icon-box {
                    .icon {
                        border-radius: 4px;
                    }
                }
            }
        }
    }
}

/* body {
    background: linear-gradient(180deg, #1C638D, #1A2C47) !important;
}
 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1c638d 8.07%, #1a2c47 58.39%);
    z-index: -1;
    /* Keep it behind content */
}


.main-header {
    margin-bottom: 0;
}

.sub-header {

    text-align: center;
    margin-bottom: 0.89em !important;
    margin-top: 2.68%;

    @media screen and (max-width:767.5px),
    screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
        margin-top: 3.34%
    }
}

/* DESCRIPTION:About-us Gradient section2 */
.about-us-grad2 {

    /* Initial hidden state */
    .gradient {
        opacity: 0;
        transform: scaleX(0);
        /* start squashed */
        transform-origin: left;
        /* grow from the left edge */
        transition: transform 1s ease, opacity 1s ease;
    }

    .gradient.active {
        opacity: 1;
        transform: scaleX(1);
        /* expand to full width */
    }

    /* Remove delays — all animate together */
    .gradient-1,
    .gradient-2,
    .gradient-3 {
        transition-delay: 0s;
    }

    .gradient-container-about-us-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 224 / 67;
        position: relative;
    }

    .button-mob-tab {
        display: none !important;
    }

    .bg {
        position: absolute;
        width: 93.3%;
        height: 100%;
        display: flex;
        z-index: 1;
    }

    .gradient {
        height: 65%;
        position: absolute;

    }

    .gradient-1 {
        width: 57.61%;
        height: 73.2%;
        background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);
        left: 1%;
        top: 22.5%;
        z-index: 1;

    }

    .gradient-2 {
        width: 66.1%;
        height: 64.21%;
        background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        top: 10.4%;
        left: 8.5%;

        z-index: 2;
    }

    .gradient-3 {
        width: 51%;
        height: 65.2%;
        background: linear-gradient(270deg, #03B7B7 0%, rgba(2, 67, 67, 0.09) 100%);
        top: 20.8%;
        left: 49.2%;
        z-index: 3;
    }


    .content {
        position: absolute;
        top: 22%;
        left: 0;
        width: 50%;
        color: white;
        z-index: 2;
    }

    .content h2 {
        width: 119.6%;
        text-align: left;
        margin-top: 5.56%;
        margin-left: 20.7%;
        margin-bottom: 1.9%;
    }

    .content p {

        width: 115%;
        text-align: left;
        margin-left: 20.7%;
        margin-top: 0;
        height: auto;
    }

    .button-container {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 3;
        margin: 0 7.5% 0 0;
    }

    .join-btn {
        border: none;
        background: #1A2C47;
        font-size: clamp(1rem, 1.25vw, 1.5rem);
        width: 100%;
        height: auto;
        padding: 1%;
        align-items: center;
        border-radius: 50px;
        cursor: pointer;
        min-width: 248px;
    }

    .join-btn:hover {
        background: transparent;
        border: 2px solid #1A2C47;
        color: #1A2C47;
    }


    @media screen and (max-width:1280px) {
        .join-btn {
            max-width: 280px;
            height: 48px;
            min-width: 0px;
        }
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024.9px) and (orientation: landscape) {
    .about-us-grad2 {
        .gradient-container-about-us-2 {
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 224 / 77;
            position: relative;
        }

        .button-mob-tab {
            display: none !important;
        }

        .bg {
            position: absolute;
            width: 95%;
            height: 100%;
            display: flex;
            z-index: 1;
        }

        .gradient {
            height: 100%;
            position: absolute;

        }

        .gradient-1 {
            width: 57.6%;
            height: 67%;

            left: 0;
            top: 22.5%;
            z-index: 1;
        }

        .gradient-2 {
            width: 66.1%;
            height: 58.21%;

            top: 10.4%;
            left: 8.5%;

            z-index: 2;
        }

        .gradient-3 {
            width: 50.59%;
            height: 56.9%;

            top: 20.8%;
            left: 49.2%;
            z-index: 3;
        }

        .content {
            position: absolute;
            top: 20%;
            left: 5%;
            width: 50%;
            color: white;
            z-index: 2;
        }

        .content h2 {
            width: 130%;
            height: auto;
            text-align: left;
            margin-top: 1.5rem;
            margin-left: 1.0625rem;

        }

        .content p {
            width: 132%;
            height: auto;
            text-align: left;
            margin-left: 1.125rem;

        }

        .button-container {
            position: absolute;
            top: 50%;
            right: 4%;
            transform: translateY(-50%);
            z-index: 3;
            margin: 0;
        }

        .join-btn {
            border: none;
            background: #1A2C47;
            font-size: clamp(1rem, 1.25vw, 1.5rem);
            width: 100%;
            height: auto;
            padding: 1%;
            align-items: center;
            border-radius: 50px;
            cursor: pointer;

        }

        .join-btn:hover {
            background: transparent;
            border: 2px solid #1A2C47;
            color: #1A2C47;
        }

    }

}

/* portrait */
@media screen and (min-device-width: 768px) and (max-device-width: 1024.9px) and (orientation: portrait) {
    .about-us-grad2 {
        .gradient-container-about-us-2 {
            margin: 0 !important;

            aspect-ratio: 417/160 !important;
        }

        .gradient-1 {
            width: 57.5% !important;
            height: 16.8125rem !important;
            left: 10.2% !important;
            top: 2% !important;

            background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        }

        .gradient-2 {
            width: 54.6% !important;
            height: 87.8%;
            background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);
            top: 11.7% !important;
            left: 2.5% !important;

            z-index: 2;
        }

        .gradient-3 {
            width: 48.23% !important;
            height: 16.5625rem !important;

            top: 12%;
            left: 48.5%;
            z-index: 3;
        }

        .bg {
            position: absolute;
            width: 95%;
            height: 100%;
            display: flex;
            z-index: 1;
            margin: 0 2.5rem 0 2.5rem;
        }

        .content {
            position: absolute;
            top: 11.5%;
            left: 0;
            width: 50%;
            color: white;
            z-index: 2;
        }

        .content h2 {
            width: 140.7%;
            height: auto;
            text-align: left;
            margin-top: 4.6%;
            margin-left: 23.75%;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .content p {
            width: 142.4%;
            height: auto;
            text-align: left;
            margin-left: 23.75%;
            margin-top: 0;
        }

        .button-container {
            display: none !important;
        }

        .button-mob-tab {
            display: block !important;
            margin: 2.5rem auto 7rem auto;
            text-align: center;
        }

        .join-btn {
            border: 2px solid #0CF;
            font-size: 1.125rem;
            border-radius: 50px;
            /*    width: 33.59%; */
            height: 3rem;
            cursor: pointer;

        }

        .join-btn:hover {
            background: rgba(0, 204, 255, 0.50) !important;
            color: #fff !important;
            border: 2px solid #0CF;
        }
    }
}

@media screen and (max-width: 767.5px) {
    .about-us-grad2 {
        .gradient-container-about-us-2 {
            margin: 0 !important;
            overflow: hidden !important;
            width: clamp(320px, 100%, 767.5px);
            aspect-ratio: 237 / 240;
        }

        .gradient-2 {
            width: 56%;
            height: 62.55%;
            top: 22% !important;
            left: 0 !important;
            background: linear-gradient(90deg, rgba(44, 121, 166, 0.48) 0.35%, rgba(22, 61, 83, 0.00) 99.56%);
        }

        .gradient-1 {
            width: 71.3%;
            height: 59.76%;
            left: 14% !important;
            top: 15% !important;
            background: linear-gradient(267deg, rgba(0, 204, 255, 0.34) 14.92%, rgba(0, 102, 128, 0.08) 97.48%);
        }

        .gradient-3 {
            width: 49.67%;
            height: 55.71%;
            top: 24%;
            left: 50.1% !important;
            z-index: 3 !important;
        }

        .content {
            position: absolute;
            top: 22%;
            text-align: center;
            left: 0;
            width: auto;
            color: white;
            z-index: 2;
        }

        .content h2 {

            width: 90.6% !important;
            text-align: center !important;
            height: 4rem !important;
            margin: 14px auto 16px auto;
            font-weight: 500;
        }

        .content p {

            width: 69% !important;
            text-align: left !important;
            height: auto !important;
            margin: auto;
        }

        .button-container {
            display: none !important;
        }

        .button-mob-tab {
            display: block !important;
            text-align: center;
            margin: 0 auto 60px auto;
        }

        .join-btn {
            background: #1A2C47;
            border: 2px solid #0cf !important;
            color: white;
            padding: 8px 18px;
            height: 3rem;
            /* width: 72%; */
            font-size: clamp(18px, 1.79vw + 10.28px, 24px) !important;
            border-radius: 50px !important;
            cursor: pointer;

        }

        .join-btn:hover {
            background: rgba(0, 204, 255, 0.50) !important;
            color: #fff !important;
            border: 2px solid #0CF;
        }

        .bg {
            width: 95%;
            height: 100%;
            flex-wrap: wrap;
            margin: 0 1rem 0 1rem;
        }
    }
}

@media screen and (min-width: 1025px) and (max-width: 1194px) {
    .about-us-grad2 {
        .gradient-container-about-us-2 {
            aspect-ratio: 224 / 87 !important;
        }
    }
}


/* DESCRIPTION:get to know us better */


.AboutUs-Innovation-frame {
    text-align: center;

    .know-us {
        margin: 1rem auto 3rem auto !important;
        font-weight: 500 !important;
        text-transform: capitalize !important;
        width: 93.35%;
        height: auto;
    }

    .moto-stmt {
        width: 93.35%;
        height: auto;
        margin: auto auto 2.8125rem !important;
    }

    .moto {
        text-align: center;
    }

    @keyframes slideUpFade {
        0% {
            opacity: 0;
            transform: translateY(50px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* INITIAL STATE FOR ANIMATED ELEMENTS */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        /* Use will-change for better iOS performance */
        will-change: opacity, transform;
    }

    /* ANIMATED STATE WHEN IN VIEWPORT */
    .animate-on-scroll.animate {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        /* Remove will-change after animation */
        will-change: auto;
    }

    /* STAGGERED ANIMATION DELAYS FOR MULTIPLE ITEMS */
    .animate-on-scroll:nth-child(1).animate {
        animation-delay: 0.1s;
    }

    .animate-on-scroll:nth-child(2).animate {
        animation-delay: 0.2s;
    }

    .animate-on-scroll:nth-child(3).animate {
        animation-delay: 0.3s;
    }

    .animate-on-scroll:nth-child(4).animate {
        animation-delay: 0.4s;
    }

    .animate-on-scroll:nth-child(5).animate {
        animation-delay: 0.5s;
    }

    /* Grid Layout */
    .moto-grid {
        display: grid;
        grid-template-columns: 47.33% 51.35%;
        justify-content: space-between;
        margin-left: 3.34%;
        margin-right: 3.34%;
    }

    .grid-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        text-align: center;
        overflow: hidden;
        border-radius: 20px;
        flex: none;
    }

    /* Large Left Section */
    .large-left {
        aspect-ratio: 848/696;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .tag {

        margin-left: 3.1%;
        margin-right: 3.1%;
        margin-bottom: 2.1%;
    }

    .tag2 {

        margin-left: 5.05%;
        margin-right: 5.05%;
        margin-bottom: 3.37%;
    }


    .learn-btn-2 {
        margin-top: 0 !important;
        display: block;
    }

    /* Bottom know-us-content (Description & Button) */
    .know-us-content {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .description {
        font-weight: 400;
        margin-left: 3.1%;
        margin-right: 3.1%;
        margin-bottom: 2.1%;
    }

    .desc2 {
        margin-left: 5.05%;
        margin-right: 5.05%;
        margin-bottom: 3.37%;
    }

    .learn-btn {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: 5px;
        background: var(--adro-electric-blue);
        color: var(--adro-deep-blue);
        height: auto !important;
        cursor: pointer;
        border-radius: 0 20px;
        padding: 10px !important;
        position: relative;
    }



    .learn-btn-small {
        justify-content: center;
        align-items: center;
        display: flex;
        gap: 5px;
        border-radius: 0 20px;
        background: var(--adro-electric-blue);
        color: var(--adro-deep-blue);
        padding: 10px !important;
        position: relative;
    }

    .learn-btn-small .btn-text,
    .learn-btn .btn-text {
        position: relative;
    }

    .learn-btn-small .btn-text::after,
    .learn-btn .btn-text::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background-color: var(--adro-electric-blue);
        transition: width 0.3s ease-in-out;
    }

    .learn-btn-small:hover .btn-text::after,
    .learn-btn:hover .btn-text::after {
        width: 100%;
    }

    /* Keep your existing hover styles */
    .learn-btn-small:hover,
    .learn-btn:hover {
        border-radius: 0 20px;
        border: 2px solid var(--adro-electric-blue);
        background: var(--adro-deep-blue);
        color: var(--adro-electric-blue);
    }

    .learn-btn-small:hover svg path,
    .learn-btn:hover svg path {
        stroke: var(--adro-electric-blue);
    }


    .discover-us {
        margin-top: 3rem;
        margin-bottom: 10rem;
    }

    .learn-btn-small:hover,
    .learn-btn:hover {
        border-radius: 0 20px;
        border: 2px solid var(--adro-electric-blue);
        background: var(--adro-deep-blue);
        color: var(--adro-electric-blue);

    }

    .learn-btn-small:hover svg path,
    .learn-btn:hover svg path {
        stroke: var(--adro-electric-blue);
    }

    .learn-btn svg {
        width: 33%;
    }

    .grid-right {
        display: grid;
        grid-template-columns: 50.44% 46.96%;
        justify-content: space-between;
        row-gap: 3.53%;
    }

    .full-width {
        grid-column: span 2;
    }

    /* Images should take full size */
    .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ZOOM EFFECT PROPERTIES */
        transition: transform 0.3s ease-in-out;
    }

    /* ZOOM EFFECT ON HOVER */
    .grid-item:hover img {
        transform: scale(1.1);
    }

    /* Gradient Overlay */
    .grid-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
        transition: opacity 0.4s ease-in-out;
        opacity: 1;
    }

    /* Remove gradient on hover */
    .grid-item:hover::before {
        opacity: 0;
    }

    /* RESPECT USER'S MOTION PREFERENCES */
    @media (prefers-reduced-motion: reduce) {
        .animate-on-scroll {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}

@media screen and (max-width: 767.5px) {
    .AboutUs-Innovation-frame {
        .know-us {
            width: 21.375rem;
            height: auto;
            margin: 5rem auto 2rem auto !important;
            margin-top: 14.12% !important;
            font-weight: 500 !important;
            text-transform: capitalize !important;
        }

        .moto-stmt {
            width: 87.7%;
            height: auto;
            margin: 0 auto 2.75rem auto !important;
        }

        .moto-grid {
            grid-template-columns: 1fr;
            margin: 0 1.5rem 0 1.5rem;
            gap: 2.5rem;
        }

        .large-left {
            grid-row: unset;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: 12.5rem;
        }

        .tag {
            margin-bottom: auto;
            margin-top: 2%;
        }

        .know-us-content {
            height: 100%;
        }

        .grid-right {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            height: auto;
        }

        .grid-item {
            width: 100%;
            height: 13rem;
        }

        .full-width {
            grid-column: unset;
        }

        .discover-us {
            margin-top: 2.25rem;
            margin-bottom: 6.25rem;
            width: 17.5rem;
            height: 3rem;
        }
    }
}

@media screen and (min-device-width: 48rem) and (max-device-width: 64.05625rem) and (orientation: landscape) {
    .AboutUs-Innovation-frame {
        .moto-grid {
            grid-template-columns: 47% 51.35%;
        }
    }
}

@media screen and (min-device-width: 48rem) and (max-device-width: 64.05625rem) and (orientation: portrait) {
    .AboutUs-Innovation-frame {
        .know-us {
            margin: 1rem auto 1.9rem auto !important;
            margin-top: 0px !important;
            font-weight: 500 !important;
            text-transform: capitalize !important;
            width: 93.35%;
            height: auto;
        }

        .moto-stmt {
            width: 93.35%;
            height: auto;
            margin: auto auto 2.8125rem !important;
        }

        .know-us-content {
            height: 100%;
        }

        .large-left .know-us-content {
            height: auto;
        }

        .tag2 {
            margin-bottom: auto;
            margin-top: 5%;
            margin-left: 6.5%;
            margin-right: 6.5%;
        }

        .tag3 {
            margin-bottom: auto;
            margin-top: 2.5%;
        }

        .desc2 {
            margin-left: 6.5%;
            margin-right: 6.5%;
        }

        .moto-grid {
            grid-template-columns: 1fr;
            row-gap: 1.5rem;
            margin-left: 4.8%;
            margin-right: 4.8%;
        }

        .large-left {
            aspect-ratio: 697/414;
        }

        .discover-us {
            margin-top: 2.5rem;
            margin-bottom: 8rem;
        }
    }
}

/* DESCRIPTION:spacing */
.space-above-our-commitments {
    height: 6.2vw;
}

.space-below-our-commitments {
    height: 0.83vw;
}

.space-below-our-people {
    height: 3.75vw;
}

.space-above-our-counters {
    height: 2.5vw;
}

.space-above-our-approach {
    height: 0.2vw;
}

.space-above-featured-insights {
    height: 9.74vw;
}

.space-below-featured-insights {
    height: 7.1vw;
}

.space-above-know-us-better {
    height: 6.46vw;
}

@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .space-above-our-commitments {
        height: 10.4vw;
    }

    .space-below-our-commitments {
        height: 2.2vw;
    }

    .space-below-our-people {
        height: 17.2vw;
    }

    .space-above-our-counters {
        height: 0;
    }

    .space-above-our-approach {
        height: 4.5vw;
    }

    .space-above-featured-insights {
        height: 12.2vw;
    }

    .space-below-featured-insights {
        height: 11.1vw;
    }

    .space-above-know-us-better {
        height: 8.1vw;
    }
}

@media screen and (max-width:767.5px) {
    .space-above-our-commitments {
        height: 23.2vw;
    }

    .space-below-our-commitments {
        height: 14.36vw;
    }

    .space-below-our-people {
        height: 10vw;
    }

    .space-above-our-counters {
        height: 0;
    }

    .space-above-our-approach {
        height: 9.5vw;
    }

    .space-above-featured-insights {
        height: 22.2vw;
    }

    .space-below-featured-insights {
        height: 14.2vw;
    }

    .space-above-know-us-better {
        height: 0.1vw;
    }
}