html {
  scroll-behavior: smooth;
}
 
section,
[id] {
  scroll-margin-top: 120px; 
}

/* button */
.genix-btn-wrapper{
    position:relative;
}
.get-free-security-circle{
    
}

/* main button */

.genix-button{
    position:relative;
    width:150px;
    height:50px;
    background:#000;
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    overflow:hidden;
}
.genix-button a{
    color: #fff;
}
/* animated layers */

.genix-layer{
    position:absolute;
    width:160px;
    height:130px;
    top:-30px;
    left:-10px;
    transform:rotate(12deg) scaleX(0);
    transform-origin:left;
}

/* layer colors */

.genix-layer1{
    background:#ffffff;
    transition:transform 1s;
}

.genix-layer2{
       background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition:transform .7s;
}

.genix-layer3{
       background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition:transform .5s;
}

/* hover animation */

.genix-button:hover .genix-layer{
    transform:rotate(12deg) scaleX(1);
}

/* text animation */

.genix-text{
    position:absolute;
    top:14px;
    left:40px;
    opacity:0;
    transition:all 1s;
    z-index:2;
}

.genix-button:hover .genix-text{
    opacity:1;
}

/* home page about section */

/* @font-face {
    font-family: "Compressa";
    src: url("https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2");
} */

/* container */
.genix-mouse{
    width:100%;
    text-align:center;
}

/* title */
.genix-mouse-title{
    font-family:'Compressa';
    text-transform:uppercase;
    white-space:nowrap;
    font-size:100px;
    font-weight:100;
    color:#fff;
    user-select:none;
}

/* letters */
.genix-mouse-title span{
    display:inline-block;
    transition:opacity 0.2s;
}

/* api section */

.genix-architecture {
  width:100%;
  padding:80px 0;
  background:#050505;
}

.main-container{
display:flex;
justify-content:center;
align-items:center;
}

.loader{
width:100%;
/* max-width:900px; */
}

/* circuit background line */

.trace-bg{
stroke:#c6c6c677;
stroke-width:2;
fill:none;
}

/* animated data flow */

.trace-flow{
stroke-width:2;
fill:none;
stroke-dasharray:40 400;
stroke-dashoffset:438;
filter:drop-shadow(0 0 6px currentColor);
animation:flow 3s cubic-bezier(.5,0,.9,1) infinite;
}

/* colors */

.yellow{stroke:#ffea00;color:#ffea00;}
.blue{stroke:#00ccff;color:#00ccff;}
.green{stroke:#00ff95;color:#00ff95;}
.purple{stroke:#b100ff;color:#b100ff;}
.red{stroke:#ff3300;color:#ff3300;}

/* feature text */

.feature-text{
    fill: #ffffff;
    font-size: 14px;
    /* font-family: Arial; */
    letter-spacing: 0.5px;
    opacity: 1;
    z-index: 9999999999;
    font-weight: 800;
    text-transform: uppercase;
}

/* animation */

@keyframes flow{
to{
stroke-dashoffset:0;
}
}

.faq-ul li{
    color: #fff;
    margin:10px 0px;
}

/* industry slider */
.logo-slider-section{
position:relative;
padding: 60px 0;
background:#0f0f14;
overflow:hidden;
}

.logo-heading{
color:white;
font-size:34px;
font-weight:700;
margin-bottom:60px;
}

.logo-slider{
overflow:hidden;
position:relative;
}

.logo-track{
display:flex;
align-items:center;
gap:120px;
width:max-content;
animation:scroll 30s linear infinite;
}

.logo-item{
text-align:center;
flex-shrink:0;
}

.logo-item img{
height:75px;
display:block;
margin:auto;
transition:.3s;
}

.logo-item p{
margin-top:10px;
font-size:20px;
color:#ffffff;
opacity:.8;
text-transform: uppercase;
font-weight: 700;
}

.logo-item:hover img{
transform:scale(1.1);
}

.logo-slider:hover .logo-track{
animation-play-state:paused;
}
/* infinite animation */

@keyframes scroll{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
/* particle container */

.particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
z-index:1;
}

/* particle */

.particles span{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#00f7ff;

box-shadow:
0 0 10px #00f7ff,
0 0 20px #00f7ff,
0 0 40px #00f7ff;

animation:particleFloat linear infinite;
opacity:.5;
}

/* random particle positions */

.particles span:nth-child(1){left:5%; animation-duration:12s; animation-delay:0s;}
.particles span:nth-child(2){left:15%; animation-duration:10s; animation-delay:1s;}
.particles span:nth-child(3){left:25%; animation-duration:14s; animation-delay:2s;}
.particles span:nth-child(4){left:35%; animation-duration:11s; animation-delay:3s;}
.particles span:nth-child(5){left:45%; animation-duration:13s; animation-delay:2s;}
.particles span:nth-child(6){left:55%; animation-duration:9s; animation-delay:4s;}
.particles span:nth-child(7){left:65%; animation-duration:12s; animation-delay:1s;}
.particles span:nth-child(8){left:75%; animation-duration:10s; animation-delay:3s;}
.particles span:nth-child(9){left:85%; animation-duration:15s; animation-delay:2s;}
.particles span:nth-child(10){left:95%; animation-duration:11s; animation-delay:4s;}
.particles span:nth-child(11){left:50%; animation-duration:13s; animation-delay:1s;}
.particles span:nth-child(12){left:70%; animation-duration:12s; animation-delay:2s;}

/* movement animation */

@keyframes particleFloat{

0%{
transform:translateY(100px) translateX(0) scale(0.4);
opacity:0;
}

25%{
transform:translateY(0) translateX(40px);
opacity:1;
}

50%{
transform:translateY(-200px) translateX(-30px);
}

75%{
transform:translateY(-400px) translateX(20px);
}

100%{
transform:translateY(-700px) translateX(-40px) scale(1);
opacity:0;
}

}

.payment{
    background: var(--secondary-color);
}



/* api section new  */
 .phone {
            width: 300px;
            height: 500px;
            background: white;
            border-radius: 45px;
            padding: 12px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
            margin: auto;
        }

        .screen {
            width: 100%;
            height: 100%;
            background: #0d1117;
            border-radius: 35px;
            padding: 22px;
            box-sizing: border-box;
            overflow: hidden;
            font-size: 15px;
            position: relative;
            word-break: break-word;
        }

        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 130px;
            height: 24px;
            background: #0d1117;
            border-radius: 0 0 12px 12px;
        }

        .camera {
            width: 7px;
            height: 7px;
            background: #333;
            border-radius: 50%;
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* .header {
            margin-top: 18px;
            font-size: 16px;
            margin-bottom: 12px;
            color: white;
        } */

        .white {
            color: white;
            font-size: 12px;
        }

        .green {
            color: #00ff9c;
            font-size: 12px;
        }

        #terminal {
            white-space: pre-line;
            line-height: 1.5;
        }
        .api-logo{
            width: 125px;
        }
        




.api-section {
  position: relative;
  overflow: hidden;
  background: #0b0f1a;
}

/* ===== Gradient Background ===== */
.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    #0f2027,
    #1a2a6c,
    #203a43,
    #2c5364,
    #4e54c8,
    #8f94fb
  );
  background-size: 500% 500%;
  animation: gradientMove 14s ease infinite;
  z-index: 1;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* ===== Light Rays ===== */
.light-rays {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: repeating-linear-gradient(
    120deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 80px
  );
  animation: raysMove 18s linear infinite;
  filter: blur(50px);
  opacity: 0.5;
  z-index: 2;
}

@keyframes raysMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(-300px,-300px); }
}

/* ===== Glow Layer ===== */
.glow-layer {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,150,255,0.3), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(140,0,255,0.3), transparent 40%);
  filter: blur(80px);
  animation: glowMove 20s linear infinite;
  z-index: 3;
}

@keyframes glowMove {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ===== Content ===== */
.api-section .container {
  position: relative;
  z-index: 5;
}

/* Glass Effect */
.home-page-api-sec {
 background: rgb(0 0 0 / 41%);
  backdrop-filter: blur(15px);
  padding: 40px;
  border-radius: 20px;
}



        

.genix-home-services {
  padding: 100px 0;
  background: #fff;
}

/* LEFT */
.genix-vertical-tabs {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.genix-tab-link {
  padding: 10px 0;
  color: #666;
  text-decoration: none;
   font-size: 24px;
   margin-bottom: 1rem;
     font-weight: 500;
}

.genix-tab-link.active {
  color: #4D51AB;
  font-weight: 600;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

/* SLIDER */
.genix-tab-slider {
  position: absolute;
  left: 0;
  width: 3px;
  height: 30px;
  background: #4D51AB;
  transition: 0.3s;
}

/* RIGHT CONTENT */
.genix-parallax-wrapper {
  position: relative;
}

/* CARDS */
.genix-card {
  position: relative;
  margin-bottom: 80px;
  padding: 50px;
  border-radius: 20px;
  background-color: #e9f0fe;
  z-index: 1;
  overflow: hidden;
height: 500px;
  /* REMOVE OLD BORDER */
  border: none;

  opacity: 0;
  /* transform: translateY(100px) scale(0.9); */
}

/* ✅ FIXED CLASS NAME + NEW ROTATING BORDER */
.genix-card::before {
  content: "";
  position: absolute;
  inset: -2px; /* border thickness */
  border-radius: inherit;

  background: conic-gradient(
    from 0deg,
    #4d51ab,
    #55cee3,
    #e9f0fe,
    #4d51ab,
    #55cee3,
     #e9f0fe
  );
  animation: rotateBorder 20s linear infinite;
  z-index: -1;
  will-change: transform;
}
/* ✅ INNER CUT = ONLY BORDER VISIBLE */
.genix-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #e9f0fe;
  border-radius: inherit;
  z-index: -1;
}
/* ✅ TRUE 360 DEGREE SMOOTH ROTATION */
@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.steps-heading p {
    font-size:15px ;
}
.steps-inner-time{
        display: flex;
    justify-content: center;
    align-items: normal;
   /* background: linear-gradient(90.15deg, #4d51abe0 0%, #55cee34d 100%); */
   background-color: #e9f0fe;
    padding: 11px 0px !important;
    border-radius: 25px;
    /* color: white; */
    margin-bottom: 2rem;
}
.steps-inner-time i {
 color: #4d57ae;
 
}
.steps-icons-animated{
    display: flex;
    justify-content: center;
    align-items: center;
}
.steps-inner-time p {
    color: #4d57ae;
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
    margin-bottom: 0px;
}
.genix-card p {
  color: #000;
  text-align: justify;
}

/* subtle layering */
.genix-card:nth-child(odd) {
  transform: translateY(120px) scale(0.92);
}

.genix-card:nth-child(even) {
  transform: translateY(80px) scale(0.95);
}
.services-home-points {
    color: #000;
}
.genix-card h3{
  color: #4d51ab;
    margin-bottom: 1rem;
}
.services-home-points h2 {
    color: #000;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.services-home-points ul {
    list-style: none;
    padding-left: 0;
}

.services-home-points ul li {
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

/* Custom bullet icon */
.services-home-points ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #000000; /* accent color */
    font-size: 14px;
}

/* onboarding  css*/
/* .genix-onboarding-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.genix-onboarding-steps {
    display: flex;
    width: max-content;
} */
/* SECTION */
.genix-onboarding-section {
   position: relative;
    overflow: hidden;
    min-height: 100vh; /* ✅ allow expansion */
}

/* LEFT TEXT */
.genix-onboarding-text {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    background: #f5f6f8;
    z-index: 2;
}

.genix-onboarding-text h1 {
    font-size: 42px;
    font-weight: 700;
}
.genix-onboarding-steps-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.genix-onboarding-steps {
    display: flex;
    height: 100%;
}

.genix-onboarding-step {
    flex: 0 0 33.333vw; /* 🔥 use viewport width */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
    opacity: 0.5;
}

.genix-onboarding-step.active {
    opacity: 1;
    transform: scale(1.05);
}

/* .genix-onboarding-steps-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}


.genix-onboarding-steps {
    display: flex;
    height: 100%;
  
}


.genix-onboarding-step {
    min-width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
      position: relative;
} */

/* CARD */
/* CARD */
.genix-onboarding-card {
    position: relative;
    width: 350px;
    height: 380px;
    border-radius: 20px;
    background: #f5f6f8;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;

    opacity: 0.5;
    transform: scale(0.9);
    transition: 0.4s ease;

    border: none; /* remove old border */
    z-index: 1;
    overflow: hidden;
}

/* 🔥 ROTATING GRADIENT BORDER */
.genix-onboarding-card::before {
    content: "";
    position: absolute;
    inset: -2px; /* border thickness */
    border-radius: inherit;

    background: conic-gradient(
        from 0deg,
      #0895ec,
      #57e697,
      #0895ec,
      #57e697,
      #0895ec,
      #57e697
    );

    animation: rotateBorder 20s linear infinite;
    z-index: -1;
}

/* ✅ INNER CUT (SHOW ONLY BORDER) */
.genix-onboarding-card::after {
    content: "";
    position: absolute;
    inset: 2px; /* same as border thickness */
    background: #f5f6f8;
    border-radius: inherit;
    z-index: -1;
}

/* ✅ TRUE 360° ROTATION */
@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ACTIVE CARD */
.genix-onboarding-step.active .genix-onboarding-card{
    opacity: 1;
    transform: scale(1);
    /* background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 70%); */
     background: #e9f0fe;
     /* color: #fff; */
}

/* NUMBER */
.genix-onboarding-number {
    position: absolute;
    top: 180px;
    width: 120px;
    opacity: 0;
    transform: translateY(40px);
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.genix-onboarding-gif{
    width: 250px;
}
/* ACTIVE NUMBER */
.genix-onboarding-step.active .genix-onboarding-number {
    opacity: 1;
    transform: translateY(0);
}

.services-gif-home-card{
    display: flex;
    align-items: end;
    justify-content: end;
}
/* clients section */
.genix-clients {
    overflow: hidden;
    position: relative;
    padding: 80px 0;
    background: #e9f0fe;
}

.genix-clients-track {
    display: flex;
    width: calc(200px * 20); /* 10 logos duplicated */
    animation: genixScroll 25s linear infinite;
}

.genix-client-item {
    width: 300px;
    flex-shrink: 0;
    padding: 10px;
    text-align: center;
}

.genix-client-item img {
    max-width: 100%;
    height: 80px;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: 0.3s;
}

.genix-client-item img:hover {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* Animation */
@keyframes genixScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.genix-clients:hover .genix-clients-track {
    animation-play-state: paused;
}

/* about page css */
.about-banner {
    background-image: url(../images/genix/banner/about-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}
.matm-banner{
    background-image: url(../images/genix/banner/matm-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}
.bbps-banner{
    background-image: url(../images/genix/banner/bbps-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}
.erp-banner{
    background-image: url(../images/genix/banner/erp-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}
.pos-banner{
    background-image: url(../images/genix/banner/pos-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 

.hrms-banner{
    background-image: url(../images/genix/banner/hrms-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.task-banner{
    background-image: url(../images/genix/banner/task-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.eupi-banner{
    background-image: url(../images/genix/banner/eupi-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.payin-banner{
    background-image: url(../images/genix/banner/payin-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.payout-banner{
    background-image: url(../images/genix/banner/payout-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.genix-verify-banner{
    background-image: url(../images/genix/banner/genix-verify-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
} 
.contact-banner{
    background-image: url(../images/genix/banner/contact-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}
.policy-banner{
     background-image: url(../images/genix/banner/policy-banner.jpg);
    padding: 180px 0;
    background-repeat: no-repeat;
    background-position: center;
}

/* services inner page secion two */
.services-sec-two {
    background: #f8f9fb;
}
.services-inner-card .icon-box{
    width: 100px;
    height: 100px;
}
.services-inner-card .icon-box img {
    padding: 20px;
}
/* CARD */
.services-inner-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}
.services-inner-card h5{
    margin-bottom: 1rem;
}

/* HOVER EFFECT */
.services-inner-card:hover {
   background: linear-gradient(90.15deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    color: #fff;
    transform: translateY(-8px);
}

/* TEXT COLOR CHANGE ON HOVER */
.services-inner-card:hover h5,
.services-inner-card:hover p,
.services-inner-card:hover li {
    color: #fff;
}

/* SUBTEXT */
.sub-text {
    font-size: 14px;
    color: #6c757d;
    transition: 0.3s;
}

.services-inner-card:hover .sub-text {
    color: rgba(255,255,255,0.8);
}

/* ICON */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eef2ff;
    color: #3b5bdb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.services-inner-card:hover .icon-box {
    background: #fff;
    color: #3b5bdb;
}

/* LIST */
.services-inner-card ul {
    padding-left: 0;
    margin-top: 15px;
}

.services-inner-card ul li {
    list-style: none;
    font-size: 14px;
    margin-bottom: 8px;
    padding-left: 22px;
    position: relative;
    transition: 0.3s;
}

.services-inner-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0d6efd;
    font-size: 12px;
    transition: 0.3s;
}

.services-inner-card:hover ul li::before {
    color: #fff;
}
.terms-points li {
    margin-bottom: 10px;
       line-height: 1.4;
}
.lottie-file{
    width: 300px;
    height: 400px;
}
.lottie-file1{
    width: 300px;
    height: 300px;
}



@media (max-width: 1800px) {
  .genix-onboarding-number {
    position: absolute;
    top: 80px;
    width: 120px;
    opacity: 0;
    transform: translateY(40px);
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.genix-onboarding-text {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background: #f5f6f8;
    z-index: 2;
}
.section-title h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0;
    cursor: none;
}
}



@media (max-width: 1199px) {
  .genix-onboarding-number {
    position: absolute;
    top: 100px;
    width: 120px;
    opacity: 0;
    transform: translateY(40px);
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.genix-onboarding-text {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background: #f5f6f8;
    z-index: 2;
}
.section-title h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0;
    cursor: none;
}
}

/* Responsive */
@media (max-width: 992px) {
    .genix-client-item {
        width: 160px;
    }
    .genix-clients-track {
        width: calc(140px * 20);
    }
    .section-title h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 0;
    cursor: none;
}
.genix-card {
    position: relative;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 20px;
    background-color: #e9f0fe;
    z-index: 1;
    overflow: hidden;
    border: none;
    opacity: 0;
    /* transform: translateY(100px) scale(0.9); */
}
.genix-tab-link {
    padding: 10px 0;
    color: #666;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.1;
}
.lottie-file{
    width: 200px;
    height: 200px;
}
.lottie-file1{
    width: 200px;
    height: 200px;
}

.genix-onboarding-text {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        background: #f5f6f8;
        z-index: 2;
    }
    .home-page-api-sec {
    background: rgb(0 0 0 / 41%);
    backdrop-filter: blur(15px);
    padding: 15px;
    border-radius: 20px;
}
.genix-onboarding-card {
    position: relative;
    width: 260px;
    height: 360px;
    border-radius: 20px;
    background: #f5f6f8;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0.5;
    transform: scale(0.9);
    transition: 0.4s ease;
    border: none;
    z-index: 1;
    overflow: hidden;
}
    .genix-onboarding-number {
        position: absolute;
        top: 55px;
        width: 120px;
        opacity: 0;
        transform: translateY(40px);
        transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
   
.genix-onboarding-gif{
    width: 200px;
}
.genix-onboarding-step{
flex: 0 0 45.667vw; 
    height: 70%;
;
}
.section-title h1{
font-size: 55px;
}
.main-menu ul li a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2em;
    padding: 10px 10px !important;
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}
}
/* Responsive */
@media (max-width: 768px) {
    .section-title h1{
font-size: 30px;
}
    .genix-client-item {
        width: 140px;
    }
    .genix-clients-track {
        width: calc(140px * 20);
    }
    .section-title h2 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 0;
    cursor: none;
}
.genix-card {
    position: relative;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 20px;
    background-color: #e9f0fe;
    z-index: 1;
    overflow: hidden;
    border: none;
    height: auto;
    opacity: 0;
    /* transform: translateY(100px) scale(0.9); */
}
.genix-tab-link {
    padding: 10px 0;
    color: #666;
    text-decoration: none;
    font-size: 17px;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.1;
}
.lottie-file{
    width: 200px;
    height: 200px;
}
.lottie-file1{
    width: 200px;
    height: 200px;
}

.genix-onboarding-text {
        position: sticky;
        top: 0;
        height: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        background: #f5f6f8;
        z-index: 2;
    }
    .home-page-api-sec {
    background: rgb(0 0 0 / 41%);
    backdrop-filter: blur(15px);
    padding: 15px;
    border-radius: 20px;
}
.genix-onboarding-card {
    position: relative;
    width: 250px;
    height: 380px;
    border-radius: 20px;
    background: #f5f6f8;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0.5;
    transform: scale(0.9);
    transition: 0.4s ease;
    border: none;
    z-index: 1;
    overflow: hidden;
}
    .genix-onboarding-number {
        position: absolute;
        top: 45px;
        width: 120px;
        opacity: 0;
        transform: translateY(40px);
        transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
   
.genix-onboarding-gif{
    width: 200px;
}
.genix-onboarding-step{
flex: 0 0 88.550vw; 
    height: 80%;
;
}

}
/* @media (max-width: 575px) {
.genix-onboarding-step{
flex: 0 0 90.550vh !important; 
    height: 80%;
;
}
} */