:root {
    --base-color: #D4BAA7;
    --base-color-light: #d4baa750;
    /* --dark-gray: #232323;
    --very-light-gray: #eceff1; */
}

html {
    max-width: 100dvw;
    overflow-x: hidden;
}

a {
    color: inherit;

    &:hover {
        color: inherit;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--bs-dark);

    --bs-table-border-color: #c6c7c8;
    --bs-table-hover-bg: #e5e6e7;

    th, td {
        padding: 10px;
        border-bottom: 1px solid var(--bs-table-border-color);
    }

    tr {
        &:hover {
            td {
                background-color: var(--bs-table-hover-bg);
            }
        }

        &:last-child {
            td {
                border-bottom: none;
            }
        }
    }
}

img {
    &.fr-fil {
        float: left;
        margin: 60px;
        margin-inline: -160px 160px;
        border-top-right-radius: 0;
    }

    &.fr-fir {
        float: right;
        margin: 60px;
        margin-inline: 160px -160px;
        border-top-left-radius: 0;
    }

    &.base-color {
        filter: invert(90%) sepia(5%) saturate(1731%) hue-rotate(330deg) brightness(87%) contrast(89%);
    }

    &.h-100 {
        object-fit: cover;
    }
}

.text-normal {
    text-transform: none;
}

.btn {
    &.show {
        --bs-btn-active-bg: var(--bs-gray-100);
    }
}


.mw {
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: 45px;

    .mw {
        padding-inline: 0;
    }

    @media (max-width: 1023px) {
        padding-inline: 15px;
    }
}

.mw-text {
    width: 16ch;

    @media (max-width: 1023px) {
        width: 100%;
    }
}

.icon-large {
    max-width: 160px;
    width: 100%;
}

header {
    .navbar-brand { 
        filter: invert(1);

        .default-logo {
            max-width: 300px;
            width: 100%;
            height: 56px;
            max-height: 100%;
            object-fit: scale-down;
            object-position: left center;
            filter: invert(1) brightness(0) saturate(100%) hue-rotate(180deg);
        }

        .mobile-logo {
            width: 180px !important;
            filter: invert(1);
        }
    }
}

.watermark {
    background-image: url(../images/watermark.svg);
    background-size: 90vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 120% 0;
    padding-block: max(120px, 15vh)
}

.accordion {
    .accordion-item {
        &:last-of-type {
            .accordion-header {
                border: none !important;
            }
        }
    }
}

.dropdown-menu {
    overflow: hidden;
    overflow-y: auto;
    max-height: 320px;
}

.navbar-nav {
    .nav-item {
        &.active {
            .nav-link {
                opacity: 1 !important;

                .underline {
                    &:after {
                        position: absolute;
                        content: '';
                        width: 100%;
                        height: 2px;
                        bottom: -10px;
                        left: 0;
                        background-color: var(--base-color);
                    }
                }
            }
        }
    }
}

.section-link {
    em {
        font-style: normal;
        white-space: nowrap;
        position: relative;

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -5px;
            left: 0;
            background-color: var(--bs-white);
        }
    }
}

.page-title-big-typography {
    background-position: bottom center !important;
}

.feature-box-icon {
    img {
        width: 100%;
        max-width: 80px;
    }
}

.counter-number {
    display: flex;
    align-items: center;

    &[data-suffix] {
        &:after {
            content: attr(data-suffix);
            display: block;
            margin-block: 0 30px;
            margin-inline: 10px -60px;
        }
    }
}

.filters {
    .filter-item {
        .icon {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        &:hover {
            .icon {
                opacity: 0.1;
            }
        }

    &.is-active {
        font-weight: 600;
        color: var(--bs-black);

        .icon {
            opacity: 1;
        }
    }
    }
}

ul.list-timeline {
    --badge-size: 22;
    padding: 30px;
    margin: 0;

    li {
        position: relative;
        padding-left: calc(var(--badge-size) * 2.5px);
        padding-bottom: 30px;

        &:before {
            position: absolute;
            left: 0;
            content: '';
            display: inline-block;
            border: 5px solid var(--base-color);
            outline: 10px solid var(--base-color-light);
            width: calc(var(--badge-size) * 1px);
            height: calc(var(--badge-size) * 1px);
            background-color: white;
            border-radius: 50%;
            z-index: 1;
        }

        &:after {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 5px;
            height: calc(100% - calc(var(--badge-size) * 0.25px));
            background-color: var(--base-color-light);
            margin-left: calc(var(--badge-size) * 0.45px);
            margin-top: calc(var(--badge-size) * 0.5px);
        }

        &:last-of-type {
            &:after {
                display: none;
            }
        }
    }
}

#map {
    iframe {
        filter: grayscale(1);
        width: 100vw;
        height: 100%;
    }
}

.location-map {
    iframe {
        filter: grayscale(1);
        width: 100%;
    }
}

.footer-logo { 
    img {
        width: 100%;
        max-height: 50px !important;
    }
}

.footer-end {
    small {
        font-size: 13px;
    }
}