@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Urbanist", serif;
    scroll-behavior: smooth;
    font-weight: 400;
}

main,
.header,
.footer {
    font-size: 17px;
}

:root {
    --pc: #11345b;
    --sc: #26b1df;
    --gradient: linear-gradient(90deg, #1c2e52 0%, #27b4e2 100%);
    --black: #000;
    --white: #fff;
    --txt-color: #303031;
    --light-white: #ced4da;
    --gradient-col: #242627;
    --fw-2: 500;
    --fw-3: 600;
    --fw-4: 700;
    /* Size */
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-17: 17px;
    --fs-30: 30px;
    --transition: 0.3s all;
}


/* heading start */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 1.5;
    color: var(--black);
    font-weight: var(--fw-4);
}

h1,
.h1 {
    font-size: clamp(1.625rem, 1rem + 1.6667vw, 2.5rem);
    line-height: 1.4;
}

.all-page h2,
.h2 {
    font-size: clamp(1.625rem, 1.3846rem + 0.9615vw, 2.25rem) !important;
}

.all-page h3,
.h3 {
    font-size: clamp(1.5rem, 1.2321rem + 0.7143vw, 1.875rem);
}

.all-page h4,
.h4 {
    font-size: clamp(1.25rem, 0.9821rem + 0.7143vw, 1.625rem);
}

.all-page h5,
.h5 {
    font-size: clamp(1.25rem, 1.1607rem + 0.2381vw, 1.375rem);
}

.all-page h6,
.h6 {
    font-size: 18px;
}

strong {
    color: var(--black);
    font-weight: 700
}

/* heading end */

a {
    transition: var(--transition);
    text-decoration: none;
    color: var(--sc);
}

p {
    color: var(--txt-color);
    font-size: 17px;
    line-height: 1.6;
    font-weight: var(--fw-2);
}

.text-white {
    --black: var(--white);
    --txt-color: var(--light-white);
}

.text-md-center {
    text-align: center;
}

/* common componet */

/* button */
[class^="btn"] {
    border-radius: 100px;
    font-weight: var(--fw-2);
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.btn-fill,
.btn-light {
    color: var(--white);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btn-fill,
.btn-light::after {
    background: var(--pc);
}

.btn-light,
.btn-fill::after {
    background: var(--sc);
}

.btn-fill::after,
.btn-light::after,
.btn-outline::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: 0;
    transition: all 0.3s ease;
}

.btn-fill:hover::after,
.btn-light:hover::after,
.btn-outline:hover:after {
    width: 100%;
    left: 0;
    right: auto;
}

/* btn effect */

/* btn effect */

.btn-light {
    background: var(--sc);
    color: var(--white);
}

.btn-fill svg {
    margin-left: 10px;
}


.btn-outline {
    border: 2px solid var(--sc);
    color: var(--sc);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btn-outline::after {
    background: var(--sc);
}

.w-btn {
    --sc: #fff;
}

/* button */


/* button hover effect */
.btn-outline:hover {
    color: var(--white);
}

.btn-light:hover {
    background-color: var(--pc);
}

.btn-light.dark {
    --pc: var(--white);
}

.btn-light.dark:hover {
    color: #13264c;
}

.w-btn:hover {
    color: var(--pc);
}

/* button hover effect */

.sub-heading {
    text-transform: uppercase;
    color: var(--sc);
    font-weight: var(--fw-3);
    margin-bottom: 12px;
}

.sec-heading {
    font-size: clamp(1.875rem, 1.2054rem + 1.7857vw, 2.8125rem);
    font-weight: var(--fw-4);
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--black);
}

/* common componet */

/* header start \\\\\\\\\ */
.header {
    background-color: var(--white);
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}

.header.scrolled {
    box-shadow: 0px 0px 6px 0px #00000036;
}

.header.scrolled .bwe-service-logo img {
    transform: scale(0.9);
    transition: all 0.5s ease-in-out;
}

.bwe-service-logo img {
    transition: var(--transition);
}

.header nav ul li a {
    color: var(--black);
    font-weight: var(--fw-2);
    line-height: 1.6;
}

.header nav ul li a:hover,
.header nav .active {
    color: var(--sc);
}

.header ul .dropdown ul {
    background-color: var(--white);
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: var(--transition);
}

/* .dropdown::after,
.dropdown .dropdown::after {
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 5.588 4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  transition: var(--transition);
} */

.header nav ul {
    align-items: center;
    display: flex;
    gap: 30px;
    list-style: none;
}

.cancel-btn,
.toggle-slide-btn {
    display: none;
}

.bwe-service-logo img {
    transition: width 0.3s ease-in-out;
}

/* header end \\\\\\\\\ */

/* hero header start \\\\\\\\ */
.hero-header {
    background-color: var(--pc);
    padding: 30px 70px;
    margin-top: -110px;
    padding-block: 150px 50px;
}

.hero-title {
    font-size: clamp(1.875rem, -1.2019rem + 4.8077vw, 3.125rem);
    font-weight: var(--fw-4);
    color: var(--white);
    line-height: 1.3;
}

.hero-header p {
    font-size: var(--fs-20);
    color: var(--light-white);
    line-height: 1.4;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.hero-header img {
    margin-left: auto;
    display: block;
}

.hero-content:after {
    content: "";
    background: url(https://zingmatrix.com/wp-content/uploads/2025/10/rectangle-mark.svg) no-repeat;
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 0;
    right: 23%;
}

.hero-img {
    position: relative;
    width: fit-content;
}

.finger-print {
    right: 0;
    top: 52px;
}

.graph-card,
.finger-print,
.pie-chart {
    position: absolute;
}

.graph-card {
    right: 0;
    bottom: 0px;
}

.pie-chart {
    left: -12%;
    top: 26%;
}

/* .pie-chart img{
      width: 115px;
    } */

/* floating animation start */
@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

/* Applying animation to the image */
.float-img {
    animation: floatAnimation 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* floating animation end */

/* hero header end \\\\\\\\ */


/* section 2 start */
.sec-sub-heading {
    font-size: clamp(1.5rem, 0.5769rem + 1.4423vw, 1.875rem);
    font-weight: var(--fw-4);
    text-align: center;
    width: 48%;
    margin-inline: auto;
    margin-bottom: 40px;
}

/* section 2 end */


/* section 3 start */
.service-marquee {
    padding: 25px 20px;
    background-color: var(--pc);
    font-size: var(--fs-20);
    color: var(--white);
    overflow: hidden;
}

.service-marquee,
.service-marquee span {
    display: flex;
    align-items: center;
    gap: 60px;
}

.service-marquee span {
    gap: 10px;
    white-space: nowrap;
}

/* section 3 end */

/* section 4 start */
.bg-section {
    background: var(--pc) url(../img/work-bg.jpg) no-repeat;
    background-size: cover;
    padding: clamp(1.875rem, 0.9821rem + 2.381vw, 3.125rem);
    border-radius: 20px;
    background-position: center;
}

.year-of-exp .counter {
    font-size: 70px;
    font-weight: var(--fw-4);
}

.year-of-exp {
    display: inline-flex;
    align-items: center;
    color: var(--white);
    gap: 20px;
    padding: 20px;
    background-color: var(--sc);
    border-radius: 20px;
    margin-top: 30px;
    width: 100%;
    justify-content: center;
}

.year-of-exp p {
    color: var(--white);
}

.bg-section p {
    --txt-color: var(--light-white);
}

.bg-section .sec-heading {
    color: var(--white);
}

/* section 4 end */


/* section 5 start */
.center-heading {
    text-align: center;
    width: 61%;
    margin-inline: auto;
    margin-bottom: 50px;
}

.c-heading {
    font-size: var(--fs-20);
    font-weight: var(--fw-4);
    margin-bottom: 10px;
}

.counter-card {
    border-bottom: 4px solid var(--sc);
    padding-bottom: 16px;
}

.counter-sec {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 30px;
    column-gap: 40px;
}

.counter-card .counter {
    font-size: clamp(2.8125rem, 1.6964rem + 2.9762vw, 4.375rem);
    font-weight: var(--fw-4);
    color: var(--pc);
    text-align: end;
    width: 200px;
    margin-left: auto;
}

/* number code start */
.accordions,
.verticles-tab {
    counter-reset: section;
}

.verticles-h::before,
.accordions summary::before {
    counter-increment: section;
    content: "0" counter(section) "";
}

.accordions summary::before {
    width: 30px;
    height: 30px;
    background-color: #DDDDDD;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #2c2c2c;
    font-weight: var(--fw-3);
}

.accordions details[open] summary::before {
    background-color: var(--pc);
    color: var(--white);
}

.sources {
    background: #cccccc1f;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border-left: 10px solid var(--pc) !important;
    border: 1px solid #ccc;
}

/* number code end */
/* section 5 end */

.cta {
    background: linear-gradient(90deg, #0B1C3E 0%, #0875AA 100%);
    border-radius: 30px;
    --black: var(--white);
    --txt-color: var(--light-white);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: "";
    background: url("https://zingmatrix.com/wp-content/uploads/2025/10/net-image.png");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
}

.cta-content {
    display: flex;
    gap: 16px;
    position: relative;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    padding: clamp(1.875rem, 0.9821rem + 2.381vw, 3.125rem);
}

.bg-gradient {
    background: linear-gradient(180deg, #071A40 0%, #053E59 100%);
    border-radius: 30px;
    padding: clamp(1.875rem, -1.2019rem + 4.8077vw, 3.125rem);
}

.bg-gradient .center-heading {
    --black: var(--white);
    --txt-color: var(--light-white);
}

/* Accordians faq start */
.accordions details {
    border-bottom: 1px solid #d3d3d3;
}

.accordions details summary {
    font-weight: var(--fw-2);
    color: var(--black);
    line-height: 1.8;
}

.accordions .content {
    border-top: 1px solid var(--border);
}

.accordions summary::after {
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.717 9.625a.966.966 0 0 1 0 1.367l-4.18 4.18a2.176 2.176 0 0 1-3.075 0l-4.179-4.18a.966.966 0 0 1 0-1.367l.342-.342a.966.966 0 0 1 1.367 0L12 13.292l4.009-4.009a.967.967 0 0 1 1.366 0z' fill='%23BBC4CD'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}

/* Accordians faq end */

.footer {
    background-color: var(--pc);
    padding-top: 40px;
    margin-top: clamp(13.125rem, 11.7857rem + 3.5714vw, 15rem);
}

.footer .logo-white img {
    filter: brightness(0) invert(1);
}

.footer-logo img {
    width: 180px;
    filter: brightness(0) invert(1);
}

.footer-title {
    color: var(--white);
    font-size: 22px;
    font-weight: var(--fw-4);
    margin-bottom: 34px;
    position: relative;
}

.footer-title::before {
    content: "";
    position: absolute;
    width: 10%;
    height: 4px;
    background-color: var(--sc);
    bottom: -10px;
}

.footer-list li {
    margin-bottom: 16px;
}

.footer-list li,
.social-media {
    list-style: none;
}

.footer-list,
.social-media {
    padding-left: 0;
}

.footer li a {
    color: var(--light-white);
}

.footer li a:hover {
    color: var(--sc);
}


.footer .cta2 {
    margin-top: -207px;
    margin-bottom: 40px;
    background-color: #FAFAFA;
    border-radius: 30px;
    border: 1px solid rgb(228, 228, 228);
    position: relative;
}

.footer .cta2::before {
    content: "";
    background: url(https://zingmatrix.com/wp-content/uploads/2025/10/abstract-2.svg) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 85px;
    height: 77px;
}

.footer .cta-content {
    padding: clamp(1.875rem, 0.9821rem + 2.381vw, 3.125rem);
}

.footer .cta-image {
    width: 100%;
}

.footer .cta-image img {
    margin-left: auto;
    margin-right: 50px;
    margin-top: -40px;
    width: 355px;
}

.newsletter {
    display: flex;
    gap: 16px 10px;
    flex-wrap: wrap;
}

.newsletter input {
    width: 290px;
    padding: 10px 16px;
    border-radius: 45px;
    border: 1px solid #79797c;
}

.newsletter input:focus {
    outline: none;
}

.newsletter button {
    white-space: nowrap;
}

.social-media li a {
    fill: var(--pc);
    background-color: var(--white);
    border: 1px solid var(--white);
    border-radius: 50%;
    align-items: center;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.social-media li a:hover {
    background-color: var(--pc);
    fill: var(--white);
}

.social-media {
    gap: 10px;
}

.get-in-touch {
    display: grid;
    gap: 10px;
    --black: var(--white);
    margin-top: 30px;
}

.get-in-touch a {
    color: var(--white);
}

.location {
    background-color: #1e80ac;
    padding-block: 30px;
    color: var(--light-white);
    --txt-color: var(--light-white);
    margin-top: 30px;
}

.location p {
    font-size: 14px;
    padding-right: 10px;
}

.location-box span {
    font-size: 75px;
    font-weight: var(--fw-4);
    color: #303a4d;
}

.location-box {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 20px;
}

.bottom-footer {
    padding-block: 20px;
    --txt-color: var(--light-white);
}

.brochure-link {
    gap: 10px;
    --black: var(--light-white);
}

.brochure-link a {
    color: var(--light-white);
}

/* header end \\\\\\\\\ */

/* Rectangle 71 */

.pulse {
    margin: 60px 30px 0px 0px;
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--sc);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
    animation: pulse 2s infinite;
    position: relative;
}

.pulse .user-img {
    border-radius: 50%;
    border: 7px solid #97959526;
}


.cta-image {
    display: flex;
}

.cta-image .pulse:nth-child(2) {
    margin-top: 40%;
    width: 110px;
    height: 110px;
}

.cta-icon {
    position: absolute;
    top: -41px;
    right: -32px;
}


/* case study card start */
.card-details {
    display: grid;
    grid-template-columns: auto 60%;
    gap: clamp(1rem, 0.8214rem + 0.4762vw, 1.25rem);
    align-items: center;
}

.card-details img {
    height: 150px;
    object-fit: cover;
    border-radius: 20px;
}

.card-box {
    padding: clamp(1rem, 0rem + 2.0833vw, 1.875rem);
    background-color: var(--white);
    border-radius: 30px;
    display: grid;
    gap: clamp(1rem, 0.8214rem + 0.4762vw, 1.25rem);
    transform: var(--transition);
}

.circle-arrow {
    background-color: var(--pc);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-des {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cat-btn {
    padding: 8px 16px;
    border: 1px solid var(--sc);
    border-radius: 50px;
    color: var(--sc);
}

.card-info {
    display: grid;
    gap: clamp(1rem, 0.8214rem + 0.4762vw, 1.25rem);
}

.grp-cat {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.card-box:hover .circle-arrow {
    rotate: 42deg;
    background-color: var(--sc);
}

/* case study card  end*/


/* tab section start */
.wave-bg {
    background: var(--pc) url(https://zingmatrix.com/wp-content/uploads/2025/10/wave-bg.webp) no-repeat;
    --black: var(--white);
    padding-block: 50px 150px;
    background-size: cover;
}


.tab {
    border: 1px solid #ccc;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 0px 30px 30px 0px;
    padding: clamp(1.875rem, -1.2019rem + 4.8077vw, 3.125rem);
    gap: 20px;
    position: relative;
    height: 630px;
}

.tab-sec {
    display: grid;
    grid-template-columns: 30% auto;
    gap: 60px;
}

.tabcontent {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* padding-right: 30px; */
}

.tablinks {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 36px;
    font-size: 20px;
    font-weight: var(--fw-2);
    background-color: #EBEBEB;
    gap: 10px;
}

.tablinks.active {
    background-color: var(--sc);
    color: var(--white);
}


.tab span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.tablinks.active span {
    background: white;
}

.icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #364350;
    padding: 15px;
    border-radius: 20px;
}

.icon-box span {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 50%;
    padding: 14px;
    display: flex;
}

.vertical-rl {
    padding: 26px 10px;
    background-color: var(--pc);
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translate(-0%, -50%);
    writing-mode: vertical-rl;
    color: var(--white);
    white-space: nowrap;
    border-radius: 40px;
}


/* slider start */
#slider2.slide-wrapper .carousel {
    grid-auto-columns: calc((100% / 3) - 12px);
    cursor: -webkit-grab;
    cursor: grab;
    user-select: none;
}

.slider-btn .arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #DCDCDC;
}

.slider-btn .arrow-btn:hover {
    border: 1px solid var(--pc);
}

.slider-btn {
    margin-left: auto;
    width: fit-content;
    display: flex;
    gap: 10px;
}

/* slider end */

.overlaycard {
    background: #c7c7c7;
    border-radius: 10px;
    height: 435px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.overlaycard img {
    height: 435px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    width: 100%;
}

.ovly-body {
    position: absolute;
    bottom: -93px;
    width: 100%;
    padding: 20px;
    white-space: normal;
    --txt-color: var(--light-white);
    transition: var(--transition);
}

.overlaycard:hover .ovly-body {
    bottom: 0px;
}

.ovly-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    color: var(--white);
}

.ovly-img:after {
    background: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0%) 27%, rgba(0, 0, 0, .91) 90%);
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.ovly-content {
    display: grid;
    grid-template-columns: auto 18%;
    align-items: center;
    border-bottom: 1px solid gray;
    padding-bottom: 16px;
    margin-bottom: 16px;
    gap: 10px;
}

.number {
    color: var(--white);
    font-weight: var(--fw-3);
    font-size: 40px;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgb(204, 169, 44);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgb(255, 255, 255);
        box-shadow: 0 0 0 0 rgb(255, 255, 255);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
        box-shadow: 0 0 0 16px rgba(204, 169, 44, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    }
}

/* slider start */
.slide-wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 4) - 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.indicator {
    width: 20px;
    height: 4px;
    margin: 0 6px;
    cursor: pointer;
    background: #b7b7b7;
}

.indicator.active {
    background: var(--pc);
}

/* slider end */

/* marquee animation start */
.scroller {
    max-width: 100%;
}

.marquee-list .scroller__inner {
    display: flex;
    gap: 40px;
}

.tag-list li {
    display: flex;
    gap: 10px;
}

.scroller[data-animated="true"] {
    overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

/* marquee animation end */

/* marquee my code */
.marquee-list {
    padding: 25px 20px;
    background-color: var(--pc);
    font-size: var(--fs-18);
    color: var(--white);
    overflow: hidden;
}

.enterprise-list .scroller__inner img {
    margin-right: 15px;
    padding: 20px;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
}

/* marquee my code */

/* vertical image animation sec start */
.verticles-tab li {
    display: flex;
    gap: 40px;
}

.verticles-card .circle-arrow {
    rotate: 191deg;
    background-color: #7c7a7aaf;
    transition: var(--transition);
}

.verticles-card:hover .circle-arrow {
    background-color: var(--pc);
}

.verticles-card:hover .verticles-h {
    color: var(--sc);
}

.verticles-tab {
    margin-left: clamp(0rem, -1.4286rem + 2.9762vw, 1.25rem);
}

.verticles-tab ul {
    gap: 30px;
}

.verticles-sticky {
    position: sticky;
    top: 108px;
}

.verticles-h::before {
    margin-right: 10px;
    /* font-size: 22px; */
}

.verticles-img {
    margin-top: 60px;
    background-color: var(--sc);
}

.verticles-img img {
    rotate: 353deg;
}

.verticles-content {
    border-bottom: 1px solid #D9D9D9;
}

/* vertical image animation sec end */


/* testimonial start */
.testimonial-card {
    border: 1px solid #DCDCDC;
    padding: 35px;
    border-radius: 20px;
    gap: 20px;
    height: 100%;
}

.client img {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    object-fit: cover;
    box-shadow: 0px 0px 0px 4px #adadad61;
}

.client {
    gap: 20px;
}

/* testimonial end */

.doc-overlay {
    bottom: 0;
    height: 100vh;
    opacity: .5;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 2;
    background: var(--black);
}

/* line ellipsis start*/
.ovly-body :is(p),
.card-des p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* line ellipsis start*/


/* top to bottom start */
#progress {
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(0 0 0 / .2);
    bottom: 50px;
    cursor: pointer;
    display: none;
    place-items: center;
    position: fixed;
    right: 10px;
    z-index: 1;
    height: 50px;
    width: 50px;
}

#progress-value {
    background-color: var(--white);
    border-radius: 50%;
    display: block;
    display: grid;
    height: calc(100% - 10px);
    place-items: center;
    width: calc(100% - 10px);
}

/* top to bottom end */


/* why to choose */
ul.check-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 40px;
    margin-top: 16px;
}

.check-list li {
    list-style: none;
    position: relative;
    line-height: 1.6;
}

.check-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -42px;
    background: url("https://zingmatrix.com/wp-content/uploads/2025/10/check.svg") no-repeat;
    background-size: cover;
    width: 25px;
    height: 25px;
}

.why-choose-img {
    position: relative;
}

.why-choose-img::before {
    content: "";
    position: absolute;
    background: url("../img/Circle-CTA.png") no-repeat;
    width: 130px;
    height: 130px;
    background-size: contain;
    right: 0;
    bottom: 0;
    animation: rotateAnimation 17s linear infinite;
}

/* why to choose */


/* contact page start */
.pg-banner {
    height: clamp(15rem, 9.1964rem + 15.4762vw, 23.125rem);
    background-color: var(--pc);
    --txt-color: var(--white);
    overflow: hidden;
    position: relative;
    margin-top: -110px
}

.pg-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.pg-banner p {
    font-weight: 600;
    font-size: clamp(1rem, 0.9107rem + 0.2381vw, 1.125rem);
}

.banner-content {
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding-inline: 15px;
    width: 70%;
    display: grid;
    gap: 10px;
    padding-top: 80px
}


.contact-content {
    background-color: #f1f0f5;
    padding: 30px;
    border-radius: 30px 0 0 0;
    height: 100%;
}

.contact-box {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 16px;
    width: 100%;
    background: #ecf3ff;
    border-radius: 4px;
    border: 1px solid rgb(228, 228, 228);
}

.icon-box-icon {
    background-color: var(--pc);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    outline: 4px solid #00000040;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.icon-box-content a {
    font-weight: 600;
}

.contact-content .contact-details {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #cdcdcd;
}

.contact-form {
    background-color: #041424;
    padding: 30px;
    border-radius: 0 30px 0 0;
    --black: var(--white);
    --txt-color: var(--white);
    height: 100%;
    position: relative;
}

.contact-form img {
    position: absolute;
    top: -17px;
    left: -25px;
    width: 59px;
}

.contact-form>p {
    margin-bottom: 30px;
    color: var(--light-white);
}

.contact-form label {
    color: var(--light-white);
    margin-bottom: 10px;
    display: inline-block;
}

.contact-form :is(input, textarea) {
    width: 100%;
    padding: 9px 10px;
    border-radius: 4px;
    outline: none;
}

.contact-form .row {
    row-gap: 20px;
}

.contact-form .btn-light {
    display: block;
    width: 100%;
    text-align: center;
}

.contact-form .social-media {
    margin-top: 30px;
    justify-content: center;
}

/* contact page end */

/* infor page start */
.dark-bg {
    background-color: var(--pc);
    padding-block: 60px;
}

.icon-card {
    padding: 40px;
    background-color: var(--white);
    border-radius: 10px;
    clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
    box-shadow: 0 4px 23px 0 rgba(174, 191, 210, 0.3);
    display: grid;
    gap: 10px;
    height: 100%;
}

.icon-card img {
    width: 70px;
}

.icon-card:hover img,
.h-icon-box:hover .h-icon,
.h-box:hover .h-box-icon {
    transform: rotateY(360deg);
    transition: transform .8s .1s;
}

.card-block {
    display: grid;
    grid-template-columns: 350px 2fr;
    align-items: center;
    box-shadow: 0 4px 23px 0 #02093f26;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 90px;
    background-color: #fff;
}

.card-wrapper .card-block:nth-child(2) {
    top: 105px;
    /* 90px + 15px */
}

.card-wrapper .card-block:nth-child(3) {
    top: 120px;
    /* 105px + 15px */
}

.card-wrapper .card-block:nth-child(4) {
    top: 135px;
    /* 120px + 15px */
}

.card-wrapper .card-block:nth-child(5) {
    top: 150px;
    /* 135px + 15px */
}

.card-block-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.platform-img img {
    width: 100%;
    border-radius: 10px;
}

.service-tab {
    grid-template-columns: 35% auto;
    --txt-color: var(--light-white);
}

.service-tab img {
    width: 400px;
}

.h-icon-box {
    padding: 36px 34px 35px 60px;
    border-radius: 10px;
    background-color: #1f3e7a85;
    position: relative;
    margin-left: 36px;
    height: 100%;
    position: relative;
    z-index: 0;
}

.h-icon-box:hover .h-icon {
    background-color: var(--white);
}

.h-icon-box:hover .h-icon img {
    filter: unset;
}

.h-icon-box::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    left: 50%;
    top: 0px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    background-color: #0c3560 !important;
    transition: 0.4s;
    border-radius: 8px;
}

.h-icon-box:hover::before {
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: 0.4s;
}

.h-icon-box:hover {
    background-color: #1f3d7a00;
    color: red;
    transition: 0.4s;
}


.h-box-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.h-icon {
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    transition: all 0.4s;
    display: inline-block;
    border-radius: 50%;
    background-color: #1f3e7a;
    position: absolute;
    left: -35px;
    top: 23%;
    bottom: -23%;
    box-shadow: 0px 0px 0px 5px #b7b7b754;
}

.h-icon img {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
}

/* infor page end */



/* new infor page start */
.box-bar {
    gap: 20px;
}

.h-box {
    gap: 20px;
    padding: 20px;
    border: 1px solid #cfcfcf;
    background: #f9f9f9;
    border-radius: 8px;
    height: 100%;
    transition: var(--transition);
}

.h-box:hover {
    transform: translateY(-10px);
}

.h-box-icon {
    flex-basis: 65px;
    flex-shrink: 0;
    height: fit-content;
    width: fit-content;
    background-color: var(--pc);
    border-radius: 8px;
    padding: 10px;
}


.h-tab {
    margin-top: 50px;
}

.h-tab button {
    width: 100%;
    text-align: left;
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
    background-color: transparent;
    transform: var(--transition);
}

.h-tab .active {
    border-left: 4px solid var(--pc);
    color: var(--pc);
}

.h-tab-content .city img {
    margin-bottom: 10px;
    border-radius: 10px;
    height: 315px;
    width: 100%;
    object-fit: cover;
}

.h-tab-content {
    border: 1px solid #b6bcc9;
    padding: 20px;
    border-radius: 10px;
    background: white;
}

.light-bg {
    background-color: #ecf3ff;
    padding-block: clamp(1.875rem, -1.2019rem + 4.8077vw, 3.125rem);
}

.page-hero {
    background-color: var(--pc);
    padding-block: 50px;
    --txt-color: var(--light-white);
}

.breif {
    background-color: #ededed;
    padding-block: 35px;
}

.cta-form {
    position: relative;
    padding-inline: clamp(0rem, -3.5714rem + 7.4405vw, 3.125rem);
    padding-top: 50px;
    --black: var(--white);
    --txt-color: var(--white);
    overflow: hidden;
}

.cta-form::before {
    content: "";
    width: 100%;
    height: 70%;
    background: linear-gradient(90deg, #0B1C3E 0%, #0875AA 100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.cta-form::after {
    content: "";
    background: url("https://zingmatrix.com/wp-content/uploads/2025/10/net-image.png");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}


.cta-content p a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

.cta-form .cta-content {
    justify-content: flex-start;
    padding-block: 0;
}

.cta-form .contact-form {
    border-radius: 8px;
}

.cta-form .contact-details {
    flex-direction: row;
    --black: var(--black);
    margin-top: clamp(0rem, -0.7143rem + 1.9048vw, 1rem);
}

.contact-info {
    margin-top: 52px;
}

.feature-box {
    padding: 20px;
    border: 1px solid rgba(128, 128, 128, 0);
    border-radius: 8px;
    background: #13264c0d;
    gap: 16px;
    height: 100%;
    transition: var(--transition);
}

.feature-box:hover {
    border-color: var(--pc);
}

.feature-box-content {
    gap: 10px;
    position: relative;
}

.feature-box-img {
    border-radius: 8px;
    overflow: hidden;
}

.fbox-number {
    color: #DADADA;
    opacity: calc(3 / 10);
    font-size: 88px;
    font-weight: 700;
    line-height: 1em;
}

.fbox-number {
    position: absolute;
    top: -15px;
    right: -9px;
    top: -89px;
    background: linear-gradient(to bottom, #2121213d 0%, #00000000 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-box:hover .fbox-number {
    opacity: calc(9 / 10);
}

.feature-box .feature-box-icon img {
    transition: all .3s ease;
}

.feature-box:hover .feature-box-icon img {
    transform: rotate3d(15, 15, 15, 360deg);
}

.icon-points {
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 20px 30px;
    margin-bottom: 16px;
}

.icon-points li {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-points li::before {
    content: "";
    background: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.057 9.676a1.06 1.06 0 0 0-.44-1.43L10.015 4.75a1.058 1.058 0 0 0-.99 1.869l4.352 2.302-9.681 2.977a1.055 1.055 0 1 0 .62 2.02l9.68-2.976-2.301 4.348a1.058 1.058 0 0 0 1.87.99l3.496-6.602z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.512 5.14 14.65.793l4.968 16.157L5.48 21.297z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"), #095f8f;
    background-size: 19px;
    background-position: center;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.page-hero .graph-card {
    right: 27px;
    bottom: 13px;
}

/* case study start */

.case-study-points .h-box {
    background-color: transparent;
    border: unset;
}

.case-study-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.case-study-content {
    position: absolute;
    bottom: 0;
    z-index: 1;
    padding: clamp(1rem, 0.5982rem + 1.0714vw, 1.5625rem);
    margin: clamp(0.625rem, 0.1786rem + 1.1905vw, 1.25rem);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    --txt-color: var(--light-white);
}

.case-study-content a {
    color: var(--white);
    margin-bottom: 10px;
    display: inline-block;
}

.case-study-img::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.case-study-img {
    height: 400px;
}

.case-study-img img {
    height: 100%;
    object-fit: cover;
}

/* .case-study-card:hover .case-study-content{
 transform: translateY(-10px);
 transition: all 0.3s ease-in-out;
} */
.case-study-card:hover .case-study-content a {
    text-decoration: underline;
}

.case-study-icon {
    position: absolute;
    right: 3%;
    top: 4%;
    z-index: 2;
}

.case-study-icon a {
    width: 44px;
    height: 44px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    border: 3px solid #13264c40;
}

.case-study-card:hover .case-study-icon a {
    opacity: 1;
}

/* case study end */

/* blog page start */
.blog-thumb {
    background-color: #c7c7c7;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
}

.blog-header {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.blog-meta {
    position: absolute;
    bottom: 0;
    right: 20px;
    background-color: var(--sc);
    color: var(--white);
    padding: 6px 18px;
    border-radius: 2px 2px 0 0;
    font-size: 15px;
}

.blog-items-box {
    padding: 14px;
    border: 1px solid #d4d0e4;
    border-radius: 4px;
    background: #e8f0fe;
}

.blog-content {
    padding: 20px;
}

.blog-category {
    display: flex;
    align-items: center;
    gap: 10px;
    fill: var(--sc);
    color: var(--gradient-col);
    margin-bottom: 10px;
    font-size: 15px;
}

.blog-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #6d6c74;
}

.blog-btn svg {
    fill: #2c2b2b;
}

.blog-title a {
    font-size: 22px;
    font-weight: 600;
    color: var(--gradient-col);
    line-height: 1.4;
    margin-bottom: 16px;
    display: block;
}

.blog-title a:hover {
    color: var(--sc);
}

.blog-btn:hover {
    color: var(--sc);
}

.search-bar-b .form-group {
    width: 20%;
    display: flex;
    margin-left: auto;
    position: relative;
    margin-bottom: 30px;
}

.search-bar-b .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #a3a3a3;
    border-radius: 4px;
}

.search-bar-b .form-group button {
    background: 0 0;
    border: none;
    position: absolute;
    right: 10px;
    top: 9px;
    background-color: transparent;
    stroke: #525252;
}

.search-bar-b .form-group input:focus-visible {
    outline: none;
}

/* blog page end */

/* pagination_____________start */
.pagination .nav-links .page-numbers {
    color: var(--white);
    background-color: var(--pc);
}

.pagination .nav-links .active,
.pagination .nav-links .page-numbers:hover {
    background-color: var(--sc);
}


.pagination .nav-links .page-numbers::before,
.pagination .nav-links .page-numbers::after {
    background-color: var(--sc);
    transition: all 0.5s ease 0s;
}

/* pagination_____________end */

/* map start */
#map {
    height: 350px;
    border-radius: 10px;
}

img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    width: 50px !important;
    background: #cfdcff;
    height: 50px !important;
    object-fit: contain;
    padding: 10px;
    border-radius: 50%;
}

.leaflet-pane {
    z-index: 1 !important;
}

img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive:hover {
    animation: ripple 1.5s linear infinite;
}

@keyframes ripple {
    0% {
        /* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.3); */
        box-shadow: 0 0 0 0 rgba(78, 155, 194, 0.562), 0 0 0 1px rgba(27, 127, 177, 0.315), 0 0 0 3px rgba(29, 130, 177, 0.384), 0 0 0 5px rgba(8, 116, 170, 0.37);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}

/* map end */

/* single blog page start */
.blog-page-head {
    border-top: 1px solid #e7e7e7;
    padding-block: clamp(1.875rem, 0.5357rem + 3.5714vw, 3.75rem);
    background-color: #e9f0ff;
    margin-bottom: 30px;
}

.author-page-sec .author-details img {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    margin-right: 6px;
    padding: 1px;
    border: 1px solid gray;
}

.author-details {
    display: flex;
}

.author-page-sec {
    margin-top: 16px;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.content :is(h2, h3, h4, h5, h6) {
    margin-block-end: 20px !important;
    line-height: 1.5;
}

.content ol,
.content ul {
    padding-left: 2rem;
    margin-bottom: 16px;
}

.content ul li,
.content ol li {
    margin-bottom: 16px;
    line-height: 1.6;
}

.content img,
.content p {
    margin-bottom: 16px;
}

.content img {
    max-width: 50%;
}

.sep {
    width: 100%;
    height: 1px;
    background-color: #D2D2E0;
    margin-bottom: 25px;
    position: relative;
}

.sep::before {
    content: "";
    background: var(--pc);
    width: 25px;
    height: 4px;
    position: absolute;
    top: -1px;
}

.related-head {
    font-size: 30px;
    font-weight: 700;
}

.creative-crd-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

/* single blog page end */

/* new infor page end */

@media (min-width: 1025px) {
    .dropdown {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: space-between;
    }

    .header ul .dropdown ul {
        left: -15px;
        top: 66px;
        white-space: nowrap;
    }

    .dropdown ul .dropdown ul {
        position: absolute;
        top: 10px;
        left: calc(100% + 15px);
    }

    .header .dropdown:hover>ul {
        transform: scaleY(1);
        visibility: visible;
        opacity: 1;
    }

    .hero-img {
        margin-left: auto;
    }

    .why-choose-img {
        margin-right: 20px;
    }
}


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

    .header {
        height: 60px;
        margin-block: 0;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        padding-inline: 15px;
    }

    .header nav ul {
        display: block;
        padding: 50px 30px 30px;
    }

    .header nav {
        background: var(--white);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        transform: translateX(-101%);
        transition: all .2s;
        width: 300px;
        z-index: 10;
    }

    .header nav ul li {
        margin-bottom: 10px;
        padding: 10px 0 0;
    }

    .show-ul {
        overflow-y: auto;
        transform: translate(0) !important;
    }

    .header ul .dropdown ul {
        left: 0;
        top: 25px;
        width: 100%;
        background-color: var(--white);
        box-shadow: 0 0 30px rgb(127 137 161 / .25);
        transition: all .3s;
    }

    .dropdown .dropdown:after,
    .dropdown:after {
        float: right;
    }

    .flex-end {
        justify-content: unset !important
    }

    .header ul li.showMenu>ul {
        display: block !important;
        margin-top: 15px;
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }

    .show-ul .cancel-btn {
        display: block;
    }

    .cancel-btn {
        display: none;
        position: fixed;
        right: 7%;
        top: 14px;
        z-index: 100;
    }

    .toggle-slide-btn {
        display: block;
        order: 1;
        margin-left: 20px;
    }

    .hero-header .row .col-lg-6:nth-child(2) {
        display: none
    }

    .sec-sub-heading {
        width: 60%;
    }

    .tab-sec {
        grid-template-columns: 36% auto;
        gap: 60px;
    }

    .center-heading {
        width: 100%;
    }

    .hero-header {
        padding: 150px 10px 30px 10px;
    }

    .testimonial-card {
        padding: 20px;
    }

    .card-details {
        grid-template-columns: auto;
    }

    .card-details img {
        height: auto;
    }

    .hero-header img {
        margin-inline: auto;
    }

    .hero-img {
        margin-inline: auto;
    }

    .pie-chart {
        left: -5%;
    }

    .tab {
        height: 100%;
    }

    .h-box {
        flex-direction: column;
        align-items: baseline;
    }

    .cta-content {
        padding: 30px;
    }

    .contact-info {
        margin-top: 0px;
    }

    .cta-form::before {
        height: 100%;
    }

    .cta-form {
        padding-bottom: 50px;
    }

}


@media screen and (min-width: 768px) and (max-width:1024px) {
    .pie-chart img {
        width: 108px;
    }

    .footer .cta-image img {
        width: 277px;
        margin-top: auto;
    }


    .feature-box-content p {
        margin-bottom: 0;
    }


}


@media (max-width: 768px) {
    .verticles-img {
        display: none;
    }

    .counter-card .counter {
        text-align: start;
        width: 100%;
    }

    .slide-wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 12px) !important;
    }

    .footer .cta-image,
    .cta2 .col-lg-4 {
        display: none;
    }

    .tab-sec {
        grid-template-columns: auto;
        gap: 10px;
    }

    .vertical-rl {
        display: none;
    }

    .cta-image {
        align-items: center;
        justify-content: space-around;
        padding: 0px 15px 15px 15px;
    }

    .cta-image .pulse:nth-child(2) {
        margin-top: -18%;
    }

    .pulse {
        margin: 6px 30px 0px 0px;
    }

    .counter-card .counter {
        height: 58px;
        width: 147px;
    }

    .tab {
        flex-direction: row;
        overflow: scroll;
        border-radius: unset;
        background-color: transparent;
        border: unset;
        margin-inline: 7px;
        padding: 14px 9px 35px 9px;
    }

    .tablinks {
        white-space: nowrap;
        font-size: var(--fs-18);
        padding: 6px 10px;
    }

    .tab span {
        width: 34px;
        height: 34px;
        padding: 11px;
    }

    .pie-chart img {
        width: 91px;
    }

    .text-md-center {
        text-align: left;
    }

    .h-tab {
        display: flex;
        white-space: nowrap;
        overflow: auto;
    }

    .h-tab .active {
        background-color: var(--pc);
        color: var(--white);
    }

    .h-tab button {
        margin-bottom: 10px;
    }

    .feature-box {
        flex-direction: row;
        align-items: center;
    }

    .feature-box-img {
        flex-shrink: 0.6;
    }

    .feature-box-icon,
    .fbox-number {
        display: none;
    }

    .cta-form .container-fluid>.row {
        flex-direction: column-reverse;
    }

    .contact-form img {
        display: none;
    }

    .page-hero .row {
        flex-direction: column-reverse;
    }

    .page-hero .pie-chart {
        left: -1%;
    }

    .page-hero {
        padding-top: 16px;
    }

    .case-study-points .h-box {
        border: 1px solid #cfcfcf;
        background: #f9f9f9;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

}



@media screen and (max-width: 600px) {
    .group-btn [class^="btn"] {
        display: none;
    }

    .bwe-service-logo img {
        width: auto;
        height: auto;
    }

    .header.scrolled {
        height: 60px;
    }

    .slide-wrapper .carousel {
        grid-auto-columns: calc((100% / 1) - 12px) !important;
    }

    .container-fluid {
        --bs-gutter-x: 1.5rem;
    }

    .sec-sub-heading {
        width: 100%;
    }

    .newsletter input {
        width: 100%;
    }

    .why-choose-img::before {
        right: 30px;
    }

    .feature-box {
        flex-direction: column;
    }

    .h-tab-content .city img {
        height: 100%;
    }

    .contact-details {
        flex-wrap: wrap;
    }

    .content img {
        width: 100%;
    }

    .card-box {
        border-radius: 10px;
    }

}


/* button animation */
.our-client {
    position: relative;
}

.our-client::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../img/Intersect.svg);
}


/* Rotate animation */
@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Applying animation to the element */
.rotate {
    animation: rotateAnimation 5s linear infinite;
}


/* new page design */
.banner-bg {
    background-image: url("assets/img/bg.jpg");
}

.calender {
    background: var(--pc);
    color: var(--white);
    border-radius: 4px;
}

.img-placeholder,
.img-placeholder img {
    border-radius: 8px;
    width: 100%;
}

.crd-title {
    color: var(--black);
    transition: all .3s ease-in-out;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
}


.crd-btn,
.crd-btn svg {
    transition: all .3s ease-out 0s;
    stroke: var(--black);
}

.crd-btn {
    color: #000000a1;
    transition: all .3s ease-out 0s;
    width: fit-content;
}

.crd-btn,
.crd-btn svg {
    align-items: center;
    display: flex;
}

.crd-btn:hover {
    color: var(--light);
    text-decoration: underline;
    transform: translateX(10px);
}

.crd-title:hover:not(.flexx-newsletters-card div.crd-title, .flexx-newsletters-card-grid div.crd-title) {
    text-decoration: underline;
}


/* new page design */

/* author start */
.flex-single-ath-profile img {
    border-radius: 50%;
}

.author main .flex-single-ath-profile {
    font-size: 30px;
    font-weight: 600;
}

.author main .flex-single-ath-profile {
    gap: 22px;
    margin-bottom: 20px;
}

.ath-single-page {
    gap: 20px;
}

.author main .auth-social-follow ul {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    list-style: none;
    padding-left: 0;
}

.all-page :is(ul li, ol li) {
    margin-bottom: 20px;
    color: var(--txt-color);
    line-height: 1.6;
}

.all-page :is(ul, ol) {
    padding-left: 1rem;
}

.all-page p {
    margin-bottom: 20px;
}

.author .flex-single-ath-profile img {
    width: 100px;
    height: 100px;
    opacity: 1;
}

.author-name {
    color: #000000a1;
}


/* .author .flex-single-ath-profile{
	color:#fff;
} */


/* single post post info */
.blog-details {
    background: #0e2c4b12;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    margin-block: 30px;
    border: 1px solid #dddddd;
}

.blog-details>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-details span {
    color: #7d7d82;
    letter-spacing: 2px;
    font-size: 14px;
    display: block;
}

.blog-details .author {
    display: flex;
    gap: 15px;
    align-items: center;
}

.blog-details .author img {
    height: 30px;
    width: 30px;
}

.author .flex-single-ath-profile img {
    border-radius: 50%;
}

.details-title {
    color: var(--black);
    font-size: 20px;
}

.blog-details>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* breadcrumb */
.flex-breadcrumbs {
    gap: 0px 35px;
    flex-wrap: wrap;
}

#breadcrumbs span:before {
    content: '';
    position: absolute;
    top: 4px;
    left: -25px;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0h18v18H0z' fill='%23000' fill-opacity='.01'/%3E%3Cpath d='M4.5 4.5 9 9l-4.5 4.5m4.5-9L13.5 9 9 13.5' stroke='%2326B1DF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h18v18H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    height: 17px;
    width: 17px;
}

#breadcrumbs span {
    position: relative;
}

#breadcrumbs :is(a, span) {
    font-size: 15px;
    font-weight: 500;
}

.single-post .header.container,
.archive .header.container,
.search-results .header.container,
.search-no-results .header.container {
    max-width: 100%;
    margin-top: 0px;
    box-shadow: 0px 0px 6px 0px #00000036;
}

/* table of content start */
#tableofcontent {
    background: #0e2c4b12;
    width: fit-content;
    border-radius: 10px;
    overflow: hidden;
    margin-block: 10px 30px;
}

#tableofcontent .head-th {
    background: var(--pc);
    color: var(--white);
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
}

#tableofcontent ul {
    padding: 25px 40px;
}

#tableofcontent a {
    color: #11345b;
    font-weight: 600;
}

#tableofcontent a:hover {
    text-decoration: underline;
}

/* table of content end */

/* faq start */
:is(.accordion, .accordions) details {
    border: 1px solid var(--light-white);
    background-color: var(--white);
    border-radius: 4px;
    margin-bottom: 10px;
}

:is(.accordion, .accordions) summary {
    font-size: var(--fs-18);
    font-weight: var(--fw-3);
    cursor: pointer;
    display: flex;
    gap: 15px;
    margin-bottom: 0 !important;
    align-items: center;
    padding: 20px;
}

.content {
    padding: 16px 23px 14px;
    background-color: #0e2c4b12;
}

:is(.accordion, .accordions) summary::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='27' height='26' viewBox='0 0 27 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M17.787 9.688a.626.626 0 0 1 .54.7l-.454 3.507a.626.626 0 0 1-1.24-.16l.26-2.011-5.734 4.42a.624.624 0 1 1-.763-.99l5.733-4.42-2.01-.26a.626.626 0 0 1 .16-1.24l3.506.453z' fill='%23000'/%3E%3C/g%3E%3Cpath stroke='%23000' stroke-width='.028' d='m13.34 19.971 7.896-6.087-6.088-7.896-7.896 6.087z'/%3E%3Ccircle cx='13.945' cy='13' r='12.5' stroke='%23000'/%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='m13.336 19.99 7.918-6.104-6.104-7.918-7.918 6.104z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    height: 28px;
    margin-left: auto;
    width: 28px;
}

:is(.accordion, .accordions) details[open]>summary:first-of-type:after {
    transform: rotate(35deg)
}

.all-page :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6) {
    margin: 0 0 20px 0;
}

/* search */
.search-form {
    display: flex;
}

.search-form form {
    margin-left: auto;
    display: inline-flex;
    box-shadow: 0 0 1px 1px #dddddd;
    border-radius: 4px;
    overflow: overlay;
}

.search-form form button {
    background: #11345b;
    padding: 8px 10px;
}

.search-form form button:hover {
    background: #073a72;
}

.search-form form input {
    height: 100%;
    padding-inline: 14px;
    border: none;
}

.disclaimer {
    font-size: 16px;
    border-top: 1px solid #ffffff1f;
    padding-top: 30px;
}

.list-style li {
    position: relative;
    list-style: none;
    line-height: 1.6;
}

.list-style li:after {
    content: '';
    position: absolute;
    left: -30px;
    top: 5px;
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 24 24" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><path style="fill:none;stroke:%2326b1df;stroke-linecap:round;stroke-linejoin:round;stroke-width:2" d="m21 5-9 9-4-4"/><path d="M20.94 11a8 8 0 0 1 .06 1 9 9 0 1 1-9-9 8.8 8.8 0 0 1 4 1" style="fill:none;stroke:%2311345b;stroke-linecap:round;stroke-linejoin:round;stroke-width:2"/></svg>') no-repeat;
    height: 20px;
    width: 20px;
}