/*FLOYNEXPAY\css\style.css*/
/* =========================
   ROOT COLORS
========================= */
:root {
    --primary-blue: #007BFF;
    --primary-blue-dark: #0047B3;
    --primary-blue-light: #00A2FF;
    --primary-green: #4CAF50;
    --primary-green-light: #7ED321;
    --success: #00C853;
    --bg: #F5F5F5;
    --card: #FFFFFF;
    --text-main: #212121;
    --text-secondary: #757575;
    --border: #E0E0E0;
}

/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}
section{
    scroll-margin-top:90px;
}
body{
    font-family:Arial, sans-serif;
    background:var(--bg);
    color:var(--text-main);
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
.topnav{
    width:100%;
    background:var(--card);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 5%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.logo img{
    height:50px;
}

.nav-menu ul{
    display:flex;
    gap:25px;
}

.nav-menu a{
    color:var(--text-main);
    font-weight:600;
    transition:0.3s;
}

.nav-menu a:hover{
    color:var(--primary-blue);
}
.menu-toggle{
    display:none;
    border:none;
    background:none;
    cursor:pointer;
    font-size:24px;
    color:var(--primary-blue);
}
.menu-toggle{
    display:none;
}
.howitworks-dropdown{
    position:relative;
}

.howitworks-menu{

    position:absolute;

    top:100%;
    left:0;

    width:260px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    overflow:hidden;

    display:none;

    z-index:3000;
}

.howitworks-menu.active{
    display:block;
}

.howitworks-menu a{

    display:block;

    padding:14px 18px;

    color:#222;

    font-weight:600;

    border-bottom:1px solid #eee;
}

.howitworks-menu a:hover{
    background:#f5f7fb;
}

.howitworks-close{

    text-align:right;

    border-bottom:1px solid #eee;
}

.howitworks-close button{

    border:none;

    background:none;

    cursor:pointer;

    font-size:18px;

    padding:12px 15px;
}
/* =========================
   MOBILE NAVBAR
========================= */
@media (max-width:768px){

    .logo img{
        height:45px;
    }

    .menu-toggle{
        display:block;
    }

    .nav-menu{
        display:none;
    }
    .menu-toggle{
        display:block;
    }

}
@media (max-width:768px){

    .nav-menu.active{
    display:block;
    position:absolute;
    top:65px;
    right:15px;
    background:white;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    min-width:180px;
     overflow:visible;
}

    .nav-menu.active ul{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .nav-menu.active li{
        border-bottom:1px solid var(--border);
    }

    .nav-menu.active a{
    display:block;
    padding:12px 20px;
    text-align:left;
}


.howitworks-close{
    display:none;
}
/*.howitworks-menu{

    display:none;

    margin-top:5px;

    background:#f4f6f8;

    border-left:3px solid var(--primary-blue);

    border-radius:10px;

    overflow:visible;

}*/
.howitworks-menu{

    display:none;

    margin:5px 10px;

    background:#f4f6f8;

    border-left:3px solid var(--primary-blue);

    border-radius:10px;

    overflow:visible;
}
.howitworks-menu.active{
    display:block;
}
.howitworks-menu a{

    display:block;

    padding:12px 18px 12px 28px;

    font-size:14px;

    color:#333;

    border-bottom:1px solid #e8e8e8;

    position:relative;
}

.howitworks-menu a::before{
    content:"";
    width:6px;
    height:6px;
    background:var(--primary-blue);
    border-radius:50%;
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
}

.howitworks-menu a:hover{
    background:#eef3ff;
}
}
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
.hero{
    position:relative;
    height:100vh;
    margin-top:80px;
    overflow:hidden;
    
}

.hero-slider{
    position:absolute;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:1s;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-floating-logo{
    position:absolute;
    top:30px;
    right:30px;
    z-index:5;
}

.hero-floating-logo img{
    width:180px;
}
.hero-content{
    position:relative;
    z-index:10;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    padding:0 8%;
}

.hero-text{
    max-width:400px;
}

.hero-text h1{
    font-size:3rem;
    line-height:1.2;
    margin-bottom:20px;
}

.green-text{
    color:var(--primary-green);
}

.blue-text{
    color:var(--primary-blue);
}

.hero-text p{
    font-size:1.2rem;
    color:#111;
    margin-bottom:30px;
    max-width:550px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    position:absolute;
    right:8%;
    bottom:60px;
}

.btn-primary{
    background:var(--primary-blue);
    color:white;
    padding:15px 30px;
    border-radius:8px;
    font-weight:bold;
}

.btn-secondary{
    background:white;
    color:var(--primary-blue);
    padding:15px 30px;
    border-radius:8px;
    font-weight:bold;
}
.hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
      background:rgba(0, 123, 255, 0.10); /* very light */
    z-index:2;
}
@media (max-width:768px){

    /* HERO SIZE */
    .hero{
        margin-top:70px;
        height:30vh;        /* reduced from 90vh */
        /*min-height:520px;   */
    }

    /* HERO CONTENT LAYOUT */
    .hero-content{
        padding:0 20px;
        align-items:center;
    }

    .hero-text{
        max-width:100%;
        text-align:left;
    }

    /* TITLE */
    .hero-text h1{
        font-size:1.6rem;   /* slightly smaller for better fit */
        line-height:1.3;
    }

    /* PARAGRAPH */
    .hero-text p{
        font-size:0.95rem;
        color:#111;        /* IMPORTANT: better contrast on images */
        line-height:1.5;
    }

.btn-primary,
.btn-secondary{
    width:auto;
    padding:8px 12px;   /* smaller padding */
    font-size:0.8rem;   /* smaller text */
    border-radius:6px;  /* slightly tighter look */
}
}

@media (max-width:768px){

    .hero-floating-logo{
        top:15px;
        right:15px;
    }

    .hero-floating-logo img{
        width:140px;
    }

}
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/* =========================
   MOVING BANNER STRIP
========================= */
.moving-banner{
    width: 100%;
    background: var(--card);
    padding: 10px 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* TRACK THAT MOVES */
.banner-track{
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: scrollLeft 25s linear infinite;
}
/* BANNER IMAGES */
.banner-track img{
    height: 110px;   /* 👈 bigger */
    width: auto;

    object-fit: contain;

    opacity: 0.85;
    transition: 0.3s ease;
}
.banner-track img:hover{
    opacity: 1;
    transform: scale(1.1);
}
/* ANIMATION */
@keyframes scrollLeft{
    0%{
        transform: translateX(0);
    }

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

.white-section{
    width:100%;
    background: linear-gradient(
    to bottom,
    var(--card) 0%,              /* pure white */
    rgba(0, 123, 255, 0.08) 50%, /* soft blue using primary-blue */
    rgba(76, 175, 80, 0.08) 100% /* soft green using primary-green */
);
    padding:80px 5%;
    position:relative;
    min-height: 65vh;
    height: auto;
    margin-bottom: 0;
}
.white-top-left-logo{
    position:absolute;
    top:20px;
    left:20px;
}
.white-top-left-logo img{
    width:300px;   /* small logo */
    height:auto;

    animation: logoBounce 2.5s ease-in-out infinite;
    margin-bottom:15px; /* 👈 space below logo */
}
@keyframes logoBounce {
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-8px);
    }
}
.prod-text-fw1{
    position: absolute;
    top: 120px;   /* adjust based on logo height */
    left: 20px;

    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0;
}

/* colors */
.prod-text-fw1 .blue{
    color: var(--primary-blue);
}

.prod-text-fw1 .green{
    color: var(--primary-green);
}
.prod-text-fw2{
    font-size: clamp(16px, 2vw, 26px); /* ~half size */
    font-weight: 700;
    margin-top: 130px;
    line-height: 1.2;
}

/* colors */
.prod-text-fw2 .deep-blue{
    color: var(--primary-blue-dark);
}

.prod-text-fw2 .green{
    color: var(--primary-green);
}

.prod-text-fw2 .light-blue{
    color: var(--primary-blue-light);
}
.prod-text-desc{
    margin-top: 15px;
    font-size: clamp(16px, 2vw, 26px);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
}

/*---------------------------*/

/* =========================
   FLOYNEX FEATURE CIRCLES ROW
========================= */

.floynex-features-row{
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;

    margin-top: 70px;

    display: flex;
    gap: 10px;
    align-items: center;
}

/* =========================
   BASE CIRCLE STYLE
========================= */

.floynex-feature-circle{
    width: 60px;
    height: 70px;

    border-radius: 50%;

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

    font-size: 12px;
    font-weight: 700;

    border: 2px solid #E0E0E0;
    background: #F5F5F5;
    color: #111;

    cursor: pointer;

    transition: all 0.3s ease;
}

/* =========================
   HOVER EFFECT
========================= */

.floynex-feature-circle:hover{
    transform: translateY(-6px) scale(1.08);
    border-color: #007BFF;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
/* =========================
   INDIVIDUAL COLORS
========================= */

.floynex-mpesa{
    background: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}
/* MPESA ICON SIZE */
.floynex-mpesa i{
    font-size: 34px;
}

.floynex-w2w{
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
}
/* W2W ICON SIZE */
.floynex-w2w i{
    font-size: 34px;
}

.floynex-b2c{
    background: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}
/* B2C ICON SIZE */
.floynex-b2c i{
    font-size: 32px;
}

.floynex-secure{
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
}
/* SECURE ICON SIZE */
.floynex-secure i{
    font-size: 34px;
}
/* =========================
   FEATURE ITEM
========================= */

.floynex-feature-item{
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =========================
   FEATURE TEXT
========================= */

.floynex-feature-text h4{
    font-size: 14px;
    color: #111111;
    margin-bottom: 4px;
}

.floynex-feature-text p{
    font-size: 12px;
    line-height: 1.4;
    color: #111111;
    font-weight: 600;
}
/* =========================
   RIGHT PRODUCT IMAGES AREA
========================= */

.right-prod{
    position: absolute;
    top: 50%;
    right: 60px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
}

/* PRODUCT IMAGES */
.right-prod img{
    width: 160px;
    height: auto;

    object-fit: contain;

    transition: 0.3s ease;
}

/* HOVER EFFECT */
.right-prod img:hover{
    transform: scale(1.05);
}
/*_-----------------------------------------------------------------*/
@media (max-width: 768px){

    /* SECTION HEIGHT FIX */
    .white-section{
        height: auto;
        padding: 120px 20px 40px;
    }

    /* LOGO */
    .white-top-left-logo{
        position: relative;
        top: 0;
        left: 0;
        text-align: left;
    }

    .white-top-left-logo img{
        width: 310px;
    }

    /* HERO TEXT STACK */
    .prod-text-fw1{
        position: relative;
        top: 0;
        left: 0;
        margin-top: 15px;
        font-size: 32px;
    }

    .prod-text-fw2{
        margin-top: 10px;
        font-size: 18px;
    }

    .prod-text-desc{
        font-size: 16px;
        margin-top: 10px;
    }

    /* FEATURES STACK (IMPORTANT FIX) */
   .floynex-features-row{
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;

    display: flex;
    flex-direction: row;

    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 10px 5px;

    scroll-snap-type: x mandatory; /* 🔥 key fix */

    -webkit-overflow-scrolling: touch;
}

.floynex-features-row:hover{
    animation-play-state: paused; /* pause when user interacts */
}
.floynex-feature-item{
    flex: 0 0 auto;

    min-width: 200px;  /* 🔥 real visible card size */

    scroll-snap-align: center; /* 🔥 centers item */

    background: #fff;
    border-radius: 12px;

    padding: 10px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
  .floynex-features-row{
    padding-left: 20px;
    padding-right: 20px;
}
    /* RIGHT IMAGES */
    .right-prod{
        position: relative;
        top: auto;
        right: auto;
        transform: none;

        justify-content: center;
        margin-top: 30px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .right-prod img{
        width: 160px;
    }
}


/* =========================
   SERVICES SECTION
========================= */
.services-section{
    width: 100%;
    min-height: 500px;
    background: #FFFFFF;

    position: relative; /* IMPORTANT for absolute child */
}

/* =========================
   LOGO TOP RIGHT INSIDE SECTION
========================= */
.services-logo{
    position: absolute;
    top: 40px;
    right: 140px;
    animation: softBounce 3s ease-in-out infinite;
}

.services-logo img{
    height: 65px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;

}
@keyframes softBounce{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-6px);
    }
}
/* =========================
   LEFT TEXT BLOCK (POSITIONED UNDER LOGO)
========================= */
.services-text{
    position: absolute;

    top: 120px;   /* 👈 this pushes it BELOW the logo */
    left: 80px;   /* left side alignment */

    max-width: 600px;
}

/* MAIN TITLE */
.services-title{
    font-size: 42px;
    font-weight: 800;
    color: #111111;

    margin-bottom: 15px;

    border-left: 6px solid #111111;
    padding-left: 15px;
}

/* SUB TITLE */
.services-subtitle{
    font-size: 32px;
    font-weight: 800;

    letter-spacing: 1px; /* 👈 slight graffiti feel (spaced energy) */
}

/* BLUE PART */
.services-subtitle .blue-text{
    color: #0A66C2;
    font-weight: 800;

    text-transform: none;
}

/* GREEN PART */
.services-subtitle .green-text{
    color: #4CAF50;
    font-weight: 800;

    text-transform: none;
}

/*-------------------------------------*/
/* =========================
   NUMBERS GRID (1-4)
========================= */
.services-numbers{
    margin-top: 10px;

    display: grid;
    grid-template-columns: repeat(2, 60px);
    gap: 25px 220px;

    padding-left: 10px;
}

/* =========================
   GREEN CIRCLE STYLE
========================= */
.num-circle{
    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #4CAF50;
    color: #fff;

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

    font-size: 18px;
    font-weight: 600;

    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.25);

    cursor: pointer;
    transition: 0.3s ease;
}

/* HOVER EFFECT */
.num-circle:hover{
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(76, 175, 80, 0.35);
}



/*------------------------*/
.num-circle{
    position: relative;
}

.num-text{
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    
    white-space: nowrap;
    color: #000;
    font-weight: 800;
    font-size: 15px;
}

/* second line */
.num-subtext{
    display: block;
    margin-top: 4px;

    font-size: 13px;
    font-weight: 400;
    color: #333;
}
.services-message{
    text-align: center;
    margin-top: 30px;
    transform: translateX(10px); 
}
/* TITLE with lines left and right */
.services-message h3{
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    letter-spacing: 1px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* left + right green lines */
.services-message h3::before,
.services-message h3::after{
    content: "";
    flex: 1;
    height: 2px;
    background: #4CAF50;
}

/* TEXT BELOW */
.services-message p{
    font-size: 25px;
    font-weight: 800;
    color: #4CAF50;
    margin: 0;
}

.services-bottom-text{
    position: absolute;
  
    left: 140%;
    transform: translateX(-50%);

    font-size: 18px;
    font-weight: 700;
    color: #0A66C2;        /* blue */
    text-align: center;
    width: 100%;
}
.services-bottom-subtext{
    position: absolute;
    bottom: -70px;  
    left: 140%;
    transform: translateX(-50%);

    font-size: 17px;
    font-weight: 600;
    color: #4CAF50;
    text-align: center;
    width: 100%;
    line-height: 1.4;
}
/*--------------------------------------------------*/
.services-slider{
    position: absolute;

    top: 120px;
    right: 80px;

    width: 350px;
    height: 350px;

    overflow: hidden;
    border-radius: 20px;
}

/* images */
.services-slider .service-slide{
    position:absolute;

    width:100%;
    height:350px;

    object-fit:contain;

    opacity:0;
    transition:opacity 1.5s ease-in-out;
}

.services-slider .service-slide.active{
    opacity:1;
}
/*--------------------------------------------------------*/
/* =========================
   PURE WHITE SECTION
========================= */
.white-sectiona1{
    width: 100%;
    min-height: 700px;

    background: linear-gradient(
    to bottom,
    var(--card) 0%,              /* pure white */
    rgba(0, 123, 255, 0.08) 50%, /* soft blue using primary-blue */
    rgba(76, 175, 80, 0.08) 100% /* soft green using primary-green */
);

    position: relative;
}
/* =========================
   TOP LEFT BOUNCING LOGO
========================= */
.white-logo{
    position: absolute;

    top: 40px;
    left: 60px;

    animation: whiteLogoBounce 3s ease-in-out infinite;
}

.white-logo img{
    width: 200px;
    height: auto;

    object-fit: contain;
}

/* bounce animation */
@keyframes whiteLogoBounce{

    0%, 100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-8px);
    }
}
/* TITLE NEXT TO LOGO */
.white-title{
    position: absolute;

    top: 48px;
    left: 500px;

    font-size: 38px;
    font-weight: 800;
    color: #111111;
    animation: titleBounce 3s ease-in-out infinite;
}
/* BOUNCE ANIMATION */
@keyframes titleBounce{

    0%, 100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-8px);
    }
}
/* SUBTITLE */
.white-subtitle{
    position: absolute;

    top: 100px;
    left: 460px;

    font-size: 24px;
    font-weight: 700;

    animation: subtitleBounce 3s ease-in-out infinite;
}

/* BLUE TEXT */
.white-subtitle .blue-text{
    color: #0A66C2;
}

/* GREEN TEXT */
.white-subtitle .green-text{
    color: #4CAF50;
}

/* FLOAT EFFECT */
@keyframes subtitleBounce{

    0%, 100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-6px);
    }
}
@media (max-width:768px){

    /* SECTION */
    .services-section{
        min-height: auto;
        padding: 30px 20px 50px;
    }

    /* LOGO */
    .services-logo{
        position: relative;
        top: auto;
        right: auto;
        text-align: center;
        margin-bottom: 20px;
    }

    .services-logo img{
        height: 55px;
        margin: 0 auto;
    }

    /* SLIDER */
    .services-slider{
        position: relative;
        top: auto;
        right: auto;

        width: 100%;
        max-width: 280px;
        height: 280px;

        margin: 0 auto 25px auto;
    }

    .services-slider .service-slide{
        height: 280px;
    }

    /* TEXT AREA */
    .services-text{
        position: relative;
        top: auto;
        left: auto;

        max-width: 100%;
    }

    /* TITLES */
    .services-title{
        font-size: 28px;
        margin-bottom: 10px;
    }

    .services-subtitle{
        font-size: 22px;
        margin-bottom: 20px;
    }

    /* NUMBERS */
    .services-numbers{
        grid-template-columns: 1fr;
        gap: 20px;
        padding-left: 0;
        margin-top: 20px;
    }

    /* EACH ITEM */
    .num-circle{
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .num-text{
        left: 50px;
        font-size: 14px;
        white-space: normal;
        width: 220px;
    }

    .num-subtext{
        font-size: 12px;
    }

    /* GOOD NEWS */
    .services-message{
        margin-top: 40px;
        transform: none;
    }

    .services-message h3{
        font-size: 18px;
    }

    .services-message p{
        font-size: 22px;
    }

    /* BOTTOM TEXTS */
    .services-bottom-text{
        position: relative;
        left: auto;
        transform: none;

        width: 100%;
        margin-top: 25px;

        font-size: 16px;
    }

    .services-bottom-subtext{
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;

        width: 100%;
        margin-top: 12px;

        font-size: 14px;
    }
}



/* =========================
   HOW IT WORKS CARD
========================= */
.how-card{
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-height: 320px;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    animation: cardFloat 4s ease-in-out infinite;
}
/* FLOAT ANIMATION */
@keyframes cardFloat{

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

    50%{
        transform: translateX(-50%) translateY(-8px);
    }
}
.how-card{
    position: relative;
    overflow: hidden;
}

/* GREEN RISING FILLED AREA */
.how-card::after{
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 90px;

    background: #4CAF50;

    /* create rising diagonal top edge */
    clip-path: polygon(
    0 100%,
    0 90%,      /* adjusted left start (slightly higher) */
    
    40% 90%,    /* flat middle */
    80% 90%,    /* KEEP 0–80% perfectly flat */

    /* ❗ DO NOT TOUCH BELOW (80–100%) */
        /* keep 0–80% unchanged */

        /* 0–85% unchanged */

    85% 75%,
    100% 75%,

    100% 100%
);
}
.how-left-text{
    position: absolute;
    left: 40px;
    top: 25%;
    transform: translateY(-50%);
    font-size: 25px;
    font-weight: 800;
    /*color: #000;*/
    color: #4CAF50;
}
.how-w2w-title{
    position: absolute;

    left: 40px;
    top: 10%;   /* above Request Payments */

    font-size: 25px;
    font-weight: 800;
    color: #000;
}
.how-left-subtext{
    position: absolute;
    left: 40px;
    top: 30%;
    font-size: 25px;
    font-weight: 900;
    /*color: #4CAF50;*/
    color: #0A66C2;
}
.how-left-desc{
    position: absolute;

    left: 40px;
    top: 43%;

    font-size: 15px;
    font-weight: 500; /* slightly bold, not heavy */
    color: #111;
}

.how-mini-card{
    position: absolute;
    left: 40px;
    top: 70%;
    width: 500px;
    height: 70px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* 👈 ADD THIS */
    gap: 10px;                   /* 👈 ADD THIS */
    padding-left: 12px;         /* 👈 ADD THIS */
}


/* GREEN CIRCLES */
.mini-icon-circle{
    width: 40px;
    height: 40px;
    background: #4CAF50;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.25);
}
.mini-item{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* THIS is the missing part */
.mini-item div{
    display: flex;
    flex-direction: column;
}

.mini-text{
    font-size: 14px;
    font-weight: 600;  /* slightly bold */
    color: #000;
}
.mini-subtext{
    font-size: 12px;
    font-weight: 400; /* not bold */
    color: #555;
}
.mini-text-group{
    display: flex;
    flex-direction: column;
}
.how-left-side-text{
    position: absolute;
    left: 400px;  /* 👈 sits next to "Request Payments" */
    top: 5%;
    font-size: 22px;
    font-weight: 600;
    color: #4CAF50;
}
.how-left-side-text-2{
    position: absolute;

    left: 500px;  /* adjust next to "Request" */
    top: 5%;

    font-size: 22px;
    font-weight: 600;
    color: #000;
}
.how-left-subline{
    position: absolute;

    left: 400px;
    top: 15%;

    font-size: 14px;
    font-weight: 400;
    color: #111;
}
.how-flow{
    position: absolute;

    left: 380px;
    top: 24%;

    display: flex;
    align-items: center;
    gap: 10px;
}

/* GREEN CIRCLES */
.flow-item{
    width: 45px;
    height: 45px;
border: 0.5px solid #bdbaba;  /* 👈 ADD THIS (white boundary) */
    background: #dffce0;
    border-radius: 50%;
}
/* ARROWS */
.flow-arrow{
    font-size: 22px;
    color: #000;
    font-weight: 800;
}
.flow-item{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #4CAF50;
}
.kes-item{
    font-size: 14px;     /* smaller */
    font-weight: 800;    /* bold */
    letter-spacing: 1px; /* fintech feel */
}
.how-steps{
    position: absolute;

    left: 350px;
    top: 43%;

    display: flex;
    align-items: center;
    gap: 25px;
}

/* green numbered circles */
.step-circle{
    width: 18px;
    height: 18px;

    background: #4CAF50;
    color: #fff;

    border-radius: 50%;

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

    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.25);
}
.step-block{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* text under circle */
.step-text{
    margin-top: 6px;
    text-align: center;

    font-size: 12px;
    font-weight: 500;
    color: #111;
    line-height: 1.2;
}
/* RIGHT SIDE IMAGE SLIDER */
.right-image-slider{
    position: absolute;

    right: -130%;
    top: -210%;
    /*transform: translateY(-50%);*/

    width: 380px;
    height: 310px;

    overflow: hidden;
    border-radius: 16px;
}

/* all images stacked */
.right-image-slider .right-slide{
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* active image */
.right-image-slider .right-slide.active{
    opacity: 1;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-----------------------------------------*/
.how-carda1{
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-height: 320px;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    animation: cardFloat 4s ease-in-out infinite;
}
/* FLOAT ANIMATION */
@keyframes cardFloat{

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

    50%{
        transform: translateX(-50%) translateY(-8px);
    }
}
.how-carda1{
    position: relative;
    overflow: hidden;
}

/* GREEN RISING FILLED AREA */
.how-carda1::after{
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 90px;

    background: #4CAF50;
clip-path: polygon(
 0 35%,
15% 35%,

    20% 90%,    
    60% 90%,
    80% 90%,

    100% 90%,   
    100% 100%,
    0 100%
);

}
.how-left-desca1{
    position: absolute;
    left: 40px;
    top: 30%;
    font-size: 18px;
    font-weight: 500; /* slightly bold, not heavy */
    color: #111;
}
.how-left-texta1{
    position: absolute;
    left: 40px;
    top: 25%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 800;
    /*color: #000;*/
    color: #4CAF50;
}

.mini-itema1{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* THIS is the missing part */
.mini-itema1 div{
    display: flex;
    flex-direction: column;
}

.mini-texta1{
    font-size: 14px;
    font-weight: 600;  /* slightly bold */
    color: #000;
}
.how-mini-carda1{
    position: absolute;
    left: 10px;
    top: 50%;
    width: 500px;
    height: 55px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* 👈 ADD THIS */
    gap: -10px;                   /* 👈 ADD THIS */
    padding-left: 12px;         /* 👈 ADD THIS */
}
.mini-icon-circlea1{
    width: 30px;
    height: 30px;
    background: #4CAF50;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.25);
}
.mini-subtext{
    font-size: 14px;
    font-weight: 600;  /* slightly bold */
    color: #000;
}
/*______________________________________________________*/

.inner-green-card{
    width: 140px;
    height: 30px;
    position: absolute;
    left: 535px;
    top: -125px;
    background: #539455;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-weight: 600;
    font-size: 15px;
}
.inner-white-card{
    width: 210px;
    height: 210px;
    position: absolute;
    left: 510px;
    top: -110px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    position: absolute;
}
.circle{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;

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

    color: white;
    font-size: 16px;
}

/* top circle */
.circle-1{
    background: #28a745;
    top: 35px;
    left: 15px;
}

/* bottom circle */
.circle-2{
     background: #28a745;
    bottom: 40px;
    left: 15px;
}
.inner-white-card::after{
    content: "";
    width: 70%;              /* line length */
    height: 2px;             /* thickness */
    background: #e0e0e0;     /* light gray line */
    position: absolute;
    top: 50%;                /* center vertically */
    left: 50%;
    transform: translate(-50%, -50%);
}
.card-textu{
    position: absolute;
    top: 30px;        /* align with first circle */
    left: 55px;       /* push it to the right of circle */
    color: #28a745;   /* green text */
    font-size: 13px;
    font-weight: 700;
}
.text-2{
    top: 120px;   /* pushes it near second circle */
    left: 55px;
}
.card-desc{
    position: absolute;
    top: 50px;       /* below the title */
    left: 55px;
    color: #000000;  /* black text */
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.75;   /* slightly softer black */
}
.desc-2{
    top: 135px;   /* places it under second section */
    left: 55px;
}
.easy-steps-label{
    position: absolute;
    left: 740px;     /* adjust based on your layout */
    top: -150px;      /* align vertically with card */
    color: #28853d;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/*-----------------------------------------------------------*/
.steps-flowes{
    position: absolute;
    left: 730px;   /* adjust next to "Easy Steps" */
    top: -108px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-circlees{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #28a745;
    color: white;
    font-size: 12px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;
}
.step-linees{
    width: 2px;
    height: 30px;
    background: #28a745;
}
/*----------------------------------------------*/
.steps-flowic{
    position: absolute;
    left: 760px;
    top: -125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.step-circleic{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d7f5de;

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

    font-size: 12px;
    font-weight: 700;

    position: relative;
}
.step-circleic i{
    font-size: 22px;
    color: #28a745;
}
/*----------------------------------*/
.mini-textics{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 5px;     /* adjust position */
    left: 50px;    /* adjust position */
}
.mini-sub-textics{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 20px;     /* below "Click" */
    left: 50px;    /* same alignment */
    white-space: nowrap; 
}
.mini-textics1{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 60px;     /* adjust down */
    left: 50px;

    white-space: nowrap;
}

.mini-sub-textics1{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 75px;     /* below title */
    left: 50px;

    white-space: nowrap;
}
.mini-textics2{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 110px;     /* adjust down */
    left: 50px;

    white-space: nowrap;
}

.mini-sub-textics2{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 130px;     /* below title */
    left: 50px;

    white-space: nowrap;
}
.mini-textics3{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 170px;     /* adjust down */
    left: 50px;

    white-space: nowrap;
}

.mini-sub-textics3{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 185px;     /* below title */
    left: 50px;

    white-space: nowrap;
}
.mini-textics4{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 225px;     /* adjust down */
    left: 50px;

    white-space: nowrap;
}

.mini-sub-textics4{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;

    top: 240px;     /* below title */
    left: 50px;

    white-space: nowrap;
}

/*-------------------------------------------------------------*/
.how-carda1 {
    position: relative; /* important for absolute positioning */
}

.stk-images {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 0px;
    align-items: flex-end;
}

.stk-images img {
    width: 125px;   /* adjust size */
    height: auto;
    object-fit: contain;
    background: transparent; /* ensures no background issues */
}

/*-------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
.how-cardsm{
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-height: 320px;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    animation: cardFloat 4s ease-in-out infinite;
}
/* FLOAT ANIMATION */
@keyframes cardFloat{

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

    50%{
        transform: translateX(-50%) translateY(-8px);
    }
}
.how-cardsm{
    position: relative;
    overflow: hidden;
}

/* GREEN RISING FILLED AREA */
.how-cardsm::after{
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 10px;

    background: #4CAF50;
}

/*------------------------------------------------------------*/
.how-w2w-titlesm{
    position: absolute;

    left: 15px;
    top: 30%;   /* above Request Payments */

    font-size: 30px;
    font-weight: 800;
    color: #000;
}
.how-left-textsm{
    position: absolute;
    left: 15px;
    top: 45%;
    height: 30px;
    transform: translateY(-50%);
    font-size: 35px;
    font-weight: 800;
    /*color: #000;*/
    color: #4CAF50;
}
.how-left-descsm{
    position: absolute;

    left: 15px;
    top: 55%;

    font-size: 18px;
    font-weight: 500; /* slightly bold, not heavy */
    color: #111;
}
.how-left-side-text-2sm{
    position: absolute;

    left: 465px;  /* adjust next to "Request" */
    top: 5%;

    font-size: 22px;
    font-weight: 600;
    color: #000;
}
.how-stepssm{
    position: absolute;

    left: 380px;
    top: 43%;

    display: flex;
    align-items: center;
    gap: 25px;
}
.inner-white-cardsm{
    width: 280px;
    height: 60px;
    position: absolute;
    left: 560px;
    top: 240px;
    background: #f2ffe9;
    border: 1.5px solid #dae6d6; 
    border-radius: 12px; 
    box-shadow: none; 
    padding: 6px 10px;
}
.shield-checksm{
    color: #22c55e;
    font-size: 36px;

    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.secure-textsm{
    color: #22c55e;
    font-size: 15px;
    font-weight: 600;

    position: absolute;
    left: 54px;
    top: 28%;
    transform: translateY(-50%);
}
.secure-subtextsm{
    color: #222;
    font-size: 11px;
    font-weight: 600;

    position: absolute;
    left: 56px;
    top: 65%;
    transform: translateY(-50%);
}

.sendmoney-images{
    position: absolute;

    right: 10px;
    bottom: 18px;

    display: flex;
    align-items: flex-end;
    gap: 0px;
}

.sendmoney-images img{
    width: 135px;
    height: auto;

    object-fit: contain;
    background: transparent;

    transition: transform 0.3s ease;
}

/* optional hover */
.sendmoney-images img:hover{
    transform: translateY(-4px);
}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/* =========================
   FIX: HOW IT WORKS FULL WIDTH CLEAN FIT
========================= */

.how-carda1,
.how-card,
.how-cardsm{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
@media (min-width: 769px){

    .how-carda1,
    .how-card,
    .how-cardsm{
        padding: 40px 30px;
    }
}
.right-line-images{
    right: 20px;
}
.how-flow,
.how-steps,
.steps-flowes,
.steps-flowic{
    gap: 14px;
}
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/

@media (max-width: 768px) {

    /* SECTION */
    .white-section,
    .white-sectiona1 {
        padding: 25px 15px;
        min-height: auto;
        text-align: center;
    }

    /* LOGO */
    .white-logo {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        margin: 0 auto 15px auto;
        display: flex;
        justify-content: center;
    }

    .white-logo img {
        width: 140px;
    }

    /* TITLE */
    .white-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        font-size: 26px;
        margin: 10px 0;
        text-align: center;
    }

    /* SUBTITLE */
    .white-subtitle {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        font-size: 18px;
        margin: 5px 0 20px 0;
        text-align: center;
    }
}

/*######################################################*/
/*######################################################*/
/*######################################################*/
/*######################################################*/
.desktop-card {
    display: block;
}

.mobile-card {
    display: none;
}

@media (max-width: 768px) {

    .desktop-card {
        display: none !important;
    }

    .mobile-card {
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 110%;
        top: 90px;
        gap: 15px;
        text-align: center;
    }


   .mobile-info {
    margin-top: 10px;
    font-weight: 600;
    color: #4CAF50;

    display: flex;
    flex-direction: column;
    gap: 4px;

    position: relative;
    z-index: 5;
}
    .mobile-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* EACH STEP CARD */
.mobile-step {
    display: flex;
    align-items: center;
    gap: 12px;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;

    padding: 12px 14px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* ICON */
.step-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;

    background: #d7f5de;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #28a745;
    font-size: 18px;
}

/* TEXT */
.step-text {
    display: flex;
    flex-direction: column;
}

.step-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.step-sub {
    font-size: 12px;
    color: #666;
}

.mobile-stk-images{
    display: flex;
    gap: 12px;

    width: 200px;      /* shows 1 card at a time */
    margin: 0 auto;

    overflow: hidden;

    background: #fff;
    padding: 10px;

    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.stk-card {
    flex: 0 0 180px;

    width: 180px;
    height: 180px;

    background: #fff;
    border-radius: 12px;

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

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    animation: none;
}
.stk-track{
    display: flex;
    gap: 12px;

    animation: stkSlide 9s infinite;
}
.stk-card img {
    width: 150px;
    max-width: 100%;
    height: auto;
}
@keyframes stkSlide {

    0%, 25% {
        transform: translateX(0);
    }

    33%, 58% {
        transform: translateX(-192px);
    }

    66%, 91% {
        transform: translateX(-384px);
    }

    100% {
        transform: translateX(0);
    }
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Desktop Version */
.how-cardsm{
    display:block;
}

/* Mobile Version */
.how-cardsm-mobile{
    display:none;
}

/* Mobile */
@media (max-width:768px){

    .how-cardsm{
        display:none;
    }

    .how-cardsm-mobile{
        display:block;
    }

}
/* ==========================================
   MOBILE SEND MONEY CARD
========================================== */

.how-cardsm-mobile{
    width: 103%;
    margin: 100px auto 15px;
    padding: 25px 15px 30px;

    background: #ffffff;
    border-radius: 24px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    position: relative;
    overflow: hidden;
}
/* Green bottom brand line */

.how-cardsm-mobile::after{
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 8px;

    background: #4CAF50;
}

/* ==========================================
   TOP SECTION
========================================== */

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

.mobile-logo{
    width: 130px;
    display: block;
    margin: 0 auto 12px;
}

.mobile-badge{
    display: inline-block;

    padding: 8px 16px;

    background: #e8f8ea;

    color: #4CAF50;

    font-size: 13px;
    font-weight: 700;

    border-radius: 50px;

    margin-bottom: 14px;
}

.mobile-title{
    font-size: 34px;
    font-weight: 800;

    color: #111;

    margin: 0;
}

.mobile-subtitle{
    margin-top: 10px;

    font-size: 15px;
    line-height: 1.6;

    color: #555;
}

/* ==========================================
   FLOW CARD
========================================== */

.mobile-flow-card{
    margin-top: 25px;

    background: #f7f9fb;

    border-radius: 18px;

    padding: 20px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-flow-item{
    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: 2px solid #4CAF50;

    background: #fff;

    color: #4CAF50;

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

    font-size: 20px;
    font-weight: 700;
}

.mobile-flow-arrow{
    color: #4CAF50;

    font-size: 24px;

    margin: 6px 0;
}

.kes-mobile{
    font-size: 15px;
    font-weight: 800;
}

.success-mobile{
    background: #4CAF50;
    color: #fff;
}

/* ==========================================
   STEP TITLE
========================================== */

.mobile-steps-title{
    margin-top: 28px;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #111;
}

/* ==========================================
   STEPS
========================================== */

.mobile-steps{
    margin-top: 18px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-step-card{
    background: #fff;

    border: 1px solid #ededed;

    border-radius: 16px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

.mobile-step-number{
    min-width: 34px;
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #4CAF50;

    color: #fff;

    font-size: 14px;
    font-weight: 700;

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

.mobile-step-text{
    font-size: 14px;
    font-weight: 600;

    color: #222;

    line-height: 1.5;
}

/* ==========================================
   SECURITY CARD
========================================== */

.mobile-security-card{
    margin-top: 24px;

    background: #f2ffe9;

    border: 1px solid #dbead6;

    border-radius: 16px;

    padding: 15px;

    display: flex;
    align-items: center;

    gap: 12px;
}

.mobile-security-card i{
    font-size: 32px;
    color: #22c55e;
}

.mobile-security-title{
    color: #22c55e;

    font-size: 15px;
    font-weight: 700;
}

.mobile-security-subtitle{
    margin-top: 3px;

    font-size: 12px;

    color: #444;
}

/* ==========================================
   BENEFITS
========================================== */

.mobile-benefits{
    margin-top: 20px;

    display: flex;
    gap: 10px;
}

.mobile-benefit{
    flex: 1;

    background: #fafafa;

    border: 1px solid #ececec;

    border-radius: 14px;

    padding: 14px 8px;

    text-align: center;
}

.mobile-benefit i{
    display: block;

    color: #4CAF50;

    font-size: 20px;

    margin-bottom: 8px;
}

.mobile-benefit span{
    font-size: 13px;
    font-weight: 700;

    color: #222;
}

/* ==========================================
   APP SCREENSHOTS
========================================== */

.mobile-screens{
    margin-top: 25px;

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

    gap: 6px;
}

.mobile-screens img{
    width: 72px;
    height: auto;

    object-fit: contain;

    transition: 0.3s ease;
}

.mobile-screens img:hover{
    transform: translateY(-5px);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ==================================================
/* =========================
   DEFAULT (DESKTOP)
========================= */

/* Desktop card visible */
.how-card{
    display: block;
}

/* Mobile card hidden on desktop */
.how-card-mobile{
    display: none;
}

/* =========================
   MOBILE VIEW
========================= */

@media (max-width: 768px){

    /* ❌ hide desktop card on mobile */
    .how-card{
        display: none !important;
    }

    /* ✔ show mobile card on mobile */
    .how-card-mobile{
        display: block;
    }
}

@media (max-width: 768px){

    /* show mobile card */
    .how-card-mobile{
        display: block;

        width: 103%;
        margin: 20px auto 20px;
        padding: 22px 16px 28px;

        background: #ffffff;
        border-radius: 22px;

        box-shadow: 0 10px 28px rgba(0,0,0,0.08);

        position: relative;
        overflow: hidden;
    }

    /* green bottom accent */
    .how-card-mobile::after{
        content:"";
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:8px;
        background:#4CAF50;
    }

    /* ================= HEADER ================= */

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

    .mobile-badge{
        display:inline-block;

        background:#e9f9ea;
        color:#4CAF50;

        font-size:13px;
        font-weight:700;

        padding:7px 14px;
        border-radius:50px;

        margin-bottom:12px;
    }

    .mobile-title{
        font-size:30px;
        font-weight:800;

        color:#111;
        margin:0;
    }

    .mobile-subtitle{
        margin-top:10px;

        font-size:14px;
        line-height:1.5;

        color:#555;
    }

    /* ================= FLOW ================= */

    .mobile-flow{
        margin-top:22px;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6px;
    }

    .mobile-flow-step{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .mobile-icon{
        width:52px;
        height:52px;

        border-radius:50%;

        background:#fff;

        border:2px solid #4CAF50;

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

        color:#4CAF50;

        font-size:18px;
        font-weight:700;
    }

    .mobile-flow-step.kes .mobile-icon{
        font-size:14px;
        font-weight:800;
        letter-spacing:1px;
    }

    .mobile-line{
        width:2px;
        height:18px;

        background:#4CAF50;
    }

    .mobile-flow-step:last-child .mobile-line{
        display:none;
    }

    /* ================= STEPS ================= */

    .mobile-steps-title{
        margin-top:24px;

        text-align:center;

        font-size:16px;
        font-weight:700;

        color:#111;
    }

    .mobile-steps{
        margin-top:14px;

        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .mobile-step{
        display:flex;
        align-items:flex-start;
        gap:12px;

        background:#fff;

        border:1px solid #eee;

        border-radius:14px;

        padding:12px 14px;

        box-shadow:0 3px 10px rgba(0,0,0,0.04);
    }

    .mobile-step .num{
        width:28px;
        height:28px;

        background:#4CAF50;
        color:#fff;

        border-radius:50%;

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

        font-size:13px;
        font-weight:700;

        flex-shrink:0;
    }

    .mobile-step p{
        margin:0;

        font-size:13px;
        font-weight:600;

        color:#222;

        line-height:1.4;
    }

    /* ================= RESULT ================= */

    .mobile-result{
        margin-top:22px;

        text-align:center;

        font-size:20px;
        font-weight:900;

        color:#0A66C2;
    }

    .mobile-desc{
        text-align:center;

        margin-top:6px;

        font-size:13px;
        color:#555;
    }

    /* ================= MINI FEATURES ================= */

    .mobile-mini{
        margin-top:18px;

        display:flex;
        gap:10px;
    }

    .mini-box{
        flex:1;

        background:#fafafa;

        border:1px solid #ececec;

        border-radius:14px;

        padding:12px 8px;

        display:flex;
        align-items:center;
        gap:8px;
    }

    .mini-box i{
        color:#4CAF50;
        font-size:18px;
    }

    .mini-box h4{
        margin:0;

        font-size:13px;
        font-weight:700;

        color:#111;
    }

    .mini-box p{
        margin:0;

        font-size:11px;
        color:#666;
    }
}
/* =========================
   DESKTOP ONLY
========================= */

.right-image-slider{
    display: block;
}

/* =========================
   MOBILE RULES
========================= */

@media (max-width:768px){

 /* =========================
   MOBILE SLIDER (NEW SYSTEM)
========================= */

.mobile-right-slider{
    margin: 18px auto;

    width: 100%;
    max-width: 320px;
    height: 240px;

    position: relative;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff; /* FIX BLACK SCREEN */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* images stacked */
.mobile-slide{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;  /* keeps full image visible */

    opacity: 0;

    transition: opacity 0.8s ease-in-out;

    background: #ffffff; /* FIX BLACK FLASH */
}

/* active slide */
.mobile-slide.active{
    opacity: 1;
}
   
}
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

/* =========================
   WALLET GREEN SECTION
========================= */

.wallet-section-wa{
    width: 100%;
    height: 300px;
    border-radius: 0;
   margin-top: 210px;
margin-bottom: 10px;
position: relative;
    background: linear-gradient(
        135deg,
        #04311a 0%,
        #1c703c 30%,
        #2fbe66 50%,
        #1c703c 70%,
        #002211 100%
    );
}
.wallet-white-card{
    width: 200px;
    height: 60px;
    background: #ffffff;

    position: absolute;
    top: 40px;
    left: 40px;

    border-radius: 15px;
}
.wallet-white-card img{
    width: 160px;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}
.wallet-main-text{
    position: absolute;
    top: 115px;
    left: 40px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.1;
}
.wallet-second-text{
    position: absolute;
    top: 155px;
    left: 40px;

    color: #08fa40;

    font-size: 52px;
    font-weight: 700;

    line-height: 1.1;
}
.wallet-white-cardaw{
    width: 45px;
    height: 47px;
    background: #ffffff;

    position: absolute;
    top: 220px;
    left: 40px;

    border-radius: 15px;

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

.wallet-white-cardaw i{
    color: #0e8342;
    font-size: 30px;
}
.wallet-instant-text{
    position: absolute;
    top: 225px;
    left: 90px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.wallet-transaction-text{
    position: absolute;
    top: 245px;
    left: 90px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}
.wallet-vertical-line{
    position: absolute;

    top: 228px;
    left: 190px;

    width: 2px;
    height: 40px;

    background: #ffffff;

    border-radius: 10px;
}
/*------------------####################--------------------*/
.wallet-white-cardaw1{
    width: 45px;
    height: 47px;
    background: #ffffff;

    position: absolute;
    top: 220px;
    left: 200px;

    border-radius: 15px;

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

.wallet-white-cardaw1 i{
    color: #0e8342;
    font-size: 30px;
}
.wallet-instant-text1{
    position: absolute;
    top: 225px;
    left: 250px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.wallet-transaction-text1{
    position: absolute;
    top: 245px;
    left: 250px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}
.wallet-vertical-line1{
    position: absolute;

    top: 228px;
    left: 340px;

    width: 2px;
    height: 40px;

    background: #ffffff;

    border-radius: 10px;
}
/*------------------####################--------------------*/
.wallet-white-cardaw2{
    width: 45px;
    height: 47px;
    background: #ffffff;

    position: absolute;
    top: 220px;
    left: 350px;

    border-radius: 15px;

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

.wallet-white-cardaw2 i{
    color: #0e8342;
    font-size: 30px;
}
.wallet-instant-text2{
    position: absolute;
    top: 225px;
    left: 400px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.wallet-transaction-text2{
    position: absolute;
    top: 245px;
    left: 400px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}
/*------------------------------------------------*/

.wallet-imgwa{
    position: absolute;

    left: 520px;
    bottom: 0px;

    display: flex;
    align-items: flex-end;
    gap: 0px;
}

.wallet-imgwa img{
    width: 205px;
    height: px;

    object-fit: contain;
    background: transparent;

    transition: transform 0.3s ease;
}

.wallet-right-text{
    position: absolute;
    top: 50px;
    right: 100px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.1;
    text-align: right;
}
.wallet-right-text-green{
    position: absolute;
    top: 85px;
    right: 70px;

    color: #08fa40;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.1;
    text-align: right;
}

.wallet-right-description{
    position: absolute;
    top: 130px;
    right: 90px;
    width: 250px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}
.wallet-empty-card{
    position: absolute;
    top: 220px;
    right: 110px;

    width: 220px;
    height: 60px;

    background: #ffffff;
    border-radius: 18px;
}
.wallet-empty-card i{
    position: absolute;
    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: #08fa40;
    font-size: 32px;
}
.wallet-download-text{
    position: absolute;
    left: 65px;
    top: 30%;

    transform: translateY(-50%);

    color: #0e8342;

    font-size: 18px;
    font-weight: 700;
}
.wallet-download-subtext{
    position: absolute;
    left: 65px;
    top: 30px;

    color: #111;

    font-size: 13px;
    font-weight: 700;

    opacity: 0.7;
}

/*#############################################################################*/
/*##############################################################################################*/


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@222*/
.wallet-section-wa{
    display:block;
}

.wallet-section-mobile{
    display:none;
}

@media (max-width:768px){

    .wallet-section-wa{
        display:none !important;
    }

    .wallet-section-mobile{
        display:block;
    }

}
/* =========================
   MOBILE WALLET SECTION
========================= */

.wallet-section-mobile{
    display:none;
}

@media (max-width:768px){

/* HIDE DESKTOP */
.wallet-section-wa{
    display:none !important;
}

/* SHOW MOBILE */
.wallet-section-mobile{
    display:block;

    width: 103%;
    /*margin: 50px auto 30px;*/
top: -20px;
    padding: 30px 18px;

    position: relative;
    overflow: hidden;

    border-radius: 0;

    background: linear-gradient(
        135deg,
        #04311a 0%,
        #1c703c 30%,
        #2fbe66 50%,
        #1c703c 70%,
        #002211 100%
    );
}

/* =========================
   LOGO
========================= */

.wallet-mobile-logo{
    width: 180px;
    height: 55px;

    background:#fff;

    border-radius:14px;

    margin:0 auto 25px;

    position:relative;
}

.wallet-mobile-logo img{
    width:140px;

    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%);
}

/* =========================
   TITLES
========================= */

.wallet-mobile-heading{
    text-align:center;
}

.wallet-mobile-title{
    color:#ffffff;

    font-size:34px;
    font-weight:800;

    line-height:1.1;
}

.wallet-mobile-title-green{
    color:#08fa40;

    font-size:38px;
    font-weight:800;

    line-height:1.1;

    margin-top:4px;
}

/* =========================
   PHONE IMAGES
========================= */

.wallet-mobile-images{
    display:flex;
    justify-content:center;
    align-items:flex-end;

    gap:10px;

    margin-top:25px;
    margin-bottom:25px;
}

.wallet-mobile-images img{
    width:42%;
    max-width:160px;

    height:auto;

    object-fit:contain;

    transition:0.3s ease;
}

/* =========================
   FEATURES
========================= */

.wallet-mobile-features{
    display:flex;
    flex-direction:column;

    gap:12px;

    margin-top:10px;
}

.wallet-feature-box{
    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,0.15);

    border-radius:18px;

    padding:14px;

    display:flex;
    align-items:center;

    gap:12px;
}

.wallet-feature-icon{
    width:52px;
    height:52px;

    background:#ffffff;

    border-radius:14px;

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

    flex-shrink:0;
}

.wallet-feature-icon i{
    color:#0e8342;
    font-size:28px;
}

.wallet-feature-content h4{
    color:#ffffff;

    font-size:16px;
    font-weight:700;

    margin:0;
}

.wallet-feature-content p{
    color:#ffffff;

    opacity:0.9;

    font-size:14px;

    margin:3px 0 0;
}

/* =========================
   CONTROL TEXT
========================= */

.wallet-mobile-control{
    text-align:center;

    margin-top:28px;
}

.wallet-control-title{
    color:#ffffff;

    font-size:30px;
    font-weight:800;
}

.wallet-control-title-green{
    color:#08fa40;

    font-size:30px;
    font-weight:800;
}

.wallet-control-desc{
    color:#ffffff;

    font-size:17px;
    font-weight:500;

    line-height:1.5;

    margin-top:10px;

    opacity:0.95;
}

/* =========================
   DOWNLOAD CARD
========================= */

.wallet-mobile-download{
    margin-top:25px;

    background:#ffffff;

    border-radius:18px;

    padding:16px;

    display:flex;
    align-items:center;

    gap:14px;
}

.wallet-mobile-download i{
    color:#08fa40;

    font-size:50px;
}

.wallet-download-title{
    color:#0e8342;

    font-size:25px;
    font-weight:800;
}

.wallet-download-small{
    color:#444;

    font-size:18px;
    font-weight:600;

    margin-top:2px;
}

/* =========================
   SUBTLE FLOAT
========================= */

.wallet-mobile-images img:hover{
    transform:translateY(-4px);
}

}
/*######################################################################################*/
/*######################################################################################*/
/*#############################################################################*/
/*##############################################################################################*/
.w2m-full-card{
    width: calc(100% - 80px);
    height: 180px;

    position: absolute;
    top: 140px;
    left: 40px;

    background: #ffffff;
    border-radius: 18px;
    padding: 12px;            /* inner spacing */
      /* inner border line */
    box-shadow: inset 0 0 0 2px #000;

}
.w2m-section{
    width: 100%;
    height: 380px;

    background: #ffffff;
    position: relative;
}
/* top-left logo */
.w2m-logo{
    position: absolute;
    top: 20px;
    left: 40px;

    width: 190px;

    object-fit: contain;
}
.w2m-mpesa{
    position: absolute;
    top: 20px;
    left: 260px;

    width: 140px;

    object-fit: contain;
}
.w2m-text{
    position: absolute;
    top: 80px;
    left: 40px;
    color: #0e41b1;

    font-size: 42px;
    font-weight: 800;

    letter-spacing: 1px;
}
.w2m-desc{
    position: absolute;
    top: 125px;
    left: 40px;

    font-size: 30px;
    font-weight: 800;

    color: #12a052;
}

/* special styling for "via" */
.w2m-via{
    color: #222;
    font-size: 18px;
    font-weight: 800;
}
.w2m-card{
    position: absolute;
    top: 190px;
    left: 40px;
    width: 460px;
    height: 110px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 18px;
}
.w2m-circles{
    position: absolute;
    top: 10px;
    left: 20px;

    display: flex;
    gap: 80px;
}

.w2m-circle{
    width: 44px;
    height: 40px;

    background: #12a052;
    border-radius: 50%;
    border-radius: 18px;
        display: flex;
    align-items: center;
    justify-content: center;

}
.w2m-circle i{
    color: #ffffff;
    font-size: 25px;
}


.w2m-labels{
    position: absolute;
    top: 60px;
    left: 20px;

    display: flex;
    gap: 70px;
}

.w2m-label{
    text-align: center;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    color: #000;
}

/********************/
.w2m-circlessd{
    position: absolute;
    top: 10px;
    left: 760px;

    display: flex;
    flex-direction: column;
    gap: 35px;
}

.w2m-circlesd{ 
    width: 40px; 
    height: 36px; 
    background: #12a052; 
    border-radius: 50%; 
    border-radius: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.w2m-circlesd i{
    color: #ffffff;
    font-size: 21px;
}

.mini-texticsw2m{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 15px;     /* adjust position */
    left: 805px;    /* adjust position */
}
.mini-sub-texticsw2m{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 30px;     /* below "Click" */
    left: 805px;    /* same alignment */
    white-space: nowrap; 
}
.mini-texticsw2m1{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 85px;     /* adjust position */
    left: 805px;    /* adjust position */
}
.mini-sub-texticsw2m1{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 100px;     /* below "Click" */
    left: 805px;    /* same alignment */
    white-space: nowrap; 
}
.mini-texticsw2m11{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 155px;     /* adjust position */
    left: 805px;    /* adjust position */
}
.mini-sub-texticsw2m11{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 175px;     /* below "Click" */
    left: 805px;    /* same alignment */
    white-space: nowrap; 
}
.mini-texticsw2m12{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 225px;     /* adjust position */
    left: 805px;    /* adjust position */
}
.mini-sub-texticsw2m12{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 245px;     /* below "Click" */
    left: 805px;    /* same alignment */
    white-space: nowrap; 
}
.mini-texticsw2m13{
    position: absolute;   /* REQUIRED for top/left to work */
    color: #4CAF50;
    font-weight: 700;
    font-size: 13px;
    top: 295px;     /* adjust position */
    left: 805px;    /* adjust position */
}
.mini-sub-texticsw2m13{
    position: absolute;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    top: 310px;     /* below "Click" */
    left: 805px;    /* same alignment */
    white-space: nowrap; 
}
/*.w2m-right-image{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);

    width: 330px;
    height: auto;
    object-fit: contain;
}*/
.w2m-image-box{
    position: absolute;
    top: 10%;
    right: 20px;

    padding: 12px;
    border: 1px solid #000;
    border-radius: 18px;
    background: #fff;
}

.w2m-right-image{
    display: block;
    width: 300px;
    height: auto;
    border-radius: 10px;
}



.w2m-center-slider{
    position: absolute;
    top: 50%;
    left: 46%;

    transform: translate(-50%, -50%);

    width: 230px;
    height: 340px;

    overflow: hidden;

    /*border: 1px solid #000;*/
    border-radius: 18px;
    background: #fff;
}

.w2m-center-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s ease;
}

.w2m-center-slide.active{
    opacity: 1;
    transform: translateX(0);
}
/* Hide desktop section on phones */
@media (max-width: 768px){
    .desktop-w2m{
        display:none;
    }
}

/*********************************************************************************/

/*******************************************************************************/
.mobile-w2m{
    display:none;
}

@media (max-width:768px){

.mobile-w2m{
    display:block;
    background:#fff;
    padding:20px 15px 40px;
}

/* Header */

.mobile-w2m-header{
    text-align:center;
}

.mobile-w2m-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-bottom:15px;
}

.mobile-w2m-logos img:first-child{
    width:200px;
}

.mobile-w2m-logos img:last-child{
    width:120px;
}

.mobile-w2m-header h2{
    color:#0e41b1;
    font-size:34px;
    font-weight:800;
    margin-bottom:10px;
}

.mobile-w2m-header p{
    color:#12a052;
    font-size:22px;
    font-weight:800;
    line-height:1.4;
}

.mobile-w2m-header p span{
    color:#333;
    font-size:14px;
}

/* Slider */

.mobile-slider{
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 500px;
    margin: 25px auto;
    /*border: 1px solid #ddd;*/
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.w2m-mobile-slide{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
    transform: translateX(100%);
    transition: all .6s ease;
}

.w2m-mobile-slide.active{
    opacity: 1;
    transform: translateX(0);
}

/* Features */

.mobile-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:25px;
}

.feature{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:15px;
    padding:15px;
    text-align:center;
}

.feature i{
    font-size:24px;
    color:#12a052;
    margin-bottom:10px;
}

.feature span{
    display:block;
    font-size:13px;
    font-weight:700;
}

/* Steps */

.mobile-steps{
    margin-top:30px;
}

.mobile-steps h3{
    text-align:center;
    margin-bottom:20px;
    color:#0e41b1;
    font-size:22px;
}

.step{
    display:flex;
    gap:15px;
    align-items:flex-start;
    margin-bottom:18px;
    padding:15px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:15px;
}

.step-icon{
    width:45px;
    height:45px;
    background:#12a052;
    color:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.step-icon.success{
    background:#12a052;
}

.step-content h4{
    font-size:15px;
    margin-bottom:4px;
}

.step-content p{
    font-size:13px;
    color:#666;
    line-height:1.5;
}

/* Preview */

.mobile-phone-preview{
    margin-top:25px;
    text-align:center;
}

.mobile-phone-preview img{
    width:100%;
    max-width:380px;
    border-radius:18px;
    border:1px solid #ddd;
}

}