body {
    font-family: 'Saans TRIAL', sans-serif;
}
h1,h2,h3,h4,h5{
     font-family: 'Saans TRIAL', sans-serif !important;
}

/* Navbar */
.navbar {
    /* background-color: #fff; */
    font-weight: 500;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

.navbar-brand {
    font-weight: bold;
    font-size: 20px;
    color: #000;
}

.nav-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0rem 0rem !important;
    color: #000;
    line-height: normal;
    /* matches reference */
    letter-spacing: -0.4px;
    /* matches reference */
    /* white-space: nowrap; */
    font-size: 16px;
    font-weight: 600;
    padding-right: 22px !important;
}


/* Initial (default text) */
.nav-link .initial {
    display: block;

}

/* Hover (sliding text) */
.nav-link .hover {
    position: absolute;
    /* left: 0; */
    top: 100%;
    /* hidden below */
    display: block;
}

/* Characters */
.nav-link .char {
    display: inline-block;
    transform: translateY(0);
    transition: transform 0.35s ease;
}

/* Hover animation */
.nav-link:hover .initial .char {
    transform: translateY(-100%);
}

.nav-link:hover .hover .char {
    transform: translateY(-100%);
}

.logo-text {
    font-size: 28px;
    /* color: #3856A5; */
    font-weight: 500;
}

/* Default transparent navbar */
.navbar {
    background: transparent;
    transition: all 0.3s ease;
}

/* Scrolled state */
/* .navbar.scrolled {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} */
.navbar .btn div {
    gap: 4px;
    width: 42px;
    display: flex;
    overflow: hidden;
}

.navbar .btn {
    cursor: pointer;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: 82.5px;
    display: flex;
}

.navbar .btn .close {
    margin-left: -40.49px;
}

.navbar .btn div span {
    transition-property: all;
    --tw-duration: .3s;
    --tw-ease: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    margin-top: -.8px;
    display: inline-block;
}

.navbar .btn svg {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-duration: .3s;
    transition-timing-function: var(--ease-in-out);
}

.navbar .btn svg {
    --tw-duration: .3s;
    --tw-ease: var(--ease-in-out);
}


/* hero section */

.hero-section {
    position: relative;
    padding: 120px 20px;
    text-align: center;
    overflow: hidden;
}

/* First gradient - irregular diagonal movement */
.hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(#3956a747 -9.5%, #3956a747 10%, transparent 70%);
    animation: moveGradient1 12s ease-in-out infinite;
    z-index: -2;
    border-radius: 50%;
}

/* Second gradient - erratic floating movement */
.hero-section::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -25%;
    width: 80%;
    height: 80%;
    background:radial-gradient(#3956a747 -9.5%, #3956a747 10%, transparent 70%);
    animation: moveGradient2 15s ease-in-out infinite reverse;
    z-index: -1;
    border-radius: 100%;
}

/* First gradient animation - uneven diagonal */
@keyframes moveGradient1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }

    15% {
        transform: translate(30%, -20%) rotate(45deg) scale(1.1);
    }

    35% {
        transform: translate(-10%, 40%) rotate(120deg) scale(0.9);
    }

    55% {
        transform: translate(25%, 15%) rotate(200deg) scale(1.2);
    }

    75% {
        transform: translate(-15%, -10%) rotate(280deg) scale(0.8);
    }

    90% {
        transform: translate(10%, 30%) rotate(320deg) scale(1.05);
    }

    100% {
        transform: translate(0%, 0%) rotate(360deg) scale(1);
    }
}

/* Second gradient animation - irregular floating */
@keyframes moveGradient2 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }

    20% {
        transform: translate(-25%, 35%) rotate(-60deg) scale(1.3);
    }

    40% {
        transform: translate(15%, -25%) rotate(-140deg) scale(0.7);
    }

    60% {
        transform: translate(-35%, 10%) rotate(-200deg) scale(1.1);
    }

    80% {
        transform: translate(20%, 25%) rotate(-290deg) scale(0.9);
    }

    100% {
        transform: translate(0%, 0%) rotate(-360deg) scale(1);
    }
}

/* .hero-section::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: radial-gradient(
    circle at 60% 40%,
    #3f93d191 -9.5%,
    #7ac6d28a 11%,
    transparent 35%
  );
  background-size: 50% ;
  z-index: -1; 
  animation: moveInCircle 30s linear infinite;
  border-radius: 100%;
} */

/* Animate pseudo-element to simulate circular motion */
/* @keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */
.hero-icon img {
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 30px;
}

.hero-title {
    font-size: 60px;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.2;
    padding-top: 30px;
}

.hero-subtitle {
    max-width: 650px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    color: #555;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
}

.app-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.app-btn img {
    width: 20px;
    height: 20px;
}

.app-btn .arrow {
    margin-left: auto;
    font-size: 1.2rem;
}

.app-btn.black {
    background: #000;
    color: #fff;
}

.app-btn.black:hover {
    background: #333;
}

.app-btn.white {
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
}

.app-btn.white:hover {
    background: #f9f9f9;
}

#healthcareAnimation {
    background-color: #000;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    box-shadow: 0 20px 40px #00000026;
}

/* ===== layout ===== */
.hero-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== core button (uses CSS vars so JS and :hover can combine) ===== */
.app-btn {
    --rx: 0deg;
    /* rotateX (3d tilt) */
    --ry: 0deg;
    /* rotateY (3d tilt) */
    --ty: 0px;
    /* translateY on hover */
    --s: 1;
    /* scale on hover */
    --skx: 0deg;
    /* skewX on hover */
    --sh-x: -160%;
    /* shine x position */
    --ease: cubic-bezier(.22, .61, .36, 1);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transform-style: preserve-3d;
    transition: box-shadow .45s var(--ease), transform .45s var(--ease);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0) scale(var(--s)) skew(var(--skx), 0);
    will-change: transform;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* icon/arrow stacking above pseudo-layers */
.app-btn>* {
    position: relative;
    z-index: 2
}

/* icon */
.app-btn img {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform .45s var(--ease)
}

/* arrow */
.app-btn .arrow {
    margin-left: 8px;
    transition: transform .35s var(--ease), opacity .25s var(--ease);
    font-weight: 700;
}

/* color themes */
.app-btn.black {
    background: #0b0b0b;
    color: #fff;
    border: 0;
}

.app-btn.white {
    background: #fff;
    color: #111;
    border: 2px solid rgba(0, 0, 0, .06);
}

/* ===== shadow layer (under the button) ===== */
.app-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    transform: translate3d(0, 12px, 0) scale(.98);
    background: radial-gradient(60% 40% at 50% 100%,
            rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 60%, transparent 70%);
    filter: blur(12px);
    opacity: .35;
    transition: transform .45s var(--ease), opacity .45s var(--ease);
}

/* ===== glossy sweep (shine) ===== */
.app-btn::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: 0;
    width: 44%;
    z-index: 3;
    pointer-events: none;
    transform: translateX(var(--sh-x)) rotate(18deg);
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.14) 40%,
            rgba(255, 255, 255, 0.55) 52%,
            rgba(255, 255, 255, 0.14) 64%,
            rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: screen;
    transition: transform .9s var(--ease);
}

/* ===== hover / active states ===== */
.app-btn:hover {
    --ty: -10px;
    --s: 1.025;
    --skx: -1.1deg;
    box-shadow: 0 18px 36px rgba(6, 12, 34, .22);
}

.app-btn:hover::before {
    transform: translate3d(0, 20px, 0) scale(.94);
    opacity: .55;
}

.app-btn:hover::after {
    --sh-x: 160%;
    transform: translateX(var(--sh-x)) rotate(18deg);
}

.app-btn:hover img {
    transform: translateY(-3px) rotate(-6deg) scale(1.02);
}

.app-btn:hover .arrow {
    transform: translateX(8px);
}

/* small active press */
.app-btn:active {
    --ty: -4px;
    --s: 1.01;
    transition-duration: 120ms;
}

/* focus-visible */
.app-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .15), 0 18px 36px rgba(6, 12, 34, .16);
}

/* responsive adjustments */
@media (max-width:520px) {
    .app-btn {
        padding: 12px 14px;
        gap: 8px;
        border-radius: 12px;
        font-size: 14px
    }

    .app-btn img {
        width: 18px;
        height: 18px
    }
}

/* prefers-reduced-motion: remove tilt / shine motion */
@media (prefers-reduced-motion: reduce) {

    .app-btn,
    .app-btn::after,
    .app-btn::before,
    .app-btn img,
    .app-btn .arrow {
        transition: none !important;
    }
}

.main-button-wrapper {
    background-color: #000;
    border: 1px solid #0003;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

/* First visible button */
.main-button {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    background-color: #000;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 17px 25px;
    display: flex;
    transition: transform 0.4s ease;
}

.button-text-main {
    color: #fff;
    text-transform: capitalize;
    font-size: 16px;
}

/* Second layer (hidden below initially) */
.main-button.change-position {
    z-index: 2;
    background-color: transparent;
    border-radius: 1000px;
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.button-text-main.button-text-change {
    color: #000;
}

.button-filter {
    filter: invert();
}

/* Circle overlay (hidden below) */
.button-overlay {
    z-index: 1;
    background-color: #fff;
    border-radius: 50%;
    width: 300%;
    height: 300%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    transition: transform 0.5s ease;
}

/* Hover effects */
.main-button-wrapper:hover .button-overlay {
    transform: translate(-50%, -50%);
}

.main-button-wrapper:hover .main-button.change-position {
    transform: translateY(0);
}

.main-button.first.change-color-white {
    background-color: #fff;
}

.button-text--new.button-text-change {
    color: #000;
}

.button-text--new {
    color: #fff;
    font-size: 16px;
}

.main-button-wrapper.change-color {
    background-color: #fff;
}

.button-text--new.button-text-change {
    color: #000;
}

.button-overlay.change-overlay {
    background-color: #000;
}

.hero-text-loop {
    position: relative;
    height: 10vh;
    /* fits one line height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center */
    text-align: center;
    /* center the text itself */
}

.hero-subtitle {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.hero-subtitle.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hero-subtitle.exit {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
}

.rotating-heart {
    width: 50px;
    height: 50px;
    display: inline-block;
    perspective: 400px;
    /* required for 3D effect */
}

.rotating-heart .spin {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    /* enables 3D rotation */
    animation: spin3d 2s linear infinite;
    /* 3D rotation */
}

.rotating-heart .heart-svg {
    width: 80%;
    height: 80%;
    transform-origin: center;
}

/* 3D spin keyframes — rotates along Y-axis */
@keyframes spin3d {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.hero-top-logo{
    border-radius: 8px;
}



/* section 2 General Section Styling */



.main-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
    /* max-width: 1400px; */
    /* margin: 0 auto; */
    left: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    /* background-color: #FCFAF4; */
    background: radial-gradient(circle at 50% 50%, #3f93d191 25%, #7ac6d28a 30%, transparent 40%);
    animation: gradientShift 12s ease-in-out infinite;

}

@keyframes gradientShift {
    0% {
        background: radial-gradient(circle at 50% 50%, #3f93d191 25%, #7ac6d28a 30%, transparent 40%);
    }

    50% {
        background: radial-gradient(circle at 50% 50%,
                #aabef1 22%,
                #add0e8 30%,
                transparent 40%);
    }

    100% {
        background: radial-gradient(circle at 50% 50%,
                #82c2f0 22%,
                #b7ecf4 30%,
                transparent 40%);
    }
}

.main-container>.inner {
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: stretch;
}

/* === Left Container === */
.left-container {
    width: 40%;
    /* padding: 60px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.left-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
    gap: 15px;
}

.left-content.active {
    opacity: 1;
    transform: translateX(0);
}

.brand {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
}

.left-content h2 {
    letter-spacing: -.4px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;

}

.left-content p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #44474a;
}

/* === Phone Container === */
.phone-container {
    /* width: 20%; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}

/* === Right Container === */
.right-container {
    width: 40%;
    /* padding: 60px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background: white; */
    position: relative;
    overflow: hidden;
}

.right-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
}

.right-content.active {
    opacity: 1;
    transform: translateX(0);
}

.right-content h2 {
    font-size: 2.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.2;
}

.right-content p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 400px;
}

.right-content ul {
    list-style: none;
    margin-top: 20px;
    flex-direction: column;
    gap: 24px;
    display: flex;
}

.right-content li {
    display: flex;
    align-items: center;
    /* margin: 15px 0; */
    color: #000;
    font-weight: 400;
    gap: 16px;
    font-size: 20px;
    line-height: 28px;
}

.right-content li::before {
    content: "";
    background: url(/Media/check-desktop.svg) 50% no-repeat;
    width: 24px;
    height: 24px;
    display: block
}

.stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.stat {
    text-align: left;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: #4ECDC4;
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: #666;
    margin-top: 8px;
    font-weight: 500;
}

/* === Navigation Dots === */
/* .nav-dots {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 200;
}
.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}
.nav-dot.active {
    background: #4ECDC4;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(78,205,196,0.5);
}
.nav-dot:hover { background: #666; transform: scale(1.2); } */

/* === Scroll Space === */
.scroll-space {
    height: 300vh;
    /* 3 slides × 100vh each */
    width: 100%;
}

/* === Responsive === */
@media (max-width: 1024px) {

    .left-container,
    .right-container {
        width: 35%;
        padding: 40px;
    }

    .phone-container {
        width: 30%;
    }

    .phone {
        width: 240px;
        height: 480px;
    }

    .left-content h2,
    .right-content h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .left-container,
    .right-container,
    .phone-container {
        width: 100%;
        height: 100vh;
    }

    .phone-container {
        order: 2;
    }

    .right-container {
        order: 3;
    }
}

.hero {
     height: 100vh; 
     display: flex;
    vertical-align: middle;
}
.hero .container{
        display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-section {
    position: relative;
}

.main-container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.left-container,
.phone-container,
.right-container {
    flex: 1;
    position: relative;
}

.left-content,
.right-content,
.screen-content {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.left-content.active,
.right-content.active,
.screen-content.active {
    opacity: 1;
}

.scroll-space {
    height: 300vh;
    /* 3 slides */
}

.after-main {
    height: 100vh;
}

.phone {
    position: relative;
    margin: 0 auto;
    height: 677px;
    width: 390px;
}

.phone-img {
    width: 100%;
    display: block;
    border-radius: 30px;
}

.phone-screen {
    background-color: #fcfaf4;
    border-radius: 40px;
    position: absolute;
    top: 2.5%;
    /* adjust so screen sits inside phone image */
    left: 4%;
    /* adjust horizontal position */
    width: 92%;
    /* match visible screen area */
    height: 113%;
    /* match visible screen height */
    overflow: hidden;
    z-index: -1;


}

.screen-content {
    position: absolute;
    top: 0;
    left: 0;
}

.screen-content.active {
    opacity: 1;
}

.nav-dots {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 10px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    /* always flex, but hidden with opacity */
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: #7ac6d28a;
    transform: scale(1.4);
    box-shadow: 0 0 10px #7ac6d28a;
}

.nav-dot:hover {
    background: #666;
    transform: scale(1.2);
}

.nav-dots.active {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    .phone-container .photo:before {
        opacity: 0;
        transition: all 1s ease-in-out;
    }
}



/* section 3 */

.section-base_homepage {
    padding-top: 5rem;
}

.fs-padding-global {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.container_border-radius.fs-container-large {
    /* transition: transform .5s; */
    /* transform: translateY(-2rem); */
}

.container_border-radius {
    border: 2px solid #0000000d;
    border-radius: 4.5rem;
    overflow: hidden;
}

.fs-container-large {
    width: 100%;
    max-width: 85rem;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.container_eka-patient {
    background-image: linear-gradient(90deg, #3f93d191, #7ac6d28a 28%, #fff 68%);
    /* background: radial-gradient(circle at 50% 50%, #3f93d191 25%, #7ac6d28a 30%, transparent 40%); */

    border-radius: 4.5rem;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex;
    position: relative;
    overflow: hidden;
    /* z-index:-1; */
}

.container_section-image {
    /* z-index: 1; */
    justify-content: center;
    align-self: stretch;
    align-items: flex-end;
    width: 100%;
    min-width: 20rem;
    display: flex;
    /* position: relative; */
}

.ing_patient-home {
    aspect-ratio: 1248 / 1176;
}

.container_image-seperator-horizontal {
    display: none;
}

.container_section-details {
    z-index: 1;
    grid-row-gap: 3rem;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    align-items: flex-start;
    width: 100%;
    padding: 3rem;
    display: flex;
    position: relative;
}

.cont_card-details {
    grid-row-gap: 2rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.w-layout-hflex {
    flex-direction: row;
    align-items: flex-start;
    display: flex;
}

.container_chip.is_small {
    padding: .25rem .5rem;
}

.container_chip.with_icon {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.container_chip {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    border: 1px solid #3856A5;
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    padding: .75rem 1rem;
    display: flex;
}

.icon_for-chip {
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 1.5rem;
    display: flex;
}

.text-color-purple,
.is_purple {
    color: #3856A5;
}

.text-weight-bold {
    font-weight: 700;
}

.text-size-small {
    font-size: .875rem;
    line-height: 140%;
}

.w-embed:before,
.w-embed:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.fs-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

svg:not(:root) {
    overflow: hidden;
}

.fs-icon {
    width: 1em;
    height: 1em;
    max-width: 32px;
    max-height: 32px;
}

.spacer-small {
    width: 100%;
    padding-top: 1rem;
}

.heading-style-h2_playfair {
    letter-spacing: -.02em;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 3rem;
    font-weight: 600;
    line-height: 3.5rem;
}

.text-color-03 {
    color: #4b596d;
}

.text-size-regular {
    font-size: 18px;
}

.padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.w-inline-block {
    max-width: 100%;
    display: inline-block;
}

.button-primary-big {
    grid-column-gap: 8px;
    color: #fff;
    cursor: pointer;
    background-color: #3856A5;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
}

.w-embed:after {
    clear: both;
}

.bg_abha {
    z-index: 0;
    aspect-ratio: 851 / 751;
    object-fit: cover;
    border-radius: 4.5rem;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

p {
    margin-bottom: 0;
}

img {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
}

.main-wrapper {
    position: relative;
    height: 50vh;
    /* don't lock it to 100vh */
}

.main-container {
    display: flex;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
}

/* section 4 */

@media (min-width: 1200px) {
    #security {
        justify-content: center;
        align-items: center;
        display: flex;
    }
}

#security {
    width: 100%;
}

@media (min-width: 1200px) {
    #security .container {
        gap: 55px;
        max-width: 1440px;
        padding: 120px 36px;
    }
}

@media (min-width: 48rem) {
    #security .container {
        gap: 48px;
        padding: 120px 48px;
    }
}

#security .container {
    flex-direction: column;
    gap: 32px;
    /* max-width: none; */
    margin: 0 auto;
    padding: 90px 30px 80px;
    display: flex;
    z-index: -1;
    ;
}

#security .headerSecurity {
    flex-direction: column;
    gap: 16px;
    max-width: 980px;
    display: flex;
}

@media (min-width: 48rem) {
    #security .headerSecurity h2 {
        /* letter-spacing: -.48px; */
        font-size: 48px;
        line-height: 52.8px;
    }
}

#security .headerSecurity h2 {
    /* letter-spacing: -.32px; */
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
}

@media (min-width: 48rem) {
    #security .headerSecurity p {
        font-size: 22px;
        line-height: 30.8px;
    }
}

#security .headerSecurity p {
    color: #44474a;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

#security .card,
#security .cards {
    flex-direction: column;
    display: flex;
}

#security .card {
    background-color: #f5f7fa;
    border-radius: 16px;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 32px;
}

#security .cards {
    gap: 16px;
}

#security .card,
#security .cards {
    flex-direction: column;
    display: flex;
}


.js-show-fade.is-visible {
    opacity: 1;
}

.js-show-up.is-visible {
    transform: translateY(0);
}

.card.js-show-up,
.js-show-up-10,
h2.js-show-up {
    transform: translateY(10px);
}

.js-show-up {
    transition: all .5s ease-out;
    transform: translateY(100%);
}

.js-show-fade {
    opacity: 0;
}

.js-show-fade,
.js-show-transition {
    transition: all .5s ease-out;
}

#security .card img {
    width: auto;
    height: 60px;
}

#security .card .text {
    flex-direction: column;
    gap: 16px;
    display: flex;
}

@media (min-width: 48rem) {
    #security .card h3 {
        letter-spacing: normal;
        font-size: 24px;
        line-height: 28.8px;
    }
}

#security .card h3 {
    letter-spacing: -.22px;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
}

#security .card p {
    color: #44474a;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

@media (min-width: 48rem) {
    #security .card {
        border-radius: 32px;
        width: calc(50% - 12px);
        padding: 64px 32px;
    }
}

@media (min-width: 48rem) {
    #security .cards {
        flex-flow: wrap;
        gap: 24px;
    }
}

@media (min-width: 1440px) {
    #security .card {
        width: calc(25% - 18px);
    }
}

/* section 5  */

.home-one-review {
    background-color: #f6f6f6;
    height: 300vh;
    padding-bottom: 130px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.home-onereview-sticky {
    position: sticky;
    top: 0;
    overflow: hidden;
}

.home-one-review-top-border {
    z-index: 1;
    background-color: #00000026;
    height: 1px;
    position: absolute;
    inset: 0% 0% auto;
}

.w-layout-blockcontainer {
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.w-layout-blockcontainer.w-container:before,
.w-layout-blockcontainer.w-container:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.overflow-hidden {
    overflow: hidden;
}

.review-heading {
    padding-top: 110px;
    padding-bottom: 40px;
    position: relative;
}

.review-slider-container {
    justify-content: space-between;
    align-items: flex-start;

}

.review-heading-text-big {
  max-width: 895px;
    font-size: 76px;
    line-height: 90px;
    font-weight: 500;
}

.change-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.highlight-color {
    color: #3856A5;
}

.review-heading-border {
    z-index: 1;
    background-color: #00000026;
    width: 1px;
    position: absolute;
    inset: 0% 0% 0% auto;
}

.review-slider-wrapper {
    /* cursor: none; */
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: -60vw;
    display: flex;
    position: relative;
}

.review-slider-wrapper.change-gap {
    /* overflow: hidden; */
    /* overflow-x: auto; */
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */
    cursor: grab;
}

.review-list-box {
    background-color: #fff;
    border-right: 1px solid #00000026;
    flex: none;
    width: 369px;
    height: 530px;
}

.rating-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 60px;
    display: flex;
}

.heading-style-h1 {
    color: #000;
    text-transform: capitalize;
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
    font-size: 50px;
    line-height: 1.16;
}

@media screen and (min-width: 1280px) {
    .heading-style-h1 {
        font-size: 60px;
    }
}

.change-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.review-list-box {
    background-color: #fff;
    border-right: 1px solid #00000026;
    flex: none;
    width: 369px;
    height: 430px;
}

.review-list-box.box-one {
    border-left: 1px solid #0003;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.review-list-box.review-contant {
    padding: 40px 60px 40px 40px;
}

.review-list-box.review-contant.change-border-bottom {
    padding-right: 103px;
}

.review-text-box {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 350px;
    display: flex;
}

.review-title {
    color: #606060;
    text-transform: uppercase;
    padding-bottom: 45px;
}

.heading-style-h4.review-para {
    color: #606060;
}

.heading-style-h4 {
    color: #000;
    /* font-family: Sequel Sans Roman Disp, Arial, sans-serif; */
    font-size: 22px;
    text-transform: capitalize;
    line-height: 1.4;
}

.review-para-highlight {
    color: #000;
}

.heading-style-h4 {
    color: #000;
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
    font-size: var(--heading-4-font--h4-s);
    text-transform: capitalize;
    line-height: 1.4;
}

.customer-name {
    padding-bottom: 10px;
}

/* allow vertical panning outside slider but make dragging smoother on touch */
.review-slider-wrapper.change-gap {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}





/* section 6 */

#faqs {
    background-color: #fff;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1200px) {
    #faqs {
        align-items: center;
        display: flex;
    }
}

#faqs .container {
    flex-direction: column;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px 128px;
    display: flex;
}

@media (min-width: 576px) {
    #faqs .container {
        padding: 80px 16px 128px;
    }
}

@media (min-width: 48rem) {
    #faqs .container {
        gap: 48px;
        padding: 80px 48px 128px;
    }
}

@media (min-width: 1200px) {
    #faqs .container {
        flex-direction: row;
        gap: 24px;
        max-width: 1440px;
        padding: 80px 80px 160px;
    }
}

#faqs .headerFaqs {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

@media (min-width: 1200px) {
    #faqs .headerFaqs {
        flex-shrink: 0;
        width: 302px;
    }
}

@media (min-width: 1200px) {
    .contentFaqs {
        margin-top: -12px;
        padding: 0 56px;
    }
}

@media (min-width: 1440px) {
    .contentFaqs {
        max-width: 954px;
    }
}

#faqs .headerFaqs p {
    color: #44474a;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

@media (min-width: 48rem) {
    #faqs .headerFaqs p {
        font-size: 22px;
        line-height: 30.8px;
    }
}

#faqs .headerFaqs .btn {
    color: #1f005f;
    border: 1px solid #fff;
    margin-top: 8px;
}

@media (min-width: 1200px) {
    #faqs .headerFaqs .btn {
        margin-top: 24px;
    }
}

.contentFaqs .faq {
    border-color: #e0e3e6;
}

.contentFaqs button {
    gap: 24px;
    padding: 32px 8px;
}

@media (min-width: 64rem) {
    .contentFaqs button {
        cursor: pointer;
    }
}

.contentFaqs .contentFaq {
    color: #44474a;
    font-size: 18px;
    line-height: 25.2px;
}

@media (min-width: 48rem) {
    .contentFaqs .contentFaq {
        max-width: 681px;
        font-size: 20px;
        line-height: 28px;
    }
}

.duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.contentFaqs .title {
    letter-spacing: -.22px;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
}

@media (min-width: 48rem) {
    .contentFaqs .title {
        letter-spacing: normal;
        font-size: 24px;
        line-height: 28.8px;
    }
}

.contentFaqs .btOpenClose {
    background: #9cb2ea;
    border-radius: 56.875px;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    position: relative;
}

@media (min-width: 48rem) {
    .contentFaqs .btOpenClose {
        border-radius: 70px;
        width: 32px;
        height: 32px;
    }
}

.contentFaqs .bt-state {
    width: 9.75px;
    height: auto;
    transition: all .3s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 48rem) {
    .contentFaqs .bt-state {
        width: 12px;
    }
}

.contentFaqs .bt-state.btx {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* Closed state (already in your CSS) */
.contentFaq {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0px 8px;
}

/* Open state */
.faq.open .contentFaq {
    max-height: 500px;
    /* large enough to fit text */
    padding: 8px 24px;
    padding-bottom: 20px;
}

.faq.open .bt-state {
    transform: translate(-50%, -50%) rotate(0deg);
    /* plus → minus */
}

.border-b {
    border-bottom: 1px solid #000;
}

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

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.justify-between {
    justify-content: space-between;
}

.items-start {
    align-items: flex-start;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
    border: none;
}

.faq:hover button {
    background-color: #e0e3e687;
}


@media (min-width: 1200px) {
    #faqs .headerFaqs .btn {
        margin-top: 24px;
    }
}

#faqs .headerFaqs .btn {
    color: #1f005f;
    border: 1px solid #fff;
    margin-top: 8px;
}

@media (min-width: 64rem) {
    .btn {
        /* background: linear-gradient(161deg, #fff67a 5.24%, #ffa545 24.53%, #ff7e80 34.83%, #ed89ff 42.695%, #ff7e80 55.6%, #ffa545 60.86%, #fff67a 80.15%) 0 0 / 200% 200%; */
        transition: all .3s ease-in-out;
        position: relative;
    }
}


.btn {
    background: var(--gradient-1, linear-gradient(141deg, #9cb2ea 10.48%, #7AC6D2 49.06%, #7ac6d28a 69.66%, #3f93d191 85.39%), #3856a594);
    color: #2c087d;
    z-index: 50;
    cursor: pointer;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 12.6px;
    display: inline-flex;
    position: relative;
    box-shadow: inset 0 5px 32px 12px #ffffff52, inset 0 1px 4px #ffffff70;
}

.btn-big,
.btn-blue {
    padding: 16px 24px;
    font-size: 16px;
    line-height: 22.4px;
}

.faq-nav-link {
    padding: 0px !important;
    line-height: 25px;
}

.faq-heading {
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
}

/* footer section  */

#footerSite {
    color: #fff;
    z-index: 10;
    z-index: 0;
    /* background: #3856A5 radial-gradient(circle at 50% 30%,
            #3f93d191 1%,
            #7ac6d28a 10%,
            transparent 40%) 50% -241px / 100% no-repeat; */
    background-color: #000;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    /* position: fixed; */
    top: 0;
    left: 0;
}

#footerSite .container {
    flex-direction: column;
    gap: 64px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 23px 24px;
    display: flex;
}

@media (min-width: 576px) {
    #footerSite .container {
        gap: 53px;
        padding: 0 47px 24px;
    }
}

@media (min-width: 48rem) {
    #footerSite .container {
        gap: 0;
        padding: 0 24px;
    }
}

#footerSite .coins {
    text-align: center;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    height: 389px;
    display: flex;
    position: relative;
}

@media (min-width: 576px) {
    #footerSite .coins {
        height: 415px;
    }
}

@media (min-width: 48rem) {
    #footerSite .coins {
        gap: 40px;
        height: 610px;
        padding-bottom: 158px;
    }
}

@media (min-width: 64rem) {
    #footerSite .coins {
        justify-content: center;
        width: 100%;
        min-height: 668px;
        margin: 0 auto;
        padding-bottom: 0;
    }
}

#footerSite #itemCoins {
    content: "";
    z-index: 0;
    opacity: 0;
    background-image: url(/Media/coins-1440.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    width: 305.422px;
    height: 134.206px;
    transition: all 1.5s cubic-bezier(1, -.67, 0, 1.67);
    display: block;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%);
}

@media (min-width: 576px) {
    #footerSite #itemCoins {
        width: 416px;
        height: 182.796px;
    }
}

@media (min-width: 48rem) {
    #footerSite #itemCoins {
        background-image: url(/Media/coins-1440.webp);
        width: 100vw;
        height: 0;
        padding-top: 100vw;
        top: auto;
        bottom: 100%;
    }
}

@media (min-width: 64rem) {
    #footerSite #itemCoins {
        opacity: 0;
        background-image: url(/Media/coins-1440.webp);
        background-position: 50%;
        width: 992px;
        height: 768px;
        padding-top: 0;
        transition: all 1.5s cubic-bezier(.86, 0, .07, 1);
        top: -80%;
        bottom: auto;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1200px) {
    #footerSite #itemCoins {
        background-image: url(/Media/coins-1440.webp);
        width: 1056.51px;
        height: 596.374px;
    }
}

@media (min-width: 1440px) {
    #footerSite #itemCoins {
        background-image: url(/Media/coins-1440.webp);
        width: 1256.51px;
        height: 596.374px;
    }
}

#footerSite.start #itemCoins {
    opacity: 1;
    top: 0;
}

@media (min-width: 48rem) {
    #footerSite.start #itemCoins {
        opacity: 1;
        top: auto;
        bottom: -55px;
    }
}

@media (min-width: 64rem) {
    #footerSite.start #itemCoins {
        opacity: 1;
        top: 50%;
        bottom: auto;
    }
}

#footerSite .coins h5 {
    text-shadow: 0 2px 16px #0000001f;
    letter-spacing: -.4px;
    z-index: 10;
    font-size: 40px;
    font-weight: 600;
    line-height: 44px;
    position: relative;
}

@media (min-width: 48rem) {
    #footerSite .coins h5 {
        text-shadow: none;
        letter-spacing: -.64px;
        font-size: 64px;
        line-height: 70.4px;
    }
}

.boxqrcode {
    color: #000;
    z-index: 10;
    background: #fff;
    border-radius: 8px;
    min-width: 218px;
    padding: 4px;
    display: inline-flex;
    position: relative;
}

.boxqrcode p {
    text-align: left;
    flex-shrink: 0;
    align-items: center;
    width: 118px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    display: flex;
}

.boxqrcode img {
    flex-shrink: 0;
    width: 100px;
    height: auto;
}

#footerSite .contentFooter {
    flex-direction: column;
    gap: 24px;
    font-size: 16px;
    line-height: 22.4px;
    display: flex;
}

@media (min-width: 48rem) {
    #footerSite .contentFooter {
        padding: 24px 0;
    }
}

@media (min-width: 64rem) {
    #footerSite .contentFooter {
        padding-top: 0;
    }
}

#footerSite .navfooter {
    border-bottom: 1px solid #fff;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px;
    display: flex;
}

@media (min-width: 48rem) {
    #footerSite .navfooter {
        padding-top: 24px;
    }
}

@media (min-width: 64rem) {
    #footerSite .navfooter {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 24px;
    }
}

#footerSite .navbar-social {
    gap: 15px;
    display: flex;
    padding: 0;
}

#footerSite .navbar-social a {
    background: #e7deff1f;
    border-radius: 5.625px;
    justify-content: center;
    align-items: center;
    width: 37.5px;
    height: 37.5px;
    transition: all .3s;
    display: flex;
    ;
}

@media (min-width: 64rem) {
    #footerSite .navbar-social a {
        z-index: 10;
        width: 38px;
        height: 38px;
        transition: all .5s ease-in-out;
        position: relative;
        overflow: hidden;
    }
}


#footerSite .navbar-social a svg {
    transition: all .3s;
}

#footerSite .navbar-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* gap: 24px 40px; */
    /* display: grid; */
    display: flex;
    flex-direction: row;
}

@media (min-width: 48rem) {
    #footerSite .navbar-nav {
        /* gap: 24px 40px; */
        /* display: flex; */
    }
}

#footerSite .navbar-nav a {
    font-weight: 700;
    display: inline-block;
    position: relative;
    color: #fff !important;
}

.navbar-social {
    list-style-type: none;
}

@media (min-width:64rem) {
    #footerSite .navbar-social a:hover {
        background: url(/Media/bglinkhover.svg) 50% / contain no-repeat;
    }

}

.baseFooter p {
    padding: 16px;
}

.baseFooter .nav-link {
    color: #fff !important;
}
.baseFooter{
    display: flex;
    justify-content: space-between;
}

.footer-qrcode-big-screens .boxqrcode img{
width: 90px;
}
.footer-qrcode-big-screens .boxqrcode p{
width: 160px;
}

/* footer end */

.hero-section {
    opacity: 0;
    /* start hidden */
    transform: translate3d(0, 40px, 0) scale3d(0.95, 0.95, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    will-change: opacity, transform;
    transform-style: preserve-3d;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When active (visible on scroll or page load) */
.hero-section.animate-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}


/* FAQ should always sit above footer */
#faqs {
    position: relative;
    z-index: 2;
    /* higher than footer */
    background: #fff;
    /* so it hides footer when overlapping */
}

/* Footer stays behind */
#footerSite {
    position: relative;
    z-index: 1;
    /* lower than FAQ */
}


/* section2 new */

.home-one-make-payment {
    background-color: #000;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.home-one-make-payment.padding-bottom {
    padding-bottom: 130px;
}

.section-heading {
    justify-content: center;
    align-items: center;
    height: 300vh;
    margin-left: auto;
    margin-right: auto;
}

.w-container {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.w-layout-blockcontainer {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.container {
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
}

.section-sticky-heading {
    justify-content: center;
    align-items: center;
    height: 80vh;
    display: flex;
    position: sticky;
    top: 15vh;
    overflow: hidden;
}

h2 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 36px;
}

h2 {
    color: var(--color--black);
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
    font-size: var(--heading-2-font--h2-s);
    text-transform: capitalize;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.22;
}

@media screen and (min-width: 1280px) {
    h2 {
        font-size: var(--heading-2-font--h2-d);
    }
}

.change-margin {
    margin-top: 0;
    margin-bottom: 0;
}

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

.change-margin.text-center.section-heading-big {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(207deg, #000, #fff 50%, #000);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 80px;
}

.change-margin.text-center.section-heading-big {
    color: #fff;
    font-size: 80px;
}

@media screen and (min-width: 1280px) {

    .change-margin.text-center.section-heading-big,
    .change-margin.text-center.heading-big,
    .change-margin.text-center.section-heading-big,
    .change-margin.heading-big {
             font-size: 78px;
        font-weight: 700;
    }
}

.div-block {
    flex-flow: row-reverse;
    display: flex;
    position: absolute;
    inset: 0%;
}

.home-one-sticky-heading-overlay {
    background-image: radial-gradient(circle farthest-corner at 50% 50%, #0000, #000 48%);
    flex: none;
    width: 100%;
    height: 100%;
}

.overlay-solid-box {
    background-color: #000;
    flex: none;
    width: 100%;
    height: 100%;
}

.w-container:before,
.w-container:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.make-payment-wrappre {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: row-reverse;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    display: grid;
    position: relative;
}

@media screen and (min-width: 1280px) {
    .make-payment-wrappre {
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
}

.w-container:after {
    clear: both;
}

.sticky-card-image {
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    display: flex;
    position: sticky;
    top: 160px;
}

#w-node-_10b2a6f6-0f29-1123-92b1-695758675a1e-22768cbb {
    align-self: start;
}

.line {
    background-color: #d9d9d940;
    width: 1px;
    height: 100%;
    position: absolute;
    inset: 0% 50%;
}

.contant-feature {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.sticky-backgroud-gradient {
    position: relative;
    overflow: hidden;
}

.auto-fit {
    z-index: 5;
    object-fit: cover;
}

.auto-fit.image-radius {
    border-radius: 20px;
}

.auto-fit.image-radius.tab-image-full-width {
    flex: 1;
}

.make-payment-grident-img {
    perspective: 3000px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    inset: 0%;
}

.auto-fit.image-radius.imge-width-change.tab-image-full-width.one {
    flex: 0 auto;
}

/* .auto-fit.image-radius.two {
    z-index: 6;
    position: absolute;
}
.auto-fit.image-radius.three {
    z-index: 7;
    position: absolute;
} */
.inner-green-line {
    background-color: #fff;
    width: 1px;
    height: 50px;
    position: sticky;
    top: 220px;
}

.right-contnt-holder {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

@media screen and (min-width: 1280px) {
    .right-contnt-holder {
        grid-column-gap: 60px;
        grid-row-gap: 60px;
    }
}

.stap-holder {
    z-index: 1;
    background-color: #000;
    margin-left: -20px;
    position: relative;
}

.title-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
}

.step-text {
    color: #fff;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
}

.step-holder-subheading {
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #5a606c, #fff 50%, #5a606c);
    -webkit-background-clip: text;
    background-clip: text;
}

.heading-style-h3 {
    color: #000;
    text-transform: capitalize;
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.28;
}

.text-color-white {
    color: #fff;
}

@media screen and (min-width: 1280px) {
    .heading-style-h3 {
        font-size: 35px;
    }
}

.heading-style-h3.text-color-white {
    color: #fff;
}

.sticky-inside-contant-holder {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

p {
    margin-bottom: 10px;
}

.change-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.title-para {
    color: #b5b5b5;
}

.heading-style-h6 {
    color: #000;
    text-transform: capitalize;
    font-family: Sequel Sans Roman Disp, Arial, sans-serif;
    font-size: 18px;
}

.heading-style-h6.text-color-white {
    color: #fff;
}

.heading-style-h6.card-second-heading {
    max-width: 250px;
}




/* Initial state */
.section-heading-big {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Entrance animation (via JS) */
.section-heading-big.animate-heading {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Overlay covers heading progressively */
.div-block {
    position: absolute;
    inset: 0;
    opacity: var(--overlay-opacity, 0);
    transition: opacity 0.3s linear;
}

/* Scroll-driven fade+zoom */
.section-heading-big.scrolling {
    opacity: var(--heading-opacity, 1);
    transform: scale(var(--heading-scale, 1));
}







/* image  */


.make-payment-grident-img img {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
    position: absolute;
    /* inset: 0; */
    /* flex: 0 auto; */
}

.make-payment-grident-img img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

/* mobile responsiveness */

@media screen and (max-width: 991px) {
    

    .section-heading {
        height: 60vh;
    }
    .section-sticky-heading{
        height: 60vh;
    }
    .change-margin.text-center.section-heading-big{
        font-size: 70px;
    }
    .contant-feature{
        grid-row-gap:70px;
    }
    .review-heading-text-big {
        font-size: 80px;
        line-height: 90px;
    }

    .home-one-review {
        padding-bottom: 100px;
    }

    .review-heading {
        padding-top: 80px;
    }

    .faq-nav-link {
        font-size: 18px !important;
    }

    #footerSite.start #itemCoins {
        top: 0% !important;
    }

    #footerSite .coins {
        height: 500px;
        padding-bottom: 50px;
    }
    .baseFooter .nav-link {
        font-size: 18px;
    }
    .baseFooter p {
        padding-left: 0px !important;
    }

    .navfooter .navbar-nav .nav-link {
        font-size: 18px;
        /* padding-right: 15px !important; */
    }

    #footerSite .coins h5 {
        font-size: 54px;
    }


    .navbarNav {
        z-index: 50;
        --tw-duration: .3s;
        --tw-ease: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .3s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        opacity: 0;
        width: calc(100% - 8px);
        max-width: 0;
        max-height: 0;
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .navbar {
        transition-property: all;
        overflow: hidden;
    }

    .navbar-collapse {
        background: #3856A5;
        border: 1px solid #fff9;
        border-radius: 24px;
        padding: 50px 28px 40px;
    }

    .navbar-nav {

        --tw-font-weight: 600;
        color: #fff;
        --tw-duration: .3s;
        --tw-ease: var(--ease-in-out);
        flex-direction: column;
        gap: 24px;
        font-size: 32px;
        font-weight: 600;
        display: flex;

    }

    .nav-link {
        color: #fff !important;
        font-size: 32px;
        font-weight: 600;
    }

    .navbar-toggler:focus {
        box-shadow: unset;
    }

    .navbar.scrolled {
        background: #fff !important;
        box-shadow: 0 2px 8px #00000014 !important;
    }

    .navbar.scrolled .navbar-collapse {
        background-color: #3856A5 !important;
        border-radius: 24px !important;
        padding: 50px 28px 40px !important;

    }

    .navbar.scrolled .nav-link {
        color: #fff !important;
    }
    .make-payment-wrappre {
        grid-template-columns: 0.8fr 1fr;
    }
    .line{
        inset: 0% 46.5%;
    }
    .right-contnt-holder {
        grid-column-gap: 25px;
    }

    .review-heading-text-big {
        /* font-size: 70px; */
        /* line-height: 45px; */
    }

}
.mobile-top-logo{
    display: none;
}
@media screen and (max-width: 767px) {
    .hero .container{
            justify-content: flex-start !important;
    }
    .logo{
        display: none;
    }
    .scrolled .logo{
        display: block;
    }
    #healthcareAnimation{
        width: 100% !important;
        height: auto;
        background-color: transparent;
        box-shadow: none;
    }
    .hero-top-logo{
        display: none;
    }
    .mobile-top-logo{
        display: block;
                padding: 0px 30px;
    }
    .key-points li::before{
        height: 20px !important;
        background-size: 100% 100% !important;
    }
    .hero-text-loop{
        height: 16vh;
    }
    .navbar-brand{
        justify-content: center;
        width: 100%;
    }
    .contentFaqs .title{
        font-size: 16px;
    }
    #footerSite .coins{
        align-items: baseline;
    }
    .collapsed{
        display: none !important;
    }
    .hero-title {
        font-size: 35px;
        padding-top: 55px;
    }
    .hero-section{
        padding: 70px 20px;
    }

    .section-heading {
        padding-bottom: 40px;
        height: auto;

    }

    .section-sticky-heading {
        height: auto;
    }

    .change-margin.text-center.section-heading-big {
        font-size: 32px;
        padding: 16px 10px;
    }

    .contant-feature {
        grid-column-gap: 50px;
        grid-row-gap: 50px;
    }

    .right-contnt-holder {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-flow: column;
    }

    .logo-text {
        display: none;
    }

    .navbarNav {
        z-index: 50;
        --tw-duration: .3s;
        --tw-ease: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .3s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        opacity: 0;
        width: calc(100% - 8px);
        max-width: 0;
        max-height: 0;
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .navbar {
        transition-property: all;
        overflow: hidden;
    }

    .navbar-collapse {
        background: #3856A5;
        border: 1px solid #fff9;
        border-radius: 24px;
        padding: 50px 28px 40px;
    }

    .navbar-nav {

        --tw-font-weight: 600;
        color: #fff;
        --tw-duration: .3s;
        --tw-ease: var(--ease-in-out);
        flex-direction: column;
        gap: 24px;
        font-size: 32px;
        font-weight: 600;
        display: flex;

    }

    .nav-link {
        color: #fff !important;
        font-size: 32px;
        font-weight: 600;
    }

    .navbar-toggler:focus {
        box-shadow: unset;
    }

    .navbar.scrolled {
        background: #fff !important;
        box-shadow: 0 2px 8px #00000014 !important;
    }

    .navbar.scrolled .navbar-collapse {
        background-color: #3856A5 !important;
        border-radius: 24px !important;
        padding: 50px 28px 40px !important;

    }

    .navbar.scrolled .nav-link {
        color: #fff !important;
    }

    .review-heading-text-big {
        font-size: 38px;
        line-height: 45px;
    }

    .home-one-review {
        padding-bottom: 100px;
    }

    .review-heading {
        padding-top: 80px;
    }

    #faqs {
        padding-top: 60px;
    }

    .navbar-social {
        padding-left: 0px !important;
    }

    .baseFooter p {
        padding-left: 0px !important;
        font-size:12px;
    }

    .baseFooter .nav-link {
        font-size: 16px;
    }

    .navfooter .navbar-nav .nav-link {
        font-size: 16px;
        padding-right: 12px !important;
    }

    .navfooter .navbar-nav {
        gap: 0px;
    }
    #footerSite .container{
        gap:0px;
    }
    #footerSite .coins {
        height: 180px;
        padding-bottom: 30px;
    }
    #footerSite .navfooter{
        gap:0px;
    }
    #footerSite{
        padding-bottom: 0px;
    }

    .contentFaqs button {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .faq-nav-link {
        font-size: 16px;
    }
    .faq-heading{
        font-size: 32px;
        line-height: normal;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #faqs .container{
        gap:12px;
        padding: 0px 16px 85px;
    }
    #faqs .headerFaqs .btn{
        margin-top: 0px;
    }

    #footerSite #itemCoins {
        /* top: -30px !important; */
        /* background-image: url(/Media/coins-mobile.webp); */
        display: none;
    }
    #footerSite .coins h5{
        display: none;
    }

    #security .container {
        padding: 40px 25px 60px;
    }

    #security .headerSecurity h2 {
        font-size: 32px;
        line-height: normal;
    }

    .home-one-make-payment.padding-bottom {
        padding-bottom: 70px;
    }

    .home-one-make-payment {
        padding-top: 40px;
    }


    .div-block {
        display: none;
    }

     .make-payment-wrappre {
        grid-column-gap: 50px;
        grid-row-gap: 50px;
        grid-template-columns: 1fr;
    }

    .sticky-card-image {
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 0;
        position: static;
    }

    .sticky-backgroud-gradient {
        width: 100%;
        height: 100%;
    }

    .auto-fit.image-radius.tab-image-full-width {
        width: 100%;
        height: 100%;
    }

    .make-payment-grident-img {
        padding: 20px;

        width: 92%;
        height: 95%;

        inset: 0%;
        top: 2.5%;
        left: 4%;
    }

    .auto-fit.image-radius.two {
        display: none;
    }

    .auto-fit.image-radius.three {
        display: none;
    }

    .line {
        display: none;
    }

    .phone {
        position: sticky;
        width: 100% !important;
    }

    .contant-feature {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .right-contnt-holder {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

    .stap-holder {
        margin-left: 0;
    }

    .step-text {
        padding-left: 0;
    }
    .logo{
        width: 200px;
    }
    .footer-qrcode-big-screens{
        display: none;
    }
    .px-3{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (min-width: 992px) {
    .navbar .btn {
        display: none;
    }
    .footer-mobile-qrcode{
        display: none;
    }
    .coins{
        display: none !important;
    }
}
@media (min-width:768px) and (max-width:991px){
    .footer-mobile-qrcode{
        display: none;
    }
    .coins{
        display: none !important;
    }
}