html {
    overflow-x: clip;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

header {
    background-color: #fff;
    font-size: 1.4rem;

    .bancat-link {
        text-decoration: none;
        color: black;
        
        span {
            line-height: normal;
            font-weight: 300;
            font-size: 1.2rem;
        }
    }

    .logo img {
        height: 40px;
        width: auto;
    }

    .donate-button {
        background-color: #f8931e;
        font-weight: 500;
        text-decoration: none;
        color: white;
        display: block;
        align-content: center;
        line-height: 40px;
    }
}

nav {
    background-color: #ebecec;

    ul.navbar-nav {
        font-size: 1.2rem;

        li.nav-item {
            padding: 10px 20px;

            a.nav-link {
                color: black;
            }

            a.nav-link.active {
                text-decoration: underline;
                text-decoration-color: #f8931e;
                text-underline-offset: 7px;
            }

            a.nav-link:hover {
                color: #f8931e;
                text-decoration: underline;
                text-decoration-color: #000;
                text-underline-offset: 7px;
            }
        }
    }
}

footer {
    background-color: #ebecec;

    .logo {
        width: fit-content;
        padding: 0px 70px 20px 50px;
        border-bottom: 2px solid #f8931e;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;

        img {
            width: 300px;
            height: auto;
        }
    }
    
    .contact {
        h3 {
            width: fit-content;
            padding: 0px 50px 20px;
            border-bottom: 2px solid #f8931e;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    p, ul>li {
        font-size: 0.9rem;
        color: #555;
    }

    .footer-bottom {
        background-color: #000;
        color: #fff;
        padding: 10px;

        p {
            margin-bottom: 0;
            line-height: 1;
            font-size: 0.8rem;
            text-align: center;
        }
    }
}

@media only screen and (min-width: 992px) {
    header {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
    }

    nav {
        position: fixed !important;
        width: 100%;
        top: 73.24px;
        z-index: 999;
    }
}

@media only screen and (min-width: 768px) {
    footer {
        .row {
            .col-lg-6:first-child {
                padding-right: 2rem;
                border-right: 2px solid #777;
            }

            .col-lg-6:last-child {
                padding-left: 2rem;
            }
        }
    }
}

@media only screen and (max-width: 991px) {
    header {
        font-size: 1rem;

        .bancat-link {
            display: none !important;
        }

        .logo img {
            height: 30px;
        }

        .donate-button {
            line-height: 30px;
        }
    }

    nav {
        position: absolute !important;
        width: fit-content;
        z-index: 99;
    }

    footer .logo img {
        width: 200px;
    }
}

@media only screen and (max-width: 480px) {
    header {
        font-size: 0.8rem;

        .logo img {
            height: 20px;
        }

        .donate-button {
            line-height: 20px;
        }
    }
}