/*
Theme Name: Fundraiser Lite Child
Theme URI: https://www.sktthemes.org/shop/free-ngo-wordpress-theme/
Description: Fundraiser lite Child Theme
Version: 1.0
Template: fundraiser-lite
License: GNU General Public License
License URI: license.txt
Tags: two-columns,right-sidebar,custom-background,custom-colors,custom-menu,sticky-post,theme-options,threaded-comments,featured-images,custom-logo,editor-style,custom-header,blog,education,news

Fundraiser Lite is based on Underscores theme(Underscores is distributed under the terms of the GNU GPL v2 or later).

Fundraiser Lite WordPress Theme has been created by SKT Themes(sktthemes.org), 2018.
Fundraiser Lite WordPress Theme is released under the terms of GNU GPL
*/

:root {
    /* Fonts */
    --serif-font: 'Noto Serif', serif;
    --sans-serif-font: 'Work Sans', sans-serif;

    /* Colours */
    --white: #ffffff;
    --canvas: #f8f7f5;
    --default: #0c0a3e;
    --text--light: #5e5d89;

    --darkest: #0c0a3e;
    --dark: #7b2a7a;
    --mid: #b3516e;
    --light: #f96f69;
    --lightest: #ffce63;

    --darkest--shift: #0c0a3e;
    --dark--shift: #8f228e;
    --mid--shift: #dc3c6c;
    --light--shift: #f96f69;
    --lightest--shift: #f3dc77;

    --gradient: linear-gradient(to right, var(--darkest), var(--dark) 20%, var(--mid) 40%, var(--light) 60%, var(--lightest) 80%);

    --container-width: calc(1rem * (1200 / 16));
}

.flow > * + * {
    margin-top: 1rem;
}

body {
    background-color: var(--canvas);
    color: var(--default);
    font-family: var(--sans-serif-font);
}

hr {
    width: 100%;
}

.container {
    width: var(--container-width);
}

/*
.button {
    color: white;
    background-image: linear-gradient(315deg, var(--light), var(--light--shift));
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
}
*/

.case-study h2{
color: white !important;
  margin-bottom: 0;
}

.icon {
    height: 1em;
    width: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--serif-font);
}

address {
    font-style: normal;
    margin-bottom: 0;
}

.text-title {
    font-size: 3rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 0;
}

.text-title-300 {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 0;
}

.text-label {
    font-family: var(--sans-serif-font);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0;
}

p,
.text-paragraph {
    font-size: 1.3125rem;
    line-height: 1.6;
    color: var(--default);
    font-weight: 400;
}

.text-note {
    color: var(--text--light);
    font-size: 1rem;
    line-height: 1.6;
}

.header,
body.enableslide .header {
    position: static;
    background-color: var(--white);
}

.header:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(1rem * (5 / 16));
    background: linear-gradient(to right, var(--darkest), var(--dark) 20%, var(--mid) 40%, var(--light) 60%, var(--lightest) 80%);
}

.logo h2 {
    color: var(--default);
    font-size: 1.2rem;
    font-family: var(--serif-font);
    letter-spacing: 0.15rem;
    text-transform: uppercase;
}

#sitefull p {
    margin-bottom: initial;
}

.sitenav {
    padding: 1.5rem 0;
}

.sitenav ul li a {
    color: var(--text--light);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.sitenav ul li a:hover {
    color: currentColor;
}

.sitenav ul li.current_page_item a {
    position: relative;
    color: var(--default);
}

.sitenav ul li.current_page_item a:before {
    content: '';
    left: 50%;
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--light);
    width: 0.5rem;
    height: 0.5rem;
    transform: translateX(-50%);
}

.hero {
    height: 75vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 8rem 0;
}

.hero__inner {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}

.hero__button {
    margin-top: 3rem;
}

.featured-boxes {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--container-width);
    margin: -4rem auto 0 auto;
    position: relative;
    z-index: 2;

    --gap: 2rem;
}

.featured-box {
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
    color: var(--default);
    flex: 1 1 calc(100% - var(--gap));
    margin: calc(var(--gap) / 2);
    overflow: hidden;
    padding: 1.5rem 1.5rem 6rem 2rem !important;
    position: relative;
    text-align: left;
    width: auto;
    transition: 0.3s all ease-out;
}

.featured-box:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
}

.featured-box:hover .featured-box-arrow {
    transform: translateX(0.5rem);
}

.featured-box-inner {
    padding: 0 !important;
}

.featured-box:before {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: calc(1rem * (8 / 16));
}

.featured-box-title {
    color: var(--default);
    font-family: var(--serif-font);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.featured-box-inner h4:after {
    display: none;
}

.featured-box-arrow {
    all: initial;
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    transition: 0.3s transform ease-out;
}

.featured-box-arrow .icon {
    font-size: 2rem;
}

.case-study {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: blue;
    border-radius: 4px;
    padding: 8rem 3rem 3rem;
    width: calc(100% - 2rem);
    margin: 3rem auto 0;
}

/*
.case-study * {
    color: white !important;
    margin-bottom: 0;
}

.case-study * + * {
    margin-top: 1.5rem;
}
*/

/*--- WYSIWYG ---*/

.page_content h1,
.page_content h2,
.page_content h3,
.page_content p,
.page_content ul {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}

.page_content ul.wp-block-gallery {
    max-width: 60rem;
}

.page_content ul.wp-block-gallery + ul.wp-block-gallery {
    margin-top: 0;
}

.wp-block-gallery.aligncenter {
    padding: 0;
}

.wp-block-gallery .blocks-gallery-item {
    border-radius: 4px;
    overflow: hidden;
}

.page_content a,
.text-link {
    color: var(--light);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.page_content {
    padding: 4rem 0;
}

.entry-content * {
    margin-top: 0;
    margin-bottom: 0;
}

.entry-content > * + * {
    margin-top: 1rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
    margin-top: 2em !important;
}

.page_content p {
    font-size: 1.3125rem;
    line-height: 1.6;
    color: var(--default);
    font-weight: 400;
}

.page_content ul {
    font-size: 1.142rem;
    line-height: 1.6;
    color: var(--default);
    font-weight: 400;
}

.page_content li + li {
    margin-top: 0.5rem;
}

.entry-content ul li {
    margin-left: 1rem;
}

.page_content ul + * {
    margin-top: 2rem;
}

.bxbg1:before {
    background: linear-gradient(to bottom, var(--dark), var(--dark--shift));
}

.bxbg2:before {
    background: linear-gradient(to top, var(--mid), var(--mid--shift));
}

.bxbg3:before {
    background: linear-gradient(to top, var(--lightest), var(--lightest--shift));
}

.bxbg4:before {
    background: linear-gradient(to top, var(--light), var(--light--shift));
}

.bxbg1 .icon {
    fill: var(--dark);
}

.bxbg2 .icon {
    fill: var(--mid);
}

.bxbg3 .icon {
    fill: var(--lightest);
}

.bxbg4 .icon {
    fill: var(--light);
}

/* Forms */

.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form textarea,
.wpcf7-form select {
    box-shadow: none;
    padding: 1rem;
    border-radius: 4px;
}

.wpcf7-form > p + p {
    margin-top: 1.5rem;
}

#footer-wrapper {
    color: var(--default);
    background-color: var(--white);
}

#footer-wrapper:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(1rem * (5 / 16));
    background: linear-gradient(to right, var(--darkest), var(--dark) 20%, var(--mid) 40%, var(--light) 60%, var(--lightest) 80%);
}

.footer {
    display: flex;
    flex-wrap: wrap;
}

.footer hr {
    margin-top: 3rem;
}

.footer__logo {
    flex: 0 0 100%;
}

.footer__tel,
.footer__email {
    flex: 1 1 25%;
}

.footer__address {
    flex: 1 1 50%;
}

.footer__nav a {
    color: #777;
    text-decoration: none;
    font-size: 0.8rem;
}

.footer_nav a + a {
    margin-left: 1.5rem;
}

/* Breakpoints */

@media only screen and (min-width: 600px) {
    .featured-box {
        flex: 1 1 calc(50% - var(--gap));
    }
}

@media only screen and (min-width: 1000px) {
    .featured-box {
        flex: 1 1 calc(25% - var(--gap));
    }
}