.elementor-4681 .elementor-element.elementor-element-4ff654f{--display:flex;}@media(min-width:768px){.elementor-4681 .elementor-element.elementor-element-4ff654f{--content-width:1576px;}}/* Start custom CSS for html, class: .elementor-element-a1c65df *//* =========================================================
   AMREF HEALTH SYSTEMS PAGE
   RED / BLACK / WHITE
   ========================================================= */

.amref-health-systems-page {

    --amref-red: #e30613;
    --amref-red-dark: #b9000b;
    --amref-black: #111111;
    --amref-dark: #1d1d1d;
    --amref-grey: #666666;
    --amref-light-grey: #f4f4f4;
    --amref-border: #dddddd;
    --amref-white: #ffffff;

    font-family: "Gill Sans", "Gill Sans MT", Arial, sans-serif;

    color: var(--amref-grey);

    line-height: 1.7;

    width: 100%;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.amref-health-systems-page *,
.amref-health-systems-page *::before,
.amref-health-systems-page *::after {
    box-sizing: border-box;
}

.amref-health-systems-page h1,
.amref-health-systems-page h2,
.amref-health-systems-page h3,
.amref-health-systems-page p {
    margin-top: 0;
}

.amref-health-systems-page h1,
.amref-health-systems-page h2,
.amref-health-systems-page h3 {
    color: var(--amref-black);
    line-height: 1.12;
}

.amref-health-systems-page p {
    font-size: 17px;
}

.amref-hs-section {
    max-width: 1280px;

    margin: 0 auto;

    padding: 110px 40px;
}


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

.amref-hs-hero {

    position: relative;

    width: 100%;

    min-height: 680px;

    overflow: hidden;

    background: var(--amref-white);
}


/* IMAGE */

.amref-hs-hero-image {

    position: absolute;

    top: 0;
    right: 0;

    width: 72%;
    height: 100%;

    background-image: url("https://amref.org/kenya/wp-content/uploads/sites/2/2026/09/SIWA_Health-Workers_Amref-Health-Africa_Steve-Kagia_2025-2-scaled.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


/* CONTENT PANEL */

.amref-hs-hero-content {

    position: relative;

    z-index: 2;

    width: 52%;

    min-height: 680px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 90px 70px 90px max(40px, calc((100vw - 1280px) / 2));

    background: var(--amref-white);
}


/* RED LINE */

.amref-hs-red-line {

    width: 55px;

    height: 6px;

    margin-bottom: 27px;

    background: var(--amref-red);
}


/* EYEBROW */

.amref-hs-eyebrow {

    display: block;

    margin-bottom: 22px;

    color: var(--amref-red);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2.5px;

    line-height: 1.2;
}


/* HERO TITLE */

.amref-hs-hero-content h1 {

    max-width: 650px;

    margin-bottom: 28px;

    color: var(--amref-black);

    font-size: clamp(44px, 5vw, 70px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -1.5px;
}


/* HERO TEXT */

.amref-hs-hero-content p {

    max-width: 600px;

    margin-bottom: 38px;

    color: #555555;

    font-size: 18px;

    line-height: 1.65;
}


/* BUTTON */

.amref-hs-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    width: fit-content;

    padding: 16px 25px;

    background: var(--amref-red);

    color: var(--amref-white);

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition: all 0.25s ease;
}

.amref-hs-button span {

    font-size: 21px;

    transition: transform 0.25s ease;
}

.amref-hs-button:hover {

    background: var(--amref-black);

    color: var(--amref-white);
}

.amref-hs-button:hover span {

    transform: translateX(5px);
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.amref-hs-section-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 50px;

    color: var(--amref-black);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.8px;

    line-height: 1.2;
}

.amref-hs-section-label span:first-child {

    color: var(--amref-red);

    font-size: 16px;
}


/* =========================================================
   INTRO
   ========================================================= */

.amref-hs-intro {

    padding-top: 120px;

    padding-bottom: 120px;
}


.amref-hs-intro-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: start;
}


.amref-hs-intro-title {

    position: relative;
}


.amref-hs-small-line {

    width: 55px;

    height: 5px;

    margin-bottom: 25px;

    background: var(--amref-red);
}


.amref-hs-intro-title h2 {

    margin: 0;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;
}


.amref-hs-intro-text p {

    margin-bottom: 25px;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   APPROACH
   ========================================================= */

.amref-hs-approach {

    background: var(--amref-light-grey);

    padding: 110px 40px;
}


.amref-hs-section-inner {

    max-width: 1200px;

    margin: 0 auto;
}


.amref-hs-approach-heading {

    max-width: 850px;

    margin-bottom: 65px;
}


.amref-hs-approach-heading h2 {

    margin-bottom: 20px;

    font-size: clamp(36px, 4vw, 54px);
}


.amref-hs-approach-heading p {

    max-width: 720px;

    margin-bottom: 0;

    font-size: 18px;
}


/* =========================================================
   APPROACH CARDS
   ========================================================= */

.amref-hs-approach-grid {

    display: grid;

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

    gap: 2px;

    background: var(--amref-border);
}


.amref-hs-approach-card {

    min-height: 310px;

    padding: 40px;

    background: var(--amref-white);

    transition: transform 0.25s ease;
}


.amref-hs-approach-card:hover {

    transform: translateY(-5px);
}


.amref-hs-number {

    display: block;

    margin-bottom: 55px;

    color: var(--amref-red);

    font-size: 15px;

    font-weight: 700;
}


.amref-hs-approach-card h3 {

    margin-bottom: 16px;

    font-size: 25px;
}


.amref-hs-approach-card p {

    margin-bottom: 0;

    font-size: 16px;

    line-height: 1.65;
}


/* HIGHLIGHT CARD */

.amref-hs-approach-highlight {

    background: var(--amref-black);
}


.amref-hs-approach-highlight h3 {

    color: var(--amref-white);
}


.amref-hs-approach-highlight p {

    color: #cccccc;
}


.amref-hs-approach-highlight .amref-hs-number {

    color: var(--amref-red);
}


/* =========================================================
   PROJECTS
   ========================================================= */

.amref-hs-projects {

    padding-top: 120px;

    padding-bottom: 120px;
}


.amref-hs-projects-heading {

    max-width: 850px;

    margin-bottom: 70px;
}


.amref-hs-projects-heading h2 {

    margin-bottom: 20px;

    font-size: clamp(36px, 4vw, 54px);
}


.amref-hs-projects-heading p {

    max-width: 720px;

    margin-bottom: 0;

    font-size: 18px;
}


/* =========================================================
   PROJECT CARDS
   ========================================================= */

.amref-hs-project-card {

    display: grid;

    grid-template-columns: 46% 54%;

    min-height: 470px;

    margin-bottom: 50px;

    background: var(--amref-light-grey);
}


.amref-hs-project-card:last-child {

    margin-bottom: 0;
}


.amref-hs-project-reverse {

    grid-template-columns: 54% 46%;
}


.amref-hs-project-reverse .amref-hs-project-image {

    order: 2;
}


.amref-hs-project-reverse .amref-hs-project-content {

    order: 1;
}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.amref-hs-project-image {

    position: relative;

    min-height: 470px;

    overflow: hidden;

    background: var(--amref-black);
}


.amref-hs-project-image img {

    width: 100%;

    height: 100%;

    min-height: 470px;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.amref-hs-project-card:hover
.amref-hs-project-image img {

    transform: scale(1.04);
}


/* PROJECT TAG */

.amref-hs-project-tag {

    position: absolute;

    left: 35px;

    bottom: 30px;

    z-index: 2;

    padding: 12px 18px;

    background: var(--amref-red);

    color: var(--amref-white);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   PROJECT CONTENT
   ========================================================= */

.amref-hs-project-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 65px;
}


.amref-hs-project-category {

    display: block;

    margin-bottom: 18px;

    color: var(--amref-red);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.amref-hs-project-content h3 {

    margin-bottom: 22px;

    font-size: clamp(32px, 3vw, 44px);

    line-height: 1.1;
}


.amref-hs-project-content p {

    max-width: 600px;

    margin-bottom: 32px;

    font-size: 17px;

    line-height: 1.7;
}


/* PROJECT LINK */

.amref-hs-project-link {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    width: fit-content;

    padding-bottom: 6px;

    border-bottom: 2px solid var(--amref-red);

    color: var(--amref-black);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;
}


.amref-hs-project-link span {

    color: var(--amref-red);

    font-size: 20px;

    transition: transform 0.2s ease;
}


.amref-hs-project-link:hover {

    color: var(--amref-red);
}


.amref-hs-project-link:hover span {

    transform: translateX(5px);
}


/* =========================================================
   SYSTEMS SECTION
   ========================================================= */

.amref-hs-systems {

    display: grid;

    grid-template-columns: 45% 55%;

    min-height: 650px;

    background: var(--amref-black);
}


/* IMAGE */

.amref-hs-systems-image {

    min-height: 650px;

    overflow: hidden;
}


.amref-hs-systems-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


/* CONTENT */

.amref-hs-systems-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 90px max(50px, calc((100vw - 1200px) / 2)) 90px 75px;

    background: var(--amref-black);
}


.amref-hs-label-white {

    color: var(--amref-white);
}


.amref-hs-systems-content .amref-hs-red-line {

    margin-bottom: 30px;
}


.amref-hs-systems-content h2 {

    max-width: 700px;

    margin-bottom: 30px;

    color: var(--amref-white);

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.08;
}


.amref-hs-systems-content p {

    max-width: 700px;

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

    font-size: 17px;
}


.amref-hs-systems-content strong {

    color: var(--amref-white);
}


/* STATEMENT */

.amref-hs-statement {

    max-width: 700px;

    margin-top: 35px;

    padding: 28px 32px;

    border-left: 5px solid var(--amref-red);

    color: var(--amref-white);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.5;
}


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

.amref-hs-cta {

    background: var(--amref-red);

    padding: 100px 40px;
}


.amref-hs-cta-inner {

    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


.amref-hs-cta .amref-hs-eyebrow {

    color: var(--amref-white);
}


.amref-hs-cta h2 {

    margin-bottom: 25px;

    color: var(--amref-white);

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.08;
}


.amref-hs-cta p {

    max-width: 750px;

    margin: 0 auto 35px;

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

    font-size: 18px;
}


.amref-hs-cta .amref-hs-button {

    background: var(--amref-white);

    color: var(--amref-black);
}


.amref-hs-cta .amref-hs-button:hover {

    background: var(--amref-black);

    color: var(--amref-white);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .amref-hs-hero {

        min-height: 620px;
    }


    .amref-hs-hero-image {

        width: 62%;
    }


    .amref-hs-hero-content {

        width: 58%;

        min-height: 620px;

        padding: 70px 45px;
    }


    .amref-hs-hero-content h1 {

        font-size: 48px;
    }


    .amref-hs-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .amref-hs-approach-grid {

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


    .amref-hs-project-card,
    .amref-hs-project-reverse {

        grid-template-columns: 1fr;
    }


    .amref-hs-project-reverse
    .amref-hs-project-image {

        order: initial;
    }


    .amref-hs-project-reverse
    .amref-hs-project-content {

        order: initial;
    }


    .amref-hs-project-image {

        min-height: 360px;
    }


    .amref-hs-project-image img {

        min-height: 360px;
    }


    .amref-hs-project-content {

        padding: 50px;
    }


    .amref-hs-systems {

        grid-template-columns: 1fr;
    }


    .amref-hs-systems-image {

        min-height: 400px;
    }


    .amref-hs-systems-content {

        padding: 80px 45px;
    }

}


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

@media (max-width: 700px) {

    .amref-hs-section {

        padding: 70px 22px;
    }


    /* HERO */

    .amref-hs-hero {

        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    .amref-hs-hero-image {

        position: relative;

        top: auto;
        right: auto;

        width: 100%;

        height: 360px;
    }


    .amref-hs-hero-content {

        width: 100%;

        min-height: auto;

        padding: 55px 25px 65px;
    }


    .amref-hs-hero-content h1 {

        font-size: 42px;

        letter-spacing: -0.8px;
    }


    .amref-hs-hero-content p {

        font-size: 17px;
    }


    /* SECTION LABEL */

    .amref-hs-section-label {

        margin-bottom: 35px;
    }


    /* APPROACH */

    .amref-hs-approach {

        padding: 70px 22px;
    }


    .amref-hs-approach-grid {

        grid-template-columns: 1fr;
    }


    .amref-hs-approach-card {

        min-height: auto;

        padding: 32px;
    }


    .amref-hs-number {

        margin-bottom: 30px;
    }


    /* PROJECTS */

    .amref-hs-projects {

        padding-top: 75px;

        padding-bottom: 75px;
    }


    .amref-hs-project-card {

        margin-bottom: 35px;
    }


    .amref-hs-project-image {

        min-height: 300px;
    }


    .amref-hs-project-image img {

        min-height: 300px;
    }


    .amref-hs-project-content {

        padding: 38px 28px;
    }


    .amref-hs-project-content h3 {

        font-size: 34px;
    }


    /* SYSTEMS */

    .amref-hs-systems-image {

        min-height: 330px;
    }


    .amref-hs-systems-content {

        padding: 70px 25px;
    }


    .amref-hs-statement {

        padding: 24px;

        font-size: 18px;
    }


    /* CTA */

    .amref-hs-cta {

        padding: 75px 22px;
    }


    .amref-hs-cta h2 {

        font-size: 40px;
    }

}/* End custom CSS */