/* -------------------------General */

:root {
    /* F87A25 Pumpkin */
    /* --orange-shade: #f78710ff; */
    /*
    --white-shade: #f0ebe6ff;
    --white: #fbf0e5ff;
    --orange: #f87a25ff;
    --orange-shade: #f58216ff;
    --text: #1e1a0fff;
*/
    /* CSS HEX */
    /* --white: #f2f5faff;
	--orange: #eb770aff;
	--blue: #226bbfff;
	--orange-2: #f8863aff;
	--black: #06010dff; */
    /* CSS HEX */
    --white: #f2f5faff;
    --light-blue: #66a1eaff;
    --blue: #226bbfff;
    /* --orange: #eb770aff; */
    --orange: #d64100;
    --logo-color: #BA2626;
    /* --orange: #E31F25; */
    /* --orange-2: #f9924eff; */
    --orange-2: #f04900ff;
    --black: #06010dff;
}

@font-face {
    font-family: "Simonetta-Regular";
    src: url(../fonts/Simonetta/Simonetta-Regular.ttf);
}

@font-face {
    font-family: "Allura";
    src: url(../fonts/allura/Allura-Regular.otf);
}

@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}

body,
html,
*,
*::before,
*::after {
    /* font-weight: 600; */
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin-block-start: 0px;
    margin-block-end: 0;
    padding-inline-start: 0;
}

html,
body {
    font-family: "Poppins";
    color: var(--black);
    margin: 0;
}

body {
    /* min-height: 100vh; */
    width: 100vw;
    top: 0;
    background: var(--white);
}

::-webkit-scrollbar {
    width: 0px;
    height: 0;
    /* background: red; */
}

::-webkit-scrollbar-track {
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--blue);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--logo-color);
}

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


/* -----------------------Navbar */

nav {
    position: fixed;
    left: 0vw;
    top: 0vw;
    padding-top: 0vw;
    text-align: left;
    height: 100%;
    /* overflow: hidden; */
    z-index: 2;
    box-shadow: -5px 0px 20px -5px var(--logo-color);
    background: var(--white);
    /* transition: box-shadow 0.3s; */
    z-index: 10;
}

nav ul.navbar-wrapper {
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    position: relative;
    /* width: 3vw; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
}

.navbar-items {
    list-style: none;
    font-size: 1.25em;
    /* line-height: 1vw; */
    font-weight: 500;
    padding: 0.80vw;
    color: var(--logo-color);
    width: max-content;
    position: relative;
    /* overflow: hidden; */
    transition: 0.2s ease-in-out;
    /* box-shadow: 0 4px 10px -5px grey; */
}

#donate-nav {
    /* position: absolute; */
    bottom: 0vh;
    background: linear-gradient(45deg, var(--blue), var(--light-blue));
    color: var(--white);
    height: 8vh;
    align-content: center;
}

.nav-text {
    display: none;
    position: absolute;
    width: max-content;
    padding-left: 1vw;
    font-size: 0.8em;
}

nav:hover {
    background: var(--white);
    animation: nav 0.2s linear forwards;
}

nav:hover .navbar-wrapper {
    animation: nav 0.2s linear forwards;
}

nav:hover .navbar-items {
    /* color: var(--whtie);  */
    width: 100%;
}

nav:hover .nav-text {
    animation: nav-text 0.2s linear forwards;
    display: inline;
}

nav ul .navbar-wrapper:hover .content .tagline {
    width: 100%;
    backdrop-filter: blur(2px);
    transition: 0.5s linear;
}

.navbar-items:hover {
    border-left: 1vw solid var(--logo-color);
    cursor: pointer;
}

#donate-nav:hover {
    border-left: 1vw solid var(--white);
}

@keyframes nav {
    from {
        width: 5vw;
    }

    to {
        width: 15vw;
    }
}

@keyframes nav-text {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* -----------Footer----------- */

footer {
    background: var(--logo-color);
    color: var(--white);
    position: relative;
    bottom: 0;
    z-index: 0;
    /* height: 40vh; */
    width: 100vw;
    padding: 1vw;
    margin-top: 0px;
    padding-left: 4vw;
}

.footer-item {
    list-style: none;
    font-size: 1vw;
    line-height: 1.5;
    cursor: pointer;
}

.about-container {
    margin: 2em 1em;
    position: relative;
    /* top: 1vh; */
    /* right: 1vw; */
    /* bottom: 22vh; */
    /* width: 19vw; */
    font-size: 1em;
    /* vertical-align: top; */
    /* text-align: right; */
}

.about-img {
    width: 5em;
    display: inline-block;
    vertical-align: middle;
}

.about-text {
    display: inline-block;
    vertical-align: middle;
    /* max-width: 30em; */
    /* text-align: justify; */
}

.item-title {
    font-weight: 600;
}

.legal-container {
    margin: 2vh 0;
}

.links-container {
    /* margin-top: 14vh; */
}

.footer-item {
    display: inline-block;
    padding: 0 0.5vw;
    cursor: pointer;
}

.links-wrap a {
    color: var(--white);
    text-decoration: none;
}

.links-wrap a:hover {
    color: var(--light-blue);
}

.income-tax {
    /* margin-top: 3em; */
    /* padding-top: 4em; */
    position: relative;
    /* bottom: 1.0vw; */
    /* left: 4.0vw; */
    font-size: 0.9vw;
    font-weight: 600;
}

.address-container {
    display: block;
    position: absolute;
    text-align: right;
    right: 1vw;
    top: 1vw;
    font-size: 0.85vw;
    margin-top: 0vw;
}

.phone {
    background: var(--white);
    color: var(--logo-color);
    padding: 0 1vw;
    width: max-content;
    border-radius: 1vw;
    margin-left: 1vw;
}

.social-container {
    position: absolute;
    right: 1vw;
    bottom: 0vh;
    width: max-content;
}

.social-item {
    display: inline-block;
    padding: 0 0.25vw;
    font-size: 2vw;
    cursor: pointer;
}


/* --------------Modal---------------- */

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) brightness(0.5);
    z-index: 11;
    -webkit-backdrop-filter: blur(5px);
}

.modal#message_modal {
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 1vw;
    box-shadow: 0px 0px 2px 0px var(--logo-color);
    overflow: auto;
    max-height: 90vh;
}

.modal-close {
    position: absolute;
    top: 0.5vw;
    right: 0.5vw;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.5em;
}

.modal-close:hover {
    opacity: 0.5;
}

.modal-title {
    font-size: 1.5vw;
    padding: 0.5vh 0.5vw;
    margin-bottom: 1vh;
    background: var(--logo-color);
    color: var(--white);
}

.modal-text {
    padding: 1vw;
    font-size: 1.25vw;
}

.modal-btn {
    display: inline-block;
    margin: 0 2vw;
    font-size: 1vw;
    border: 1px solid var(--logo-color);
    background: var(--white);
    padding: 0.5vw 1vw;
    border-radius: 10vw;
    /* color: var(--white); */
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    overflow: hidden;
    z-index: 1;
}

.modal-btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--logo-color);
    border-radius: 10rem;
    z-index: -2;
    transition: all 0.2s;
}

.modal-btn:hover {
    color: var(--white);
}

.modal-btn:hover:after {
    width: 100%;
}


/* -------------------Buttons------------- */

.pdf-button {
    border: 2px solid var(--logo-color);
}

.pdf-button:after {
    background: var(--logo-color);
}

.modal-button {
    border: 2px solid var(--logo-color);
}

.modal-button:after {
    background: var(--logo-color);
}

.BugSol {
    font-family: 'Allura';
    font-size: 1.5rem;
}