:root {
    --red: #E62E2E;
    --red-dark: #a31919;
    --transparent: #a3191900;
    --transparent-80: #ffffffd5;
    --transparent-dark-80: #2b2b2bcc;

    --dark: #2B2B2B;
    --light: #E7E7E7;
}

.nav-link {
    color: var(--dark);
    transition: 0.5s;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--red);
    transition: 0.5s;
}

.nav-link:active {
    color: var(--red-dark);
}

.bg-light {
    background-color: var(--light) !important;
}

.text-bg-light {
    background-color: var(--light) !important;
}

.active {
    color: var(--red);
}

.btn {
    border-radius: 0px !important;
}

.btn-primary {
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-bg: var(--red-dark);
    --bs-btn-hover-border-color: var(--red-dark);
}

.btn-primary:active {
    background-color: var(--red-dark) !important;
    border-color: var(--red-dark) !important;
}

header .btn-primary {
    --bs-btn-bg: var(--transparent);
    --bs-btn-color: var(--dark);
    --bs-btn-border-color: var(--transparent);
    --bs-btn-hover-bg: var(--red);
    --bs-btn-hover-border-color: var(--transparent);
}

header .btn-primary:active {
    background-color: var(--red-dark) !important;
    border-color: var(--red-dark) !important;
}

.modal-header {
    border-bottom: none !important;
}

.modal-body {
    padding: 0px !important;
}

.modal-content {
    border: none !important;
    border-radius: 0px !important;
    background-color: var(--light);
}

@keyframes scale {
    0% {
        background-size: 100%;
    }

    100% {
        background-size: 120%;
    }
}

#desktopCover .container .row {
    margin: 45px 0px;
}

#desktopCover .card {
    border-radius: 0px;
    background-color: var(--transparent-dark-80);
    display: block;
    margin: 10px auto;
}

#desktopCover .card-body:hover {
    color: var(--red);
    transition: 0.5s;

}

#desktopCover .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    text-align: center;
    color: var(--light);
}

#desktopCover .card-body span {
    font-size: 5rem;
    margin-bottom: 2rem;
}

#news img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
}

#mapGoogle div {
    --bs-aspect-ratio: 30%;
}

.pagination .active>.page-link, .page-link.active {
    background-color: var(--red);
    border-color: var(--red);
}

.page-link {
    color: var(--red);
}

.page-link:hover {
    color: var(--dark);
}

#news .card {
    transition: 0.5s;
}

#news .card:hover {
    background-color: var(--red);
    color: var(--light);
    scale: 1.03;
    transition: 0.5s;
}

#news p:hover {
    color: var(--light) !important;
}

.fade-in-top {
	animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-bottom {
	animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


#single_news img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 24px;
}


@media (max-width: 991.98px) {
    #desktopCover {
        display: none;
    }

    #mobileCover .swiper-slide {
        background-size: cover;
        background-position: center;
        animation-name: scale;
        animation-duration: 2.6s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        background-repeat: no-repeat;
    }

    #mobileCover .card {
        margin: 40px 0;
        border-radius: 0px;
        background-color: var(--transparent-dark-80);
        color: var(--light);
    }

    #mobileCover .card-body:hover {
        color: var(--red);
        transition: 0.5s;

    }

    #mobileCover .card-body span {
        font-size: 40px;
    }

    @keyframes scale {
        0% {
            background-size: 150%;
        }

        100% {
            background-size: 200%;
        }
    }

    #mapGoogle div {
        --bs-aspect-ratio: 60%;
    }
}

@media (min-width: 992px) {
    #mobileCover {
        display: none;
    }

    #desktopCover .container .row {
        display: flex;
        justify-content: center;

    }
}