/* banner css starts here */
    * {
        transition: all 0.3s ease;
        font-family: "Jost", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    .sections {
        padding: 40px;
    }

    .web-heading {
        font-size: 40px;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 20px;
        color: inherit;
    }

    .process-content {
        font-size: 18px;
        line-height: 35px;
        text-align: justify;
        hyphens: auto;
        color: #555;
        font-family: "Kumbh Sans", sans-serif;
    }

    .process-content-lh {
        font-size: 18px;
        line-height: 25px;
        text-align: justify;
        hyphens: auto;
        color: #555;
        font-family: "Kumbh Sans", sans-serif;
    }

    .process-content1 {
        font-size: 18px;
        line-height: 35px;
        text-align: justify;
        hyphens: auto;
        margin-bottom: 1rem;
        color: white;
        font-family: "Kumbh Sans", sans-serif;
    }

    .process-title {
        font-size: 23px;
        font-weight: 600;
        margin-top: 30px;
        margin-bottom: 20px;
        line-height: 1.5;
        color: inherit;
    }


    .service-title {
        font-size: 18px;
        font-weight: 600;
        margin-top: 30px;
        margin-bottom: 20px;
        line-height: 1.5;
        font-family: "Jost", sans-serif;
        color: inherit;
    }

    .section-content {
        font-size: 18px;
        line-height: 30px;
        text-align: justify;
        hyphens: auto;
        margin-bottom: 1rem;
        color: white;
        font-family: "Kumbh Sans", sans-serif;
    }

    .text-warning {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity));
    }

    .fw-semibold {
        font-weight: 600;
    }

    .banner-btns1,
    .banner-btns-2 {
        width: 100%;
        max-width: 300px;
        height: 50px;
        border-radius: 50px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .banner-btns1 {
        background: radial-gradient(circle, #5ea3d8, #004aad);
        color: #fff;
        border: none;
    }

    .banner-btns-2 {
        background: #fff;
        color: #0b2d52;
        border: none;
    }

    .banner-btns1:hover,
    .banner-btns-2:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    }

    .banner-btns-2:hover {
        background-color: #fff;
        color: #0b2d52;
        border-color: transparent;
    }


    .banner-btns1:hover {
        background: radial-gradient(circle, #5ea3d8, #004aad);
        color: #fff;
        border-color: transparent;
    }

    .top-head {
        font-family: "Jost", sans-serif;
        font-size: 50px;
        font-weight: 700;
        line-height: 1.5;
        color: white;
    }

    .step-title {
        font-size: 21px;
        font-weight: 600;
        margin-top: 30px;
        margin-bottom: 20px;
        line-height: 1.5;
        font-family: "Jost", sans-serif;
        color: inherit;
    }

    .cta-bg {
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        color: white;
    }

    .cta-bg {
        position: relative;
        background: url(../images/Images/CTA-bg.png) no-repeat center center / cover;
        overflow: hidden;
    }

    .hero {
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        color: white;
    }

    .hero-bg {
        position: relative;
        background: url(../images/Images/services-hero-bg-banner.webp) no-repeat center center / cover;
        overflow: hidden;
    }

    .hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }

    .hero-bg .container {
        position: relative;
        z-index: 2;
    }

    @media (max-width: 768px) {
        .top-head {
            font-size: 35px;
        }

        .banner-btns1,
        .banner-btns2 {
            width: 100%;
            max-width: 280px;
            font-size: 14px;
            height: 40px;

        }

        .web-heading {
            font-size: 25px;
        }

        .section-content,
        .process-content,
        .process-content1,
        .process-content-lh,
        .accordion-body {
            font-size: 15px;
        }

        .sections {
            padding: 30px 0;
        }

        .step-title {
            font-size: 14px;
        }

        .process-title {
            font-size: 20px;
        }

    }

    /* .process-title{
        font-size: clamp(15px, 10%, 23px);
    } */

    /* banner css ends here */

    /* section2 css starts here */

    .box-points {
        box-shadow: 0px 2px 5px #5ea3d8;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    .box-points:hover {
        transform: translateY(-6px);
        box-shadow: 0px 2px 5px #5ea3d8;
        /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
    }


    .icon {
        height: 60px;
        width: 60px;
        background: rgb(94, 163, 216, 0.1);
        border-radius: 50px;
        padding: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .iconcol {
        color: #5ea3d8;
    }

    /* section2 css ends here  */

    /* section 3 starts here */

    .issue-item2 {
        cursor: pointer;
        list-style: none;
        position: relative;
        user-select: none;
        transition: all 0.3s ease;
    }

    .box-rounded {
        box-shadow: 0px 2px 4px #5ea3d8;
        border-radius: 10px;
    }

    .issue-item {
        transition: all 0.3s ease;
    }

    .issue-item:hover {
        transform: translateY(-6px);
    }

    .icon_div {
        height: 50px;
        width: 50px;
        margin: 10px;
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        color: white;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }

    .issue-item[open] summary {
        background-color: #bcdcf1;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .transtition {
        transition: all 0.3s ease;
    }

    /* section 3 ends here */

    /* section 4 starts here */
    .textcol {
        color: #97aed1;
    }

   .icon-color{
    color:#0a2540;

   }

    .box-border {
        border: 2px solid #4e6174;
        border-radius: 20px;
    }

    .icon_div1 {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .WP-sidebar {
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    }

    .badges {
        background: #d4d6db;
        width: 85px;
        font-family: "Kumbh Sans", sans-serif;
        border-radius: 20px;
        color: #000;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .WP-tab {
        cursor: pointer;
    }

    .WP-tab:hover {
        transform: translateX(-6px);
        /* background-color: #1e4064; */
    }

    .WP-tab.active {
        background: #1e4064;
        color: white;
        border-radius: 20px;
    }

    .content-icon-1 {
        height: 50px;
        width: 50px;
        margin: 10px;
        padding: 12px;
        background-color: #0b2d52;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    ul {
        list-style: none;
    }

    .WP-sidebar,
    .WP-content {
        height: 100%;
    }

    /* section 4 ends here */

    /* section 5 starts here */
    .right-border {
        border-right: 2px solid #5ea3d8;
    }

    .icon {
        color: #5ea3d8;
    }

    @media(max-width:768px) {
        .para .d-flex {
            display: flex;
            flex-direction: column;
            border-right: none;
        }
    }

    /* section 5 ends here */

    /* section 6 (ready-section) starts here */

    .hero {
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        color: white;
    }

    /* section 6 ends here */

    /* section 8 starts here */
    .process-item2 {
        border-top: 1px solid #97aed1;
        border-bottom: 1px solid #97aed1;
    }

    .arrow-down {
        width: 30px;
        height: 30px;
        border: 1px solid #97aed1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    .process-item[open] .arrow-down {
        transform: rotate(180deg);
    }

    .process-item[open] summary {
        background-color: #1e4064;
    }

    .process-item summary {
        cursor: pointer;
        list-style: none;
        position: relative;
        user-select: none;
        transition: background-color 0.3s ease;
    }


    @media(min-width:768px) {
        .hide {
            display: none;
        }
    }

    @media(max-width:768px) {
        .content {
            gap: 8px;
        }

    }

    @media(min-width:1024px) {
        .content {
            gap: 25px;
        }

        .process-item {
            font-size: 12px;
        }
    }

    /* section 8 ends here */

    /* section 9 css starts here */

    .tech {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #e5e7eb;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
        transition: .3s ease;
    }

    .tech:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
        background-color: rgb(94, 163, 216, .1);
    }

    .tech-heading {
        height: 80px;
    }

    .tech-tag {
        display: inline-block;
        padding: 3px 5px;
        border-radius: 50px;
        background: #eef6ff;
        color: #5ea3d8;
        font-weight: 500;
        border: none;
        transition: .3s;
    }

    .tech-tag:hover {
        background: #5ea3d8;
        color: white;
    }

    .icon-box {
        height: 45px;
        aspect-ratio: 1/1;
        border-radius: 15px;
        background: #5ea3d8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .2);
    }

    .icon i {
        color: white;
    }

    .tech {
        overflow: hidden;
        position: relative;
    }

    .tech::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 4px;
        background: #5ea3d8;
        transition: .35s;
    }

    .tech:hover::before {
        width: 100%;
    }

    /* section 9 css ends here */

    /* section 11 css starts here */
    .card-wrapper {
        display: flex;
        gap: 15px;
        width: 100%;
        height: 460px;
    }

    .letter-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

    .expand-card {
        flex: 1;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        padding: 20px;
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: flex .5s ease;
    }

    .card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(11, 45, 82, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        z-index: 2;
        transition: .4s ease;
    }

    .carousel-btn {
        background: linear-gradient(180deg, #0b2d52, #0a2540);
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        border: none;
    }

    .expand-card:hover {
        flex: 3;
    }

    .expand-card:hover .card-overlay {
        opacity: 0;
        visibility: hidden;
    }

    #mobileCarousel .carousel-indicators {
        position: static;
        margin: 15px 0 0;
        justify-content: center;
    }

    #mobileCarousel .carousel-indicators button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        background-color: #ccc;
        opacity: 1;
        margin: 0 5px;
        transition: all 0.3s ease;
    }

    #mobileCarousel .carousel-indicators button.active {
        width: 24px;
        border-radius: 10px;
        background-color: #0a2540;
    }

    @media(max-width:425px) {
        .expand-card {
            height: 485px;
        }
    }

    @media(min-width:769px) and (max-width:1025px) {
        .card-overlay>.process-title {
            font-size: 16px;
        }
    }

    @media(min-width:992px) and (max-width:1200px) {
        .expand-card {
            height: auto;
            min-height: 500px;
            line-height: 1.6;
        }
    }

    .icon-bgcol {
        height: 50px;
        width: 50px;
        background-color: #0a2540;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* section 11 css ends here */

    /* FAQ css starts here */
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 12px;
        transition: max-height 0.5s ease, padding 0.3s ease;
    }

    .accordion-section.active .accordion-content {
        max-height: 500px;
        padding: 12px;
    }

    .accordion-section.active .dropdown-arrow i {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .dropdown-arrow i {
        transition: transform 0.3s ease;
    }

    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        cursor: pointer;
        margin-bottom: 0;
        gap: 1rem;
    }

    .accordion-heading {
        margin-bottom: 0;
    }

    @media (min-width: 992px) {
        .mt-lg-4 {
            margin-top: 1.5rem;
        }
    }

    /* Optional desktop hover effect */
    @media (hover: hover) and (min-width: 992px) {
        .accordion-section:hover .accordion-content {
            max-height: 500px;
            padding: 12px;
        }

        .accordion-section:hover .dropdown-arrow i {
            transform: rotate(180deg);
        }
    }

    /* FAQ css ends here */