:root {
    --neutralBackground: white;
    --neutralText: #3e3e3e;
    --accentBackground: #26518E;
    --accentText: white;
    --blueGradient: linear-gradient(45deg, #698dc0, #103568);
    --greyGradient: linear-gradient(45deg, #313131, #505050);
    --boldBlue: #26518E;
    --softBlue: #5286cf;
    --extraSoftBlue: #77a6e6;
    --neutralGrey: #3d3d3d;
    --softGrey: #737373;
    --extraSoftGrey: #cecccc;
}

body {
    font-family: 'Arbutus Slab';
    font-style: normal;
    color: black;
    font-size: medium;
}

.content {  
    margin-top: 85px;
    text-align: center;
    padding: 2%;
}


/* || NAVBAR */


.navbar-nav a {
    color: var(--neutralGrey);
    font-weight: bold;
}

.navbar {
    background-color: var(--neutralBackground);
    padding-left: 20px;
    padding-right: 20px;
    transition: all .25s;
    transition-timing-function: linear;
    /* border-radius: 40px;
    max-width: 80%; */
}   

.nav-item:hover {
    color: var(--accentBackground);
    box-shadow: inset 0 -2px 0 var(--accentBackground);
}

.navbar.nav-shadow {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.nav-item {
    transition: color 0.2s, box-shadow 0.2s;
    transition-timing-function: linear;
}



/* || FOOTER */


footer {
    background-color: var(--neutralGrey);
    text-align: center;
    color: white;
    padding-bottom: 20px;
    padding-top:10px;
}

footer p {
    color: white;
}

footer .bi {
    color: white;
}

footer a {
    color: white;
    text-decoration: none;
}

#sitemap a {
    margin: 5px;
}

.bi {
    transition: color .25s linear;
}

.bi-facebook:hover {
    color: #4267B2 !important;
}

.bi-instagram:hover {
    color: #E1306C !important;
}

.bi-linkedin:hover {
    color: #0077b5 !important;
}


/* || BOXES */


.shadow-box {
    border-radius: 30px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
    margin: 0px;
    display: inline-block;
}

.text-container {
    margin-left: 5%;
    margin-right: 5%;
}

.right-offset-box {
    margin-left: 15% !important;
    margin-right: 5% !important;
}

/* || BACKGROUNDS */

.bg-accent {
    background-color: var(--accentBackground);
    color: var(--accentText);
}

a.bg-accent, a.bg-neutral, button.bg-accent, button.bg-neutral {
    transition: all 0.2s;
}

a.bg-accent:hover, button.bg-accent:hover {
    background-color: var(--softBlue);
    color: white;
}

.bg-neutral {
    background-color: var(--neutralBackground);
    color: var(--neutralText);
}

a.bg-neutral:hover, button.bg-neutral:hover {
    background-color: var(--extraSoftGrey);
    color: black;
}

.bg-blue-grad {
    background: var(--blueGradient);
    color: var(--accentText);
}

.bg-grey-grad {
    background: var(--greyGradient);
    color: var(--accentText);
}

.bg-soft-blue {
    background-color: var(--softBlue);
    color: white;   
}

.bg-xsoft-blue {
    background-color: var(--extraSoftBlue);
    color: white;
}

.img-span {
    background-image: url(./images/placeholder.png);
    background-size: cover;
    background-position: center;
}

.bg-blue-curves {
    background-image: url(./images/blue-waves.svg);
    color: white;
    background-size: cover;
    background-position: center;
}

.bg-grey-curves {
    background-image: url(./images/grey-waves.svg);
    color: white;
    background-position: center;
    background-size:cover;
}

.bg-blue-circles {
    background-image: url(images/blue-circles.svg);
    color: white;
    background-position: center;
    background-size: cover;
}

.bg-grey-circles {
    background-image: url(images/grey-circles.svg);
    color: white;
    background-position: center;
    background-size: cover;
}

.bg-blue-rectangles {
    background-image: url(images/blue-rectangles.svg);
    color: white;
    background-position: center;
    background-size: cover;
}

.bg-grey-rectangles {
    background-image: url(images/grey-rectangles.svg);
    color: white;
    background-position: center;
    background-size: cover;
}

.bg-blue-dunes {
    background-image: url(images/blue-dunes.svg);
    color: white;
    background-position: center;
    background-size: cover;
}


/* || GRID SYSTEM */

.shadow-row {
    border-radius: 30px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
    margin: 2%;
}

.row-container {
    margin: 2%;
}

.row img {
    max-width: 80%;
}

.img-col {
    padding: 1%;
    text-align: center;
    margin: auto;
}

.text-col {
    padding: 5%;
    margin: auto;
}


/* || FAQ SECTION */

.accordion-button {
    border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
    background-color: white;
    color: black !important;
    /* color: var(--accentBackground); */
}

.accordion-item {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    border-bottom-color: #c6c5c5;
    border-bottom-width: 1px;
    border-radius: 0 !important;
}

.accordion-body {
    text-align: left;
    font-size: small;
    color: #616161;
}

#faq-container {
    /* margin-left: 25%;
    margin-right: 25%; */
    margin: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    max-width: 700px;
    text-align: center;
    align-items: center;
}


/* || BACK TO TOP BUTTON */
.back-to-top {
    position: fixed;
    bottom: -100px;
    right: 30px;
    z-index: 99;
    border: solid var(--boldBlue) 2px;
    outline: none;
    background-color: var(--softBlue);
    cursor: pointer;
    color: white;
    padding: 15px;
    padding-left: 19.5px;
    padding-right: 19.5px;
    border-radius: 20px;
    transition: all .25s linear;
}

.back-to-top:hover {
    background-color: var(--extraSoftBlue);
}

.back-to-top.active {
    bottom: 20px;
}


/* || TEXT FORMATTING */


.impact-header {
    font-weight: bold;
}

.accent-header {
    color: var(--boldBlue);
}

.list-check {
    list-style: none;
    margin: auto;
    padding: 0px;
}

.list-check li:before {
    content: '✓';
    padding-right: 10px;
}

.list-rm-bullet {
    list-style: none;
    margin: auto;
    padding: 0px;
}

.list-padded li {
    padding: 5px;
}

/* || CONTACT FORM */
.resp-good {
    margin-top: 10px;
    border-radius: 30px;
    border-style: solid;
    background-color: #9ffc80;
    border-color: #44c21a;
    border-width: 2px;
    padding: 30px;
}

.resp-bad {
    margin-top: 10px;
    border-radius: 30px;
    border-style: solid;
    background-color: #fc8080;
    border-color: #bd1414;
    border-width: 2px;
    padding: 30px;
}

#resp-box p {
    margin: auto;
}

#resp-box {
    transition-timing-function: linear;
    transition: all .25s;
}

.required-star {
    font-style: normal;
    color: red;
    padding-left: .25em;
}

.float-alert {
    opacity: 0;
    transition: opacity .25s linear;
    position: fixed; 
    top: 80px;
    left: 20%;
    z-index: 999;
    width: 60%;
}

.float-alert.load {
    opacity: .9;
    transition: opacity .25s linear;
}


/* || GENERAL */


.width-restrict {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.rounded-button {
    border-radius: 40px;
    padding: 5px;
    padding-right: 20px;
    padding-left: 20px;
    border: hidden; 
    font-size: x-large;
    text-decoration: none;
}

.img-rounded {
    border-radius: 30px;
    margin: 2.5%;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
}




.parallax {
    background-image: url(./images/placeholder.png);

    min-height: 300px;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.left-container {
    width: 50%;
}

.responsive-padding {
    padding-left: 10%;
    padding-right: 10%;
}

@media only screen and (max-device-width: 767px) {
    .parallax {
        background-attachment: scroll;
    }

    .left-container {
        width: 100%;
    }

    .lrg-screen-padding {
        width: 0px !important;
        height: 0px !important;
    }

    .responsive-padding {
        padding: 5%;
    }

    

    /* .navbar {
        max-width: 100%;
        border-radius: 0px;
    } */
}

#social-icons .bi {
    color: white;
}

address a {
    color: white;
    text-decoration: none;
}