/* 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/CTA-bg.webp) no-repeat center center / cover;
     overflow: hidden;
 }

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

 .hero-bg {
     position: relative;
     background: url(../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;
     }

 }

 /* 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;
 }

 .icon_div img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    padding: 7px;
}

 /* 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 */
 .choice {
    border: 2px solid #7f3dff;
 }

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

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

 .icon {
     color: #5ea3d8;
 }

 .icon-bgcolor i{
    font-size: 48px;
 }

 @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 */