/* =========================================================
   AIRTIME TO CASH
   MODERN RESPONSIVE LANDING PAGE
========================================================= */


/* =========================================================
   1. VARIABLES
========================================================= */

:root {

    --blue: #1769ff;
    --blue-dark: #052b59;
    --blue-deep: #061f40;
    --blue-light: #eaf3ff;

    --green: #21b34b;
    --green-dark: #07952f;
    --green-light: #e5faeb;

    --red: #ef3340;
    --orange: #f5a900;

    --text: #12233f;
    --text-dark: #17345a;
    --text-light: #6f7d91;

    --background: #ffffff;
    --light-bg: #f7faff;

    --border: #e7edf5;

    --shadow:
        0 12px 40px rgba(13, 52, 96, 0.08);

    --shadow-hover:
        0 20px 50px rgba(13, 52, 96, 0.14);

    --radius: 18px;

}


/* =========================================================
   2. RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.content2 {
    padding: 0px;
    min-height: 100%;
    margin: 0 auto -50px;

}
html, body {
  height:100%!important;
      align-items: center!important;
      justify-content: center!important;
      margin: 0!important;
}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family: "Livvic", sans-serif;

    color: var(--text);

    background: #ffffff;

    line-height: 1.6;

    overflow-x: hidden;

}


body.menu-open {

    overflow: hidden;

}


img {

    max-width: 100%;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font-family: inherit;

}


button {

    cursor: pointer;

}


.container {

    width: min(1120px, calc(100% - 40px));

    margin-left: auto;

    margin-right: auto;

}


.section {

    padding: 90px 0;

}


/* =========================================================
   3. NAVBAR
========================================================= */

.navbar {

    width: 100%;

    height: 70px;

    background: rgba(255, 255, 255, 0.97);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border-bottom: 1px solid #e8edf3;

    position: relative;

    z-index: 1000;

}


.nav-container {

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* -------------------------
   Logo
------------------------- */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.logo img {

    width: 72px;

    height: auto;

    display: block;

}


/* -------------------------
   Desktop navigation
------------------------- */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 27px;

    margin-left: auto;

    margin-right: 30px;

}


.desktop-nav a {

    position: relative;

    display: flex;

    align-items: center;

    height: 70px;

    color: #173657;

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color .2s ease;

}


.desktop-nav a:hover {

    color: var(--blue);

}


.desktop-nav a.active {

    color: var(--blue);

    font-weight: 600;

}


.desktop-nav a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 15px;

    height: 2px;

    border-radius: 10px;

    background: var(--blue);

}


/* -------------------------
   Login button
------------------------- */

.nav-login {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 11px 17px;

    background:
        linear-gradient(
            135deg,
            #287cff,
            #0759df
        );

    color: white;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    box-shadow:
        0 7px 20px rgba(23, 105, 255, .20);

    transition:
        all .25s ease;

}


.nav-login:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(23, 105, 255, .28);

}


/* -------------------------
   Mobile hamburger
------------------------- */

.mobile-menu-btn {

    display: none;

    width: 42px;

    height: 42px;

    border: 1px solid #e1e8f0;

    background: white;

    border-radius: 10px;

    color: var(--blue-dark);

    font-size: 18px;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all .2s ease;

}


.mobile-menu-btn:hover {

    background: #f1f6ff;

    color: var(--blue);

}


/* =========================================================
   4. MOBILE NAVIGATION
========================================================= */

.mobile-nav {

    display: none;

    position: absolute;

    top: 70px;

    left: 0;

    right: 0;

    width: 100%;

    background: rgba(255, 255, 255, .99);

    border-top: 1px solid #edf1f5;

    border-bottom: 1px solid #e5ebf2;

    box-shadow:
        0 15px 30px rgba(12, 42, 75, .12);

    padding: 12px 16px 18px;

    z-index: 999;

}


.mobile-nav.open {

    display: block;

    animation:
        mobileMenu .2s ease;

}


@keyframes mobileMenu {

    from {

        opacity: 0;

        transform: translateY(-8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* -------------------------
   Mobile links
------------------------- */

.mobile-nav-link {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 13px 14px;

    margin-bottom: 3px;

    border-radius: 9px;

    color: #29435f;

    font-size: 14px;

    font-weight: 500;

    transition: all .2s ease;

}


.mobile-nav-link i {

    width: 22px;

    text-align: center;

    color: #6f8195;

    font-size: 15px;

}


.mobile-nav-link:hover {

    background: #f1f6ff;

    color: var(--blue);

}


.mobile-nav-link:hover i {

    color: var(--blue);

}


.mobile-nav-link.active {

    background: #edf5ff;

    color: var(--blue);

    font-weight: 600;

}


.mobile-nav-link.active i {

    color: var(--blue);

}


/* -------------------------
   Mobile divider
------------------------- */

.mobile-nav-divider {

    height: 1px;

    background: #e9eef4;

    margin: 10px 5px 12px;

}


/* -------------------------
   Mobile login
------------------------- */

.mobile-login {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 13px 15px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #1769ff,
            #0758df
        );

    color: white;

    font-size: 13px;

    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(23, 105, 255, .20);

}


.mobile-login > span {

    flex: 1;

}


.mobile-login > i:first-child {

    font-size: 15px;

}


.mobile-login > i:last-child {

    font-size: 12px;

}


/* =========================================================
   5. HERO
========================================================= */

.hero {

    min-height: 500px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #eef7ff 0%,
            #f4fbff 45%,
            #e5fbf5 100%
        );

    padding: 60px 0 80px;

}


.hero-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    min-height: 440px;

}


.hero-content {

    position: relative;

    z-index: 5;

    padding-right: 30px;

}


/* -------------------------
   Hero label
------------------------- */

.hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    border-radius: 30px;

    background: #edf6ff;

    color: var(--blue);

    font-size: 11px;

    font-weight: 700;

    border: 1px solid #d6eaff;

    margin-bottom: 18px;

}


.hero-label i {

    font-size: 10px;

}


/* -------------------------
   Hero heading
------------------------- */

.hero h1 {

    font-size:
        clamp(42px, 4vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 800;

    color: #092d59;

    margin-bottom: 24px;

}


.green-text {

    color: var(--green);

}


.blue-text {

    color: var(--blue);

}


/* -------------------------
   Hero paragraph
------------------------- */

.hero-content > p {

    color: #61738c;

    font-size: 16px;

    line-height: 1.7;

    max-width: 570px;

    margin-bottom: 28px;

}


.hero-content > p strong {

    color: #435873;

}


/* =========================================================
   6. HERO BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    gap: 14px;

    margin-bottom: 25px;

}


.btn {

    height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 9px;

    color: white;

    font-weight: 600;

    font-size: 14px;

    transition: .25s;

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

}


.btn-green {

    background:
        linear-gradient(
            135deg,
            #18b64d,
            #079a37
        );

}


.btn-blue {

    background:
        linear-gradient(
            135deg,
            #287cff,
            #0759df
        );

}


.btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 14px 28px rgba(20, 80, 150, .20);

}


/* =========================================================
   7. HERO FEATURES
========================================================= */

.hero-features {

    display: flex;

    gap: 0;

    align-items: center;

}


.hero-features span {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #37516e;

    font-size: 13px;

    font-weight: 500;

    padding: 0 18px;

    border-right: 1px solid #c8d7e6;

}


.hero-features span:first-child {

    padding-left: 0;

}


.hero-features span:last-child {

    border-right: 0;

}


.hero-features i {

    color: var(--blue);

    font-size: 15px;

}


/* =========================================================
   8. HERO VISUAL
========================================================= */

.hero-visual {

    position: relative;

    height: 450px;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
   9. PHONE
========================================================= */

.phone {

    position: absolute;

    background: #111;

    border-radius: 34px;

    padding: 8px;

    box-shadow:
        0 30px 60px rgba(20, 45, 70, .25);

    overflow: hidden;

}


.phone-main {

    width: 235px;

    height: 470px;

    right: 110px;

    top: -10px;

    z-index: 4;

    transform: rotate(1deg);

}


.phone-back {

    width: 195px;

    height: 400px;

    right: 260px;

    top: 40px;

    z-index: 2;

    transform: rotate(-7deg);

    opacity: .98;

}


.phone-screen {

    background: white;

    width: 100%;

    height: 100%;

    border-radius: 27px;

    overflow: hidden;

    padding: 15px;

}


/* =========================================================
   10. MAIN PHONE
========================================================= */

.phone-top {

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    margin-bottom: 10px;

}


.app-logo {

    text-align: center;

    margin: 2px 0 8px;

}


.app-logo img {

    width: 45px;

}


.balance-card {

    background:
        linear-gradient(
            135deg,
            #1164ce,
            #0752b5
        );

    border-radius: 12px;

    padding: 13px;

    color: white;

    box-shadow:
        0 8px 20px rgba(20, 90, 190, .20);

}


.balance-card small {

    font-size: 8px;

    opacity: .8;

}


.balance-card h3 {

    font-size: 19px;

    margin: 3px 0 10px;

}


.balance-card button {

    border: 0;

    width: 100%;

    padding: 7px;

    background: var(--green);

    color: white;

    border-radius: 6px;

    font-size: 8px;

    font-weight: 600;

}


/* =========================================================
   11. PHONE QUICK ACTIONS
========================================================= */

.quick-actions {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 6px;

    margin: 13px 0;

}


.quick-actions div {

    text-align: center;

    font-size: 6px;

    color: #344b68;

}


.quick-actions i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    margin:
        auto auto 4px;

    border-radius: 50%;

    background: #edf5ff;

    color: var(--blue);

    font-size: 9px;

}


/* =========================================================
   12. RECENT TRANSACTIONS
========================================================= */

.recent-title {

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    margin-bottom: 8px;

}


.recent-title a {

    color: var(--blue);

}


.transaction {

    display: grid;

    grid-template-columns:
        27px 1fr auto;

    gap: 7px;

    align-items: center;

    padding: 7px 0;

    border-bottom:
        1px solid #edf0f4;

}


.transaction-icon {

    width: 27px;

    height: 27px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 7px;

    font-size: 9px;

}


.transaction-icon.green {

    background: #e4f9ea;

    color: #1ca944;

}


.transaction-icon.red {

    background: #fff0f0;

    color: #e93848;

}


.transaction-icon.blue {

    background: #e9f2ff;

    color: #2371ed;

}


.transaction strong {

    display: block;

    font-size: 7px;

}


.transaction small {

    display: block;

    color: #8b98a9;

    font-size: 5px;

}


.transaction span {

    font-size: 6px;

    font-weight: 700;

}


.positive {

    color: #19a542;

}


.negative {

    color: #e63d4b;

}


/* =========================================================
   13. BACK PHONE
========================================================= */

.phone-back .phone-screen {

    padding: 20px 12px;

}


.phone-header {

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    margin-bottom: 20px;

}


.network-card {

    padding: 17px 10px;

    border-radius: 10px;

    margin-bottom: 12px;

    background: #e9f7e9;

    color: #168b32;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

}


.network-card strong {

    font-size: 7px;

}


.network-card.airtel {

    background: #fff0f0;

    color: #e32331;

}


.network-card.telkom {

    background: #e8f8fc;

    color: #149dbd;

}


/* =========================================================
   14. FLOATING CARDS
========================================================= */

.floating-card {

    position: absolute;

    z-index: 8;

    background:
        rgba(255,255,255,.96);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 13px;

    box-shadow:
        0 15px 40px rgba(20,50,80,.12);

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 16px;

}


.floating-icon {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

}


.green-icon {

    background: var(--green-light);

    color: #18a942;

}


.blue-icon {

    background: #e8f1ff;

    color: var(--blue);

}


.floating-card div:nth-child(2) {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}


.floating-card strong {

    font-size: 14px;

    color: #1d3048;

}


.floating-card span {

    font-size: 10px;

    color: #5e7088;

}


.floating-card small {

    color: #8391a2;

    font-size: 8px;

}


.discount-card {

    right: -20px;

    top: 40px;

}


.discount-card strong {

    font-size: 18px;

    color: #18a942;

}


.trend {

    color: #17ad46;

    margin-left: 8px;

}


.payout-card {

    right: -30px;

    top: 190px;

}


.secure-card {

    right: 0;

    bottom: 15px;

}


/* =========================================================
   15. STATS
========================================================= */

.stats-section {

    position: relative;

    z-index: 10;

    margin-top: -32px;

}


.stats-container {

    background: white;

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(20, 60, 100, .10);

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding: 15px 30px;

    border:
        1px solid #edf2f7;

}


.stat {

    display: flex;

    align-items: center;

    gap: 12px;

}


.stat-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #eaf3ff;

    color: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

}


.stat-icon.green {

    background: #e5f9eb;

    color: var(--green);

}


.stat strong {

    display: block;

    font-size: 16px;

    line-height: 1.2;

    color: var(--blue);

}


.stat span {

    display: block;

    font-size: 10px;

    color: #78879a;

}


.stat-divider {

    width: 1px;

    height: 35px;

    background: #dfe7ef;

}


/* =========================================================
   16. SECTION HEADING
========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 38px;

}


.section-heading h2 {

    font-size: 30px;

    line-height: 1.2;

    color: #102f55;

    margin-bottom: 8px;

    font-weight: 800;

}


.section-heading h2 span {

    color: var(--blue);

    font-style: italic;

}


.section-heading p {

    color: #7b8898;

    font-size: 14px;

}


/* =========================================================
   17. SERVICES
========================================================= */

.services {

    background: white;

}


.service-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

}


.service-card {

    padding: 22px;

    border:
        1px solid #e8eef5;

    border-radius: 15px;

    background: white;

    min-height: 220px;

    transition: .3s;

    box-shadow:
        0 5px 20px rgba(30, 70, 110, .04);

}


.service-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-hover);

    border-color: #d7e7ff;

}


.service-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}


.service-icon {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

}


.green-bg {

    background: #e6faeb;

    color: #19ad45;

}


.blue-bg {

    background: #e7f0ff;

    color: var(--blue);

}


.red-bg {

    background: #fff0f1;

    color: #ee3442;

}


.orange-bg {

    background: #fff4df;

    color: #ed9e00;

}


.popular {

    color: #22a842;

    background: #eaf9ed;

    border-radius: 20px;

    padding: 5px 9px;

    font-size: 8px;

    font-weight: 600;

}


.discount-badge {

    color: var(--blue);

    background: #eaf2ff;

    border-radius: 20px;

    padding: 5px 9px;

    font-size: 8px;

    font-weight: 600;

}


.service-card h3 {

    font-size: 17px;

    color: #172e4c;

    margin-bottom: 8px;

}


.service-card p {

    color: #7a8797;

    font-size: 12px;

    line-height: 1.6;

    margin-bottom: 20px;

}


.service-card a {

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    transition: gap .2s ease;

}


.service-card a:hover {

    gap: 11px;

}


/* =========================================================
   18. WHY SECTION
========================================================= */

.why-section {

    background: #f8fbff;

    padding: 70px 0;

}


.why-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


.why-card {

    display: flex;

    gap: 16px;

    padding: 22px;

    background: white;

    border:
        1px solid #e7edf4;

    border-radius: 14px;

    transition: .25s;

}


.why-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow);

}


.why-icon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

}


.why-card h3 {

    font-size: 15px;

    color: #17345a;

    margin-bottom: 5px;

}


.why-card p {

    font-size: 11px;

    line-height: 1.6;

    color: #77869a;

}


/* =========================================================
   19. APP DOWNLOAD
========================================================= */

.app-section {

    padding: 20px 0 50px;

}


.app-container {

    background:
        linear-gradient(
            120deg,
            #062b5a,
            #064a99
        );

    border-radius: 20px;

    min-height: 210px;

    overflow: hidden;

    position: relative;

    display: flex;

    align-items: center;

    padding: 35px 65px;

    color: white;

}


.app-container::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background:
        rgba(0, 122, 255, .25);

    left: -70px;

    bottom: -130px;

}


.app-content {

    position: relative;

    z-index: 2;

    max-width: 560px;

}


.app-content > span {

    font-size: 9px;

    letter-spacing: 1.5px;

    color: #80b4ff;

    font-weight: 700;

}


.app-content h2 {

    font-size: 28px;

    margin: 5px 0 7px;

}


.app-content p {

    font-size: 12px;

    color: #c2d4eb;

    max-width: 470px;

    margin-bottom: 17px;

}


/* =========================================================
   20. GOOGLE PLAY
========================================================= */

.google-play {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    background: #050505;

    color: white;

    border:
        1px solid #707070;

    border-radius: 7px;

    padding: 6px 14px;

    transition: transform .2s ease;

}


.google-play:hover {

    transform: translateY(-2px);

}


.play-icon {

    font-size: 22px;

    color: white;

}


.google-play small {

    display: block;

    font-size: 7px;

    line-height: 1;

}


.google-play strong {

    display: block;

    font-size: 14px;

    line-height: 1.1;

}


/* =========================================================
   21. APP PHONE
========================================================= */

.app-phone {

    position: absolute;

    right: 130px;

    bottom: -80px;

}


.mini-phone {

    width: 170px;

    height: 300px;

    background: #111;

    padding: 6px;

    border-radius: 25px;

    transform: rotate(7deg);

    box-shadow:
        0 20px 40px rgba(0,0,0,.3);

}


.mini-screen {

    width: 100%;

    height: 100%;

    background: white;

    border-radius: 20px;

    padding: 18px 12px;

    text-align: center;

}


.mini-screen img {

    width: 45px;

    margin-bottom: 15px;

}


.mini-balance {

    background: #0962c8;

    border-radius: 10px;

    padding: 15px 10px;

    color: white;

    text-align: left;

}


.mini-balance small {

    font-size: 7px;

}


.mini-balance strong {

    display: block;

    font-size: 17px;

}


.mini-actions {

    display: flex;

    justify-content: space-around;

    margin-top: 15px;

}


.mini-actions span {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf4ff;

    border-radius: 50%;

    color: var(--blue);

    font-size: 10px;

}


/* =========================================================
   22. FOOTER
========================================================= */

.footer {

    background: #061f40;

    color: white;

    padding-top: 45px;

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1.4fr;

    gap: 40px;

    padding-bottom: 35px;

}


/* -------------------------
   Footer brand
------------------------- */

.footer-brand img {

    width: 75px;

    margin-bottom: 12px;

}


.footer-brand p {

    color: #a9bdd4;

    font-size: 11px;

    line-height: 1.7;

    max-width: 250px;

    margin-bottom: 16px;

}


/* -------------------------
   Social links
------------------------- */

.social-links {

    display: flex;

    gap: 8px;

}


.social-links a {

    width: 29px;

    height: 29px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-size: 11px;

    transition: .2s;

}


.social-links a:hover {

    background: var(--blue);

    transform: translateY(-2px);

}


/* -------------------------
   Footer columns
------------------------- */

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.footer-column h4,
.footer-newsletter h4 {

    font-size: 12px;

    margin-bottom: 7px;

}


.footer-column a {

    color: #a9bdd4;

    font-size: 10px;

    transition: .2s;

}


.footer-column a:hover {

    color: white;

    transform: translateX(3px);

}


.phone-number {

    color: #a9bdd4;

    font-size: 9px;

}


/* =========================================================
   23. NEWSLETTER
========================================================= */

.footer-newsletter p {

    font-size: 10px;

    color: #a9bdd4;

    margin-bottom: 10px;

}


.footer-newsletter form {

    display: flex;

    gap: 5px;

}


.footer-newsletter input {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: none;

    border-radius: 6px;

    padding: 10px;

    font-size: 9px;

}


.footer-newsletter button {

    border: 0;

    border-radius: 6px;

    background: var(--blue);

    color: white;

    padding: 0 13px;

    font-size: 9px;

    cursor: pointer;

}


/* =========================================================
   24. FOOTER BOTTOM
========================================================= */

.footer-bottom {

    border-top:
        1px solid rgba(255,255,255,.08);

    padding: 14px 0;

}


.footer-bottom-inner {

    display: flex;

    justify-content: space-between;

    color: #849ab3;

    font-size: 9px;

}


/* =========================================================
   25. TABLET - 1050px
========================================================= */

@media (max-width: 1050px) {


    /* NAV */

    .desktop-nav {

        gap: 17px;

        margin-right: 15px;

    }


    .desktop-nav a {

        font-size: 11px;

    }


    .nav-login {

        padding: 9px 13px;

        font-size: 11px;

    }


    /* HERO */

    .phone-main {

        right: 70px;

    }


    .phone-back {

        right: 210px;

    }


    .floating-card {

        transform: scale(.85);

    }


    .discount-card {

        right: -45px;

    }


    .payout-card {

        right: -50px;

    }


}


/* =========================================================
   26. TABLET - 850px
========================================================= */

@media (max-width: 850px) {


    /* -------------------------
       NAV
    ------------------------- */

    .desktop-nav,
    .nav-login {

        display: none;

    }


    .mobile-menu-btn {

        display: flex;

    }


    .navbar {

        height: 64px;

    }


    .nav-container {

        height: 64px;

    }


    .mobile-nav {

        top: 64px;

    }


    /* -------------------------
       HERO
    ------------------------- */

    .hero {

        padding-top: 45px;

    }


    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .hero-content {

        padding-right: 0;

    }


    .hero-content > p {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-features {

        justify-content: center;

    }


    .hero-visual {

        margin-top: 40px;

        height: 450px;

    }


    /* -------------------------
       SERVICES
    ------------------------- */

    .service-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /* -------------------------
       WHY
    ------------------------- */

    .why-grid {

        grid-template-columns: 1fr;

    }


    /* -------------------------
       FOOTER
    ------------------------- */

    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   27. MOBILE - 600px
========================================================= */

@media (max-width: 600px) {


    /* -------------------------
       GLOBAL
    ------------------------- */

    .container {

        width:
            min(
                calc(100% - 28px),
                1120px
            );

    }


    .section {

        padding: 60px 0;

    }


    /* -------------------------
       NAVBAR
    ------------------------- */

    .navbar {

        height: 64px;

    }


    .nav-container {

        height: 64px;

        padding:
            0 2px;

    }


    .logo img {

        width: 62px;

    }


    .mobile-menu-btn {

        width: 40px;

        height: 40px;

    }


    .mobile-nav {

        top: 64px;

        padding:
            10px 14px 16px;

    }


    .mobile-nav-link {

        padding:
            12px 13px;

        font-size: 13px;

    }


    /* -------------------------
       HERO
    ------------------------- */

    .hero {

        padding:
            35px 0 70px;

    }


    .hero h1 {

        font-size: 38px;

        letter-spacing: -1.3px;

    }


    .hero-content > p {

        font-size: 14px;

    }


    /* -------------------------
       HERO BUTTONS
    ------------------------- */

    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }


    .btn {

        width: 100%;

        justify-content: center;

    }


    /* -------------------------
       HERO FEATURES
    ------------------------- */

    .hero-features {

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;

    }


    .hero-features span {

        font-size: 11px;

        padding:
            0 10px;

    }


    /* -------------------------
       PHONES
    ------------------------- */

    .hero-visual {

        height: 420px;

        transform: scale(.82);

        margin-left: -30px;

        margin-right: -30px;

    }


    .phone-main {

        right: 50%;

        transform:
            translateX(50%)
            rotate(1deg);

    }


    .phone-back {

        right:
            calc(50% + 130px);

    }


    /* -------------------------
       FLOATING CARDS
    ------------------------- */

    .floating-card {

        transform: scale(.72);

    }


    .discount-card {

        right: -60px;

        top: 20px;

    }


    .payout-card {

        right: -65px;

        top: 170px;

    }


    .secure-card {

        right: -40px;

        bottom: 10px;

    }


    /* -------------------------
       STATS
    ------------------------- */

    .stats-section {

        margin-top: -20px;

    }


    .stats-container {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 20px;

        padding: 22px;

    }


    .stat-divider {

        display: none;

    }


    .stat strong {

        font-size: 14px;

    }


    /* -------------------------
       HEADINGS
    ------------------------- */

    .section-heading h2 {

        font-size: 25px;

    }


    .section-heading p {

        font-size: 13px;

    }


    /* -------------------------
       SERVICES
    ------------------------- */

    .service-grid {

        grid-template-columns: 1fr;

    }


    .service-card {

        min-height: auto;

    }


    /* -------------------------
       WHY
    ------------------------- */

    .why-section {

        padding:
            60px 0;

    }


    .why-card {

        padding: 18px;

    }


    /* -------------------------
       APP
    ------------------------- */

    .app-container {

        padding: 30px;

        min-height: 350px;

    }


    .app-content {

        max-width: 100%;

    }


    .app-content h2 {

        font-size: 24px;

    }


    .app-phone {

        right: -20px;

        opacity: .25;

    }


    /* -------------------------
       FOOTER
    ------------------------- */

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px 20px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-newsletter {

        grid-column:
            1 / -1;

    }


    .footer-bottom-inner {

        flex-direction: column;

        gap: 7px;

        text-align: center;

    }

}


/* =========================================================
   28. SMALL MOBILE - 400px
========================================================= */

@media (max-width: 400px) {


    .container {

        width:
            calc(100% - 24px);

    }


    /* NAV */

    .logo img {

        width: 58px;

    }


    .mobile-menu-btn {

        width: 38px;

        height: 38px;

    }


    .mobile-nav-link {

        padding:
            11px;

        font-size: 13px;

    }


    /* HERO */

    .hero h1 {

        font-size: 34px;

    }


    .hero-content > p {

        font-size: 13px;

    }


    .hero-features span {

        border: 0;

        padding:
            0 6px;

    }


    /* STATS */

    .stats-container {

        grid-template-columns: 1fr;

    }


    .stat {

        justify-content: center;

    }


    /* APP */

    .app-container {

        padding: 25px;

    }


    .app-content h2 {

        font-size: 22px;

    }


}


/* =========================================================
   29. VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {


    .hero h1 {

        font-size: 31px;

    }


    .hero-visual {

        transform: scale(.70);

        margin-left: -55px;

        margin-right: -55px;

    }


    .floating-card {

        transform: scale(.60);

    }


}
.grecaptcha-badge {
    visibility: hidden !important;
}