/* ***** */
/* Fonts */
/* ***** */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Paytone+One&display=swap');


/* ********* */
/* Variables */
/* ********* */

:root {
    --PRIMARY-COLOUR: #7B2CBF;
    --BACKGROUND-COLOUR: #F7F5FF;

    --DONATION-PAGE: #E83E8C;
    --INMEMORY-PAGE: #C23B9A;
    --FUNDRAISING-PAGE: #8B3FD1;
    --TEAM-PAGE: #6C4CCF;
    --RAFFLE-PAGE: #5367D6;
    --TOMBOLA-PAGE: #3A8DDE;
    --EVENT-PAGE: #2FA8D7;
    --MEMBERSHIP-PAGE: #2CB7B5;
    --AUCTION-PAGE: #2F9E7A;
    --LOTTERY-PAGE: #61B45A;
    --MEMBERSLOTTERY-PAGE: #8DBA4A;
    --GIFTVOUCHER-PAGE: #D4B52C;
    --SHOP-PAGE: #F2A93B;
    --POPUP-PAGE: #F47B4A;
    --LIVEMEETING-PAGE: #84645D;

    --CHARITY-HUB: #7B2CBF;
    --CHARITY-WALL: #7B2CBF;
    --SUPPORTER-WALL: #7B2CBF;
    --CAMPAIGN-WALL: #7B2CBF;

    --H-COLOUR: #111B4D;
    --P-COLOUR: #43485C;
    --A-COLOUR: #7B2CBF;
    --WHITE-COLOUR: #FFFFFF;
}


/* ******** */
/* Features */
/* ******** */

.feature {
    border: 4px solid transparent;
}

.feature:hover {
    border: 4px solid rgba(123, 44, 191, 0.18);
    border-radius: 40px;
    background-color: var(--WHITE-COLOUR) !important;
}


/* ********* */
/* Reactions */
/* ********* */

.reaction-btn {
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.reaction-btn:hover {
    transform: scale(1.1);
    opacity: 0.85;
}


/* ************* */
/* Hero gradient */
/* ************* */

#herogradient {
    background: linear-gradient(
        135deg,
        #7B2CBF 0%,
        #8F34C5 55%,
        #5E2A7E 100%
    );
}

#herogradient h1,
#herogradient h2,
#herogradient h3,
#herogradient h4,
#herogradient p {
    color: var(--WHITE-COLOUR);
}

#herogradient a:not(.btn) {
    color: var(--WHITE-COLOUR);
}

#herogradient .btn-primary {
    background-color: var(--WHITE-COLOUR);
    border-color: var(--WHITE-COLOUR);
    color: var(--PRIMARY-COLOUR);
}

#herogradient .btn-primary:hover,
#herogradient .btn-primary:focus {
    background-color: var(--BACKGROUND-COLOUR);
    border-color: var(--BACKGROUND-COLOUR);
    color: #5E2A7E;
}

#herogradient .btn-outline-primary {
    background-color: transparent;
    border-color: var(--WHITE-COLOUR);
    color: var(--WHITE-COLOUR);
}

#herogradient .btn-outline-primary:hover,
#herogradient .btn-outline-primary:focus {
    background-color: var(--WHITE-COLOUR);
    border-color: var(--WHITE-COLOUR);
    color: var(--PRIMARY-COLOUR);
}


/* **** */
/* Hero */
/* **** */

#hero {
    background-color: var(--WHITE-COLOUR);
}

#hero h1 {
    font-family: "Paytone One", sans-serif;
    color: var(--H-COLOUR);
    font-weight: 400;
}

#hero p {
    font-family: "Nunito Sans", sans-serif;
    color: var(--P-COLOUR);
    font-weight: 400;
}

#page-navigation-button {
    padding-left: 0.75rem;
}

.pt-6 {
    padding-top: 4rem;
}


/* ********** */
/* Typography */
/* ********** */

body {
    font-family: "Nunito Sans", sans-serif;
    background: var(--BACKGROUND-COLOUR);
}

h1 {
    font-family: "Paytone One", sans-serif;
    color: var(--PRIMARY-COLOUR);
    font-weight: 400;
}

h2,
h3,
h4,
h5 {
    font-family: "Paytone One", sans-serif;
    color: var(--H-COLOUR);
    font-weight: 400;
}

p,
li {
    color: var(--P-COLOUR);
}

a {
    color: var(--A-COLOUR);
    text-decoration: none;
}


/* ********** */
/* Navigation */
/* ********** */

#page-navigation {
    background: var(--WHITE-COLOUR);
}

.page-navigation-menu a {
    color: var(--H-COLOUR);
    font-family: "Nunito Sans", sans-serif;
    font-weight: 800;
    margin-left: 1rem;
}


/* ******* */
/* Buttons */
/* ******* */

.btn {
    border-radius: 40px;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
    color: var(--WHITE-COLOUR);
}

.btn-secondary,
#header-button:hover,
#header-share-button,
.btn-primary:hover {
    background-color: var(--WHITE-COLOUR);
    color: var(--theme-color, var(--PRIMARY-COLOUR));
    border: 1px solid var(--PRIMARY-COLOUR);
    font-weight: 700;
    font-family: "Nunito Sans", sans-serif;
}

.btn-primary,
#header-button,
#header-share-button:hover,
.btn-secondary:hover {
    background-color: var(--PRIMARY-COLOUR);
    color: var(--WHITE-COLOUR);
    border: 1px solid var(--PRIMARY-COLOUR);
    font-weight: 700;
    font-family: "Nunito Sans", sans-serif;
}


/* ***** */
/* Cards */
/* ***** */

.section-content .card-header svg {
    color: var(--WHITE-COLOUR);
}


/* ****** */
/* Header */
/* ****** */

#page-title-row {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--WHITE-COLOUR);
}

#header-text {
    color: var(--H-COLOUR);
}


/* **** */
/* Tile */
/* **** */

.tile {
    border-radius: 6px;
}


/* ******* */
/* Section */
/* ******* */

.section,
.section strong,
.section h1,
.section h2,
.section h3,
.section h4,
.section p,
.section svg {
    color: var(--WHITE-COLOUR);
}


/* ************* */
/* Section title */
/* ************* */

.section-title {
    background-color: var(--BACKGROUND-COLOUR);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* *************** */
/* Section content */
/* *************** */

.section-content {
    background-color: var(--BACKGROUND-COLOUR);
    border-radius: 6px;
}

.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4 {
    color: var(--H-COLOUR);
}

.section-content p,
.section-content svg {
    color: var(--P-COLOUR);
}

.section-content a {
    color: var(--A-COLOUR);
}


/* ****************** */
/* Page theme colours */
/* ****************** */

#donation-page {
    --theme-color: var(--DONATION-PAGE);
}

#fundraising-page {
    --theme-color: var(--FUNDRAISING-PAGE);
}

#raffle-page {
    --theme-color: var(--RAFFLE-PAGE);
}

#event-page {
    --theme-color: var(--EVENT-PAGE);
}

#lottery-page {
    --theme-color: var(--LOTTERY-PAGE);
}

#members-lottery-page {
    --theme-color: var(--MEMBERSLOTTERY-PAGE);
}

#voucher-page {
    --theme-color: var(--GIFTVOUCHER-PAGE);
}

#tombola-page {
    --theme-color: var(--TOMBOLA-PAGE);
}

#membership-page {
    --theme-color: var(--MEMBERSHIP-PAGE);
}

#auction-page {
    --theme-color: var(--AUCTION-PAGE);
}

#shop-page {
    --theme-color: var(--SHOP-PAGE);
}

#livemeeting-page {
    --theme-color: var(--LIVEMEETING-PAGE);
}

#group-fundraising-page {
    --theme-color: var(--TEAM-PAGE);
}

#charity-wall {
    --theme-color: var(--CHARITY-WALL);
}

#charity-hub {
    --theme-color: var(--CHARITY-HUB);
}

#campaign-wall {
    --theme-color: var(--CAMPAIGN-WALL);
}

#supporter-wall {
    --theme-color: var(--SUPPORTER-WALL);
}


/* ***************** */
/* Themed page scope */
/* ***************** */

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section {
    background-color: var(--theme-color, var(--PRIMARY-COLOUR));
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-title,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-content {
    background-color: var(--WHITE-COLOUR, var(--BACKGROUND-COLOUR));
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .dropdown-item,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-title h1,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-title h2,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-title h3,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .section-title h4 {
    color: var(--theme-color, var(--PRIMARY-COLOUR));
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .page-navigation-menu a {
    color: var(--theme-color, var(--H-COLOUR));
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .btn-secondary,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) #header-button:hover,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) #header-share-button,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .btn-primary:hover {
    background-color: var(--WHITE-COLOUR);
    color: var(--theme-color, var(--PRIMARY-COLOUR));
    border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
    font-weight: 700;
    font-family: "Nunito Sans", sans-serif;
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .btn-primary,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) #header-button,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) #header-share-button:hover,
:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .btn-secondary:hover {
    background-color: var(--theme-color, var(--PRIMARY-COLOUR));
    color: var(--WHITE-COLOUR);
    border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
    font-weight: 700;
    font-family: "Nunito Sans", sans-serif;
}

:is(
    #supporter-wall,
    #fundraising-page,
    #donation-page,
    #raffle-page,
    #event-page,
    #auction-page,
    #voucher-page,
    #members-lottery-page,
    #membership-page,
    #shop-page,
    #charity-wall,
    #charity-hub,
    #campaign-wall,
    #group-fundraising-page,
    #tombola-page,
    #lottery-page,
    #livemeeting-page
) .tile {
    border: 1px solid var(--theme-color, var(--BACKGROUND-COLOUR));
}


/* ****** */
/* Footer */
/* ****** */

#page-footer {
    background-color: var(--H-COLOUR);
    color: var(--WHITE-COLOUR);
}

#page-footer h1,
#page-footer h2,
#page-footer h3,
#page-footer h4,
#page-footer h5,
#page-footer h6 {
    color: var(--WHITE-COLOUR);
}

#page-footer p,
#page-footer li,
#page-footer small {
    color: #D9DCEF;
}

#page-footer a {
    color: var(--WHITE-COLOUR);
}

#page-footer a:hover,
#page-footer a:focus {
    color: #D8A7F0;
}

#page-footer svg {
    color: var(--WHITE-COLOUR);
}

#page-footer hr {
    display: block;
    visibility: visible;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 1;
}


/* ****** */
/* Alerts */
/* ****** */

.alert,
.alert-secondary {
    border: 1px solid #DEE2E6;
    border-radius: 6px;
    background-color: var(--WHITE-COLOUR);
}

.alert svg {
    color: var(--PRIMARY-COLOUR);
}


/* ************ */
/* Card headers */
/* ************ */

.card-header {
    background-color: var(--PRIMARY-COLOUR);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header a {
    color: var(--WHITE-COLOUR);
    font-weight: 400;
}


/* ************** */
/* Responsive logo */
/* ************** */

@media (min-width: 0) {
    #logo {
        min-width: 130px;
        max-width: 130px;
        padding: 1rem;
    }
}

@media (min-width: 576px) {
    #logo {
        min-width: 200px;
        max-width: 200px;
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    #logo {
        min-width: 200px;
        max-width: 200px;
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    #logo {
        min-width: 200px;
        max-width: 200px;
        padding: 1rem;
    }
}

@media (min-width: 1200px) {
    #logo {
        min-width: 200px;
        max-width: 200px;
        padding: 1rem;
    }
}