/* =========================================================
   LAMiC - LEGACY AFRICA MICRO-CREDIT
   COMPLETE WEBSITE STYLESHEET
========================================================= */


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

:root {

    --primary: #18325B;
    --primary-dark: #102746;
    --primary-light: #234674;

    --green: #00A651;
    --green-dark: #008A45;
    --green-light: #E9F8F0;

    --orange: #D9842F;
    --orange-light: #FFF4E8;

    --white: #FFFFFF;
    --black: #111827;

    --text: #4B5563;
    --text-light: #6B7280;

    --border: #E5E7EB;
    --light-bg: #F7F9FC;
    --lighter-bg: #FAFBFD;

    --shadow-sm:
        0 4px 15px rgba(15, 35, 60, 0.06);

    --shadow:
        0 10px 30px rgba(15, 35, 60, 0.09);

    --shadow-lg:
        0 20px 50px rgba(15, 35, 60, 0.14);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --container: 1200px;

    --transition:
        all 0.3s ease;
}


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

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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;
    padding: 0;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--white);

    line-height: 1.6;

    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}


/* =========================================================
   3. GLOBAL CONTAINER
========================================================= */

.container {

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

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   4. SECTION GLOBAL STYLES
========================================================= */

.section-padding {

    padding-top: 90px;
    padding-bottom: 90px;
}

.section-label {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.section-heading {

    margin-bottom: 50px;
}

.section-heading.centered {

    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-heading h2,
.about-content h2,
.why-content h2,
.fintech-content h2 {

    margin: 0;

    color: var(--primary);

    font-size:
        clamp(
            32px,
            4vw,
            46px
        );

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1px;
}

.section-heading p {

    max-width: 680px;

    margin: 18px auto 0;

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   5. TOP BAR
========================================================= */

.top-bar {

    width: 100%;

    background: var(--primary-dark);

    color: #DCE5EF;

    font-size: 12px;
}

.top-bar-inner {

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.top-left {

    display: flex;

    align-items: center;

    gap: 25px;
}

.top-left span {

    display: flex;

    align-items: center;

    gap: 7px;
}

.top-left i {

    color: var(--green);

    font-size: 12px;
}

.top-right {

    display: flex;

    align-items: center;

    gap: 8px;
}

.top-right a {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #DCE5EF;

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

    border-radius: 50%;

    font-size: 11px;

    transition: var(--transition);
}

.top-right a:hover {

    color: var(--white);

    background: var(--green);

    border-color: var(--green);

    transform: translateY(-2px);
}


/* =========================================================
   6. LAMiC CONTACT / UTILITY BAR
========================================================= */

.lamic-topbar {

    width: 100%;

    background: var(--white);

    border-bottom:
        1px solid var(--border);

    position: relative;

    z-index: 1000;
}

.lamic-topbar-container {

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

    min-height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


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

.lamic-top-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;
}

.lamic-top-logo a {

    display: flex;

    align-items: center;
}

.lamic-top-logo img {

    width: 155px;

    height: auto;

    display: block;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.lamic-top-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   CONTACT ICON
========================================================= */

.lamic-top-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background: var(--green-light);

    border-radius: 50%;

    font-size: 16px;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.lamic-top-content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.lamic-top-content strong {

    margin-bottom: 2px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.lamic-top-content a,
.lamic-top-content span {

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.4;

    text-decoration: none;
}

.lamic-top-content a {

    transition: var(--transition);
}

.lamic-top-content a:hover {

    color: var(--green);
}


/* =========================================================
   LOCATION
========================================================= */

.lamic-top-item:last-child {

    max-width: 300px;
}

.lamic-top-item:last-child
.lamic-top-content span {

    max-width: 250px;
}


/* =========================================================
   7. MAIN HEADER
========================================================= */

.header {

    width: 100%;

    background: var(--white);

    border-bottom:
        1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 999;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.03);
}

.nav-wrapper {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    position: relative;
}


/* =========================================================
   NAVIGATION DESKTOP
========================================================= */

.navigation {

    display: flex;

    align-items: center;

    gap: 4px;
}

.navigation > a,
.nav-dropdown > a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 26px 14px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 650;

    white-space: nowrap;

    transition: var(--transition);
}

.navigation > a:hover,
.nav-dropdown > a:hover,
.navigation > a.active {

    color: var(--green);
}

.navigation > a.active::after {

    content: "";

    position: absolute;

    left: 14px;

    right: 14px;

    bottom: 0;

    height: 3px;

    background: var(--green);

    border-radius:
        3px 3px 0 0;
}

.nav-dropdown > a i {

    font-size: 9px;

    transition: var(--transition);
}

.nav-dropdown:hover > a i {

    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU DESKTOP
========================================================= */

.nav-dropdown {

    position: relative;
}

.dropdown-menu {

    position: absolute;

    top: calc(100% + 1px);

    left: 0;

    min-width: 220px;

    padding: 10px;

    background: var(--white);

    border:
        1px solid var(--border);

    border-radius:
        0 0 var(--radius) var(--radius);

    box-shadow: var(--shadow);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition: var(--transition);

    z-index: 2000;
}

.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.dropdown-menu a {

    display: block;

    padding: 11px 13px;

    color: var(--text);

    font-size: 13px;

    border-radius: 5px;

    transition: var(--transition);
}

.dropdown-menu a:hover {

    color: var(--green);

    background: var(--green-light);

    padding-left: 17px;
}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;
}

.contact-button,
.btn {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 20px;

    border-radius: 5px;

    font-size: 13px;

    font-weight: 700;

    transition: var(--transition);
}

.contact-button {

    color: var(--white);

    background: var(--green);

    border:
        2px solid var(--green);
}

.contact-button:hover {

    color: var(--white);

    background: var(--green-dark);

    border-color: var(--green-dark);

    transform:
        translateY(-2px);
}

.contact-button i {

    font-size: 11px;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 45px;

    height: 45px;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: var(--white);

    background: var(--green);

    border: none;

    border-radius: 5px;

    font-size: 19px;

    position: relative;

    z-index: 3000;
}

.menu-toggle:hover {

    background: var(--green-dark);
}


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

.hero {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            var(--primary-dark) 0%,
            var(--primary) 58%,
            #21436E 100%
        );

    color: var(--white);
}

.hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -250px;

    top: -250px;

    border-radius: 50%;

    background:
        rgba(0,166,81,0.08);
}

.hero-content {

    position: relative;

    z-index: 2;

    min-height: 650px;

    display: grid;

    grid-template-columns:
        minmax(0, 48%)
        minmax(0, 52%);

    align-items: center;

    gap: 25px;

    padding-top: 65px;

    padding-bottom: 65px;
}


/* =========================================================
   HERO LEFT
========================================================= */

.hero-left {

    position: relative;

    z-index: 5;

    min-width: 0;

    padding-right: 20px;
}

.hero-text {

    max-width: 650px;
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.hero-eyebrow span {

    width: 42px;

    height: 3px;

    flex-shrink: 0;

    background: var(--green);

    border-radius: 5px;
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero-text h1 {

    max-width: 650px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            42px,
            4.7vw,
            68px
        );

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -2.5px;
}

.hero-text h1 strong {

    display: block;

    color: var(--green);

    font-weight: 750;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-text > p {

    max-width: 590px;

    margin:
        25px 0 32px;

    color: #D8E2ED;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.hero-btn {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 22px;

    border-radius: 5px;

    font-size: 13px;

    font-weight: 700;

    transition: var(--transition);
}

.hero-btn-primary {

    color: var(--white);

    background: var(--green);

    border:
        2px solid var(--green);

    box-shadow:
        0 8px 20px
        rgba(0,166,81,0.20);
}

.hero-btn-primary:hover {

    color: var(--white);

    background: var(--green-dark);

    border-color: var(--green-dark);

    transform:
        translateY(-2px);
}

.hero-btn-primary i {

    font-size: 11px;

    transition: var(--transition);
}

.hero-btn-primary:hover i {

    transform:
        translateX(4px);
}

.hero-btn-secondary {

    color: var(--white);

    background: transparent;

    border:
        2px solid
        rgba(255,255,255,0.5);
}

.hero-btn-secondary:hover {

    color: var(--primary);

    background: var(--white);

    border-color: var(--white);

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO CARD
========================================================= */

.hero-card {

    width: 100%;

    max-width: 560px;

    margin-top: 38px;

    padding: 19px 22px;

    display: flex;

    align-items: center;

    gap: 16px;

    background:
        rgba(35,70,116,0.92);

    border-left:
        4px solid var(--green);

    border-radius: 7px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.16);
}

.hero-card-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    background: var(--green);

    border-radius: 7px;

    font-size: 18px;
}

.hero-card-content {

    min-width: 0;

    flex: 1;
}

.hero-card-content > span {

    display: block;

    margin-bottom: 4px;

    color: var(--orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.hero-card-content h3 {

    margin: 0 0 4px;

    color: var(--white);

    font-size: 16px;

    line-height: 1.35;
}

.hero-card-content p {

    margin: 0;

    color: #D4DFEA;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   HERO IMAGES
========================================================= */

.hero-images {

    position: relative;

    width: 100%;

    max-width: 610px;

    height: 520px;

    margin-left: auto;
}

.image-box {

    position: absolute;

    overflow: hidden;

    background: var(--primary-light);

    border:
        3px solid
        rgba(255,255,255,0.10);

    border-radius: 10px;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,0.25);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    z-index: 2;
}

.image-box img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.image-box:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 50px
        rgba(0,0,0,0.32);

    z-index: 20;
}

.image-box:hover img {

    transform:
        scale(1.05);
}

.image-1 {

    top: 0;

    left: 7%;

    width: 55%;

    height: 330px;

    z-index: 5;
}

.image-2 {

    top: 20px;

    right: 0;

    width: 34%;

    height: 195px;

    z-index: 4;
}

.image-3 {

    top: 235px;

    right: 0;

    width: 34%;

    height: 200px;

    z-index: 4;
}

.image-4 {

    left: 0;

    bottom: 0;

    width: 27%;

    height: 155px;

    z-index: 6;
}

.image-5 {

    left: 30%;

    bottom: 0;

    width: 30%;

    height: 155px;

    z-index: 6;
}

.image-6 {

    right: 0;

    bottom: 0;

    width: 34%;

    height: 155px;

    z-index: 6;
}

.hero-image-shape {

    position: absolute;

    left: 0;

    top: 10%;

    width: 65px;

    height: 65px;

    border:
        8px solid
        rgba(0,166,81,0.20);

    border-radius: 50%;

    z-index: 1;
}

.hero-images::before {

    content: "";

    position: absolute;

    top: -4px;

    right: 10px;

    width: 65px;

    height: 4px;

    background: var(--green);

    border-radius: 5px;

    z-index: 10;
}


/* =========================================================
   9. QUICK SERVICES
========================================================= */

.quick-services {

    position: relative;

    z-index: 10;

    margin-top: -30px;
}

.quick-grid {

    display: grid;

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

    gap: 14px;
}

.quick-card {

    min-height: 110px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: var(--white);

    border:
        1px solid var(--border);

    border-radius: 8px;

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

    transition: var(--transition);
}

.quick-card:hover {

    border-color:
        rgba(0,166,81,0.25);

    transform:
        translateY(-5px);

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

.quick-icon {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background: var(--green-light);

    border-radius: 7px;

    font-size: 18px;
}

.quick-card h3 {

    margin: 0 0 3px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;
}

.quick-card p {

    margin: 0;

    color: var(--text-light);

    font-size: 11px;

    line-height: 1.4;
}

.quick-card .arrow {

    margin-left: auto;

    color: var(--green);

    font-size: 11px;

    transition: var(--transition);
}

.quick-card:hover .arrow {

    transform:
        translateX(4px);
}


/* =========================================================
   10. ABOUT
========================================================= */

.about-section {

    background: var(--white);
}

.about-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}

.about-image {

    position: relative;

    max-width: 520px;
}

.about-image > img {

    width: 100%;

    height: 470px;

    display: block;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: var(--shadow-lg);
}

.experience-card {

    position: absolute;

    right: -25px;

    bottom: 25px;

    width: 200px;

    padding: 18px;

    display: flex;

    flex-direction: column;

    background: var(--primary);

    color: var(--white);

    border-radius: 8px;

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

.experience-card strong {

    margin-bottom: 3px;

    color: var(--green);

    font-size: 22px;
}

.experience-card span {

    color: #D9E3EF;

    font-size: 11px;

    line-height: 1.5;
}

.about-content h2 {

    margin-bottom: 20px;
}

.about-content > p {

    margin-bottom: 16px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.8;
}

.about-features {

    margin: 25px 0;

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.about-features div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;
}

.about-features i {

    color: var(--green);

    font-size: 16px;
}


/* =========================================================
   11. TEXT LINKS
========================================================= */

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--green);

    font-size: 13px;

    font-weight: 750;

    transition: var(--transition);
}

.text-link:hover {

    color: var(--green-dark);

    gap: 13px;
}


/* =========================================================
   12. PRODUCTS
========================================================= */

.products-section {

    background: var(--light-bg);
}

.products-grid {

    display: grid;

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

    gap: 22px;
}

.product-card {

    overflow: hidden;

    background: var(--white);

    border:
        1px solid var(--border);

    border-radius: 10px;

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

    transition: var(--transition);
}

.product-card:hover {

    transform:
        translateY(-6px);

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

.product-image {

    position: relative;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: var(--white);
}

.product-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(24,50,91,0.96),
            rgba(35,70,116,0.78)
        );
}

.product-image i {

    position: relative;

    z-index: 2;

    font-size: 52px;

    opacity: 0.9;
}

.product-image.amuka {

    background:
        linear-gradient(
            135deg,
            #18325B,
            #356B96
        );
}

.product-image.chama {

    background:
        linear-gradient(
            135deg,
            #006B3C,
            #00A651
        );
}

.product-image.safiri {

    background:
        linear-gradient(
            135deg,
            #7C4A1E,
            #D9842F
        );
}

.product-image.elimu {

    background:
        linear-gradient(
            135deg,
            #372D78,
            #5C4FA3
        );
}

.product-tag {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 5;

    padding: 5px 9px;

    color: var(--white);

    background:
        rgba(0,0,0,0.22);

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

    border-radius: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.product-content {

    padding: 22px;
}

.product-content h3 {

    margin-bottom: 9px;

    color: var(--primary);

    font-size: 18px;
}

.product-content p {

    min-height: 95px;

    margin-bottom: 15px;

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.65;
}

.product-content a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--green);

    font-size: 12px;

    font-weight: 750;

    transition: var(--transition);
}

.product-content a:hover {

    gap: 12px;
}


/* =========================================================
   13. WHY LAMiC
========================================================= */

.why-section {

    background: var(--white);
}

.why-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}

.why-content h2 {

    margin-bottom: 20px;
}

.why-content > p {

    max-width: 600px;

    margin-bottom: 30px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.8;
}

.why-list {

    display: flex;

    flex-direction: column;

    gap: 22px;
}

.why-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;
}

.why-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background: var(--green-light);

    border-radius: 7px;
}

.why-item h3 {

    margin-bottom: 3px;

    color: var(--primary);

    font-size: 15px;
}

.why-item p {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.6;
}

.why-image img {

    width: 100%;

    max-height: 480px;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: var(--shadow-lg);
}


/* =========================================================
   14. HOW IT WORKS
========================================================= */

.process-section {

    background: var(--light-bg);
}

.process-grid {

    display: grid;

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

    gap: 25px;
}

.process-item {

    position: relative;

    padding: 35px 25px;

    text-align: center;

    background: var(--white);

    border:
        1px solid var(--border);

    border-radius: 10px;

    transition: var(--transition);
}

.process-item:hover {

    transform:
        translateY(-5px);

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

.process-number {

    position: absolute;

    top: 15px;

    right: 18px;

    color: #E5EAF0;

    font-size: 28px;

    font-weight: 800;
}

.process-item > i {

    width: 55px;

    height: 55px;

    margin: 10px auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background: var(--green-light);

    border-radius: 50%;

    font-size: 20px;
}

.process-item h3 {

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 16px;
}

.process-item p {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   15. FINTECH
========================================================= */

.fintech-section {

    background: var(--primary-dark);

    color: var(--white);
}

.fintech-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}

.fintech-content h2 {

    margin-bottom: 20px;

    color: var(--white);
}

.fintech-content > p {

    max-width: 580px;

    margin-bottom: 25px;

    color: #D7E0EB;

    font-size: 15px;

    line-height: 1.8;
}

.fintech-points {

    margin-bottom: 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;
}

.fintech-points span {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color: #E2EAF2;

    font-size: 12px;
}

.fintech-points i {

    margin-top: 3px;

    color: var(--green);
}

.btn-primary {

    color: var(--white);

    background: var(--green);

    border:
        2px solid var(--green);
}

.btn-primary:hover {

    color: var(--white);

    background: var(--green-dark);

    border-color: var(--green-dark);

    transform:
        translateY(-2px);
}


/* =========================================================
   FINTECH VISUAL
========================================================= */

.fintech-visual {

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.tech-circle {

    position: relative;

    width: 330px;

    height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 30px rgba(255,255,255,0.02),
        0 0 0 60px rgba(255,255,255,0.015);
}

.center-tech {

    width: 110px;

    height: 110px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--white);

    background: var(--green);

    border-radius: 50%;

    box-shadow:
        0 15px 35px
        rgba(0,166,81,0.3);
}

.center-tech i {

    margin-bottom: 5px;

    font-size: 25px;
}

.center-tech span {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}

.tech-icon {

    position: absolute;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background: var(--white);

    border-radius: 50%;

    box-shadow: var(--shadow);

    font-size: 18px;
}

.tech-1 {

    top: -10px;

    left: 50%;

    transform:
        translateX(-50%);
}

.tech-2 {

    right: -10px;

    top: 50%;

    transform:
        translateY(-50%);
}

.tech-3 {

    bottom: -10px;

    left: 50%;

    transform:
        translateX(-50%);
}

.tech-4 {

    left: -10px;

    top: 50%;

    transform:
        translateY(-50%);
}


/* =========================================================
   16. STATISTICS
========================================================= */

.stats-section {

    padding: 55px 0;

    background: var(--green);
}

.stats-grid {

    display: grid;

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

    gap: 25px;
}

.stat {

    padding: 10px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    color: var(--white);

    border-right:
        1px solid
        rgba(255,255,255,0.2);
}

.stat:last-child {

    border-right: none;
}

.stat > i {

    margin-bottom: 10px;

    font-size: 20px;

    opacity: 0.9;
}

.stat strong {

    margin-bottom: 2px;

    font-size: 25px;

    font-weight: 750;
}

.stat span {

    color:
        rgba(255,255,255,0.82);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   17. NEWS
========================================================= */

.news-section {

    background: var(--white);
}

.heading-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}

.heading-row h2 {

    margin: 0;

    color: var(--primary);

    font-size: 40px;
}

.news-grid {

    display: grid;

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

    gap: 25px;
}

.news-card {

    overflow: hidden;

    background: var(--white);

    border:
        1px solid var(--border);

    border-radius: 10px;

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

    transition: var(--transition);
}

.news-card:hover {

    transform:
        translateY(-5px);

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

.news-image {

    position: relative;

    height: 220px;

    overflow: hidden;
}

.news-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.news-card:hover
.news-image img {

    transform:
        scale(1.05);
}

.news-date {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 48px;

    height: 55px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--white);

    background: var(--green);

    border-radius: 5px;

    font-size: 9px;

    font-weight: 700;
}

.news-date strong {

    font-size: 18px;

    line-height: 1;
}

.news-content {

    padding: 22px;
}

.news-category {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.news-content h3 {

    margin-bottom: 10px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.35;
}

.news-content p {

    margin-bottom: 15px;

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.6;
}

.news-content > a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--green);

    font-size: 12px;

    font-weight: 750;

    transition: var(--transition);
}

.news-content > a:hover {

    gap: 12px;
}


/* =========================================================
   18. CTA
========================================================= */

.cta-section {

    padding: 65px 0;

    background:
        linear-gradient(
            120deg,
            var(--primary),
            var(--primary-light)
        );
}

.cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.cta-inner .section-label {

    color: var(--green);
}

.cta-inner h2 {

    max-width: 700px;

    margin: 0 0 10px;

    color: var(--white);

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

    line-height: 1.15;
}

.cta-inner p {

    color: #D7E0EB;

    font-size: 14px;
}

.btn-light {

    flex-shrink: 0;

    color: var(--primary);

    background: var(--white);

    border:
        2px solid var(--white);
}

.btn-light:hover {

    color: var(--white);

    background: transparent;

    border-color: var(--white);

    transform:
        translateY(-2px);
}


/* =========================================================
   19. FOOTER
========================================================= */

.footer {

    background: #0C1E34;

    color: #BFCBDA;
}

.footer-grid {

    padding-top: 70px;

    padding-bottom: 55px;

    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr
        1.3fr;

    gap: 45px;
}

.footer-about {

    max-width: 300px;
}

.footer-logo {

    margin-bottom: 18px;
}

.footer-logo img {

    width: 170px;

    height: auto;

    display: block;
}

.footer-about > p {

    margin-bottom: 22px;

    color: #AAB8C9;

    font-size: 12px;

    line-height: 1.75;
}

.footer-social {

    display: flex;

    gap: 8px;
}

.footer-social a {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #C6D1DE;

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

    border-radius: 50%;

    font-size: 11px;

    transition: var(--transition);
}

.footer-social a:hover {

    color: var(--white);

    background: var(--green);

    border-color: var(--green);

    transform:
        translateY(-2px);
}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;
}

.footer-column h3 {

    margin-bottom: 8px;

    color: var(--white);

    font-size: 14px;

    font-weight: 700;
}

.footer-column > a {

    color: #AAB8C9;

    font-size: 12px;

    transition: var(--transition);
}

.footer-column > a:hover {

    color: var(--green);

    padding-left: 3px;
}

.footer-contact p {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 12px;

    color: #AAB8C9;

    font-size: 11px;

    line-height: 1.55;
}

.footer-contact i {

    width: 14px;

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green);
}

.footer-bottom {

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.footer-bottom .container {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {

    color: #8D9CAF;

    font-size: 10px;
}

.footer-bottom div {

    display: flex;

    align-items: center;

    gap: 20px;
}

.footer-bottom a {

    color: #8D9CAF;

    font-size: 10px;

    transition: var(--transition);
}

.footer-bottom a:hover {

    color: var(--green);
}


/* =========================================================
   20. LARGE LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .container {

        width:
            min(
                94%,
                var(--container)
            );
    }

    .lamic-topbar-container {

        width: 94%;

        gap: 22px;
    }

    .navigation > a,
    .nav-dropdown > a {

        padding-left: 9px;

        padding-right: 9px;
    }

    .hero-content {

        grid-template-columns:
            50% 50%;

        gap: 10px;
    }

    .hero-images {

        height: 490px;
    }

    .image-1 {

        height: 310px;
    }

    .image-2 {

        height: 180px;
    }

    .image-3 {

        top: 215px;

        height: 185px;
    }

    .image-4,
    .image-5,
    .image-6 {

        height: 145px;
    }

    .footer-grid {

        gap: 30px;
    }
}


/* =========================================================
   21. TABLET
========================================================= */

@media (max-width: 992px) {

    .section-padding {

        padding-top: 70px;

        padding-bottom: 70px;
    }


    /* =====================================================
       CONTACT BAR
    ===================================================== */

    .lamic-topbar-container {

        min-height: 75px;

        gap: 15px;
    }

    .lamic-top-logo img {

        width: 125px;
    }

    .lamic-top-icon {

        width: 35px;

        height: 35px;

        font-size: 13px;
    }

    .lamic-top-content strong {

        font-size: 9px;
    }

    .lamic-top-content a,
    .lamic-top-content span {

        font-size: 10px;
    }


    /* =====================================================
       DESKTOP NAVIGATION HIDDEN
    ===================================================== */

    .navigation {

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        right: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 10px 0;

        background: var(--white);

        border:
            1px solid var(--border);

        border-radius: 8px;

        box-shadow:
            0 15px 35px
            rgba(0,0,0,0.15);

        z-index: 2000;
    }


    /* =====================================================
       IMPORTANT:
       SUPPORT BOTH .show AND .active
       ===================================================== */

    .navigation.show,
    .navigation.active {

        display: flex;
    }


    /* =====================================================
       MOBILE MENU BUTTON
    ===================================================== */

    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 45px;

        height: 45px;

        padding: 0;

        background: var(--green);

        color: var(--white);

        border: none;

        border-radius: 5px;

        font-size: 19px;

        position: relative;

        z-index: 3000;
    }

    .menu-toggle:hover {

        background: var(--green-dark);
    }


    /* =====================================================
       HIDE CONTACT BUTTON
    ===================================================== */

    .contact-button {

        display: none;
    }


    /* =====================================================
       MOBILE NAV LINKS
    ===================================================== */

    .navigation > a,
    .navigation .nav-dropdown > a {

        width: 100%;

        min-height: 48px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            15px 22px;

        color: var(--primary);

        background: var(--white);

        font-size: 14px;

        font-weight: 600;

        border-bottom:
            1px solid #eeeeee;

        transition:
            background 0.3s ease,
            color 0.3s ease;
    }

    .navigation > a:hover,
    .navigation .nav-dropdown > a:hover {

        color: var(--green);

        background:
            #F5F9F7;
    }

    .navigation > a.active {

        color: var(--green);

        background:
            #F5F9F7;
    }


    /* Remove desktop active line */

    .navigation > a.active::after {

        display: none;
    }


    /* =====================================================
       MOBILE DROPDOWN
    ===================================================== */

    .nav-dropdown {

        width: 100%;

        position: relative;
    }

    .nav-dropdown > a i {

        font-size: 11px;

        transition:
            transform 0.3s ease;
    }

    .nav-dropdown.open > a i {

        transform:
            rotate(180deg);
    }


    /* =====================================================
       DROPDOWN CLOSED
    ===================================================== */

    .navigation .dropdown-menu {

        position: static;

        width: 100%;

        display: none;

        min-width: 100%;

        padding: 0;

        margin: 0;

        background:
            #F7F9FB;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;
    }


    /* =====================================================
       DROPDOWN OPEN
    ===================================================== */

    .navigation .nav-dropdown.open .dropdown-menu {

        display: block;
    }

    .navigation .dropdown-menu a {

        display: block;

        width: 100%;

        padding:
            13px 35px;

        color:
            #506070;

        background:
            #F7F9FB;

        font-size: 13px;

        font-weight: 500;

        border-bottom:
            1px solid #E9EDF1;
    }

    .navigation .dropdown-menu a:hover {

        color: var(--green);

        background:
            #EEF7F2;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-content {

        min-height: 580px;

        grid-template-columns:
            52% 48%;

        padding-top: 55px;

        padding-bottom: 55px;
    }

    .hero-text h1 {

        font-size: 47px;

        letter-spacing: -1.8px;
    }

    .hero-text > p {

        font-size: 14px;
    }

    .hero-card {

        padding:
            16px 18px;
    }

    .hero-images {

        height: 440px;
    }

    .image-1 {

        height: 275px;
    }

    .image-2 {

        height: 155px;
    }

    .image-3 {

        top: 185px;

        height: 170px;
    }

    .image-4,
    .image-5,
    .image-6 {

        height: 130px;
    }


    /* =====================================================
       QUICK SERVICES
    ===================================================== */

    .quick-grid {

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


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-grid,
    .why-grid,
    .fintech-grid {

        gap: 45px;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .products-grid {

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


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-grid {

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


    /* =====================================================
       NEWS
    ===================================================== */

    .news-grid {

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

    .news-card:last-child {

        grid-column:
            1 / -1;

        max-width:
            calc(50% - 12px);

        margin: 0 auto;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {

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

        row-gap: 45px;
    }
}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 768px) {

    .container {

        width:
            calc(100% - 32px);
    }

    .section-padding {

        padding-top: 60px;

        padding-bottom: 60px;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    .top-bar {

        display: none;
    }


    /* =====================================================
       CONTACT BAR
    ===================================================== */

    .lamic-topbar {

        display: block;

        background: var(--white);
    }

    .lamic-topbar-container {

        width: 100%;

        min-height: auto;

        padding:
            12px 16px;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px 12px;
    }

    .lamic-top-logo {

        grid-column:
            1 / -1;

        justify-content: center;

        padding-bottom: 9px;

        border-bottom:
            1px solid #EEF1F4;
    }

    .lamic-top-logo img {

        width: 130px;
    }

    .lamic-top-item {

        width: 100%;

        gap: 7px;

        min-width: 0;
    }

    .lamic-top-icon {

        width: 32px;

        height: 32px;

        font-size: 12px;
    }

    .lamic-top-content {

        min-width: 0;
    }

    .lamic-top-content strong {

        margin-bottom: 1px;

        font-size: 8px;

        letter-spacing: 0.7px;
    }

    .lamic-top-content a,
    .lamic-top-content span {

        display: block;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 10px;
    }

    .lamic-top-item:last-child {

        grid-column:
            1 / -1;

        max-width: none;

        padding-top: 8px;

        border-top:
            1px solid #EEF1F4;
    }

    .lamic-top-item:last-child
    .lamic-top-content span {

        max-width: 100%;

        white-space: normal;

        line-height: 1.35;
    }


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

    .header {

        position: sticky;

        top: 0;

        z-index: 999;
    }

    .nav-wrapper {

        min-height: 64px;

        width:
            calc(100% - 32px);

        position: relative;
    }

    .header-actions {

        margin-left: auto;

        display: flex;

        align-items: center;

        gap: 10px;
    }


    /* =====================================================
       MOBILE NAVIGATION
    ===================================================== */

    .navigation {

        top: calc(100% + 8px);

        left: 0;

        right: 0;

        width: 100%;

        max-height:
            calc(100vh - 75px);

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }

    .navigation.show,
    .navigation.active {

        display: flex;
    }

    .navigation > a,
    .navigation .nav-dropdown > a {

        min-height: 50px;

        padding:
            15px 20px;

        font-size: 13px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero {

        min-height: auto;

        background:
            linear-gradient(
                150deg,
                var(--primary-dark),
                var(--primary)
            );
    }

    .hero::before {

        width: 350px;

        height: 350px;

        right: -180px;

        top: -150px;
    }

    .hero-content {

        min-height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            60px 0 55px;
    }

    .hero-left {

        width: 100%;

        padding: 0;
    }

    .hero-eyebrow {

        margin-bottom: 16px;

        font-size: 10px;

        letter-spacing: 1.4px;
    }

    .hero-eyebrow span {

        width: 32px;

        height: 2px;
    }

    .hero-text h1 {

        max-width: 100%;

        font-size:
            clamp(
                36px,
                10vw,
                50px
            );

        line-height: 1.08;

        letter-spacing: -1.4px;
    }

    .hero-text > p {

        max-width: 100%;

        margin:
            20px 0 27px;

        font-size: 14px;

        line-height: 1.7;
    }

    .hero-buttons {

        width: 100%;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .hero-btn {

        width: 100%;

        min-height: 50px;

        padding:
            0 14px;

        font-size: 12px;
    }

    .hero-card {

        max-width: 100%;

        margin-top: 28px;

        padding:
            18px;

        gap: 13px;

        align-items: flex-start;
    }

    .hero-card-icon {

        width: 44px;

        height: 44px;

        font-size: 16px;
    }

    .hero-card-content > span {

        font-size: 9px;
    }

    .hero-card-content h3 {

        font-size: 14px;
    }

    .hero-card-content p {

        font-size: 11px;
    }


    /* =====================================================
       HERO IMAGES
    ===================================================== */

    .hero-images {

        width: 100%;

        max-width: 100%;

        height: 400px;

        margin-top: 40px;
    }

    .image-1 {

        left: 0;

        top: 0;

        width: 61%;

        height: 235px;
    }

    .image-2 {

        right: 0;

        top: 0;

        width: 36%;

        height: 110px;
    }

    .image-3 {

        right: 0;

        top: 120px;

        width: 36%;

        height: 110px;
    }

    .image-4 {

        left: 0;

        bottom: 0;

        width: 30%;

        height: 135px;
    }

    .image-5 {

        left: 33%;

        bottom: 0;

        width: 31%;

        height: 135px;
    }

    .image-6 {

        right: 0;

        bottom: 0;

        width: 33%;

        height: 135px;
    }

    .hero-image-shape {

        display: none;
    }


    /* =====================================================
       QUICK SERVICES
    ===================================================== */

    .quick-services {

        margin-top: 0;

        padding-top: 15px;

        background:
            var(--light-bg);
    }

    .quick-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .quick-card {

        min-height: 95px;

        padding: 14px;

        gap: 9px;
    }

    .quick-icon {

        width: 38px;

        height: 38px;

        font-size: 15px;
    }

    .quick-card h3 {

        font-size: 12px;
    }

    .quick-card p {

        font-size: 9px;
    }

    .quick-card .arrow {

        display: none;
    }


    /* =====================================================
       ABOUT / WHY / FINTECH
    ===================================================== */

    .about-grid,
    .why-grid,
    .fintech-grid {

        grid-template-columns:
            1fr;

        gap: 40px;
    }

    .about-image {

        max-width: 100%;
    }

    .about-image > img {

        height: 380px;
    }

    .experience-card {

        right: 15px;

        bottom: 15px;

        width: 170px;

        padding: 15px;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .products-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 15px;
    }

    .product-image {

        height: 165px;
    }

    .product-content {

        padding: 17px;
    }

    .product-content h3 {

        font-size: 16px;
    }

    .product-content p {

        min-height: 100px;

        font-size: 11px;
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 15px;
    }

    .process-item {

        padding:
            28px 16px;
    }


    /* =====================================================
       FINTECH
    ===================================================== */

    .fintech-points {

        grid-template-columns:
            1fr;
    }

    .fintech-visual {

        min-height: 350px;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .stats-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 0;
    }

    .stat {

        padding:
            20px 12px;

        border-right:
            1px solid
            rgba(255,255,255,0.2);

        border-bottom:
            1px solid
            rgba(255,255,255,0.2);
    }

    .stat:nth-child(2) {

        border-right: none;
    }

    .stat:nth-child(3),
    .stat:nth-child(4) {

        border-bottom: none;
    }


    /* =====================================================
       NEWS
    ===================================================== */

    .heading-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .heading-row h2 {

        font-size: 32px;
    }

    .news-grid {

        grid-template-columns:
            1fr;
    }

    .news-card:last-child {

        grid-column: auto;

        max-width: none;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .cta-inner {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {

        padding-top: 55px;

        padding-bottom: 45px;

        grid-template-columns:
            1fr 1fr;

        gap:
            35px 25px;
    }

    .footer-about {

        grid-column:
            1 / -1;

        max-width: 100%;
    }

    .footer-contact {

        grid-column:
            1 / -1;
    }

    .footer-bottom .container {

        padding-top: 18px;

        padding-bottom: 18px;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }
}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .container {

        width:
            calc(100% - 24px);
    }

    .lamic-topbar-container {

        padding:
            10px 12px;

        gap: 9px;
    }

    .lamic-top-logo img {

        width: 115px;
    }

    .lamic-top-icon {

        width: 29px;

        height: 29px;

        font-size: 11px;
    }

    .lamic-top-content strong {

        font-size: 7px;
    }

    .lamic-top-content a,
    .lamic-top-content span {

        font-size: 9px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-content {

        padding:
            50px 0 45px;
    }

    .hero-eyebrow {

        font-size: 9px;

        letter-spacing: 1.1px;
    }

    .hero-text h1 {

        font-size: 34px;

        line-height: 1.1;
    }

    .hero-text > p {

        font-size: 13px;
    }

    .hero-buttons {

        grid-template-columns:
            1fr;
    }

    .hero-btn {

        min-height: 49px;
    }

    .hero-card {

        padding: 15px;

        gap: 10px;
    }

    .hero-card-icon {

        width: 40px;

        height: 40px;

        font-size: 14px;
    }

    .hero-card-content h3 {

        font-size: 13px;
    }

    .hero-card-content p {

        font-size: 10px;
    }


    /* =====================================================
       HERO IMAGES
    ===================================================== */

    .hero-images {

        height: 350px;

        margin-top: 32px;
    }

    .image-1 {

        height: 205px;
    }

    .image-2 {

        height: 96px;
    }

    .image-3 {

        top: 105px;

        height: 96px;
    }

    .image-4,
    .image-5,
    .image-6 {

        height: 115px;
    }


    /* =====================================================
       QUICK SERVICES
    ===================================================== */

    .quick-grid {

        grid-template-columns:
            1fr;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-image > img {

        height: 320px;
    }

    .experience-card {

        right: 10px;

        bottom: 10px;

        width: 155px;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .products-grid {

        grid-template-columns:
            1fr;
    }

    .product-image {

        height: 190px;
    }

    .product-content p {

        min-height: auto;
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-grid {

        grid-template-columns:
            1fr;
    }


    /* =====================================================
       FINTECH
    ===================================================== */

    .tech-circle {

        width: 270px;

        height: 270px;
    }

    .center-tech {

        width: 90px;

        height: 90px;
    }

    .tech-icon {

        width: 48px;

        height: 48px;

        font-size: 15px;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .stat strong {

        font-size: 20px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {

        grid-template-columns:
            1fr;
    }

    .footer-about,
    .footer-contact {

        grid-column: auto;
    }
}


/* =========================================================
   24. VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .lamic-topbar-container {

        padding:
            9px 10px;
    }

    .lamic-top-content a,
    .lamic-top-content span {

        font-size: 8px;
    }

    .hero-text h1 {

        font-size: 31px;
    }

    .hero-images {

        height: 310px;
    }

    .image-1 {

        height: 180px;
    }

    .image-2,
    .image-3 {

        height: 82px;
    }

    .image-3 {

        top: 91px;
    }

    .image-4,
    .image-5,
    .image-6 {

        height: 100px;
    }
}


/* =========================================================
   25. FINAL MOBILE NAVIGATION SAFETY FIX
   ========================================================= */

/*
   This section intentionally comes LAST.
   It prevents earlier desktop/mobile rules from
   hiding the navigation when the menu is opened.
*/

@media (max-width: 992px) {

    .nav-wrapper {

        position: relative;
    }

    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        width: 45px;

        height: 45px;

        padding: 0;

        background:
            var(--green);

        color:
            var(--white);

        border: none;

        border-radius: 5px;

        font-size: 19px;

        cursor: pointer;

        position: relative;

        z-index: 3001;
    }


    /*
       CLOSED MENU
    */

    .navigation {

        display: none;

        position: absolute;

        top: calc(100% + 8px);

        left: 0;

        right: 0;

        width: 100%;

        max-height:
            calc(100vh - 80px);

        overflow-y: auto;

        flex-direction: column;

        align-items: stretch;

        padding: 8px 0;

        background:
            var(--white);

        border:
            1px solid var(--border);

        border-radius: 8px;

        box-shadow:
            0 15px 35px
            rgba(0,0,0,0.15);

        z-index: 3000;
    }


    /*
       OPEN MENU

       Both classes are supported so the CSS
       works whether your JavaScript uses:

       classList.toggle("show")

       OR

       classList.toggle("active")
    */

    .navigation.show,
    .navigation.active {

        display: flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        max-height:
            calc(100vh - 80px) !important;

        overflow-y: auto !important;
    }


    /*
       MAIN LINKS
    */

    .navigation > a,
    .navigation > .nav-dropdown > a {

        display: flex;

        width: 100%;

        min-height: 50px;

        align-items: center;

        justify-content: space-between;

        padding:
            14px 20px;

        color:
            var(--primary);

        background:
            var(--white);

        font-size: 14px;

        font-weight: 600;

        border-bottom:
            1px solid #EEEEEE;

        white-space: normal;
    }


    .navigation > a:hover,
    .navigation > .nav-dropdown > a:hover {

        color:
            var(--green);

        background:
            #F5F9F7;
    }


    /*
       ACTIVE LINK
    */

    .navigation > a.active {

        color:
            var(--green);

        background:
            #F5F9F7;
    }

    .navigation > a.active::after {

        display: none;
    }


    /*
       DROPDOWN CONTAINER
    */

    .navigation .nav-dropdown {

        width: 100%;

        display: block;

        position: relative;
    }


    /*
       DROPDOWN ARROW
    */

    .navigation .nav-dropdown > a i {

        font-size: 11px;

        transition:
            transform 0.3s ease;
    }

    .navigation .nav-dropdown.open > a i {

        transform:
            rotate(180deg);
    }


    /*
       DROPDOWN MENU CLOSED
    */

    .navigation .dropdown-menu {

        position: static;

        display: none;

        width: 100%;

        min-width: 100%;

        max-height: none;

        margin: 0;

        padding: 0;

        background:
            #F7F9FB;

        border: none;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        overflow: visible;
    }


    /*
       DROPDOWN MENU OPEN
    */

    .navigation .nav-dropdown.open
    .dropdown-menu {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /*
       DROPDOWN LINKS
    */

    .navigation .dropdown-menu a {

        display: block;

        width: 100%;

        padding:
            13px 38px;

        color:
            #506070;

        background:
            #F7F9FB;

        font-size: 13px;

        font-weight: 500;

        border-bottom:
            1px solid #E9EDF1;
    }

    .navigation .dropdown-menu a:hover {

        color:
            var(--green);

        background:
            #EEF7F2;

        padding-left: 42px;
    }


    /*
       KEEP HEADER ABOVE HERO
    */

    .header {

        position: sticky;

        top: 0;

        z-index: 4000;
    }


    /*
       MENU BUTTON ABOVE EVERYTHING
    */

    .menu-toggle {

        z-index: 5000;
    }

    .header-actions {

        display: flex;

        align-items: center;

        gap: 10px;

        margin-left: auto;
    }

    .contact-button {

        display: none !important;
    }
}


/* =========================================================
   26. EXTRA SMALL NAVIGATION
========================================================= */

@media (max-width: 480px) {

    .navigation {

        top: calc(100% + 6px);

        max-height:
            calc(100vh - 70px);
    }

    .navigation.show,
    .navigation.active {

        max-height:
            calc(100vh - 70px) !important;
    }

    .navigation > a,
    .navigation > .nav-dropdown > a {

        padding:
            13px 17px;

        font-size: 13px;
    }

    .navigation .dropdown-menu a {

        padding:
            12px 32px;

        font-size: 12px;
    }

    .menu-toggle {

        width: 43px;

        height: 43px;

        font-size: 18px;
    }
}



/* =========================================================
   AMUKA ELIMU PROMOTIONAL BANNER
========================================================= */

.amuka-elimu-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #064d32 0%, #087443 55%, #0b8a51 100%);
    color: #ffffff;
    padding: 70px 0;
}

.amuka-elimu-banner::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    right: -150px;
    top: -180px;
}

.amuka-elimu-banner::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    left: -120px;
    bottom: -170px;
}

.amuka-elimu-banner-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: center;
    gap: 60px;
}

.amuka-elimu-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    color: #d9f7e7;
}

.amuka-elimu-banner-content h2 {
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 20px;
    max-width: 720px;
}

.amuka-elimu-banner-content h2 strong {
    display: block;
    color: #ffffff;
}

.amuka-elimu-banner-content p {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.88);
}

.amuka-elimu-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 30px;
}

.amuka-elimu-highlights span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.amuka-elimu-highlights i {
    color: #ffffff;
}

.amuka-elimu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.amuka-btn-primary,
.amuka-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.amuka-btn-primary {
    background: #ffffff;
    color: #087443;
}

.amuka-btn-primary:hover {
    transform: translateY(-3px);
}

.amuka-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

.amuka-btn-secondary:hover {
    background: #ffffff;
    color: #087443;
}


/* =========================================================
   AMUKA ELIMU VISUAL
========================================================= */

.amuka-elimu-banner-visual {
    position: relative;
    min-height: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.amuka-money-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    color: #ffffff;
}

.amuka-amount {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #ffffff;
    color: #064d32;
    padding: 18px 25px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.amuka-amount small {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.amuka-amount strong {
    display: block;
    font-size: 30px;
    line-height: 1.2;
}

.amuka-amount span {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.amuka-floating-icon {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #ffffff;
    color: #087443;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.icon-one {
    top: 25px;
    left: 20px;
}

.icon-two {
    top: 100px;
    right: 0;
}

.icon-three {
    bottom: 25px;
    left: 40px;
}


/* =========================================================
   AMUKA ELIMU PRODUCT CARD
========================================================= */

.amuka-elimu-product-card {
    position: relative;
}

.product-image.amuka-elimu {
    background: linear-gradient(
        135deg,
        #064d32,
        #0a8750
    );
    color: #ffffff;
}

.product-image.amuka-elimu i {
    font-size: 65px;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 15px 0 20px;
}

.product-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.product-features i {
    color: #087443;
}


/* =========================================================
   AMUKA ELIMU PAGE HERO
========================================================= */

.amuka-page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #064d32,
        #087443
    );
    color: #ffffff;
    padding: 100px 0;
}

.amuka-page-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    right: -180px;
    top: -200px;
    background: rgba(255, 255, 255, 0.05);
}

.amuka-page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.amuka-page-hero h1 {
    font-size: 55px;
    line-height: 1.1;
    margin: 15px 0 25px;
}

.amuka-page-hero h1 strong {
    display: block;
}

.amuka-page-hero p {
    max-width: 700px;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,0.88);
}

.amuka-page-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}


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

.amuka-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.amuka-benefit-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
}

.amuka-benefit-card:hover {
    transform: translateY(-7px);
}

.amuka-benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e8f6ef;
    color: #087443;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.amuka-benefit-card h3 {
    margin-bottom: 12px;
}

.amuka-benefit-card p {
    line-height: 1.7;
    color: #666;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.amuka-requirements {
    background: #f6f8f7;
}

.amuka-requirements-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 70px;
    align-items: center;
}

.amuka-requirements-content h2 {
    font-size: 40px;
    margin: 12px 0 20px;
}

.amuka-requirements-content > p {
    color: #666;
    line-height: 1.8;
    max-width: 650px;
}

.amuka-check-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.amuka-check-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.amuka-check-list > li > i {
    color: #087443;
    font-size: 22px;
    margin-top: 3px;
}

.amuka-check-list strong {
    display: block;
    margin-bottom: 5px;
}

.amuka-check-list span {
    display: block;
    color: #666;
    line-height: 1.7;
}


/* =========================================================
   APPLICATION CARD
========================================================= */

.amuka-application-card {
    background: #ffffff;
    padding: 45px;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    text-align: center;
}

.amuka-application-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #e8f6ef;
    color: #087443;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.amuka-application-card > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #087443;
}

.amuka-application-card h3 {
    font-size: 28px;
    margin: 12px 0;
}

.amuka-application-card p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 25px;
}

.amuka-whatsapp-button,
.amuka-call-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 10px;
    transition: 0.3s ease;
}

.amuka-whatsapp-button {
    background: #087443;
    color: #ffffff;
}

.amuka-call-button {
    border: 1px solid #087443;
    color: #087443;
}

.amuka-whatsapp-button:hover,
.amuka-call-button:hover {
    transform: translateY(-2px);
}


/* =========================================================
   AMUKA PROCESS
========================================================= */

.amuka-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.amuka-process-item {
    text-align: center;
    padding: 30px 20px;
    position: relative;
}

.amuka-process-item > span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #087443;
    margin-bottom: 15px;
}

.amuka-process-item > i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    background: #e8f6ef;
    color: #087443;
    font-size: 25px;
}

.amuka-process-item h3 {
    margin: 20px 0 10px;
}

.amuka-process-item p {
    color: #666;
    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.amuka-final-cta {
    background: #064d32;
    color: #ffffff;
    padding: 70px 0;
}

.amuka-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.amuka-final-cta-inner > div:first-child {
    max-width: 700px;
}

.amuka-final-cta span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.amuka-final-cta h2 {
    font-size: 40px;
    margin: 12px 0;
}

.amuka-final-cta p {
    color: rgba(255,255,255,0.8);
}

.amuka-final-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.amuka-phone-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .amuka-elimu-banner-inner {
        grid-template-columns: 1fr;
    }

    .amuka-elimu-banner-visual {
        min-height: 250px;
    }

    .amuka-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .amuka-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 768px) {

    .amuka-elimu-banner {
        padding: 55px 0;
    }

    .amuka-elimu-banner-content h2 {
        font-size: 34px;
    }

    .amuka-elimu-banner-content p {
        font-size: 15px;
    }

    .amuka-elimu-highlights {
        flex-direction: column;
        gap: 10px;
    }

    .amuka-elimu-banner-visual {
        min-height: 240px;
    }

    .amuka-page-hero {
        padding: 70px 0;
    }

    .amuka-page-hero h1 {
        font-size: 38px;
    }

    .amuka-page-hero p {
        font-size: 16px;
    }

    .amuka-benefits-grid {
        grid-template-columns: 1fr;
    }

    .amuka-requirements-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .amuka-requirements-content h2 {
        font-size: 32px;
    }

    .amuka-process-grid {
        grid-template-columns: 1fr;
    }

    .amuka-final-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .amuka-final-cta h2 {
        font-size: 32px;
    }

}


@media (max-width: 480px) {

    .amuka-elimu-buttons,
    .amuka-page-buttons {
        flex-direction: column;
        width: 100%;
    }

    .amuka-btn-primary,
    .amuka-btn-secondary {
        width: 100%;
    }

    .amuka-money-circle {
        width: 140px;
        height: 140px;
        font-size: 50px;
    }

    .amuka-amount {
        right: 0;
        padding: 12px 15px;
    }

    .amuka-amount strong {
        font-size: 24px;
    }

    .amuka-application-card {
        padding: 30px 20px;
    }

}