#wrapper,
 .section {
   touch-action: none;
 }

 html,
 body {
   overflow-x: auto;
   overflow-y: auto;
   font-family: "Gilroy";
   overflow-y: auto;
   /* scroll-behavior: smooth;
   transition: opacity 0.6s ease-in-out; */
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-Light.ttf") format("truetype");
   font-weight: 300;
   font-style: normal;
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-Regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype");
   font-weight: 800;
   font-style: normal;
 }

 @font-face {
   font-family: "Gilroy";
   src: url("../fonts/Gilroy-Heavy.ttf") format("truetype");
   font-weight: 900;
   font-style: normal;
 }

 :root {
   --bluebgcolor: #00338e;
   --whitetext: #fff;
   --whitebg: #fff;
   --darkblue: #002b5b;
   --sub-heading-color: #212a57;
 }

 *,
 *::before,
 *::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }

 #wrapper {
   transition: transform 0.8s ease-in-out;
 }

 input:focus-visible {
   outline-offset: 0px;
 }

 input:focus {
   outline: 0px;
   border: 1px dashed #ddd;
 }

 select:focus {
   outline: none;
 }

 textarea:focus-visible {
   outline-offset: 0px;
 }

 textarea:focus {
   outline: 0px;
   border: 1px dashed #ddd;
 }

 section.section-height {
   height: 100vh;
 }

 .hedaer-cn nav {
   /* position: fixed !important;
  top: 0;
  width: 100%;
  background: #006ae0;
  z-index: 111;
  padding: 10px;
  display: none1; */
 }

 .headerright {
   display: none;
 }

 .hedaer-cn {
   position: absolute;
   top: 0px;
   width: 100%;
   z-index: 111;
   background: transparent;
   padding: 10px;
   align-items: center;
 }

 .profileSec {
   display: flex;
 }

 .hedaer-cn a.navbar-brand img {
   height: 39px;
   margin-top: 20%;
   margin-left: 25px;
 }

 #myForm {
   margin: 0 27%;
 }

 .header-ct {
   display: flex;
   gap: 20px;
   justify-content: space-between;
   width: 100%;
 }

 nav.navbar.navbar-expand-lg {
   /* box-shadow: 1px 0px 8px #005bbf; */
   padding: 0px;
 }

 .hedaer-cn a.nav-link {
   color: var(--whitetext);
   font-size: 15px;
   margin: 0 5px;
 }

 .hometext-cnt {
   width: 100%;
   padding: 0 200px;
 }

 img.txtbg2 {
   position: absolute;
   right: 0;
   /* top: 63px; */
   top: 0px;
 }

 .Livelifebg {
   padding: 0 200px;
 }

 .support-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
 }

 .visit-cnt {
   width: 100%;
 }

 .support {
   background: #006ae0;
   padding: 0 200px;
 }

 .door-in {
   display: flex;
   position: relative;
 }

 .flex11 {
   flex: 1;
 }

 .stopp {
   background: #002b5b;
 }

 .stopp-cnt h3 {
   color: #fff;
   font-size: 34px;
   font-weight: 700;
 }

 .stopp-cnt p {
   color: #fff;
   font-size: 19px;
   font-weight: 400;
 }

 .door img {
   border: none !important;
   position: absolute;
   right: -460px;
   top: -35px;
   height: 726px !important;
 }

 .learnmore a {
   background: #4f7bf7;
   color: #fff;
   text-decoration: none;
   border-radius: 10px;
   display: inline-block;
   padding: 10px 30px;
   font-size: 17px;
   font-weight: 300;
   white-space: nowrap;
 }

 .learnmore a:hover {
   box-shadow: 0px 2px 10px #2c89f1;
 }

 img.bg1 {
   border: 1px solid #0c73bb;
   mix-blend-mode: screen;
   height: 655px;
   object-fit: contain;
   border-radius: 5px;
   padding: 36px 227px 36px 36px;
 }

 img.bg2 {
   mix-blend-mode: screen;
   height: 655px;
   object-fit: contain;
   border-radius: 5px;
   border: 1px solid #0c73bb;
   border-left: 25px solid #005fb2;
 }

 .stopp-cnt1 ul li span {
   color: #05bac9;
   font-weight: 800;
 }

 .stopp-cnt1 ul {
   display: flex;
   flex-direction: column;
   gap: 14px;
   color: #fff;
   list-style: none;
   padding: 0;
   margin: 0 0 50px;
   font-size: 23px;
   line-height: 20px;
 }

 .stopp-cnt1 ul li:last-child {
   line-height: 33px;
   margin-bottom: 50px;
 }

 .stopp-cnt1 {
   text-align: left;
 }

 .visit-content {
   display: flex;
   gap: 20px;
   align-items: center;
   justify-content: space-between;
 }

 .visitbg {
   background: var(--darkblue);
   padding: 0 200px;
 }

 .hidden-in-right p span {
   font-weight: 800;
   font-size: 38px;
 }

 .hidden-in-right p {
   font-size: 25px;
 }

 .hidden-in-left {
   color: #002b5b;
   font-size: 20px;
   margin-bottom: 37px;
 }

 .hidden-in-right h3 {
   font-size: 52px;
 }

 .hidden-in-right h3 span {
   font-weight: 800;
   font-size: 83px;
 }

 .hiddencost-text h2 span {
   color: #05bac9;
 }

 .hidcost {
   background: #fff;
   height: 100vh;
   border-radius: 50px 50px 0 0;
   width: 100%;
   margin-top: 230px;
 }

 .buildd-in.yelllobg .buildd h3,
 .buildd-in.yelllobg .buildd p {
   color: #000 !important;
 }

 .hidden-in {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }

 .hiddencost-text span {
   color: #1153c9;
   font-weight: 800;
 }

 .hidden-inner {
   flex: 1;
 }

 .boxx {
   border: 1px solid #cccc;
   border-radius: 10px;
   min-height: 250px;
   margin-bottom: 18px;
 }

 .hidden-inner p {
   color: #003a7b;
   font-size: 17px;
   font-weight: 400;
   line-height: 22px;
   margin-bottom: 0;
   padding: 0 10%;
 }

 .hiddencost-text h2 {
   font-size: 50px;
   font-weight: 800;
   line-height: 64px;
   margin-bottom: 15px;
   color: #1153c9;
 }

 .hiddencost-text {
   text-align: center;
   margin-top: 70px;
 }

 .hiddencost-cnt {
   width: 100%;
 }

 .hiddencostbg {
   background: var(--darkblue);
   padding: 0 300px 0 350px;
 }

 .circle-text img:hover {
   transform: scale(1.2);
   transition: all 0.8s ease-in;
 }

 .vitalio-innner {
   max-width: 1000px;
 }

 span.vitaliotxt1 {
   font-size: 70px !important;
 }

 .leftv1 span {
   font-size: 35px;
   font-weight: 500;
   line-height: 42px;
   color: #00f6ff;
 }

 .leftv1 p {
   font-size: 35px;
   font-weight: 500;
   line-height: 42px;
 }

 .leftv1 {
   text-align: left;
   color: #fff;
 }

 .missionbottombg img:hover {
   opacity: 1;
   transition: all 0.8s ease-in;
 }

 .missionbottombg img {
   position: absolute;
   bottom: -110px;
   right: 0;
   height: 318px;
   mix-blend-mode: luminosity;
   opacity: 0.1;
 }

 /* Hotspot Zones */
 .hotspot {
   position: absolute;
   cursor: pointer;
 }

 /* Define each zone (you'll need to adjust based on image position) */
 .zone1 {
   top: 0;
   right: 0;
   width: 365px;
   height: 300px;
   /* position: fixed; */
 }

 .zone2 {
   top: 31%;
   right: 0;
   width: 365px;
   height: 300px;
   /* position: fixed; */
 }

 .zone3 {
   top: 63%;
   right: 0;
   width: 365px;
   height: 348px;
   /* position: fixed; */
 }

 /* Overlay Images (hidden by default) */
 .overlay-image {
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   right: -432px;
   width: 991px;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 /* Show corresponding overlay on hover */
 .zone1:hover~.overlay1 {
   opacity: 1;
 }

 .zone2:hover~.overlay2 {
   opacity: 1;
 }

 .zone3:hover~.overlay3 {
   opacity: 1;
 }

 .rightv1 {
   /* position: relative; */
 }

 img.pic {
   /* position: fixed;
    bottom: 0;
    right: -450px;
    height: 34vh;
    mix-blend-mode: luminosity; */
 }

 img.pic1 {
   position: fixed;
   bottom: 0;
   right: -450px;
   height: 34vh;
   mix-blend-mode: luminosity;
 }

 img.pic2 {
   position: fixed;
   bottom: 307px;
   right: -467px;
   height: 42vh;
   mix-blend-mode: luminosity;
 }

 img.pic3 {
   position: fixed;
   top: 77px;
   right: -264px;
   height: 30vh;
   mix-blend-mode: luminosity;
 }

 img.heart-base1 {
   mix-blend-mode: luminosity;
   position: absolute;
   top: 0;
   right: -432px;
   width: 991px;
 }

 .vitalio-cnt {
   width: 100%;
 }

 .circle-text img {
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
 }

 .vitaliobg {
   background: var(--darkblue);
   padding: 0 400px 0 200px;
 }

 .requesrtbg {
   background: var(--darkblue);
 }

 .sol1 {
   text-align: center;
   color: #fff;
   display: inline;
 }

 .sol1 p {
   font-size: 20px;
   margin-bottom: 0px;
   font-weight: 700;
   line-height: 16px;
 }

 .sol1 span {
   font-size: 17px;
   margin-bottom: 20px;
   display: inline-block;
   font-weight: 100;
 }

 .sol1 p,
 .sol1 span {
   text-align: left;
 }

 /* .sol1.sol2 p {
    text-align: right;
} */
 .problem-innner .left-p,
 .problem-innner .right-p {
   /* margin-left: 15%; */
 }

 .bottle-cnt {
   position: relative;
   text-align: center;
 }

 .bottle-inn img {
   position: absolute;
   top: 183px;
   left: 69px;
   height: 412px !important;
   width: 79%;
 }

 .buildbybg {
   background: #fff;
 }

 .problembg {
   /* background: url(../images/core.png) no-repeat; */
   background-size: cover;
   background: radial-gradient(50% 50% at 50% 50%, #ffa69a 0%, #ff6b6b 100%);
 }

 .solutionbg {
   /* background: url(../images/brand.png) no-repeat; */
   background-size: cover;
   background: radial-gradient(50% 50% at 50% 50%, #4ecdc4 0%, #00b4b4 100%);
 }

 #problemSection,
 #solutionSection {
   transition: opacity 0.8s ease;
 }

 #problemSection[style*="display: none"],
 #solutionSection[style*="display: none"] {
   opacity: 0;
 }

 /* .container-problem {
  padding: 0 200px;
 
} */

 img.bootlesolution {
   padding-left: 0px;
   width: 500px;
   object-fit: contain;
   text-align: center;
 }

 .bottletxt img {
   position: absolute;
   top: 165px;
   height: 320px;
   left: 140px;
   object-fit: contain;
   z-index: 111;
 }

 .bottletxt1 img {
   position: absolute;
   top: 134px;
   height: 393px;
   left: 230px;
   object-fit: contain;
   z-index: 111;
 }

 .problem-text {
   position: relative;
   text-align: center;
   color: #fff;
   font-size: 215px;
   left: 0;
   top: 0px;
   width: 100%;
   font-weight: 800;
   line-height: 143px;
   text-transform: uppercase;
 }

 .solution-text {
   position: relative;
   text-align: center;
   color: #fff;
   font-size: 215px;
   left: 0;
   top: 0px;
   width: 100%;
   font-weight: 800;
   line-height: 143px;
   text-transform: uppercase;
 }

 .bootlesh img {
   width: 100%;
   position: absolute;
   left: 50px;
   bottom: -34px;
   display: none;
 }

 .bootlesh1 img {
   width: 100%;
   /* position: absolute;
    left: 75px;
    bottom: -35px; */
 }

 span.oursolutiontxt {
   border: 1px solid var(--whitetext);
   border-radius: 15px;
   padding: 10px 20px;
   display: inline-block;
   cursor: pointer;
   margin-top: 30px;
 }

 .right-p ul {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   text-align: left;
   font-size: 23px;
   font-weight: 700;
   gap: 3px;
 }

 .left-p {
   text-align: left;
   font-size: 20px;
   font-weight: 500;
 }

 .problem-innner {
   display: flex;
   gap: 20px;
   align-items: baseline;
   justify-content: space-between;
   position: relative;
   flex-wrap: wrap;
   margin-top: 28%;
 }

 .problem-cnt {
   width: 100%;
 }

 .mart-in {
   display: flex;
   gap: 175px;
   align-items: center;
 }

 .leftcom {
   display: flex;
   align-items: end;
   height: 70vh;
 }

 .com {
   flex: 1;
 }

 img.rotatee {
   height: 360px;
   mix-blend-mode: screen;
 }

 .footer-cnt {
   width: 100%;
 }

 .footerbg {
   background: var(--bluebgcolor) url(../images/footerBg.svg);
   width: 100%;
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: contain;
 }

 .home-cnt {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }

 .footer-innner {
   color: var(--whitetext);
   /* width: 100%;
  display: flex;
  gap: 20px; */
   justify-content: space-between;
   align-items: baseline;
   flex-wrap: wrap;
 }

 .stay-update {
   font-size: 18px;
   font-weight: 400;
 }

 .stay-update p {
   font-size: 18px;
   font-weight: 400;
   margin-top: 11%;
 }

 .stay-update-in {
   display: flex;
   flex-direction: column;
   gap: 40px;
   text-align: left;
 }

 .contactus p {
   font-size: 15px;
   line-height: 24px;
 }

 .contactus h4 {
   font-size: 16px;
   margin-bottom: 7px;
 }

 .contactus h3 {
   font-size: 24px;
   margin-bottom: 13px;
 }

 .contactus-in {
   display: flex;
   /* gap: 99px; */
   align-items: center;
   justify-content: space-between;
 }

 .stay-update img {
   height: 65px;
 }

 .stay-update input[type="email"] {
   border: 1px solid var(--whitetext);
   background: transparent;
   border-radius: 35px;
   padding: 15px 25px;
   font-size: 27px;
   text-transform: uppercase;
 }

 .stay-update input[type="email"]::placeholder {
   color: white;
   opacity: 1;
 }

 .req-demo {
   color: var(--bluebgcolor);
   font-weight: 700;
   font-size: 35px;
   border: 1px solid var(--whitetext);
   border-radius: 30px;
   background: var(--whitebg);
   padding: 10px 30px;
   text-transform: uppercase;
   cursor: pointer;
 }

 img.scroll-gif {
   mix-blend-mode: screen;
   height: 300px;
 }

 .home-content {
   flex: 1;
 }

 nav a {
   color: white;
   margin: 0 15px;
   text-decoration: none;
   font-weight: bold;
   transition: color 0.3s;
 }

 nav a:hover {
   color: #f39c12;
 }

 .menu-container1 {
   display: flex;
   gap: 10px;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 20px 0;
 }

 .home-txt h3 {
   color: #fff;
   font-size: 70px;
   font-weight: 800;
   margin-bottom: 20px;
   line-height: 88px;
 }

 .home-txt p span {
   color: #00f6ff;
   font-weight: 700;
   font-size: 100px;
   margin-bottom: 0;
   border: 1px dashed #ffffff;
   border-radius: 15px;
   padding: 35px 35px;
   display: inline-block;
 }

 .ser-cnt {
   color: #fff;
   font-size: 40px;
   font-weight: 800;
   line-height: 61px;
 }

 .missiontxt,
 .vitaliotxt {
   transition: opacity 0.8s ease, transform 0.8s ease;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }

 .vitaliotxt {
   color: #6babf114;
   font-size: 500px;
   text-transform: uppercase;
   font-weight: 700;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }

 .missiontxt {
   display: none;
   color: #f4f4f4;
   font-size: 484px;
   text-transform: uppercase;
   font-weight: 700;
   height: 100%;
   opacity: 0;
   /* transform: translateY(10px); */
   pointer-events: none;
 }

 .ob:hover .missiontxt {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
   display: block;
   transition: all 0.8s ease;
 }

 .ob:hover .vitaliotxt {
   opacity: 0;
   transform: translateY(0px);
   pointer-events: none;
   display: block;
   transition: all 0.8s ease;
 }

 .mision-cnt {
   height: 100vh;
 }

 .mission {
   background: #fff;
   border-radius: 20px;
   padding: 10px;
   height: 100vh;
 }

 .missiondetailstxt {
   position: relative;
   z-index: 1;
 }

 .missiondetailstxt h3 {
   color: #002b5b;
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 30px;
 }

 .missiondetailstxt p {
   color: #202529;
   font-size: 20px;
   font-weight: 400;
 }

 .misssionbg {
   background: #fff;
   padding: 0 200px;
   border-radius: 20px;
 }

 .ob {
   position: absolute;
   top: 0%;
   left: 0;
   height: 100%;
   width: 100%;
 }

 .quotes {
   display: none;
 }

 span.quoteanimate {
   color: #ffff00;
   font-weight: 700;
   font-size: 100px;
   margin-bottom: 0;
   border: 1px dashed #ffffff;
   border-radius: 15px;
   padding: 0px 35px;
   display: inline-block;
 }

 .grid-support img {
   width: 100%;
 }

 .buildby-innner h3 {
   color: #002b5b;
   font-size: 40px;
   text-transform: uppercase;
   font-weight: 700;
 }

 .buildby-innner p {
   color: #787878;
   font-size: 16px;
   font-weight: 400;
   margin-top: 30px;
   line-height: 22px;
 }

 .buildby-cnt {
   width: 100%;
   padding: 0 124px;
 }

 .whychoose-innner h3 {
   font-size: 110px;
   font-weight: 800;
   line-height: 118px;
   margin-bottom: 20px;
 }

 .whychoose-innner p {
   font-size: 15px;
   font-weight: 400;
   line-height: 17px;
   text-transform: uppercase;
 }

 .whychoosebg {
   background: #1153c9;
 }

 .testimonials-wrapper {
   margin-top: 100px;
 }

 .whychoose-cnt {
   width: 100%;
   padding: 0 200px;
 }

 .communicationbg {
   background: var(--darkblue);
   padding: 0 100px;
 }

 .communication-cnt {
   width: 100%;
 }

 .testimonialsbg {
   background: var(--whitetext);
   padding: 0 300px;
 }

 .testimonials-cnt {
   width: 100%;
 }

 .testimonials-cnt h3 {
   color: #002b5b;
   font-size: 40px;
   text-transform: uppercase;
   font-weight: 700;
 }

 .testimonials-cnt p {
   color: #787878;
   font-size: 20px;
   text-transform: uppercase;
   font-weight: 400;
   margin-bottom: 0px;
 }

 .testimonial-cards {
   background: #007fde;
   padding: 20px;
   border-radius: 24px;
   transition: transform 0.3s ease;
   transform-style: preserve-3d;
 }

 .child.testimonial-cards {
   transform: rotate(5deg) skew(5deg);
 }

 .child.testimonial-cards:nth-child(even) {
   /* transform: rotate(348deg) skew(354deg);   */
   background: #1153c9;
 }

 .testimonial-cards:nth-child(odd) {
   /* transform: rotate(5deg) skew(9deg); */
 }

 .child.testimonial-cards:nth-child(2n) {
   /* margin-bottom: 95px; */
 }

 .left-card img {
   width: 50px;
   border-radius: 50%;
 }

 .left-card {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 15px;
   width: 100%;
 }

 .left-card span {
   text-align: left;
   text-transform: uppercase;
   font-weight: 700;
   font-size: 15px;
 }

 .content-card p {
   color: var(--whitetext);
   text-align: left;
   font-size: 13px;
   line-height: 23px;
 }

 span.txty {
   width: 100%;
   height: 100%;
   color: #fff;
 }

 .buildd-in {
   max-width: 400px;
   background: #1153c9;
   border-radius: 10px;
   position: relative;
   width: 100%;
   display: flex;
   gap: 20px;
   padding: 85px 40px;
   color: #fff;
   transform: rotate(344deg);
 }

 .buildd {
   text-align: left;
 }

 .buildd h3 {
   color: #fff;
   font-size: 18px;
   text-transform: none;
   margin-bottom: 10px;
 }

 .buildd p {
   color: #fff;
   font-size: 15px;
   text-transform: none;
   margin-bottom: 0px;
   font-weight: 400;
   margin-top: 0px;
 }

 .testimonial-scroll {
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   scroll-behavior: smooth;
   padding: 1rem;
 }

 .testimonial-text {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
 }

 .testimonial-scroll:hover .testimonial-cards {
   animation: scroll-left 10s linear infinite;
 }

 @keyframes scroll-left {
   0% {
     transform: translateX(0%);
   }

   100% {
     transform: translateX(-50%);
     /* Adjust based on content width */
   }
 }

 .scroll-image {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .scroll-image.active {
   opacity: 1;
   transform: translateY(0);
 }

 .rtcom {
   height: 98vh;
   display: flex;
   justify-content: space-around;
   flex-direction: column;
 }

 .cit {
   text-align: left;
   position: relative;
 }

 .cit h3 {
   font-weight: 800;
   font-size: 23px;
   border-top: 1px solid #fff;
   padding-top: 20px;
   margin-top: 20px;
   position: relative;
   color: #fff;
 }

 .cit p {
   font-weight: 400;
   font-size: 16px;
   margin-bottom: 0;
   color: #fff;
 }

 .numbert span {
   width: 50px;
   height: 50px;
   line-height: 50px;
   border-radius: 50%;
   background: #fff;
   display: inline-block;
   text-align: center;
   color: #1153c9;
   font-weight: 900;
   font-size: 25px;
 }

 .cit.c2:before {
   content: "";
   position: absolute;
   height: 1px;
   width: 229px;
   top: 139px;
   left: -207px;
   background: #fff;
   z-index: 1;
   transform: rotate(324deg);
 }

 .cit.c1:before {
   content: "";
   position: absolute;
   height: 1px;
   width: 229px;
   top: 2px;
   right: -204px;
   background: #fff;
   z-index: 1;
   transform: rotate(322deg);
 }

 .cit.c3:before {
   content: "";
   position: absolute;
   height: 1px;
   width: 229px;
   top: 8px;
   left: -209px;
   background: #fff;
   z-index: 1;
   transform: rotate(34deg);
 }

 /* #about {
  transform: rotate(-6deg);
  transition: transform 0.4s ease;
  z-index: 2;
  transform-origin: center center;
}

#about.flat {
  transform: rotate(0deg);
  z-index: 2;
  transform-origin: center center;
}

#about, #about.flat {
  transform-origin: center center;
} */

 /* 
      #about {
        transform: rotate(0deg);
        transition: transform 0.4s ease;
      }

      .tilted {
        transform: rotate(-6deg) scale(1);
        margin-top: -86px;
      } */

 .tilted {
   transform: rotate(-6deg) scale(1);
   margin-top: 567px;
   transition: transform 0.8s ease, margin-top 0.8s ease;
 }

 .tilted.active {
   transform: rotate(0deg) scale(1);
   margin-top: 100px;
 }

 #whychoose {
   background: #1153c9;
 }

 #buildby {
   background: #fff;
   /* overflow-y: auto; */
   scroll-behavior: smooth;
 }

 #testimonials {
   background: #fff;
   overflow-y: auto;
   max-height: 107vh;
   scroll-behavior: smooth;
 }

 .vitaliocalculator {
   background: #fff !important;
 }

 /* .cal-flex {
  width: 100%;
} */

 .caltxt {
   text-align: center;
   color: #0079ff;
   /* padding-top: 11%; */
 }

 /* 
.cal-cnt {
  transform: translateY(8%);
} */

 .caltxt h3 {
   font-size: 60px;
   font-weight: 500;
   margin-bottom: 20px;
 }

 .caltxt p {
   font-size: 19px;
   margin-bottom: 80px;
   color: #2f2f2f;
 }

 .section7,
 .section11,
 .section12 {
   justify-content: center;
 }

 .container-RealImpact {
   text-align: center;
       margin: 10% 0;
 }

 .request-btn img {
   width: 100%;
   max-width: 400px;
 }

 #communication {
   background: #4ecdc4;

   scroll-behavior: smooth;
 }

 .vitalio-cal {
   background: #fff;
   /* height: 100vh; */
   /* margin-top: 20px; */
   border-radius: 50px 50px 0 0;
 }

 .testimonial-slider-cn {
   position: absolute;
   top: -135px;
   left: 0;
   width: 100vh;
   /* height: calc(100vw); */
   overflow: scroll;
   transform: rotate(-90deg);
   transform-origin: center calc(43vh);
 }

 .child {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
   gap: 5px;
   margin-bottom: 63px;
   max-width: 300px;
   min-height: 330px;
 }

 #horizontalTestimonials.horizontal-scroll-section {
   height: 100vh;
   position: relative;
   overflow: hidden;
   width: 100vw;
   display: block;
   padding: 0 !important;
   margin: 0 !important;
 }

 .horizontal-scroll-section {
   height: 100vh;
   overflow: hidden;
   position: relative;
   background: #fff;
   z-index: 1;
 }

 .testitext {
   position: relative;
   margin-top: 0px;
 }

 .w-layout-vflex {
   flex-direction: column;
   align-items: flex-start;
   display: flex;
 }

 .v2-container-sticky {
   flex-flow: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
   display: flex;
   position: sticky;
   top: 0;
   bottom: 100px;
   text-align: center;
   margin-top: -26%;
 }

 .image-28 {
   z-index: 1;
   border-radius: 20px;
   align-self: flex-end;
   width: 420px;
   margin-top: 3vh;
   margin-left: 0;
   margin-right: 20px;
   position: relative;
   transform: rotate(0);
 }

 .image-25 {
   z-index: 1;
   border-radius: 20px;
   width: 440px;
   margin-top: 4vh;
   margin-left: 100px;
   position: relative;
   transform: rotate(0);
 }

 .flex-block-32 {
   margin-top: 744px;
 }

 /* loader css */
 #loader-screen {
   position: fixed;
   z-index: 9999;
   background: #002e64;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.8s ease-in-out, opacity 0.5s ease;
 }

 #loader-screen img {
   max-width: 1000px;
 }

 #loader-screen.slide-up {
   transform: translateY(-100%);
   opacity: 1;
   pointer-events: none;
 }

 /* loader css */

 .zigzag {
   margin-top: -112px;
 }

 /* .section-blue {
  background-color: #3164e0;
  color: white;
  padding: 60px 20px;
  position: relative;
  z-index: 2;
} */

 /* .section-darkblue {
  background-color: #0f1a57;
  color: white;
  padding: 60px 20px;
  position: relative;
  z-index: 1;
} */

 /* Zigzag bottom of blue section */
 .zigzag-bottom::after {
   content: "";
   display: block;
   height: 100px;
   background-color: white;
   /* clip-path: polygon(
    0% 50%,
    10% 10%,
    20% 30%,
    30% 15%,
    40% 12%,
    50% 25%,
    60% 10%,
    70% 25%,
    80% 10%,
    90% 15%,
    100%10%,
    100% 100%,
    100% 100%
  ); */
   clip-path: polygon(0 0,
       100% 0,
       100% 90%,
       95% 100%,
       85% 90%,
       75% 100%,
       65% 90%,
       55% 100%,
       45% 90%,
       35% 100%,
       25% 90%,
       15% 100%,
       5% 90%,
       0 100%);
   position: relative;
   margin-top: -1px;
   z-index: 3;
 }

 /* Top edge of darkblue (zigzag up into white) */
 .zigzag-top::before {
   content: "";
   display: block;
   height: 100px;
   background-color: white;
   clip-path: polygon(0% 80%,
       10% 75%,
       20% 80%,
       30% 75%,
       40% 80%,
       50% 75%,
       60% 80%,
       70% 75%,
       80% 80%,
       90% 75%,
       100% 80%,
       100% 0%,
       0% 0%);
   position: relative;
   margin-bottom: -1px;
   z-index: 3;
 }

 .zig {
   z-index: 12;
   position: fixed;
   width: 100%;
   height: 281px;
   left: 0;
   bottom: -194px;
 }

 .borderBottom {
   position: relative;
   z-index: 1;
 }

 .borderBottom::after {
   content: "";
   position: absolute;
   top: 0px;
   left: 0;
   width: 100%;
   height: 356px;
   background: url(../images/s1.png) repeat-x;
   background-size: cover;
   z-index: 99;
   pointer-events: none;
 }

 .borderBottom1 {
   position: relative;
   z-index: 1;
 }

 .borderBottom1::after {
   content: "";
   position: absolute;
   top: 0px;
   left: 0;
   width: 100%;
   height: 356px;
   background: url(../images/s2.png) repeat-x;
   background-size: cover;
   z-index: 99;
   pointer-events: none;
 }

 .borderBottom2 {
   position: relative;
   z-index: 1;
 }

 .borderBottom2::after {
   content: "";
   position: absolute;
   top: 0px;
   left: 0;
   width: 100%;
   height: 356px;
   background: url(../images/s2.png) repeat-x;
   background-size: cover;
   z-index: 99;
   pointer-events: none;
 }

 .indexbg {
   /* background: conic-gradient(
    from 243.07deg at 50% 50%,
    #00277a -142.01deg,
    #398be3 0.27deg,
    #00277a 217.99deg,
    #398be3 360.27deg
  ); */
   background: url(../images/bgGif.gif) no-repeat;
   background-size: cover;
   background-position: center;
 }

 .otherbg {
   background: conic-gradient(from 243.07deg at 50% 9%,
       /* move gradient center to top */
       #00277a -142.01deg,
       #006ae0 0.27deg,
       #00277a 217.99deg,
       #006ae0 360.27deg);
 }

 .Homebg {
   background: #006ae0;
 }

 .darkbluebg {
   background: var(--whitebg);
 }

 .dashboardbg {
   position: relative;
 }

 .home-flex {
   display: block;
   align-items: center;
   margin-left: 3%;
   margin-top: 10%;
 }

 .container-fluid {
   padding: 0 100px;
   /* margin-top: 43%; */
 }

 .hiddencost-flex {
   padding: 0;
 }

 .mission-flex {
   position: relative;
 }

 .vitaliobg {
   position: relative;
 }

 .whychoose-innner {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   color: #fff;
   text-align: center;
 }

 span.highlight {
   color: #defc60;
 }

 .testimonials-flex {
   text-align: center;
 }

 .t-slide {
   gap: 20px;
 }

 .sol1.sol2 {
   display: grid;
 }

 .sol1.sol2 p {
   margin-bottom: 7px;
 }

 .bottomImage {
   /* background: url(../images/s1.png) no-repeat; */
   background-size: 100%;
   background-position: bottom;
   position: absolute;
   z-index: 9999;
   /* padding: 186px; */
   width: 100%;
   height: 155px;
   bottom: 0px;
   transform: scale(1.1) rotate(180deg);
   bottom: -83px;
 }

 .topImage {
   /* background: url(../images/s1.png) no-repeat; */
   background-size: 100%;
   background-position: bottom;
   position: absolute;
   z-index: 9999;
   /* padding: 186px; */
   width: 100%;
   height: 248px;
   bottom: -60px;
   transform: scale(1.1) rotate(183deg);
 }

 .bottomImage1 {
   /* background: url(../images/s4.png) no-repeat; */
   background-size: 100%;
   background-position: top;
   position: absolute;
   z-index: 9999;
   /* padding: 186px; */
   width: 100%;
   height: 391px;
   bottom: 0px;
   transform: scale(1.1) rotate(0deg);
   top: -256px;
 }

 .bottomImage2 {
   /* background: url(../images/s5.png) no-repeat; */
   background-size: 100%;
   background-position: top;
   position: absolute;
   z-index: 9999;
   /* padding: 186px; */
   width: 100%;
   height: 391px;
   bottom: 0px;
   transform: scale(1.1) rotate(0deg);
   top: -256px;
 }

 .bottomImage3 {
   /* background: url(../images/s1.png) no-repeat; */
   background-size: 100%;
   background-position: bottom;
   position: absolute;
   z-index: 9999;
   /* padding: 186px; */
   width: 100%;
   height: 155px;
   bottom: 0px;
   transform: scale(1.1) rotate(177deg);
   bottom: -164px;
 }

 /* .bottomImage5 {
  background: url(../images/s1.png) no-repeat;
  background-size: 100%;
  background-position: top;
  position: absolute;
  z-index: 9999;
  width: 100%;
  height: 219px;
  transform: scale(1.1) rotate(182deg);
  top: -61px;
} */

 .demo-in {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   /* place-items: center; */
 }

 .demo-innner {
   display: flex;
   gap: 50px;
   align-items: center;
   flex-wrap: wrap;
 }

 .demo-in2 h3 {
   color: #fff;
   font-size: 100px;
   text-transform: uppercase;
   font-weight: 700;
   line-height: 100px;
 }

 .demo-in2 p {
   color: #fff;
   font-size: 17px;
   font-weight: 400;
 }

 .demobg {
   background: #1153c9;
 }

 .demo-flex {
   background: #006ae0;
   padding: 100px;
   border-radius: 10px;
 }

 .frm label {
   color: #fff;
   font-size: 16px;
 }

 .demo {
   flex: 1;
 }

 .frm input {
   width: 100%;
   border-radius: 4px;
   border: none;
   height: 45px;
   padding: 5px;
   color: #006ae0;
 }

 .submit-btn a {
   display: inline-block;
   text-align: center;
   background: #fff;
   text-decoration: none;
   border-radius: 5px;
   color: #1153c9;
   font-size: 17px;
   padding: 5px 10px;
   width: 100%;
   font-weight: 500;
 }

 .submit-btn span {
   background: linear-gradient(1.17deg, #1153c9 1%, #007fde 99%);
   border-radius: 10px;
   padding: 10px 10px;
   display: inline-block;
   width: 100%;
 }

 .submit-btn {
   width: 100%;
   margin-top: 20px;
 }

 /* marquee css */

 .marquee-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow: hidden;
   gap: 0;
   flex-direction: column;
 }

 .left-mar,
 .rt-mar {
   overflow: hidden;
   white-space: nowrap;
   flex: 1;
   max-width: 100%;
   position: relative;
 }

 .rt-mar.marquee-right .marquee-content {
   display: flex;
   gap: 75px;
   margin-top: -55px;
 }

 .marquee-content {
   display: flex;
   gap: 40px;
   animation-duration: 20s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }

 .marquee-left .marquee-content {
   animation-name: marqueeLeft;
 }

 .marquee-right .marquee-content {
   animation-name: marqueeRight;
 }

 @keyframes marqueeLeft {
   0% {
     transform: translateX(0%);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 @keyframes marqueeRight {
   0% {
     transform: translateX(-50%);
   }

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

 /* Optional styling for visuals */

 .request-btn {
   margin-top: 100px;
   cursor: pointer;
 }

 .marquee-content span img {
   border-radius: 10px;
 }

 .rt-mar p {
   font-weight: 700;
   white-space: nowrap;
   color: #2974d6;
   font-size: 120px;
   text-transform: uppercase;
   margin-bottom: 0px;
 }

 .request-innner {
   text-align: center;
 }

 /* marquee css */
 .rtbg {
   height: 200px;
   width: 367px;
 }

 .bottmSec {
   display: flex;
   gap: 10px;
   width: 60%;
   position: absolute;
   bottom: 27%;
 }

 .textScreen {
   color: #fff;
   font-size: 20px;
   font-weight: 800;
   line-height: 25px;
   margin-top: 29%;
 }

 .imagesec {
   max-width: 100%;
 }

 .imagesec img {
   max-width: 100%;
 }

 .thirdSec {
   display: flex;
   gap: 10px;
   /* width: 100%; */
   position: absolute;
   width: 100vw;
   bottom: 13%;
   left: 0;
 }

 .textScreen3 {
   color: #fff;
   font-size: 34px;
   font-weight: 800;
   line-height: 46px;
   /* margin-top: 9%; */
   max-width: 500px;
 }

 .imagesec3 {
   max-width: 100%;
 }

 .imagesec3 img {
   max-width: 100%;
 }

 a {
   text-decoration: none;
 }

 .vitalio-calulator-in {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin-bottom: 5px;
   background: #00338e;
   border-radius: 20px;
   padding: 20px;
 }

 .vitalio-calulator-btn {

   display: flex;
   align-items: center;
   justify-content: center;

 }

 .vitalio-calulator-btn span {
   cursor: pointer;
   color: #00338e;
   font-size: 16px;
   font-weight: 500;
   background: #9ed6e0;
   border-radius: 50px;
   padding: 8px 24px;
   /* margin: 0 28%; */
   white-space: nowrap;
   text-decoration: none;
   width: 267px;
 }

 .vitalio-calulator-btn span img {
   margin: 0 28px;
 }

 .vitalio-field {
   color: #fff;
   border: solid 1px #fff;
   animation-fill-mode: 12px;
   padding: 10px 15px;
   margin-bottom: 5px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   border-radius: 10px;
 }

 .vitalio-field label {
   width: 100%;
   font-size: 11px;
   margin-bottom: 0px;
 }

 .currentavg-year-cnt label {
   width: 100%;
   font-size: 14px;
   margin-bottom: 0px;
   color: #fff;
 }

 .vitalio-field select {
   width: 100%;
   /* background: transparent; */
   border: 0.68px dashed #ffffff;
   color: #5cabf5;
   border-radius: 5px;
   font-size: 15px;
   padding: 6px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .vitalio-calulator {
   flex: 1;
 }

 .vitalio-calulator-cnt {
   max-width: 950px;
   margin: auto;
 }

 .vitalio-field input {
   width: 100%;
   background: transparent;
   border: 0.68px dashed #ffffff;
   color: #fff;
   border-radius: 5px;
   font-size: 15px;
   padding: 6px;
   font-weight: 500;
 }

 .vitalio-field input::placeholder {
   color: #fff;
 }

 .twobox {
   display: flex;
   flex-direction: row;
   gap: 15px;
 }

 .twop {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .currentavg-year-cnt {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 /* .minw {
   min-height: 24vh;
 } */
 .minw {
   min-height: 280px;
 }

 .boxwhite {
   background: #00338e;
   border-radius: 12px;
   padding: 70px 20px;
   text-align: center;
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 35px;
   max-width: 750px;
   margin: auto;
   color: #fff;
 }

 .boxwhite p {
   color: #1153c9;
   font-weight: 800;
   font-size: 37px;
   margin-bottom: 0;
 }

 .boxwhite h2 {
   color: #05bac9;
   font-size: 130px;
   font-weight: 900;
   margin-bottom: 0;
 }

 .boxwhite span {
   color: #1153c9;
   font-weight: 400;
   font-size: 17px;
 }

 .RealImpact {
   background: #1153c9;
   color: #fff;
 }

 .RealImpacttxt h3 {
   font-size: 72px;
   text-transform: capitalize;
   font-weight: 600;
 }

 .realdata-in {
   max-width: 750px;
   margin: auto;
   display: grid;
   grid-row-gap: 79px;
   grid-column-gap: 37px;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   grid-auto-rows: 1fr;
   text-align: center;
 }

 .realdata {
   border: 0.75px solid #ffffff;
   border-radius: 8px;
   padding: 40px 25px 25px;
 }

 .hideLogo {
   display: none;
 }

 .realdata span {
   text-transform: uppercase;
   font-size: 20px;
   font-weight: 400;
 }

 .realdata p {
   margin-bottom: 15px;
   text-transform: uppercase;
   font-size: 40px;
   font-weight: 900;
 }

 html,
 body {
   width: 100%;
   /* height: 100%; */
   /* overflow: auto; */
 }

 .page {
   width: 100%;
   overflow-y: hidden;
   position: relative;
   height: 100vh;
   padding: 0 0 5%;
   scroll-snap-align: start;
 }

 .approachSec,
 .completeProcess {
   height: 150vh;
   overflow: hidden;
 }

 .parallel-wrapper {
   display: flex;
   width: 100%;
   height: 100%;
 }

 .half {
   width: 45vw;
   height: 100%;
   overflow: auto;
   position: relative;
 }

 .seconhalf {
   width: 50vw;
 }

 #horizontalSlides,
 #horizontalSlides3,
 #testimonialsSlides {
   display: flex;
   height: 100%;
   transition: transform 0.6s ease;
 }

 #horizontalSlides .slide,
 #horizontalSlides3 .h-slide,
 #testimonialsSlides .t-slide {
   width: 50vw;
   height: 100%;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   /* border-right: 1px solid #ccc; */

   padding: 0 5%;
 }

 #horizontalSlides .slide,
 #horizontalSlides3 .h-slide,
 #testimonialsSlides .t-slide {
   width: 50vw;
   height: 100%;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   /* border-right: 1px solid #ccc; */

   padding: 0 5%;
 }

 #verticalSlides {
   display: flex;
   flex-direction: column;
   transition: transform 0.6s ease;
 }

 #verticalSlides .slide {
   width: 100%;
   height: 100vh;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
 }

 .section2,
 .section0,
 .section4,
 .section5,
 .section4,
 .section5,
 .section6,
 .section7,
 .section8,
 .section9,
 .section10,
 .section11,
 .section12,
 .section13,
 .section14,
 .section15 {
   display: flex;
   /* justify-content: center; */
   align-items: center;
 }

 .horizontal-wrapper3 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 #testimonialsSlides .t-slide {
   width: 65vw;
 }

 #horizontalSlides3 .h-slide {
   width: 100vw;
 }

 #scrollContainer {
   max-height: 100vh;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   position: absolute;
   z-index: 999;
   overflow: auto;
   top: 0;
   width: 73%;
   padding: 0 5%;
 }

 #scrollContainer::-webkit-scrollbar {
   display: none;
   /* Chrome, Safari */
 }

 #verticalSlides0 .inner-slide {
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 #verticalSlides0 {
   transition: transform 0.6s ease;
   position: relative;
   width: 100%;
 }

 #verticalSlides0 .inner-slide {
   height: 100vh;
 }

 #verticalSlides0 .inner-slide:first-child {
   position: relative;
   margin-top: 30vh;
 }

 #verticalSlides0 .inner-slide:last-child {
   margin-top: -20vh;
   /* Show 20% of the second slide */
 }

 .bottmSec .imagesec img {
   transform: scale(1) translateY(0);
   transform-origin: center top;
   /* scaling starts from the top */
   transition: transform 0.8s ease;
 }

 .third-inner-slide.active.zoomed .textScreen {
   transform: scale(1.5) translateX(-173px) translateY(242px);
 }

 .third-inner-slide.active.zoomed .imagesec img {
   transform: scale(1.5) translateY(308px);
   /* transform: scale(2) translateY(120px); */
   /* zoom + shift upward */
 }

 .thirdSec .imagesec3 {
   /* background: url('../images/farmeTv.png') no-repeat; */
   background-size: contain;
   background-position: right;
   right: -194px;
   height: 443px;
   position: relative;
   width: 48%;
   display: block;
 }

 .thirdSec .imagesec3 img {
   transform: scale(1) translateY(0);
   transform-origin: center top;
   /* scaling starts from the top */
   transition: transform 0.8s ease;
   height: 500px;
   object-fit: contain;
 }

 .thirdSec.zoomed-out .textScreen3 {
   transform: scale(1.5) translateX(-28px) translateY(78px);
   font-size: 27px;
   line-height: 35px;
   max-width: 522px;
 }

 .thirdSec.zoomed-out .imagesec3 img {
   transform: scale(1.5) translateX(267px) translateY(14px);
   width: 578px;
   height: 315px;
 }

 .realdata {
   opacity: 1;
   transition: all 0.8s cubic-bezier(0.25, 1.25, 0.5, 1);
 }

 /* Left cards: start off-screen left + rotated -60deg */
 /* .realdata.left {
  transform: translateX(-300px) rotate(-60deg);
} */

 /* Right cards: start off-screen right + rotated +60deg */
 /* .realdata.right {
  transform: translateX(300px) rotate(60deg);
} */

 /* When visible */
 .realdata.show {
   opacity: 1;
   transform: translateX(0) rotate(0deg);
 }

 .calculator-slides {
   position: relative;
   width: 100%;
   height: 300px;
   /* adjust as needed */
   overflow: visible;
   display: block;
   margin: 0 22%;
 }

 .calculator-slides .boxwhite {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
   transform: translateY(50px) scale(0.95);
   transition: all 0.5s ease;
 }

 .calculator-slides .boxwhite.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
 }

 /* progessbar1 css */
 .slider-wrapper1 {
   position: relative;
   margin-bottom: 7px;
 }

 .slider1 {
   height: 8px !important;
   border-radius: 10px !important;
   background: linear-gradient(to right, white 0%, #3080d9 0%) !important;
   outline: none;
   appearance: none;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none !important;
   padding: 0 !important;
 }

 .progress-fill {
   position: absolute;
   top: 9px;
   left: 0;
   height: 8px;
   background: #fff;
   border-radius: 4px;
   transition: width 0.3s ease;
   pointer-events: none;
 }

 .slider1::-webkit-slider-thumb {
   appearance: none;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease;
   border: none;
 }

 .slider1::-webkit-slider-thumb:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
 }

 .slider1::-moz-range-thumb {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   border: none;
   transition: all 0.2s ease;
 }

 .slider1::-moz-range-thumb:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
 }

 .slider1::-moz-range-track {
   height: 8px;
   border-radius: 4px;
   background: transparent;
   border: none;
 }

 .scale {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 7px;
   padding: 0 12px;
 }

 .scale-number {
   font-size: 14px;
   font-weight: 500;
   opacity: 0.9;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .current-value {
   position: absolute;
   top: -45px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   border: 1px solid rgba(255, 255, 255, 0.2);
   opacity: 0;
   transition: all 0.3s ease;
   pointer-events: none;
   white-space: nowrap;
 }

 .current-value.show {
   opacity: 1;
   top: -40px;
 }

 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* progessbar1 css */

 /* progessbar2 css */
 .participation-slider-container {
   position: relative;
   padding-bottom: 11px;
 }

 .progress-fill1 {
   position: absolute;
   top: 13px;
   left: 0;
   height: 8px;
   background: #fff;
   border-radius: 3px;
   transform: translateY(-50%);
   z-index: 1111;
   width: 0%;
 }

 input.participation-slider {
   position: relative;
   z-index: 2;
   background: transparent;
 }

 .participation-title {
   font-size: 14px;
   margin-bottom: 0px;
 }

 .participation-slider-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .slider-section {
   flex: 1;
   position: relative;
 }

 .participation-slider {
   width: 100%;
   height: 8px !important;
   border-radius: 10px !important;
   background: linear-gradient(to right, white 0%, #3080d9 0%) !important;
   outline: none;
   appearance: none;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none !important;
   padding: 0 !important;
 }

 .participation-slider::-webkit-slider-thumb {
   appearance: none;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease;
   border: none;
 }

 .participation-slider::-webkit-slider-thumb:hover {
   transform: scale(1.1);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
 }

 .participation-slider::-moz-range-thumb {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
   border: none;
   transition: all 0.2s ease;
 }

 .participation-slider::-moz-range-thumb:hover {
   transform: scale(1.1);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
 }

 .participation-slider::-moz-range-track {
   height: 8px;
   border-radius: 4px;
   background: transparent;
   border: none;
 }

 .value-display {
   background: #3080d9;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   padding: 5px 20px;
   font-size: 16px;
   font-weight: 600;
   color: white;
   min-width: 80px;
   text-align: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .current-tooltip {
   position: absolute;
   bottom: 35px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(15px);
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   border: 1px solid rgba(255, 255, 255, 0.3);
   opacity: 0;
   transition: all 0.3s ease;
   pointer-events: none;
   white-space: nowrap;
 }

 .current-tooltip.show {
   opacity: 1;
   bottom: 40px;
 }

 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @media (max-width: 600px) {
   .participation-slider-wrapper {
     flex-direction: column;
     gap: 15px;
   }

   .value-display {
     order: -1;
     align-self: stretch;
   }

   .participation-title {
     font-size: 14px;
     text-align: center;
   }
 }

 /* progessbar2 css */

 /* #section1.active-before::before {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25px;
  background: #fff;
  content: "";
  border-radius: 20px 20px 0 0;
}

#section1.active-before {
  opacity: 1;
} */

 /* #section1.active-before::before {
    content: "";
    position: absolute;
        top: -188px;
    left: 0;
    height: 389px;
    background: url(../images/s1.png);
    width: 100%;
    z-index: 111111;
    border-radius: 20px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
 
}

#section1.active-before{
  opacity: 1;
}

#section0.active-before::before {
    content: "";
    position: absolute;
    bottom: -202px;
    left: 0;
    height: 389px;
    background: url(../images/s1.png);
    width: 100%;
    z-index: 111111;
    border-radius: 20px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
 
} */

 #section0.active-before {
   opacity: 1;
 }

 .realdata {
   opacity: 1;
   transition: all 0.8s cubic-bezier(0.25, 1.25, 0.5, 1);
   margin: 37px 0;
   height: 208px;
 }

 /* Left cards: start off-screen left + rotated -60deg */
 /* .realdata.left {
  transform: translateX(-300px) rotate(-60deg);
} */

 /* Right cards: start off-screen right + rotated +60deg */
 /* .realdata.right {
  transform: translateX(300px) rotate(60deg);
} */

 /* When visible */
 .realdata.show {
   opacity: 1;
   transform: translateX(0) rotate(0deg);
 }

 .calculator-slides {
   position: relative;
   height: 300px;
   overflow: visible;
   display: block;
   bottom: 25px;
   top: 223px;
   display: block;
 }

 .calculator-slides .boxwhite {
   position: absolute;
   left: 30%;
   width: 100%;
   top: -50%;
   opacity: 1;
   transform: translateX(-50%) scale(0.95);
   transition: all 0.5s ease;
 }

 .calculator-slides .boxwhite.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
 }

 .thirdSec-slider {
   display: flex;
   transition: transform 0.6s ease;
   width: 200%;
   /* if 2 slides (increase for more) */
 }

 .third-inner-slide {
   justify-content: flex-start;
   display: flex;
   width: 100vw;
   align-items: center;
 }

 .third-inner-slide.active {
   left: 0;
   opacity: 1;
 }

 .thirdSec-slider {
   display: flex;
   transition: transform 0.6s ease;
   width: 200%;
   /* if 2 slides (increase for more) */
 }

 .third-inner-slide {
   justify-content: flex-start;
   display: flex;
   width: 100vw;
   align-items: center;
 }

 .third-inner-slide.active {
   left: 0;
   opacity: 1;
 }

 .fixednav {
   position: fixed;
   z-index: 999;
   bottom: 5%;
   width: 100%;
   margin: auto;
   max-width: 630px;
   text-align: center;
   left: 50%;
   transform: translate(-50%, 0px);
 }

 .fixednav ul {
   list-style: none;
   display: flex;
   gap: 50px;
   padding: 10px 22px;
   border: solid 1px #0079ff;
   border-radius: 20px;
   background: #0079ff;
 }

 .fixednav ul li a {
   text-decoration: none;
   color: #fff;
   white-space: nowrap;
 }

 .demoText {
   float: inline-end;
 }

 .demoText ul {
   list-style: none;
   display: flex;
   gap: 22px;
 }

 .demoText ul li {
   display: flex;
   gap: 22px;
 }

 .demoText ul li .demoText {
   background: #fff;
   color: #0075fa;
   text-decoration: none;
   padding: 10px 25px;
   border-radius: 50px;
   border: solid 1px;
   white-space: nowrap;
   font-size: 15px;
 }

 .demoText ul li .demoText2 {
   background: none;
   color: #fff;
   text-decoration: none;
   padding: 10px 25px;
   border-radius: 50px;
   border: solid 1px;
   white-space: nowrap;
   font-size: 15px;
 }

 .scrollTo {
     /* position: absolute; */
    /* bottom: 10px; */
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 .scrollTo img {
   width: 20px;
 }

 .scrollTo span {
   color: #fff;
 }

 .textCenterVal {
   padding: 12% 14%;
   width: 100%;
   margin: auto;
 }

 .textCenterVal h1 {
   font-size: 76px;
   font-weight: 600;
   color: #0079ff;
 }

 .cardBg {
   text-align: center;
   padding: 19px;
   line-height: 0px;
   /* background: #C3DFFF; */
   border-radius: 10px;
   color: #0079ff;
   font-size: 22px;
   margin: 25px 0;
 }

 .cardBg h5 {
   font-size: 45px;
   font-weight: 700;
 }

 .cardSec .card-text {
   font-size: 14px;
   line-height: 20px;
 }

 .cardSec a {
   font-size: 13px;
   line-height: 20px;
   text-decoration: none;
 }

 .bgbadge {
   background: #c3dfff;
   border: solid 1px #79b9ff;
   color: #79b9ff;
   border-radius: 20px;
   width: auto;
 }

 .hideSec,
 .hideSecCard {
   display: none;
 }

 .backgroundTheme {
   background: #00338e;
 }

 .demotext {
   display: flex;
   margin: 12% 19%;
   text-align: center;
   gap: 23px;
 }

 .demotext h1 {
   font-size: 55px;
   color: #fff;
 }

 .demotext button {
   background: #fee7d2;
   border-radius: 50px;
   width: 148px;
   /* padding: 7px; */
   height: 44px;
   margin-top: 14px;
 }

 .demotext button:hover {
   background: #fee7d2;
   border-radius: 50px;
 }

 .textTheme {
   font-size: 25px;
   font-weight: 700;
   color: #00338e;
 }

 .healthSec h4 {
   font-size: 70px;
   line-height: 70px;
   font-weight: 700;
   margin-top: 75px;
 }

 .healthSec p {
   font-size: 30px;
 }

 .healthSec img {
   max-width: 38%;
   margin: 45px 0;
 }

 .btnLock {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }

 .texttesti {
   width: 200px;
 }

 .translateYsec {
   /* transform: translateY(30%); */
 }

 .textLigth {
   color: #929292;
   font-size: 13px;
 }

 .paddingTop h2 {
   color: #0079ff;
   font-size: 70px;
 }

 .paddingTop h5 {
   color: #2f2f2f;
   font-size: 35px;
 }

 .cardBorder {
   border-color: #00338e;
 }

 .customArrow {
   appearance: none;
   /* Remove default arrow */
   -webkit-appearance: none;
   -moz-appearance: none;
   background: url("../images/dropDown.svg") no-repeat center;
   background-size: 23px;
   background-repeat: no-repeat;
   background-position: right 3px top 5px;
   color: #00000087;
 }

 .vitaliocalculator {
   /* transform: translateY(41%); */
 }

 .teamSec {
   padding: 1% 37%;
 }

 .demoReq {
   text-decoration: none;
   color: #00338e;
   background: #fee7d2;
   padding: 10px 20px;
   border-radius: 50px;
   cursor: pointer;
 }

 .aboutText h1 {
   font-size: 75px;
   font-weight: 700;
   margin-top: 16px;
 }

 .ourteam {
   text-decoration: none;
   color: #00338e;
   background: #9ed6e0;
   padding: 10px 20px;
   border-radius: 50px;
   cursor: pointer;
 }

 .demoReq:hover,
 .ourteam:hover {
   background: #9eb6e3;
   color: #fff;
 }

 .reading h3 {
   color: #9ed6e0;
   font-size: 30px;
 }

 .cusStory {
   text-decoration: none;
   padding: 5px 10px;
   border: solid 1px #fff;
   font-size: 14px;
   border-radius: 50px;
 }

 .paratext p {
   font-size: 20px;
 }

 .paddingBig {
   padding: 44px;
   margin: 0 2%;
 }

 .profileImg {
   width: 23%;
 }

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

 .contentPro {
   font-size: 14px;
   line-height: 6px;
   margin: 0 4px;
   text-align: left;
 }

 .reviewCotent {
   font-size: 13px;
   line-height: 0px;
   padding: 20px;
 }

 .reviewCotent h5 {
   color: #0079ff;
   font-weight: 600;
 }

 .stars {
   display: inline-block;
   /* allow width/height */
   width: 121px;
   height: 24px;
   background-image: url("../images/Star.svg");
   background-repeat: repeat-x;
   /* repeat horizontally */
   background-size: 24px 24px;
   /* size of each star */
   background-position: left center;
 }

 .verified {
   background: #00338e;
   border-radius: 50px;
   padding: 4px 23px;
   text-decoration: none;
   color: #fff;
   font-size: 13px;
 }

 .desig {
   color: #0079ff;
   font-weight: 600;
 }

 .teamSec a {
   text-decoration: none;
   color: #00308b;
 }

 .evenSch {
   text-decoration: none;
   color: #00338e;
   background: #fee7d2;
   border-color: #00338e;
   padding: 10px 20px;
   border-radius: 50px;
   cursor: pointer;
   font-weight: 600;
   display: flex;
   gap: 17px;
   font-weight: 600;
 }

 .evenSch:hover {
   background: #9eb6e3;
   color: #00338e;
 }

 .craditser {
    display: flex;
    gap: 4%;
    margin: 2% 24%;
    color: #212529;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
 }

 .radiousBtm {
   border-radius: 0 0 45px 45px;
 }

 .contactus h3 {
   color: #ffffff80;
   margin: 10px 0;
 }

 .contactus ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .contactus ul li {
   font-size: 14px;
 }

 .contactus ul li a {
   text-decoration: none;
   color: #fff;
 }

 .playstore {
   margin-top: 20%;
 }

 .cronicVal {
   padding: 6% 14%;
   width: 100%;
 }

 .cronicVal h1 {
   font-size: 40px;
   font-weight: 600;
   color: #fff;
 }

 /* .card-wrapper {
   opacity: 1;
   transform: translateY(140px);
 } */

 /* When visible */
 /* .card-wrapper.show {
   opacity: 1;
   transform: translateY(0);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 } */

 .aboutText2 h1 {
   font-size: 75px;
 }

 .scrollCard {
   margin-top: 5%;
 }

 .aboutText2 {
   margin-bottom: 5%;
 }

 .schText {
   color: #9ed6e0;
 }

 .demoForm {
   padding: 0 6%;
 }

 .demoForm input {
   font-size: 14px;
   height: 42px;
   margin: 11px 0;
 }

 .demoForm label {
   font-size: 13px;
 }

 .demoForm button,
 .demoForm button:hover {
   border: solid 1px #fff;
   color: #fff;
   border-radius: 50px;
   width: 144px;
   margin: 14px 0;
 }

 .experEnc {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .experEnc li {
   display: flex;
   gap: 7px;
   margin-bottom: 25px;
 }

 .experEnc li .bgImg {
   background: #fff;
   width: 36px;
   padding: -1px;
   border-radius: 6px;
 }

 .experEnc li span {
   font-size: 13px;
   line-height: 10px;
 }

 .experEnc li span h6 {
   font-size: 17px;
 }

 .paddingRight {
   padding-right: 10%;
 }

 /* transtions */

 /* .textScaleout {
   display: block;
   transform: scale(1.5);
   opacity: 1;
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .textScalein {
   display: block;
   transform: scale(0.8);
   opacity: 1;
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .textScaleout.scallOut {
   transform: scale(1.2);
   opacity: 1;
 }

 .textScalein.scallIn {
   transform: scale(1.2);
   opacity: 1;
   transition-delay: 0.3s;
    
 } */

 /* .calulatorLeft{
    opacity: 0;
    transform: translateX(-100%) scale(0.95);
    transition: all 0.8s ease;
}
.calulatorRight{
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    transition: all 0.8s ease;
} */
 /* .calulatorLeft, .calulatorRight{
    opacity: 1;
    transform: translateY(25%);
} */
 .btnBottomSec {
   opacity: 0;
   transform: translateY(100%) scale(0.95);
   transition: all 0.8s ease;
 }

 .btnBottomSec.scaleUP {
   opacity: 1;
   transform: translateX(0%) scale(0.95);
 }

 .scallOutZoom {
   display: block;
   /* opacity: 0.5;
    transform: translateY(-93%) scale(2);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; */
 }

 .scallInZoom {
   display: block;
   opacity: 1;
   transform: translateY(-20%) scale(0.8);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .calPush {
   display: block;
   opacity: 1;
   transform: translateY(-11%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .calshiftTop {
   display: block;
   opacity: 1;
   transform: translateY(-72%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .shiftRate {
   display: block;
   opacity: 1;
   transform: translateY(-189%) scale(0.8);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .showImportant {
   display: block !important;
 }

 .shifContainer {
   margin-top: 0 !important;
   border-radius: 0;
 }

 .t-slide {
   opacity: 1;
   transition: all 0.4s ease;
 }

 .t-slide.active {
   opacity: 1;
   z-index: 10;
   transform: scale(1.05);
 }

 .t-slide.active .testimonial-cards {
   transform: rotate(0deg) skew(0deg);
 }

 .hilightBtn {
   background: #002b5b;
 }

 .shiftLefts {
   display: block;
   opacity: 1;
   transform: translateX(50%) scale(1.2);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .shiftRights {
   display: block;
   opacity: 1;
   transform: translateX(50%) scale(1.2);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .leftTo {
   opacity: 1;
   transform: translateX(50%) scale(1);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .textScreen {
   opacity: 1;
   transform: scale(2) translateX(-173px) translateY(190px) !important;
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .leftSection {
   width: 100% !important;
   transform: translateX(60%) scale(0.9);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .rightSection {
   width: 100% !important;
   transform: translateX(-40%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToUp {
   width: 100% !important;
   transform: translateY(-24%) scale(0.9);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrllCard {
   transform: translateY(-24%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToSecr {
   transform: translateY(-34%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToSecrdown {
   transform: translateY(0%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToSecp {
   transform: translateY(-24%) scale(0.9);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToPack {
   transform: translateY(-18%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 /* .scrollUP {
  transform: translateY(-350%);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
.scrollUPCal {
  transform: translateY(-18%);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
} */
 .cardGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   /* 2 cards per row */
   gap: 20px;
   /* spacing between cards */
   padding: 1% 10%;
 }

 .cardGrids {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   /* 2 cards per row */
   gap: 20px;
   /* spacing between cards */
   padding: 1% 0%;
 }

 .numerCount {
   color: #9ed6e0;
   font-size: 70px;
   font-weight: 700;
 }

 .headingSec {
   margin-top: 20px;
   line-height: 10px;
 }

 .subtitle {
   color: #9ed6e0;
   font-size: 13px;
 }

 .griddf {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
 }

 .listSec {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
   color: #fff;
   font-size: 18px;
   line-height: 40px;
 }

 .listSec li img {
   margin-right: 10px;
 }

 .cardSlid {
   background: none;
   border: solid 1px #fff;
   border-radius: 10px;
   padding: 2% 7%;
   margin: 0 8%;
 }

 /* .scrollSec {
  display: none;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
} */

 /* .scrollSec.active {
  display: flex; 
  opacity: 1;
  transform: translateY(0);
} */

 .textcard {
   font-size: 22px;
   margin-top: 10px;
 }

 .cardsec ul {
   list-style: none;
   /* display: flex; */
   gap: 24px;
   padding: 0;
   margin: 0;
   justify-content: space-around;
 }

 .cardsec {
   margin-top: 7%;
 }

 .cardItem {
   background-color: #fee7d2;
   border-radius: 10px;
 }

 .cardItem h1 {
   color: #00338e;
   font-size: 70px;
 }

 .cardItem h6 {
   font-size: 20px;
   color: #00338e;
   font-weight: 600;
 }

 .cardItem .card {
   padding: 20px 10px;
   background: none;
   border: none;
 }


 .cardItem p {
   color: #00338e;
 }

 .marginPage {
   margin: 13% 0px;
 }

 .textTheme1 {
   color: #0079ff !important;
 }

 .borderBtn {
   border: #00308b solid 1px;
 }

 .startCal {
   display: flex;
   justify-content: center
 }

 .startCal a {
   text-decoration: none;
   color: #fff;
   background: #0079ff;
   border-radius: 50px;
   padding: 15px 30px;
 }

 .startCal img {
   margin-left: 2%;
 }

 .startcal {
   background: #0079ff;
   border-radius: 50px;
   padding: 10px 20px;
   text-align: center;
   font-size: 16px;
   font-weight: 600;
 }

 .startcal a {
   text-decoration: none;
   color: #fff;
 }

 .bgcard {
   background: #00338e;
   /* margin: 5% 20%; */
   padding: 11px 21px;
 }

 .bgLaptp {
   background: url(../images/whiteScreen.png) no-repeat;
   background-size: 493px;
   padding: 11px 0px 31px 126px;
   background-position-y: center;
   background-position-x: 68px;
   position: absolute;
   right: 0px;
 }

 .fs-13 {
   font-size: 13px;
 }

 .bgLaptp img {
   width: 379px;
   height: 238px;
 }

 .vitalio-calulator-cl {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin-bottom: 5px;
   border-radius: 20px;
   padding: 0;
 }

 /* .calulatorLeft,
.calulatorRight {
  opacity: 0;
  transition: all 0.8s ease-in-out;
  position: relative;
} */

 /* Left one starts from left */
 /* .calulatorLeft {
  transform: translateX(-100%);
} */

 /* Right one starts from right */
 /* .calulatorRight {
  transform: translateX(100%);
} */

 /* When visible, both come to center */
 /* .calulatorLeft.active,
.calulatorRight.active {
  transform: translateX(0);
  opacity: 1;
} */
/* 
 .dataleft,
 .dataright {
   opacity: 0;
   transition: all 0.8s ease-in-out;
   position: relative;
 }

 /* Left one starts from left */
 /* .dataleft {
   transform: translateX(-100%);
 } */

 /* Right one starts from right */
 /* .dataright {
   transform: translateX(100%);
 } */

 /* When visible, both come to center */
 /* .dataleft.active,
 .dataright.active {
   transform: translateX(0);
   opacity: 1;
 }  */

 .cardgray {
   background: #eef4ff;
   margin: 10px 0;
   border-radius: 8px;
   line-height: 0;
   padding: 19px;
   width: 100%;
 }

 .cardgray h1 {
   color: #00338e;
   font-size: 31px;
 }

 .cardgray h5 {
   color: #00338e;
   font-size: 20px;
 }

 .cardgray span {
   color: #00338e;
   font-size: 13px;
 }

 .lssec {
   background: #fdfdfd !important;
   /* border-radius: 50px 50px 0px 0px; */
   padding: 17px;
   /* transform: translateY(70%); */
 }

 .scrollTo1 {
   transform: translateY(-68%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollTo2 {
   transform: translateY(-35%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
   height: 70vh;
 }

 .advanceBtn {
   text-decoration: none;
   background: #fff;
   border-radius: 50px;
   border: solid 1px #0075fa;
   padding: 6px 25px;
 }

 .countData h2 {
   font-size: 75px !important;
   padding: 14% 0;
   color: #0079ff;
 }

 .boxSec {
   background: #5b8be2;
   border-radius: 20px;
   padding: 20px;
   height: 50vh;
 }

 .mission-in {
    justify-content: space-between;
    gap: 58px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 1% 0%;
 }

 .expper {
   border: solid 1px #5574ad;
   padding: 2px 15px;
   border-radius: 50px;
   color: #5574ad;
   font-size: 13px;
   white-space: nowrap;
 }

 .prosec {
   line-height: 35px;
 }

 .prosec img {
   width: 50px;
 }

 .ketAchive {
   padding: 15px;
   border-radius: 10px;
   border: solid 1px #e0e0e0;
 }

 /* .scrollLeader{
  margin-top: 10%;
} */
 .scrollLeaderup {
   transform: translateY(-31%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .scrollToLaderdown {
   transform: translateY(-40%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 /* .scrollTextoTop{
transform: translateY(-40%);
transition: transform 0.8s 
ease-out, opacity 0.8s 
ease-out;
} */
 .AwardsSec {
   list-style: none;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-gap: 25px;
 }

 .card-slides {
   list-style: none;
   padding: 0;
 }

 .AwardsSec .card {
   max-height: 314px;
   height: 350px;
   background: none;
   border-radius: 20px;
 }

 #section4 .AwardsSec {
   position: relative;
 }

 #section4 .AwardsSec li {
   opacity: 1;
   /* transform: translateY(50px) scale(0.95); */
   transition: all 0.6s ease;
   /* position: absolute; */
   border-radius: 20px;
   top: 0;
   width: 100%;
   background: #fff;
 }

 .AwardsSec h4 {
   font-size: 21px !important;
 }

 #section4 .AwardsSec li.active {
   opacity: 1;
   transform: translateY(0) scale(1);
 }

 /* .awarsSection {
  margin-top: -23%;
} */
 .groupBtn {
   /* padding: 0 33%; */
 }

 .demoRequest {
   background: #fee7d2;
   text-decoration: none;
   padding: 4px 20px;
   border-radius: 50px;
   color: #00338e;
   border: solid 1px #00338e;
   white-space: nowrap;
 }

 .contactTeam {
   background: #9ed6e0;
   text-decoration: none;
   padding: 7px 20px;
   border-radius: 50px;
   color: #00338e;
   white-space: nowrap;
 }

 .approachSec {
   padding: 10px;
 }

 .aboutcard-in {
   display: flex;
   gap: 30px;
   justify-content: center;
 }

 #myForm {
   margin: auto;
   padding: 0;
   max-width: 384px;
 }

 .higherct {
   flex-wrap: wrap;
 }

 .higherct h6 {
   font-size: 14px;
 }

 .higherct h4 {
   font-size: 19px;
 }

 .trasfoemSec {
   border-radius: 20px;
   height: 84vh;
   margin: auto;
   padding-bottom: 20px;
   padding: 10% 0;
 }

 .card-slides {
   position: relative;
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
   grid-gap: 25px;
 }

 ul.card-slides.productivity {
    max-width: 80%;
    margin: 50px auto;
    padding: 20px;
 }

 .card-slides li {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 1;
   /* transform: scale(0.9);
   transition: all 0.5s ease; */
   z-index: 0;
   border-radius: 20px;
   border: solid 1px #2f59d1;
 }

 .card-slides li .card {
   /* background: none; */
   border: none;
 }

 .card-slides li.active {
   opacity: 1;
   transform: scale(1);
   z-index: 10;
 }

 .moveRoisec {
   transform: translateY(-60%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
 }

 .card-slides {
   /* margin: 0 27.5%; */
 }

 /* calulater */

 .error-message {
   color: #ef4444;
   font-size: 0.75rem;
   margin-top: 4px;
   display: none;
 }

 .costValue {
   font-size: 50px;
   font-weight: 700;
 }

 .howwit {
   padding: 50px 10px;
 }

 .vitt4 {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 25px;
   justify-content: space-between;
 }


 .twop input::placeholder,
 .customArrow select::placeholder {
   color: #fff;
   /* placeholder color */
   font-size: 14px;
   /* placeholder text size */
   font-style: italic;
   /* italic style */
   font-weight: 500;
   /* medium weight */
   letter-spacing: 0.5px;
   /* spacing between letters */
   opacity: 1;
   /* make sure it's fully visible */
 }

 html {
   scroll-behavior: smooth;
 }





 /* Reset UL default styles */
 .card-slides {
   list-style: none;
   margin: 0;
   padding: 0;

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
   gap: 20px;
 }

 /* Card style */
 .card-slides .card {
   border-radius: 16px;
   color: white;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
   overflow: hidden;
 }

 /* Card body */
 .card-slides .card-body {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 15px;
   padding: 20px;
 }

 /* Text section */
 .card-slides .card-body span:first-child {
   flex: 1;
   min-width: 0;
   /* avoid overflow */
 }

 /* Image span */
 .card-slides .bgLaptp img {
   max-width: 376px;
       height: 241px;
 }
  .calsize{
    height: 100% !important;
  }
 /* Typography adjustments */
 .card-slides p.fs-13 {
   font-size: 0.85rem;
   line-height: 1.4;
 }

 /* Responsive tweaks */
 @media (max-width: 992px) {
   .card-slides {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   }

   .card-slides .bgLaptp img {
     max-width: 80px;
   }
 }

 @media (max-width: 576px) {
   .card-slides .card-body {
     flex-direction: column;
     text-align: center;
   }

   .card-slides .bgLaptp img {
     max-width: 60px;
     margin-top: 10px;
   }

   .card-slides h2 {
     font-size: 1.4rem;
   }

   .card-slides p.fs-13 {
     font-size: 0.8rem;
   }
 }

 .backScreen {
   background: url('../images/whiteScreen.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }

 .lessTime {
   font-size: 12px;
 }

 .cardGridindex {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding: 1% 10%;
 }
   .awardmediamain {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
 
    .awardmedia {
      background: #00338e;
      flex: 1;
    }
 
    .awardmedia img {
      padding: 5px;
      border-radius: 16px;
      height: 385px;
    }
	.btnSubmit:focus-visible{
    border-color: #fff;
    color: #fff;
 }
 .onboardimg img {
    max-height: 150px;
    height: 100%;
    margin: 15px;
}

.awardmedia img {
  width: 100%;
  height: auto;
  display: block;
}
.owl-nav button {
  background: #000;
  color: #fff;
  border-radius: 50%;
  padding: 5px 10px;
}
/* .videoBox{
      border-radius: 66px;
    background: #000;
    border: solid 10px;
        height: 89vh;
} */
.videoBox .video-js{
      min-height: 87vh;
          height: 84vh !important;
    border-radius: 50px;
}
.videoBox .vjs-control-bar{
      display: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #2B333F;
     background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-tech{
  top: 16px;
}
.video-js .vjs-tech{
  height: 86vh !important;
}
.sectionHeading{
      color: #0079ff;
    font-size: 70px;
}
.paddingSec10{
padding: 15% 0;
}
.customHight{
  height: 100% !important;
}
.videoOverLay{

}

/* .card-slides.productivity {
  position: relative;
}

.card-slides.productivity li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;
} */