@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

:root {
    --red-50: #feeceb;
    --red-100: #fcc5c1;
    --red-200: #faa9a3;
    --red-300: #f88178;
    --red-400: #f6695e;
    --red-500: #f44336;
    --red-600: #de3d31;
    --red-700: #ad3026;
    --red-800: #86251e;
    --red-900: #661c17;

    --grey-50: #e9e9e8;
    --grey-100: #bab9b9;
    --grey-200: #989897;
    --grey-300: #696867;
    --grey-400: #4c4b49;
    --grey-500: #1f1e1c;
    --grey-600: #1c1b19;
    --grey-700: #161514;
    --grey-800: #11110f;
    --grey-900: #0d0d0c;

    --white-50: #ffffff;
    --white-100: #ffffff;
    --white-200: #ffffff;
    --white-300: #ffffff;
    --white-400: #ffffff;
    --white-500: #ffffff;
    --white-600: #e8e8e8;
    --white-700: #b5b5b5;
    --white-800: #8c8c8c;
    --white-900: #6b6b6b;

    --black-50: #e6e6e6;
    --black-100: #b0b0b0;
    --black-200: #8a8a8a;
    --black-300: #545454;
    --black-400: #333333;
    --black-500: #000000;
    --black-600: #000000;
    --black-700: #000000;
    --black-800: #000000;
    --black-900: #000000;
}

html {scroll-behavior: smooth;}
body {font-family: 'Roboto', sans-serif !important ;}

.bg-grey-50{background-color: var(--grey-50) !important;}
.bg-grey-100{background-color: var(--grey-100) !important;}
.bg-grey-200{background-color: var(--grey-200) !important;}
.bg-grey-300{background-color: var(--grey-300) !important;}
.bg-grey-400{background-color: var(--grey-400) !important;}
.bg-grey-500{background-color: var(--grey-500) !important;}
.bg-grey-600{background-color: var(--grey-600) !important;}
.bg-grey-700{background-color: var(--grey-700) !important;}
.bg-grey-800{background-color: var(--grey-800) !important;}
.bg-grey-900{background-color: var(--grey-900) !important;}

.bg-primary-50{background: var(--red-50) !important;}
.bg-primary-100{background: var(--red-100) !important;}
.bg-primary-200{background: var(--red-200) !important;}
.bg-primary-300{background: var(--red-300) !important;}
.bg-primary-400{background: var(--red-400) !important;}
.bg-primary-500{background: var(--red-500) !important;}
.bg-primary-600{background: var(--red-600) !important;}
.bg-primary-700{background: var(--red-700) !important;}
.bg-primary-800{background: var(--red-800) !important;}
.bg-primary-900{background: var(--red-900) !important;}

.bg-white-50{background: var(--white-50) !important;}
.bg-white-100{background: var(--white-100) !important;}
.bg-white-200{background: var(--white-200) !important;}
.bg-white-300{background: var(--white-300) !important;}
.bg-white-400{background: var(--white-400) !important;}
.bg-white-500{background: var(--white-500) !important;}
.bg-white-600{background: var(--white-600) !important;}
.bg-white-700{background: var(--white-700) !important;}
.bg-white-800{background: var(--white-800) !important;}
.bg-white-900{background: var(--white-900) !important;}

.bg-black-50{background: var(--black-50) !important;}
.bg-black-100{background: var(--black-100) !important;}
.bg-black-200{background: var(--black-200) !important;}
.bg-black-300{background: var(--black-300) !important;}
.bg-black-400{background: var(--black-400) !important;}
.bg-black-500{background: var(--black-500) !important;}
.bg-black-600{background: var(--black-600) !important;}
.bg-black-700{background: var(--black-700) !important;}
.bg-black-800{background: var(--black-800) !important;}
.bg-black-900{background: var(--black-900) !important;}

.text-black-50{color: var(--black-50) !important;}
.text-black-100{color: var(--black-100) !important;}
.text-black-200{color: var(--black-200) !important;}
.text-black-300{color: var(--black-300) !important;}
.text-black-400{color: var(--black-400) !important;}
.text-black-500{color: var(--black-500) !important;}
.text-black-600{color: var(--black-600) !important;}
.text-black-700{color: var(--black-700) !important;}
.text-black-800{color: var(--black-800) !important;}
.text-black-900{color: var(--black-900) !important;}

.text-white-50{color: var(--white-50) !important;}
.text-white-100{color: var(--white-100) !important;}
.text-white-200{color: var(--white-200) !important;}
.text-white-300{color: var(--white-300) !important;}
.text-white-400{color: var(--white-400) !important;}
.text-white-500{color: var(--white-500) !important;}
.text-white-600{color: var(--white-600) !important;}
.text-white-700{color: var(--white-700) !important;}
.text-white-800{color: var(--white-800) !important;}
.text-white-900{color: var(--white-900) !important;}

.text-grey-50{color: var(--grey-50) !important;}
.text-grey-100{color: var(--grey-100) !important;}
.text-grey-200{color: var(--grey-200) !important;}
.text-grey-300{color: var(--grey-300) !important;}
.text-grey-400{color: var(--grey-400) !important;}
.text-grey-500{color: var(--grey-500) !important;}
.text-grey-600{color: var(--grey-600) !important;}
.text-grey-700{color: var(--grey-700) !important;}
.text-grey-800{color: var(--grey-800) !important;}
.text-grey-900{color: var(--grey-900) !important;}

.border-grey-50{border: 1px solid var(--grey-50) !important;}
.border-grey-100{border: 1px solid var(--grey-100) !important;}
.border-grey-200{border: 1px solid var(--grey-200) !important;}
.border-grey-300{border: 1px solid var(--grey-300) !important;}
.border-grey-400{border: 1px solid var(--grey-400) !important;}
.border-grey-500{border: 1px solid var(--grey-500) !important;}
.border-grey-600{border: 1px solid var(--grey-600) !important;}
.border-grey-700{border: 1px solid var(--grey-700) !important;}
.border-grey-800{border: 1px solid var(--grey-800) !important;}
.border-grey-900{border: 1px solid var(--grey-900) !important;}

.border-primary-50{border: 1px solid var(--red-50) !important;}
.border-primary-100{border: 1px solid var(--red-100) !important;}
.border-primary-200{border: 1px solid var(--red-200) !important;}
.border-primary-300{border: 1px solid var(--red-300) !important;}
.border-primary-400{border: 1px solid var(--red-400) !important;}
.border-primary-500{border: 1px solid var(--red-500) !important;}
.border-primary-600{border: 1px solid var(--red-600) !important;}
.border-primary-700{border: 1px solid var(--red-700) !important;}
.border-primary-800{border: 1px solid var(--red-800) !important;}
.border-primary-900{border: 1px solid var(--red-900) !important;}

.text-body{color: var(--black-900) !important;}

.invert{filter: invert(1)}

.no-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}
.no-btn {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.hover{cursor: pointer;}

.hover-grey-to-primary{color: var(--grey-300) !important;}
.hover-grey-to-primary:hover{color: var(--red-500) !important;}

.hover-primary{cursor: pointer;}
.hover-primary:hover{color: var(--red-500) !important;}

.hover-underline{cursor: pointer; text-decoration: none;}
.hover-underline:hover{text-decoration: underline;}

.icon-primary{
    filter: brightness(0) saturate(100%) invert(35%) sepia(79%)
        saturate(1851%) hue-rotate(339deg) brightness(96%)
        contrast(92%);
}
.hover-primary-icon{cursor: pointer;}
.hover-primary-icon:hover{
    filter: brightness(0) saturate(100%) invert(35%) sepia(79%)
        saturate(1851%) hue-rotate(339deg) brightness(96%)
        contrast(92%);
}
.hover-red-icon{
    cursor: pointer; 
    filter: brightness(0) saturate(100%) invert(35%) sepia(79%)
        saturate(1851%) hue-rotate(339deg) brightness(96%)
        contrast(92%);}
.hover-red-icon:hover{filter: none;}

.icon-white{
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease, filter 0.3s ease;}

.hover-black-icon{
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(35%) sepia(79%)
        saturate(1851%) hue-rotate(339deg) brightness(96%)
        contrast(92%);
}
.hover-black-icon:hover{filter: none;}

.primary-icon{
    filter: brightness(0) saturate(100%) invert(35%) sepia(79%)
        saturate(1851%) hue-rotate(339deg) brightness(96%)
        contrast(92%);
}

.alert-error{
    background-color: #f8d7da;
    color: #58151c;
    border: 1px solid #f1aeb5;
}

#quick-navigation {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.35s ease;
}

#quick-navigation.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.footer-bottom-link{
    text-decoration: none;
    color: var(--black-100);
    cursor: pointer;
}

.footer-bottom-link:hover{
    text-decoration: underline;
    color: var(--red-500);
}

/* .small{font-size: clamp(0.625rem, 0.23vw + 9.27px, 75rem); font-weight: 400;} */
.small{font-size:0.85rem; font-weight: 400;}
.fs-mini{font-size: clamp(0.75rem, 0.357vw + 10.86px, 1.0rem); font-weight: 400;}
.fs-mini-bold{font-size: clamp(0.75rem, 0.357vw + 10.86px, 1.0rem); font-weight: 700;}
.fs-caption{font-size: clamp(0.75rem, 0.357vw + 10.86px, 1.0rem); font-weight: 400;}
.fs-caption-bold{font-size: clamp(0.75rem, 0.357vw + 10.86px, 1.0rem); font-weight: 700;}
.fs-body-regular{font-size: clamp(0.875rem, 0.536vw + 12.29px, 1.25rem); font-weight: 400;}
.fs-body-regular-bold{font-size: clamp(0.875rem, 0.536vw + 12.29px, 1.25rem); font-weight: 700;}
.fs-body-large{font-size: clamp(1.0rem, 0.714vw + 13.71px, 1.5rem); font-weight: 400;}
.fs-body-large-bold{font-size: clamp(1.0rem, 0.714vw + 13.71px, 1.5rem); font-weight: 700;}
.fs-h4, h4{font-size: clamp(1.125rem, 0.536vw + 16.29px, 1.5rem); font-weight: 400;}
.fs-h4-bold{font-size: clamp(1.125rem, 0.536vw + 16.29px, 1.5rem); font-weight: 700;}
.fs-h3, h3{font-size: clamp(1.25rem, 0.714vw + 17.71px, 1.75rem); font-weight: 400;}
.fs-h3-bold{font-size: clamp(1.25rem, 0.714vw + 17.71px, 1.75rem); font-weight: 700;}
.fs-h2, h2{font-size: clamp(1.5rem, 0.714vw + 21.71px, 2.0rem); font-weight: 400;}
.fs-h2-bold{font-size: clamp(1.5rem, 0.714vw + 21.71px, 2.0rem); font-weight: 700;}
.fs-h1, h1{font-size: clamp(2.0rem, 0.714vw + 29.71px, 2.5rem); font-weight: 400;}
.fs-h1-bold{font-size: clamp(2.0rem, 0.714vw + 29.71px, 2.5rem); font-weight: 700;}
.fs-display{font-size: clamp(3.0rem, 4.2vw + 45.71px, 3.5rem); font-weight: 400;}
.fs-display-bold{font-size: clamp(3.0rem, 4.2vw, 3.5rem); font-weight: 700;}
/* .fs-mini{font-size: clamp(10px, 0.357vw + 10.86px, 12px); font-weight: 400;}
.fs-mini-bold{font-size: clamp(10px, 0.357vw + 10.86px, 12px); font-weight: 700;}
.fs-caption{font-size: clamp(12px, 0.357vw + 10.86px, 16px); font-weight: 400;}
.fs-caption-bold{font-size: clamp(12px, 0.357vw + 10.86px, 16px); font-weight: 700;}
.fs-body-regular{font-size: clamp(14px, 0.536vw + 12.29px, 20px); font-weight: 400;}
.fs-body-regular-bold{font-size: clamp(14px, 0.536vw + 12.29px, 20px); font-weight: 700;}
.fs-body-large{font-size: clamp(16px, 0.714vw + 13.71px, 24px); font-weight: 400;}
.fs-body-large-bold{font-size: clamp(16px, 0.714vw + 13.71px, 24px); font-weight: 700;}
.fs-h4, h4{font-size: clamp(18px, 0.536vw + 16.29px, 24px); font-weight: 400;}
.fs-h4-bold{font-size: clamp(18px, 0.536vw + 16.29px, 24px); font-weight: 700;}
.fs-h3, h3{font-size: clamp(20px, 0.714vw + 17.71px, 28px); font-weight: 400;}
.fs-h3-bold{font-size: clamp(20px, 0.714vw + 17.71px, 28px); font-weight: 700;}
.fs-h2, h2{font-size: clamp(24px, 0.714vw + 21.71px, 32px); font-weight: 400;}
.fs-h2-bold{font-size: clamp(24px, 0.714vw + 21.71px, 32px); font-weight: 700;}
.fs-h1, h1{font-size: clamp(32px, 0.714vw + 29.71px, 40px); font-weight: 400;}
.fs-h1-bold{font-size: clamp(32px, 0.714vw + 29.71px, 40px); font-weight: 700;}
.fs-display{font-size: clamp(48px, 0.714vw + 45.71px, 56px); font-weight: 400;}
.fs-display-bold{font-size: clamp(48px, 0.714vw + 45.71px, 56px); font-weight: 700;} */

.rounded-8{border-radius: 8px;}

.btn .icon-to-white{transition: transform 0.3s ease, filter 0.3s ease;}
.btn:hover .icon-to-white{
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}

#scrollToTopBtn {
    position: fixed;
    bottom: 5rem;
    right: 3rem;
    z-index: 9999;
    display: none;
}

.hover-highlight-bg{background: var(--grey-50) !important;}
.hover-highlight-bg:hover{background: var(--grey-100) !important;}




/* donate */
.donation-type,
.amount-option {
    cursor: pointer;
    border: 2px solid var(--grey-100);
    transition: all 0.2s ease;
}

.donation-type:hover,
.amount-option:hover {
    background: var(--red-100);
    border: 2px solid var(--red-300);
}

.active-option {
    background: var(--red-50);
    border-color: var(--red-500);
}
/* donate */