:root {

    /* Fonts */
    --font-heading: "Fraunces", serif;
    --font-body: "Quicksand", sans-serif;

    /* Colours */
    --primary: #009893;
    --primary-dark: #04A3B8;
    --dark: #00252A;
    --text: #000000;
    --light: #E8F5F4;
    --white: #FFFFFF;

    /* Border Radius */
    --radius: 10px;

    /* Transition */
    --transition: all .3s ease;

}

body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.7;
    background: var(--white);
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--dark);
    font-weight: 600;
    line-height: 1.2;
}

a,
button,
.btn,
.nav-link {
    font-family: var(--font-body);
    font-weight: 600;
}

.nav-link.active {
    color: #009893 !important;
    font-weight: 700;
    position: relative;
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #009893;

}

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

.hero-section {

    background: linear-gradient(180deg,
            #E8F5F4 0%,
            #FFFFFF 100%);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


/*==============================
NAVBAR
==============================*/

.navbar {

    background: transparent;

}

.navbar-brand img {

    height: 100px;

}

.navbar-nav {

    gap: 18px;

}

.nav-link {

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

    font-weight: 400;

    color: #16333D;

    transition: .3s;

}

.nav-link:hover {

    color: #00A8A8;

}

.dropdown-menu {

    border: none;

    border-radius: 18px;

    padding: 12px;

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

}

.dropdown-item {

    border-radius: 10px;

    padding: 10px 16px;

}

.dropdown-item:hover {

    background: #F4FBFB;

}


/*==============================
DONATE BUTTON
==============================*/

.btn-donate {

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 24px;

    border-radius: 5px;

    border: 1px solid transparent;

    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #009893, #04A3B8) border-box;

    color: var(--dark);

    text-decoration: none;

    font-family: "Quicksand", sans-serif;
    font-weight: 700;

    transition: var(--transition);

}

.btn-donate:hover {

    color: var(--primary);

    transform: translateY(-2px);

}

.icon-circle {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #00A8A8;

}


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

.hero-content {

    flex: 1;

    display: flex;

    align-items: center;

    padding-top: 40px;

    padding-bottom: 80px;

}



.hero-title {

    font-family: var(--font-heading);

    font-size: clamp(2.8rem, 3.5vw, 5rem);

    line-height: 1.1;

    color: #16333D;

    margin-bottom: 24px;
    font-weight: 400;

}

.hero-title b {
    color: #009893;
}

.hero-text {

    max-width: 560px;

    color: #000000;

    margin-bottom: 24px;

}

.hero-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.btn-primary-custom {

    background: #00A8A8;

    color: #fff;

    padding: 15px 32px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

}

.btn-primary-custom:hover {

    color: #fff;

}

.btn-outline-custom {

    padding: 15px 32px;

    border: 2px solid #00A8A8;

    color: #00A8A8;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

}

.btn-outline-custom:hover {

    background: #00A8A8;

    color: #fff;

}

.hero-image {
    max-width: 100%;
    animation: breathe 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes breathe {

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

    25% {
        transform: translateY(-12px) scale(1.02);
    }

    50% {
        transform: translateY(-24px) scale(1.05);
    }

    75% {
        transform: translateY(-12px) scale(1.02);
    }
}

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

@media (max-width:991.98px) {

    .hero-content {

        padding-top: 20px;

        text-align: center;

    }

    .hero-title {
        font-size: 2.2rem;
    }


    .hero-text {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-buttons {

        justify-content: center;

    }

    .btn-donate {

        margin-top: 20px;

        justify-content: center;

        width: 100%;

    }

    .navbar-nav {

        padding: 20px 0;

        gap: 5px;

    }

}

/* ==========================
   THE NUMBERS SECTION
========================== */

.numbers {
    padding: 3.5rem 0;
    position: relative;
}

/* Tablets */
@media (max-width: 991.98px) {
    .numbers {
        padding: 4rem 0;
    }
}

/* Mobile phones */
@media (max-width: 767.98px) {
    .numbers {
        padding: 0.3rem 0;
    }
}

.numbers-content {
    position: relative;
}

.numbers-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.numbers-content {
    max-width: 430px;
}

.numbers h1 {
    font-size: clamp(2.4rem, 3.5vw, 3.6rem);
    margin-bottom: 1rem;
    font-weight: 400;
}

.numbers p {
    color: #000000;
    margin-bottom: 2rem;
}

/* Right column */

.numbers-cards {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Individual Card */

.number-card {
    background: var(--white);
    border: 1px solid rgba(0, 37, 42, .18);
    border-radius: var(--radius);

    padding: 2rem;

    /* Bottom shadow only */
    box-shadow: 0 5px 0 #00252A;

    transition: var(--transition);
}

.number-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 0 #00252A;
}

.number-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1.5rem;
}

.number-card-header img {
    height: 60px;
}

.number-card-header h3 {
    margin: 0;
    font-size: 1.65rem;
}

/* Statistic */

.stat {
    margin-bottom: 1.35rem;
}

.stat:last-child {
    margin-bottom: 0;
}

.stat h4 {
    margin: 0;
    color: var(--primary);
    font-size: 2rem;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
}

.stat p {
    margin: .35rem 0 0;
    font-size: .95rem;
    line-height: 1.45;
    color: rgba(0, 37, 42, .75);
}

/* ======================
   FUTURE SECTION
====================== */

.future {
    padding: 2rem 20px;
}

@media (max-width: 767.98px) {
    .future {
        padding: 2rem 10px;
    }
}

/* Instead of Bootstrap's container */

.future-wrapper {

    position: relative;

    max-width: 1400px;

    margin: 0 auto;

    padding: 4rem 2rem;

    border-radius: 10px;

    overflow: hidden;

    background: linear-gradient(180deg,
            #E8F5F4 0%,
            #FFFFFF 100%);

}

/* Offset logo */

.future-bg-icon {

    position: absolute;

    left: 20px;

    top: 20px;

    width: 150px;

    opacity: .09;

    pointer-events: none;

    user-select: none;

}

/* Content */

.future-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

    text-align: center;

}

/* Badge */

.section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    border-radius: 999px;

    background: linear-gradient(90deg,
            #009893 0%,
            #04A3B8 100%);

    color: #FFFFFF;

    font-size: .9rem;

    font-weight: 700;

    margin-bottom: 0.1rem;

}

/* Subheading */

.future-subheading {

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

    margin-bottom: .75rem;

}

/* Heading */

.future h1 {

    font-size: clamp(2.4rem, 3.5vw, 4rem);

    margin-bottom: 1.25rem;

    font-weight: 400;

}

.future h1 span {

    color: var(--primary);

    font-weight: 700;

}

/* Body */

.future-body {

    max-width: 640px;

    margin: 0 auto;

    color: #000000;

    font-size: 1.05rem;

    line-height: 1.8;

}

.impact {
    position: relative
}

.impact-pin {
    position: relative;
    height: 70vh;
    background: #fff
}

.impact-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: #fff
}

.impact-slide h2 {
    font-weight: 400;
}

.impact-slide .container {
    width: 100%
}

.impact-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 10px
}

.impact-number {
    color: #009893;
    font-weight: 600;
    letter-spacing: .15em;
    font-size: .8rem
}

@media(max-width:991px) {
    .impact-pin {
        height: auto
    }

    .impact-slide {
        position: relative;
        transform: none !important;
        padding: 3rem 0
    }
}

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

@media (max-width: 991.98px) {

    .impact {
        padding: 2rem 10px;
    }

    .impact-pin {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .impact-slide {

        position: relative;
        inset: auto;

        transform: none !important;

        display: block;

        height: auto;

        padding: 1rem;

        background: #fff;

        border: 1px solid rgba(0, 37, 42, .12);

        border-radius: var(--radius);

        box-shadow: 0 5px 0 #00252A;

    }

    .impact-slide:not(:last-child) {
        margin-bottom: .5rem;
    }

    .impact-slide .row {
        row-gap: 2rem;
    }

    .impact-image {

        width: 100%;

        aspect-ratio: 16/10;

        border-radius: var(--radius);

    }

    .impact-number {

        display: inline-block;

        margin-bottom: .85rem;

        font-size: .72rem;

        letter-spacing: .12em;

    }

    .impact-slide h2 {

        font-size: clamp(2rem, 6vw, 2.6rem);

        margin-bottom: 1rem;

    }

    .impact-slide p {

        margin-bottom: 0;

        line-height: 1.7;

    }

}

/*=================================
        DONATE SECTION
==================================*/

.donate-section {

    padding: 3.5rem 20px;

}

.donate-wrapper {

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    padding: 5rem 0;

    background: linear-gradient(360deg,
            #E8F5F4 0%,
            #FFFFFF 100%);

}

/* Background logo */

.donate-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    background: url("images/logo-overlay.png") no-repeat;

    background-position: right 10px top 30px;

    background-size: 150px;

    opacity: .09;

    pointer-events: none;

}

.donate-content {

    max-width: 520px;

}

.donate-content h2 {

    font-size: clamp(2.5rem, 3.5vw, 3.6rem);

    font-weight: 400;

    margin: 0.5rem 0 0.5rem;

}

.donate-content p {

    color: #000000;

    margin-bottom: 1rem;

    line-height: 1.8;

}

.donate-image {

    width: 100%;

    border-radius: 10px;

    object-fit: cover;

}

@media(max-width:991.98px) {

    .donate-section {

        padding: 4rem 10px;

    }

    .donate-wrapper {

        padding: 3rem 1rem;

    }

    .donate-content {

        text-align: center;

        margin: auto;

    }

    .donate-wrapper::before {

        background-size: 220px;

        background-position: center;

    }

}


.donate-image {
    max-width: 100%;
    animation: breathe 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes breathe {

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

    25% {
        transform: translateY(-12px) scale(1.02);
    }

    50% {
        transform: translateY(-24px) scale(1.05);
    }

    75% {
        transform: translateY(-12px) scale(1.02);
    }
}


@media (min-width: 992px) {

    .donate-section .row {
        --bs-gutter-x: 5rem;
    }

}

.donate-row {
    row-gap: 1rem;
}


/*=========================
        BLOG
==========================*/

.blog-section {

    padding: 2rem 0;

}

.blog-row {

    row-gap: 1rem;

}

@media(min-width:992px) {

    .blog-row {

        --bs-gutter-x: 3rem;

    }

}

.blog-card {

    display: flex;

    flex-direction: column;

    height: 100%;

}

.blog-image {

    width: 100%;

    aspect-ratio: 16/10;

    object-fit: cover;

    border-radius: var(--radius);

    margin-bottom: 1.5rem;

}

.blog-content h2 {

    font-size: clamp(1rem, 2vw, 2.6rem);

    font-weight: 400;

    margin-bottom: 1rem;

}

.blog-content p {

    color: #000000;

    line-height: 1.8;

    margin-bottom: 2rem;

}

@media(max-width:991.98px) {

    .blog-section {

        padding: 0.5rem 0;

    }

    .blog-image {

        margin-bottom: 1.25rem;

    }

    .blog-content h2 {

        font-size: 2rem;

    }

    .blog-content p {

        margin-bottom: 1.5rem;

    }

}

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

.footer {

    background: #00252A;
    color: #fff;

    padding: 5.5rem 0 2rem;
    margin-top: 3rem;

}

.footer-top {

    padding-bottom: 3rem;


}

.footer h3 {

    color: #04A3B8;

    font-size: 1.35rem;

    font-weight: 400;

    margin-bottom: 1.5rem;

}

.footer p {

    color: rgba(255, 255, 255, .75);

    margin-bottom: 0;

}

/*=========================
        BRAND
==========================*/

.footer-logo {

    width: 120px;

    margin-bottom: 2rem;

}

.footer-social {

    display: flex;

    gap: 1rem;

}

.footer-social a {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #fff;

    text-decoration: none;

    transition: var(--transition);

}

.footer-social a:hover {

    background: var(--primary);

    transform: translateY(-4px);

}

/*=========================
        LINKS
==========================*/

.footer-links,
.footer-contact {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-links li,
.footer-contact li {

    margin-bottom: .9rem;

}

.footer-links a {

    color: rgba(255, 255, 255, .8);

    text-decoration: none;

    transition: var(--transition);
    font-weight: 400;

}

.footer-links a:hover {

    color: var(--primary);

    padding-left: 6px;

}

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

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: .8rem;

    color: rgba(255, 255, 255, .8);

}

.footer-contact i {

    color: var(--primary);

    font-size: 1rem;

    margin-top: 4px;

}

/*=========================
      NEWSLETTER
==========================*/

.newsletter {

    display: flex;

    gap: 1rem;

    margin-top: 1.5rem;

}

.newsletter input {

    flex: 1;

    height: 58px;

    border: none;

    border-radius: 5px;

    padding: 0 1rem;

    outline: none;

    font-family: var(--font-body);

    background: #fff;

}

.newsletter input::placeholder {

    color: #888;

}


.footer-contact a {

    color: rgba(255, 255, 255, .8);

    text-decoration: none;

    transition: var(--transition);

    line-height: 1.7;
    font-weight: 400;

}

.footer-contact a:hover {

    color: var(--primary);

}

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 1.2rem;

}

.footer-contact i {

    color: var(--primary);

    font-size: 1rem;

    margin-top: 4px;

    flex-shrink: 0;

}

/*=========================
      DIVIDER
==========================*/

.footer-divider {

    border: none;

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

    margin: 0;

}

/*=========================
      BOTTOM
==========================*/

.footer-bottom {

    padding-top: 2rem;

}

.footer-legal {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

    margin-bottom: 1rem;

}

.footer-legal a {

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

    text-decoration: none;

    transition: var(--transition);
    font-weight: 400;

}

.footer-legal a:hover {

    color: var(--primary);

}

.footer-legal span {

    color: rgba(255, 255, 255, .3);

}

.footer-copyright {

    font-size: .95rem;

    color: rgba(255, 255, 255, .5);

    margin: 0;

}

.footer-badge {

    max-width: 220px;

}


.btn-subscribe {

    height: 58px;

    padding: 0 1.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .7rem;

    border: none;

    border-radius: 5px;

    color: #fff;

    font-weight: 600;

    background: linear-gradient(90deg,
            #009893,
            #04A3B8);

    transition: var(--transition);

}

.btn-subscribe i {

    font-size: .9rem;

    transition: transform .3s ease;

}

.btn-subscribe:hover {

    color: #fff;

    transform: translateY(-3px);

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

}

.btn-subscribe:hover i {

    transform: translateX(4px);

}



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

@media(max-width:991.98px) {

    .footer {

        padding: 3rem 0 2rem;

        text-align: center;

    }

    .footer-top {

        row-gap: 3rem;

    }

    .footer-logo {

        margin: auto auto 2rem;
        width: 80px;

    }

    .footer-social {

        justify-content: center;

    }

    .footer-links,
    .footer-contact {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .footer-contact li {

        justify-content: center;

    }

    .newsletter {

        flex-direction: column;

    }

    .newsletter input {

        width: 100%;
        padding: 1rem 1rem;

    }

    .newsletter .btn {

        width: 100%;

        justify-content: center;

    }

    .footer-legal {

        justify-content: center;

    }

    .footer-bottom {

        text-align: center;

        row-gap: 2rem;

    }

    .footer-badge {

        margin: auto;

    }

}


/* =====================================
   POSITIVE CANCER TEST ARTICLE PAGE
===================================== */


.cancer-article-positive {

    padding: 30px 0;

}



/* Hero Image */

.positive-article-image {

    width: 60%;
    margin: 0 auto;

}


.positive-article-image img {

    width: 100%;
    height: 550px;

    object-fit: cover;

    border-radius: 32px;

}



/* Article Container */

.positive-article-content {

    width: 60%;
    margin: 70px auto;

}



/* Main Heading */

.positive-article-content h1 {

    font-family: "Fraunces", serif;

    font-size: clamp(2.5rem, 5vw, 4rem);

    line-height: 1.15;

    color: #00252A;

    margin-bottom: 20px;

}



/* Sub Headings */

.positive-article-content h2 {

    font-family: "Fraunces", serif;

    font-size: 2rem;

    color: #00252A;

    margin-top: 40px;

    margin-bottom: 20px;

}



/* Paragraphs */

.positive-article-content p,
.positive-article-content li {

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

    font-size: 1rem important !;

    line-height: 2;

    color: #000;

}



.positive-article-content ul {

    padding-left: 25px;

    margin: 25px 0;

}



/* Intro Text */

.positive-article-intro {

    font-size: 1rem important !;

    color: #00252A !important;

}



/* Ending Highlight */

.positive-article-ending {

    margin-top: 45px;

    color: #009893 !important;

}




@media(max-width:992px) {

    .positive-article-image {

        width: calc(100% - 20px);
        margin: 0 auto;

    }

    .cancer-article-positive {

        padding: 20px 0;

    }



    .positive-article-image img {

        width: 100%;
        height: 200px;

        object-fit: cover;

        border-radius: 5px;

    }


    .positive-article-content {

        width: 90%;
        margin: 50px auto;

    }

}


/* ==========================
   MOBILE TYPOGRAPHY
   ========================== */
@media (max-width: 768px) {

    html {
        font-size: 15px;
        /* Optional: slightly reduces rem sizes */
    }

    h1 {
        font-size: 1.7rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    p,
    li,
    a,
    span .contact-form label,
    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .contact-form option {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    small {
        font-size: 0.7rem;
    }

}