.fa {
    padding: 0.1em;
    margin: 0.1em;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
    background-size: 100% 100%;
}

    .fa:hover {
        text-decoration: none;
        color: rgb(113, 23, 231);
        background-color: rgb(243, 165, 165);
    }

.twitter {
    color: #1DA1F2;
}

.facebook {
    color: #1453db;
}

.google {
    color: #4285F4;
}

.linkedin {
    color: #0072b1;
}

.youtube {
    color: #FF0000;
}

.instagram {
    color: #8a3ab9;
}

.pinterest {
    color: #c8232c;
}

.tumblr {
    color: #34526f;
}

.tiktok {
    color: #ff0050;
}

.soundcloud {
    color: #ff8800;
}

.github {
    color: #171515;
}

.vk {
    color: #4C75A3;
}

.odnoklassniki {
    color: #f97400;
}

.reddit {
    color: #ff4500;
}



.dark-mode {
    background-color: black;
    color: white;
}

.home-body {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    font-family: "Unbounded", sans-serif;
    color: black;
}

* {
    word-break: break-word;
}


.content-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-main, .home-body {
    margin: 0;
    padding: 0;
}

.page-content {
    flex: 1 1 auto;
}

div.center {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

blink {
    animation: blinker 1s linear infinite;
}

h1 {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

    h1.color-change {
        animation: color-change 1s infinite;
    }

@keyframes color-change {
    0% {
        color: purple;
    }

    10% {
        color: pink;
    }

    20% {
        color: red;
    }

    30% {
        color: orange;
    }

    40% {
        color: yellow;
    }

    50% {
        color: green;
    }

    60% {
        color: lightgreen;
    }

    70% {
        color: aqua;
    }

    80% {
        color: blue;
    }

    90% {
        color: violet;
    }

    100% {
        color: purple;
    }
}

h2{
    color:darkred;
}
hr {
    margin-bottom: 1rem;
}

@keyframes logo-change {
    0% {
        filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
        -webkit-filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
        -moz-filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
    }

    33% {
        filter: invert(100%);
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
    }

    66% {
        filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
        -webkit-filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
        -moz-filter: sepia(71%) brightness(91%) hue-rotate(95deg) saturate(251%);
    }

    100% {
    }
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.logo {
    opacity: 0.5;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 50%;
    animation: logo-change 0.5s infinite;
    background-image: url('/Images/General/Logo.png');
    z-index: -1;
    margin: 0 25% 0 25%
}

.flexrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.galleryitem {
    margin: 0;
    padding: 0.5em;
    max-width: calc(100% - 1em);
    max-height: 10em;
    object-fit: cover;
    flex-grow: 1;
}

    .galleryitem:hover {
        background: linear-gradient(red,yellow);
        background-blend-mode: screen;
        cursor: pointer;
        filter: saturate(449%);
        -webkit-filter: saturate(449%);
        -moz-filter: saturate(449%);
    }

.galleryaditem {
    margin: 0;
    padding: 0.5em;
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    flex-grow: 1;
}

.description {
    font-size: 1.6em;
    text-align: center;
    margin: 0;
}

.slogan {
    color: red;
    text-align: center;
}

.sub-heading {
    width: 100%;
    margin: 0;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    color: darkred;
    padding-top: 0.5em;
    text-shadow: 1px 1px wheat;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    width: 100%; /* Full width */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    flex-direction: column;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 80%;
    margin-top: 10%;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 100%;
    text-align: center;
    color: #ccc;
    padding: 0.2em 0;
    height: 3em;
}

.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

.close {
    position: absolute;
    top: 0.2em;
    right: 0.4em;
    color: #f1f1f1;
    font-size: 2em;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.links-Social {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
}

::-webkit-scrollbar {
    width: 0.5em; /* width of the entire scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: rgb(250, 94, 94); /* color of the scroll thumb */
    border-radius: 1em; /* roundness of the scroll thumb */
    border: 0.1em solid rgb(190, 42, 62); /* creates padding around scroll thumb */
}

::-webkit-scrollbar-track {
    background: rgb(231, 219, 219); /* color of the tracking area */
}

.gmap_canvas {
    overflow: hidden;
    background: none;
    max-width: 80%;
    width: 50em;
}

.mapouter {
    position: relative;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmap_frame {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.home-body.modal-open {
    overflow: hidden;
}

.flex-contact {
    width: 50em;
    max-width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


    .flex-contact > .fbh {
        flex: 1;
        padding-bottom: 0.5em;
        font-weight: bold;
        font-size: 1.5em;
        text-align: center;
    }

    .flex-contact .fbr > div > a {
        text-decoration: none;
        color: red;
    }

    .flex-contact .fbr > div:nth-child(even) {
        text-decoration: none;
        color: blue;
    }

    .flex-contact .fbr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

        .flex-contact .fbr > div:nth-child(odd) {
            font-weight: bold;
            flex: 1 0 28%;
        }

        .flex-contact .fbr > div:nth-child(even) {
            flex: 1 0 72%;
            padding-bottom: 0.9em;
            text-align: right;
        }

@media (min-width: 30em) and (max-width: 60em) {
    .gmap_canvas, .flex-contact {
        max-width: 90%;
    }

        .flex-contact .fbr > div:nth-child(odd) {
            flex: 1 0 45%;
        }

        .flex-contact .fbr > div:nth-child(even) {
            flex: 1 0 55%;
        }

    .sub-heading {
        font-size: 2em;
    }

    .description {
        font-size: 1.3em;
    }

    .fa {
        font-size: 1.7em;
    }

    .home-body {
        font-size: 0.9em;
    }
}

@media (min-width: 30em) {
    .flex-contact .fbr > div:nth-child(odd)::after {
        content: ":";
    }
}

@media (max-width: 30em) {
    .gmap_canvas, .flex-contact {
        max-width: 100%;
    }

        .flex-contact .fbr > div:nth-child(odd) {
            flex: 1 0 100%;
            text-align: center;
        }

        .flex-contact .fbr > div:nth-child(even) {
            flex: 1 0 100%;
            text-align: center;
        }

    .sub-heading {
        font-size: 1.5em;
    }

    .description {
        font-size: 1em;
    }

    .fa {
        font-size: 1.4em;
    }

    .home-body {
        font-size: 0.8em;
    }
}

.flex-contact .fbr > div:nth-child(odd):hover {
    cursor: pointer;
}

    .flex-contact .fbr > div:nth-child(odd):hover + div > a, .flex-contact .fbr > div:nth-child(odd):hover + div {
        animation: color-change 1s infinite;
        font-weight: bolder;
    }

.flex-page {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}



body {
    overflow: hidden;
}

.flex-main {
    overflow-y: auto;
}

.flex-pageitem:nth-child(1) {
    flex: 0 1 auto;
    min-height: min-content;
}

.flex-pageitem:nth-child(2) {
    flex: 1 1 auto;
}

footer {
    text-align: center;
    font-weight: bold;
    color: darkred;
}

.bg-darkred {
    background-color: #8B0000; /* or any other shade of dark red that you prefer */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .dropdown-item:hover {
    color: #fff;
    background-color: #000;
}

.navbar-brand {
    color: #fff;
    text-shadow: 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black;
}

@media (max-width: 20em) {
    .navbar-brand {
        display: none;
    }
}

.navbar-dark {
    background-color: #320404;
}

.navbar-nav > .nav-item > .nav-link {
    font-weight: bold;
    text-shadow: 2px 2px black, 3px 3px black, 4px 4px black;
}

.navbar-dark .container-fluid > .navbar-collapse > .navbar-nav > .dropdown > ul.dropdown-menu .dropdown-item {
    color: var(--bs-nav-link-color);
}

    .navbar-dark .container-fluid > .navbar-collapse > .navbar-nav > .dropdown > ul.dropdown-menu .dropdown-item:hover {
        color: white;
    }

@media (min-width: 992px) {
    ul.dropdown-menu {
        background-image: linear-gradient(to bottom,rgb(75, 17, 17) 0px, rgb(128, 25, 25) 100%);
        color: var(--bs-nav-link-color);
    }
}

@media (max-width: 991.98px) {
    .navbar-dark {
        background-image: linear-gradient(to bottom, #320404 0px, #320404 56px, rgb(75, 17, 17) 57px, rgb(128, 25, 25) 100%);
    }

    .navbar-collapse {
        margin-top: 1rem !important
    }

    .nav-link {
        padding-inline-start: 0.5em;
    }

    .navbar-dark .container-fluid > .navbar-collapse > .navbar-nav > .dropdown > ul.dropdown-menu {
        background: #00000090
    }

    .navbar-dark .container-fluid > .navbar-collapse > .navbar-nav > .dropdown > ul.dropdown-menu {
        margin-inline-start: 1em;
    }

    ul.dropdown-menu {
        transition: height 0.3s ease-in-out;
    }
        /* Change the height of the navbar when collapsed */
        ul.dropdown-menu.collapsing {
            height: 0;
        }

            /* Add a border-top to the navbar when collapsed */
            ul.dropdown-menu.collapsing + .border-top {
                width: 100%;
                height: 1px;
                margin: auto;
                background-color: rgba(0, 0, 0, 0.1);
            }

    .navbar-collapse {
        transition: height 0.3s ease-in-out;
    }

        /* Change the height of the navbar when collapsed */
        .navbar-collapse.collapsing {
            height: 0;
        }

            /* Add a border-top to the navbar when collapsed */
            .navbar-collapse.collapsing + .border-top {
                width: 100%;
                height: 1px;
                margin: auto;
                background-color: rgba(0, 0, 0, 0.1);
            }
}


.third-level-nav {
    list-style-type: none;
    display: none;
}

    .third-level-nav > li > a:hover {
        mix-blend-mode: difference;
    }


    .third-level-nav > li:hover {
        background-color: #b5b5b5;
    }

    .third-level-nav > li > a {
        color: #333333;
        text-decoration: none;
    }

.dropdown-menu > li:hover > ul.third-level-nav {
    display: block;
}