/* == SECTION 1: FINTECH QR ANIMATION == */

 .qr-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: #fff 4px solid;
  border-radius: 20%;
 }
.qr-section {
  
  position: relative;
  color: #fff;
  overflow: hidden;
}

 .qr-container {
 
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   
 }

 .qr-holder {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }


 .scroll-box {
   position: relative;
   background: #a8bdff37;
   border-radius: 40px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 0;
   height: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 1s ease;
 }

 .scroll-box.grow {
   width: 1000px;
   height: 600px;
   opacity: 1;
 }

 .sec-cards-wrapper {
   display: flex;
   width: fit-content;
 }

.sec-card {
  flex: 0 0 auto;
  width: 1000px;
  padding: 20px;
  margin: 0 10px;
  text-align: center;
}

.sec-card img {
  max-width: 550px;
  max-height: 550px;
  min-width: 340px;
  min-height: 340px;
  
  display: block;
  margin:  -80px auto;
  
}

.sec-card p {
  font-size: 30px;
  font-weight: 600;
  margin-top: -190px;
}


 /* == SECTION 2: INFINITE CAROUSELS == */
 .carousel-row {
   width: 100vw;
   overflow: hidden;
   margin: 40px 0;
 }

 .carousel-track {

   display: flex;
   gap: 24px;
   will-change: transform;
   animation: scroll-left 40s linear infinite;

 }

 .carousel-row.middle .carousel-track {
   animation: scroll-right 45s linear infinite;
 }

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

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

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

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


 /* == SECTION 3: STACKING CARDS == */


 

 #stacked-section {
  background: linear-gradient(-45deg, #e0f8f8, #f0f0ff, #f8e0f8, #f0f0ff, #e0f8f8);
    background-size: 400% 400%;
   color: beige;
   text-align: center;
   padding: 60px 0 100px;
   position: relative;
   z-index: 1;
 }

 #stacked-section header,
 #stacked-section main {
   width: 60vw;
   margin: auto;
 }

 #stacked-section header {
   display: grid;
   place-items: center;
   margin-bottom: 80px;
 }

 #stacked-list {
   list-style: none;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 4 , 40vw;
   gap: 4vw;
   padding-bottom: calc(4 * 1em);
   margin-bottom: 4vw;
 }

 #item-1 {
   --index: 1;
 }

 #item-2 {
   --index: 2;
 }

 #item-3 {
   --index: 3;
 }

 #item-4 {
   --index: 4;
 }
  #item-5 {
   --index: 5;
 }
  #item-6 {
   --index: 6;
 }
  #item-7 {
   --index: 7;
 }
  #item-8 {
   --index: 8;
 }
  #item-9 {
   --index: 9;
 }
  #item-10 {
   --index: 10;
 }
  #item-11 {
   --index: 11;
 }
  #item-12 {
   --index: 12;
 }

 .stacked-item {
   position: sticky;
   top: 0;
   padding-top: calc(var(--index) * 1em);
 }

 .stacked-item-content {
   background: #ffffff;
   color: #c358a8;
   border-radius: 2rem;
   overflow: hidden;
   display: grid;
   border: 1px solid #000;
   grid-template-areas: "text img";
   grid-template-columns: 1fr 1fr;
   align-items: center;
   padding: 1.4em;
   text-align: start;
   /* box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1); */
   will-change: transform;
 }

 .stacked-item-content>div {
   /* grid-area: text;
   place-self: center start;
   padding-right: 1em; */
       /* grid-area: auto; */
           padding-left: 20px;
 }

 .stacked-item-content img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0.4em;
 }

 #stacked-section h1 {
   font-weight: 300;
   font-size: 3rem;
   margin-bottom: 1rem;
 }

 #stacked-section h2 {
   font-weight: bold;
   font-size: 2rem;
   margin: 0;
 }

 #stacked-section p {
  margin-top: 30px;
   font-weight: 300;
   line-height: 1.42;
   font-size: 1.1rem;
   color: #000;
 }

 .scarouel-row {
   margin-top: 50px;
 }


 @supports (animation-timeline: works) {
   @scroll-timeline striped {
     source: selector(body);
     scroll-offsets: selector(#stacked-list) start 1,
       selector(#stacked-list) start 0;
     start: selector(#stacked-list) start 1;
     end: selector(#stacked-list) start 0;
     time-range: 4s;
   }

   .stacked-item {
     --idx0: calc(var(--index)-1);
     --rev-idx: calc(var(4)-var(--idx0));
     --rev-idx0: calc(var(--rev-idx)-1);
   }

   .stacked-item-content {
     animation: calc(var(--rev-idx0) * 1s) linear scaleYcalc var(--idx0) * 1s forwards;
     animation-timeline: striped;
   }

   @keyframes scaleYcalc {
     to {
       transform: scale(calc(1.1 - 0.1 * var(--rev-idx)));
     }
   }
 }



 
 
 /* == SECTION 2: INFINITE CAROUSELS == */
 /* .carousel-row {
   width: 100vw;
   overflow: hidden;
   margin: 40px 0;
 }

 .carousel-track {

   display: flex;
   gap: 24px;
   will-change: transform;
   animation: scroll-left 40s linear infinite;

 }

 .carousel-row.middle .carousel-track {
   animation: scroll-right 45s linear infinite;
 }

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

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

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

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

 .fingertips-section-title {
    text-align: center;
    font-size: 50px; 
    font-weight: 600;
    background: linear-gradient(90deg, #001aff, #ff5e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 15px;
    margin-bottom: 40px;
}
  

 .fingertips-carousel-row {
    width: 100%; 
    overflow: hidden; 
    margin: 40px 0; 
    white-space: nowrap; 

   
    transform: translateZ(0); 
    -webkit-transform: translateZ(0); 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
}

.fingertips-carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0); 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    animation: scroll-left 80s linear infinite; 
}

/* Reverse direction for middle row */
.fingertips-carousel-row.middle .fingertips-carousel-track {
    animation: scroll-right 90s linear infinite;
}


/* --- Keyframe Animations (Crucial for Infinite Scroll) --- */
@keyframes scroll-left {
    0% {
        transform: translateX(0) translateZ(0); 
        -webkit-transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-50%) translateZ(0); 
        -webkit-transform: translateX(-50%) translateZ(0);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%) translateZ(0);
        -webkit-transform: translateX(-50%) translateZ(0);
    }
    100% {
        transform: translateX(0) translateZ(0);
        -webkit-transform: translateX(0) translateZ(0);
    }
}

.fingertips-service-card {
    flex-shrink: 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 200px;
    height: 120px; 
    text-align: center;
    transition: transform 0.2s ease-in-out; 
}

.fingertips-service-card:hover {
    transform: translateY(-5px) scale(1.03); 
}

.fingertips-service-card i {
    font-size: 2.5rem; 
    margin-bottom: 10px;
    background: linear-gradient(90deg, #001aff, #ff5e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   width: 300px;
}

.fingertips-service-card .label {
    font-size: 0.9rem;
    font-weight: 500;
    background: linear-gradient(90deg, #001aff, #eb1111);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: normal; 
}


 .service-card {
   width: 300px;
   height: 120px;
   border: #333 1px solid;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   box-sizing: border-box;
   padding: 10px;
 }

  .service-card i {
   font-size: 28px;
       background: linear-gradient(90deg, #001aff, #ff5e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   width: 300px;
   margin-bottom: 6px;
 }

 
 .service-card .label {
      font-size: 18px;
   display: block;
    background: linear-gradient(90deg, #001aff, #eb1111);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   

 }


 /* == SECTION 2: INFINITE CAROUSELS == */
 .carousel-row {
   width: 100vw;
   overflow: hidden;
   margin: 40px 0;
 }

 .carousel-track {

   display: flex;
   gap: 24px;
   will-change: transform;
   animation: scroll-left 40s linear infinite;

 }

 .carousel-row.middle .carousel-track {
   animation: scroll-right 45s linear infinite;
 }

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

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

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

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


.landing_section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

.two-column-section {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.content-column {
  flex: 1;
  max-width: 400px;
}

.image-column {
  flex: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.image-column img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

 .btn-primary2 {
   display: inline-block;
   padding: 12px 30px;
   background-color: #0052cc;
   color: #fff;
   text-decoration: none;
   border-radius: 6px;
   margin-top: 20px;
 }

 /*** Features End ***/
 .services-section {
   display: flex;
   gap: 20px;
   justify-content: center;
   flex-wrap: wrap;
   
 }

 .service-box {
   position: relative;
   width: 350px;
   padding: 20px;
   background: #fff;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   border-radius: 12px;
   text-align: center;
   overflow: hidden;
 }

 .service-box:hover {
   background: #f7f7f8;
   transform: translateY(-15px);
 }

 .service-box img {
   width: 100%;
   min-height: 250px;
   max-height: 250px;
   object-fit: cover;
   border-radius: 10px;
 }

 .service-box h3 {
  font-weight: bold;
   margin-top: 18px;
   font-size: 1.5rem;
   color: #181818;
 }

 .service-box p {
   margin-top: 10px;
   color: #555;
   font-size: 1rem;
 }

 .arrow-icon {
   position: absolute;
   bottom: 15px;
   right: 15px;
   font-size: 20px;

 }

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

 .service-box:hover .arrow-icon i {
   transform: translateX(5px);
 }




.subtle-gradient-section {
 background: 
    radial-gradient(circle at top left, #fff 20%, transparent 50%),
    radial-gradient(circle at top right, #fff 20%, transparent 50%),
    radial-gradient(circle at bottom left, #fff 20%, transparent 50%),
    radial-gradient(circle at bottom right, #fff 20%, transparent 50%),
    linear-gradient(270deg,
      #fac0b4, #b3c6f9, #dcffc5,
      #b3eacc, #fdced9, #bdf6ff, #ffbfb2
    );
  background-blend-mode: lighten, lighten, lighten, lighten, normal;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1400% 1400%;
  background-position: center;
  
  /* Animate only the colorful linear gradient layer */
  animation: move-bg 18s ease-in-out infinite;
}

@keyframes move-bg {
  0% {
    background-position: center, center, center, center,   0% 50%;
  }
  50% {
    background-position: center, center, center, center, 100% 50%;
  }
  100% {
    background-position: center, center, center, center,   0% 50%;
  }
}

.downlaod-btn-all .qube .front::before, .downlaod-btn-all {
position: absolute;
  right: 0;
  bottom: 2px;
}


.full, .downlaod-btn-all .qube .front::before, .downlaod-btn-all .qube .front, .downlaod-btn-all .qube .back {
  width: 100%;
  height: 100%;
}

.downlaod-btn-all {
  /* width: 205px; */
    height: 41px;
  margin-top: 130px;
  perspective: 1800px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.downlaod-btn-all .qube {
  position: relative;
  height: 60px;
  width: 185px;
  perspective: 1800px;
}
.downlaod-btn-all .qube .front, .downlaod-btn-all .qube .back {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: rotateX(-90deg);
  transition: transform 0.3s ease;
  position: absolute;
  color: #FFF;
  line-height: 60px;
  text-align: center;
}
.downlaod-btn-all .qube .front {
  background-color: #0053cc;

}
.downlaod-btn-all .qube .front::before {
  content: "";
  display: block;
  z-index: -1;
}
.downlaod-btn-all .qube .front::after {
  background: #FFF;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
}
.downlaod-btn-all .qube .back {
  background-color: #464a43;
  color: #ffff;
  transform: rotateX(0deg) translateZ(60px);
}
.downlaod-btn-all .qube:hover .front {
  transform: rotateX(0deg) translateZ(30px);
}
.downlaod-btn-all .qube:hover .back {
  transform: rotateX(90deg) translateZ(30px);
}
.downlaod-btn-all:active .front {
  border-radius: 0;
  background-color: transparent;
  color: #838384;
}
.downlaod-btn-all:active .front::before {
  background-color: #0052cc;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.downlaod-btn-all:active .front::after {
  left: 120%;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 767px) {
  #stacked-section header, #stacked-section main{
    width: unset;
    margin-right: 10px;
  }

  .stacked-item-content{
    height: 224px;
  }

  .stacked-item{
   padding-top: unset;
  }
}

@media (max-width: 575px) {
  .#stacked-list{
        gap: 3vw;
  }

    #stacked-section h2 {
        font-size: 20px !important;
    }

    .stacked-item-content {
               font-size: 16px !important;
    }
        #stacked-section p {
        font-size: 13px !important;
        }
     .stacked-item-content>div {
        padding-left: unset !important;
    }
}