/* 
Color Variables
Defining color variables*/

:root {
    --c-1: #ffcc00 !important;
    --c-2: #0b2817 !important;
    --c-3: #5fd38d !important;
    --c-4: #d7f4e3 !important;
    --c-5: #c8c4b7 !important;
    --c-6: #e3e2db !important;
    --c-6-a: rgb(241, 241, 233) !important;
    --c-7: #ffffff !important;
    --c-8: #b3b3b3 !important;
    --c-9: #4d4d4d !important;
    --c-10: #000000 !important;

    /* Main Headers */

    --section-headers: var(--c-2);
    --section-headers-font-size: 70px;
    --section-headers-font-size-sm: 50px;
    --section-headers-bg: var(--c-7);

    /* Sections */

    /* Navigation */

    --nav-bg: var(--c-1);
    --nav-logo-text: var(--c-2);
    --nav-logo-text-border-bottom: var(--c-8);
    --nav-links: var(--c-2);
    --nav-links-font-size: 20px;

    /* 1: River Truss */

    --s1-bg-1: var(--c-6-a);
    --s1-bg-2: var(--c-7);
    --s1-headers: var(--c-9);
    --s1-headers-font-size: 50px;
    --s1-headers-font-size-sm: 40px;
    --s1-hr: var(--c-1);
    --s1-hr-h: 5px;
    --s1-p-w: 80%;
    --s1-hr-w: var(--s1-p-w);
    --s1-p: var(--c-10);

    /* 2: Services */

    --s2-bg: var(--c-7);
    --s2-card-bg: var(--c-7);
    --s2-card-header: var(--c-3);
    --s2-card-p: var(--c-10);
    --s2-btn-bg: var(--c-2);
    --s2-btn-text: var(--c-7);

    /* 3 Blockquote Section */

    --s3-bg: var(--c-6-a);
    --s3-card-body-bg: var(--c-7);
    --s3-bq-quote: var(--c-10);
    --s3-bq-cite: var(--c-3);

    /* 4: Contact Us Section */

    --s4-bg: var(--c-7);
    --s4-form-bg: var(--c-6);
    --s4-form-label: var(--c-10);
    --s4-submit-btn-bg: var(--c-1);
    --s4-submit-btn-text: var(--c-10);
    --s4-left-bg: var(--c-7);
    --s4-right-bg: var(--c-7);

    /* Footer */

    --footer-bg: var(--c-8);
    --footer-text: var(--c-7);
    --footer-btn-bg: var(--c-1);
    --footer-btn-text: var(--c-10);

    /* Modal */

    --modal-border-color: var(--c-1);

    /* Accordion */
    --modal-accordion-bg: var(--c-6-a);
    --modal-accordion-text: var(--c-2);
    --modal-accordion-active-bg-color: var(--c-8);
    --modal-accordion-active-text-color: var(--c-10);

    /* Modal Hover */
    --modal-accordion-bg-hover: var(--c-8);
}

/* Global Styles */

body {
    font-family: "Raleway", sans-serif !important;
    overflow-x: hidden !important;
    max-width: 100vw;
}

.wrap {
    overflow-x: hidden;
}

main {
    background-color: var(--c-7);
    width: 100vw;
}

/* Modal */

.modal {
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 80vh;
    max-height: 100vh;
    max-width: 100vw;
    border: var(--modal-border-color) solid 10px;
}

.modal-header {
    font-size: 30px;
    text-decoration: none;
    font-weight: bold;
    margin: 0;
    border: none !important;
}

.modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 999;
    max-height: 100vh;
}

.modal>* {
    width: 100%;
    border: none;
}

.accordion {
    background-color: var(--modal-accordion-bg);
    color: var(--modal-accordion-text) !important;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    transition: background-color 0.3s ease;
    font-weight: bold;
    max-height: 80%;
    width: 100%;
}

.accordion button {
    padding-left: 10px
}

.accordion span {
    padding-left: 10px;
}

.accordion:hover {
    background-color: var(--modal-accordion-bg-hover) !important;
    color: white;
}

.accordion.active {
    background-color: var(--modal-accordion-active-bg-color) !important;
    color: white !important;
    color: var(--modal-accordion-active-text-color) !important;
    cursor: pointer;
    padding: 0 18px;
    border: none;
    text-align: left;
    outline: none;
    max-height: 200px;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Fade-out effect */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.panel {
    padding: 20px 0 40px 0;
    background-color: white;
    display: none;
    overflow-y: scroll !important;
    padding: 30px 0;
    max-height: 300px;
}

.panel p {
    text-indent: 20px;
    text-align: left;
    padding: 10px 20px;
}

.panel p.not {
    text-indent: 0;
}

.arrow-right {
    width: 16px;
    height: auto;
    display: inline;
    transition: transform .5s ease;
}

/* Add this CSS for arrow-right when accordion is active */
.accordion.active .arrow-right {
    transform: rotate(90deg);
    /* Rotate the arrow when accordion is active */
}

.accordion.active {
    height: 35px;
}

/* Video Section */

.video-section {
    position: relative;
    display: flex;
    align-items: center;
}

.video {
    width: 100vw;
    height: 100%;
}

.video-overlay-div {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fade-in 1s ease-in-out .3s 1 normal forwards;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(241, 241, 233, .5);
    width: 100vw;
    height: 100%;
}

.video-logo {
    opacity: .5;
    height: 200px;
    width: auto;
}

.video-link {
    text-decoration: none;
    font-size: 20px;
    padding: 10px 20px;
    background-color: var(--c-1);
    color: var(--c-2);
    font-weight: bold;
}

.video-link:hover {
    background-color: var(--c-8);
    color: var(--c-7);
}

.video-overlay-p {
    color: var(--c-9);
    font-size: 30px;
    font-weight: 500;
    margin-top: 20px;
}

/* Sections */

/* Section Headers */

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100vw;
    color: var(--section-headers);
    background-color: var(--section-headers-bg);
}

.main-h {
    text-align: center;
    font-size: var(--section-headers-font-size);
}

/* Navigation */

.navbar {
    padding: 0 !important;
    background-color: var(--nav-bg) !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 100000 !important;
    width: 100% !important;
}

.nav-company-name {
    display: none;
}

.logo-nav {
    height: 40px;
}

.logo-text {
    font-size: 35px;
    font-weight: 750;
    margin: 17px 0 0 10px;
    color: var(--nav-logo-text) !important;
}

.logo-image-div {
    margin-left: 10px;
}

.navbar,
.brand,
.nav-links {
    display: flex;
}

.brand,
.collapse {
    justify-content: center;
    align-items: center;
}

.brand {
    width: 50%;
}

.nav-links {
    width: 50% !important;
    color: var(--nav-links) !important;
}

.nav-link {
    font-size: var(--nav-links-font-size) !important;
    font-weight: 700 !important;
    color: var(--c-10) !important;
}

.spin-animation {
    animation: spin .3s forwards linear !important;
}

.nav-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin-right: 0;
    padding: 0;
    font-weight: bold;
    font-size: 25px;
    color: #000000;
}

#nav-link-first {
    color: var(--c-2) !important;
}

/* Section 1 */

.section-1,
.s1-row,
.s1-row-left,
.s1-row-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-1 {
    flex-direction: column;
    height: 100%;
    padding-top: 0px;
}

/* S1 Rows */

.s1-row {
    height: 400px;
    width: 100vw;
    background-color: gray;
    flex-direction: row;
}

/* S1 Individual Rows 

#s1-row-1 {
    background-color: red;
}

#s1-row-2 {
    background-color: white;
}

#s1-row-3 {
    background-color: blue;
}

*/

/* S1 Sides */

.s1-row-left,
.s1-row-right {
    flex-direction: column;
}

.s1-row-left {
    height: 100%;
    width: 50%;
    justify-content: center;
}

#s1-p-1,
#s1-p-3,
#s1-h1-1,
#s1-h1-3 {
    align-self: end;
    text-align: right;
    padding-right: 75px;
}

#s1-p-2,
#s1-h1-2 {
    align-self: start;
    padding-left: 75px;
}

#s1-img-1,
#s1-img-3 {
    align-self: start;
    padding-left: 75px;
}

#s1-img-2 {
    align-self: end;
    padding-right: 75px;
}

.s1-row-right {
    height: 100%;
    width: 50%;
}

/* S1 Individual Sides */

#s1-row-left-1 {
    background-color: var(--s1-bg-1);
}

#s1-row-left-2 {
    background-color: var(--s1-bg-2);
}

#s1-row-left-3 {
    background-color: var(--s1-bg-1);
}

#s1-row-right-1 {
    background-color: var(--s1-bg-2);
}

#s1-row-right-2 {
    background-color: var(--s1-bg-1);
}

#s1-row-right-3 {
    background-color: var(--s1-bg-2);
}

/* S1 Headers */

.s1-h1 {
    justify-self: center;
    align-self: center;
    width: 80%;
    color: var(--s1-headers);
    font-weight: 500;
    font-size: var(--s1-headers-font-size);
    margin: 0;
}

/* S1 Lines */

.s1-hr {
    width: var(--s1-hr-w);
    height: var(--s1-hr-h);
    background-color: var(--s1-hr);
}

.s1-hr-left {
    display: flex;
    justify-content: end;
    align-self: end;
    margin: 10px 75px 20px 0;
    width: 72%;
}
.s1-hr-left-2 {
    display: flex;
    justify-content: end;
    align-self: end;
    margin: 10px 75px 20px 0;
    width: 72%;
}

.s1-hr-right {
    display: flex;
    justify-content: start;
    align-self: start;
    margin: 10px 0 20px 75px;
    width: 72%;
}

/* S1 Paragraphs */

.s1-p {
    justify-self: center;
    align-self: center;
    width: var(--s1-p-w);
    color: var(--s1-p);
}

/* S1 Images */

.s1-img {
    height: 350px;
    width: 600px;
    max-width: 90%;
}

.s1-img-new {
    display: none;
}

/* Section 2 */

.section-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100vw;
    background-color: var(--s2-bg);
    padding-bottom: 80px;
    overflow-y: hidden;
}

.s2-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 80vw;
}

.s2-col {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 350px !important;
}

/* S2 Cards */

.s2-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 200px;
    position: relative;
}

.s2-card {
    max-width: 280px !important;
    max-height: 40%;
    width: auto;
    border-radius: 0 !important;
    background-color: var(--s2-card-bg) !important;
    min-height: 380px;
    height: 500px;
}

.s2-img {
    height: 250px;
    padding: 20px;
    width: auto;
    border-radius: 0;
}

.s2-h2 {
    position: absolute;
    top: 0;
    font-size: 25px;
    color: var(--s2-card-header) !important;
}

.s2-p {
    text-align: center;
    margin-top: 30px;
    color: var(--s2-card-p) !important;
}

.s2-link {
    position: absolute;
    bottom: 0;
    margin-top: 30px !important;
    border: none !important;
    background-color: #5fd38d !important;
}

/* Section 3 */

.section-3,
.s3-block-quote,
.s3-block-quote-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-3 {
    flex-direction: column;
    height: 300px;
    width: 100vw;
    background-color: var(--s3-bg);
    padding: 80px 0 80px 0;
}

.s3-card-body {
    background-color: var(--s3-card-body-bg) !important;
}

.s3-block-quote {
    font-size: 30px;
    font-style: italic;
    color: var(--s3-bq-quote) !important;
}

.s3-block-quote-footer {
    color: var(--s3-bq-cite) !important;
}

/* Section 4 */

.section-4,
.s4-form,
.s4-field-div,
.s4-img-div,
.s4-left,
.s4-right,
.s4-row-1,
.s4-row-2 {
    display: flex;
}

.section-4 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 0 80px 0;
    background-color: var(--s4-bg);
}

.s4-form {
    flex-direction: column;
    background-color: var(--s4-form-bg);
    padding: 30px 30px 0 30px;
    border-radius: 0px;
    min-width: 400px;
    width: 50%;
    height: 620px;
}

.s4-field-div {
    flex-direction: column;
}

.s4-label {
    color: var(--s4-form-label);
    margin-top: 15px;
}

/* this is the div that contains the button(s) */
.s4-buttons {
    display: flex;
    margin-top: 15px;
}

.s4-button {
    border: none !important;
    background-color: var(--s4-submit-btn-bg);
    color: var(--s4-submit-btn-text);
}

.s4-row-1,
.s4-row-2 {
    width: 100vw;
}

.s4-row-1 {
    justify-content: center;
    align-items: center;
}

.s4-left {
    justify-content: end;
    align-items: center;
    width: 50%;
    background-color: var(--s4-left-bg);
}

.s4-right {
    justify-content: start;
    align-items: center;
    width: 50%;
    background-color: var(--s4-right-bg);
}

/* contains form and image */
.s4-row-2 {
    flex-direction: row;
    gap: 40px;
}

.s4-right {
    background-image: url("../images/photos/img-river_07.jpg");
    max-width: 500px;
    background-position-x: -300px;
    border: solid var(--c-6) 10px;
    border-right: solid var(--c-4) 10px;
    border-bottom: solid var(--c-4) 10px;
}

.s4-overlay {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
}

/* Footer */

.footer-section {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--footer-text);
    background-color: var(--footer-bg);
    padding: 30px 0;
}

.footer-section a {
    text-decoration: none;
    color: var(--footer-text);
}

.footer-img-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-img {
    justify-self: center;
    align-self: center;
    height: 100px;
    width: auto;
    margin-bottom: 20px;
}

.footer-btn {
    border: none;
    background-color: var(--footer-btn-bg);
    color: var(--footer-btn-text);
    padding: 5px 10px;
    font-weight: bold;
}

@media (max-width: 1280px) {
    .brand {
        width: 50%;
    }

    .nav-link {
        font-size: 15px !important;
    }
}

@media (max-width: 1000px) {

    /* Headers */

    .header {
        height: 150px;
    }

    .main-h {
        text-align: center;
        font-size: var(--section-headers-font-size-sm);
    }

    /* Video */

    .video,
    .video-overlay {
        display: none;
    }

    .video-section {
        display: block;
        height: 100vh;
        width: auto;
        background-image: url("../images/backgrounds/main.jpg");
        background-position-x: -180px;
        background-position-y: -430px;
    }

    .video-overlay-p {
        color: var(--c-7);
    }

    .video-logo {
        opacity: .8;
        height: 100px;
        width: auto;
    }

    .video-link {
        font-size: 15px;
        padding: 10px 10px;
    }

    /* Modal */

    .modal {
        min-width: 90%;
    }

    .accordion {
        min-width: 100%;
    }

    .panel {
        width: 100%;
        max-height: 250px;
        padding-bottom: 80px;
    }

    .panel p {
        max-width: 90%;
        text-wrap: wrap;
    }

    /* Global Styles */

    .section {
        padding-top: 0px;
    }

    /* Navbar */

    .navbar-collapse {
        height: 70px;
    }

    .brand {
        width: 100%;
        height: 70px;
    }

    .logo-nav {
        height: 40px;
        padding: 0 0 5px 0;
        width: auto;
    }

    .logo-image-div {
        width: 100%;
    }

    .logo-text {
        font-size: 25px;
        margin: 14px 30px 0 5px;
        padding: 0;
    }

    .navbar-toggler {
        position: relative;
        position: absolute;
        top: 10px;
        right: 10px;
        height: 50px;
    }

    .brand,
    .collapse {
        width: 100vw;
        justify-content: center;
        align-items: center;
    }

    .collapse {
        height: 50vh;
        flex-direction: column;
        transition: height .3s ease-out;
    }

    .navbar-nav,
    .collapse {
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        /* fade-in animation */
        /* ease-in-out: ease in at the beginning and ease out at the end */
        /* 1s: 1 second animation */
        /* 0s: start the animation immediately */
        /* 1 normal: play the animation only once */
        /* forwards: keep the final styles after the animation is done */
        animation: fade-in .3s ease-in-out .3s 1 normal forwards;
    }

    .nav-links {
        width: 100vw;
    }

    .nav-arrow {
        display: none;
    }

    /* Section 1*/

    .section-1,
    .section-1>* {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        align-self: center;
        justify-self: center;
    }

    .s1-row {
        flex-direction: column;
        height: 100%;
        gap: 0;
    }

    .s1-img {
        display: none;
    }

    .s1-row-left,
    .s1-row-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        padding: 40px 0;
    }

    .s1-h1 {
        text-align: center;
        align-self: center;
        padding: 0;
        margin: 0;
        font-size: var(--s1-headers-font-size-sm);
    }

    #s1-p-1,
    #s1-p-3,
    #s1-h1-1,
    #s1-h1-3 {
        align-self: center;
        text-align: center;
        padding-right: 0px;
    }

    #s1-p-2,
    #s1-h1-2 {
        align-self: center;
        text-align: center;
        padding-left: 0px;
    }

    #s1-img-1,
    #s1-img-3 {
        align-self: center;
        padding-left: 0px;
    }

    #s1-img-2 {
        align-self: center;
        padding-right: 0px;
    }

    .s1-p,
    .s1-h1 {
        align-self: center;
        text-align: left;
        margin: 0 0 0 0;
    }

    .s1-p {
        max-width: 600px;
        width: 90%;
        padding: 10px 10px;
    }

    .s1-hr {
        align-self: center;
        margin: 0;
        margin: 10px 0;
    }

    .s1-row-left-img,
    .s1-row-right-img {
        display: none;
    }

    .s1-img-new {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
        width: 100%;
    }

    .s1-img-new-image {
        height: auto;
        width: 400px;
        max-width: 90%;
        justify-self: center;
        align-self: center;
        padding: 0;
        margin: 0;
    }

    /* Section 2 */

    .s2-row {
        flex-direction: column;
        justify-content: center;
        gap: 40px;
    }

    .s2-col {
        width: 100%;
    }

    /* S2 Cards */

    .s2-card {
        height: 350px !important;
        min-height: 0;
    }

    .s2-card-body {
        min-width: 200px !important;
    }

    /* Section 3 */

    .section-3 {
        min-height: 300px;
        padding: 0 10px;
    }

    .s3-block-quote,
    .s3-block-quote-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s3-block-quote {
        font-size: 20px;
        padding: 0 10px;
    }

    /* Section 4 */

    .section-4 {
        flex-direction: column;
        padding-bottom: 0;
    }

    .s4-form {
        width: 70%;
    }

    .s4-row-2 {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .s4-left,
    .s4-right {
        width: 100%;
    }

    .s4-left {
        justify-content: center;
        padding-bottom: 0px;
    }

    .s4-img,
    .s4-overlay,
    .s4-right {
        display: none;
    }


    .footer.section {
        padding-bottom: 0;
    }
}

@media (min-width: 991px) and (max-width: 1068px) {
    .brand {
        width: 45%;
    }  
    .nav-links {
        width: 55% !important;
    }

    .nav-link {
        font-size: 15px !important;
    }

    .navbar {
        height: 60px;
    }
}

@media (max-width: 500px) {
    .s4-form {
        width: 100%;
    }
}

/* CSS Animations */

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotateX(0deg);
        color: var(--c-10);
    } 100% {
        transform: rotateX(180deg);
        color: var(--c-3);
    } 
}