:root {
    --base-color: #061C2A;
    --base-asent-color: #04E4CF;
    --base-withe-color: #e6e6e6;
    --base-black-color: #010303;
    --base-warning-color: #D58936;
    --base-danger-color: #D7263D;
    --base-action-color: #004481;
    --base-info-color: #71AD97;
}

.ax-navbar {
    background: var(--base-color);
    color: var(--base-withe-color);
}

.ax-navbar a, .ax-navbar a:visited, .ax-navbar a:active {
    color: var(--base-withe-color);
}

.ax-navbar a:hover {
    color: var(--base-asent-color);
}

.ax-navbar a.active {
    color: var(--base-asent-color) !important;
}

.ax-navbar span.navbar-toggler-icon {
    filter: invert(1);
}

.ax-navbar button.navbar-toggler:focus {
    box-shadow: 0 0 0 .1rem var(--base-asent-color);
}

.ax-navbar button.btn-close {
    filter: invert(1);
    margin-right: 0 !important;
}

.header {
    background-image: url("/statics/img/header.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90vh;
}

.header .header-covert {
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.header h2 {
    color: #fff;
    font-size: 3em;
}

.header p {
    color: #fff;
    font-size: 1.5em;
}

.header p.small {
    color: #fff;
    font-size: 1em;
}

.ax-about {
    background: var(--base-color);
    color: var(--base-withe-color);
}

.ax-about h2 {
    font-size: 3em;
}

.ax-about h2:before {
    content: "-";
    color: var(--base-asent-color);
    font-size: 1.5em;
    padding: 0 1rem;
}

.ax-about .points h3 {
    font-size: 1.5em;
    margin: 1rem .5rem;
}

.ax-about .points h3:before {
    content: "-";
    color: rgb(from var(--base-asent-color) r g b / .3);
    font-size: 1.5em;
    padding: 0 1rem;
}

.ax-about .title p {
    font-size: 1.25em;
}

.ax-about .points p {
    font-size: 1em;
}

.ax-contact {
    background: var(--base-color);
    color: var(--base-withe-color);
}

.ax-contact h2 {
    font-size: 3em;
}

.ax-contact h2:before {
    content: "-";
    color: var(--base-asent-color);
    font-size: 1.5em;
    padding: 0 1rem;
}

.ax-contact p {
    font-size: 1em;
}

.ax-contact .title p {
    font-size: 1.25em;
}

.ax-contact .contact-content p {
    font-size: 1em;
    margin: 2rem .5rem;
}

.ax-contact .contact-content a {
    margin: 2rem .5rem;
}

.ax-contact .contact-content button {
    margin: 2rem .5rem;
}

.modal-header {
    background: var(--base-color);
    color: var(--base-withe-color);
    border-bottom: 1px solid rgb(from var(--base-asent-color) r g b / .7);
}

.modal-footer {
    background: var(--base-color);
    color: var(--base-withe-color);
    border-top: 1px solid rgb(from var(--base-asent-color) r g b / .7);
}

.modal-body input.form-control {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
    color: var(--base-color);
    border: 1px solid var(--base-color);
}

.modal-body input.form-control:focus {
    box-shadow: 0 0 0 .25rem rgb(from var(--base-asent-color) r g b / .2);
    border-radius: .25rem .25rem !important;
}

.modal-body textarea.form-control {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
    color: var(--base-color);
    border: 1px solid var(--base-color);
}

.modal-body textarea.form-control:focus {
    box-shadow: 0 0 0 .25rem rgb(from var(--base-asent-color) r g b / .2);
    border-radius: .25rem .25rem !important;
}

.modal-body label.form-label:before {
    content: "*";
    color: var(--base-danger-color);
}

.ax-divider {
    background: rgb(from var(--base-asent-color) r g b / .1);
    height: 1px;
    width: 100%;
    margin: 1rem 0;
}

.ax-btn-asent {
    --bs-btn-color: var(--base-color);
    --bs-btn-bg: var(--base-asent-color);
    --bs-btn-border-color: var(--base-asent-color);
    --bs-btn-hover-color: var(--base-withe-color);
    --bs-btn-hover-bg: rgb(from var(--base-asent-color) r g b / .6);
    --bs-btn-hover-border-color: rgb(from var(--base-asent-color) r g b / .6);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: var(--base-withe-color);
    --bs-btn-active-bg: rgb(from var(--base-asent-color) r g b / .6);
    --bs-btn-active-border-color: rgb(from var(--base-asent-color) r g b / .6);;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--base-withe-color);
    --bs-btn-disabled-bg: var(--base-asent-color);
    --bs-btn-disabled-border-color: var(--base-asent-color);
}

.ax-btn-action {
    --bs-btn-color: var(--base-withe-color);
    --bs-btn-bg: var(--base-action-color);
    --bs-btn-border-color: var(--base-action-color);
    --bs-btn-hover-color: var(--base-withe-color);
    --bs-btn-hover-bg: rgb(from var(--base-action-color) r g b / .6);
    --bs-btn-hover-border-color: rgb(from var(--base-action-color) r g b / .6);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: var(--base-withe-color);
    --bs-btn-active-bg: rgb(from var(--base-action-color) r g b / .6);
    --bs-btn-active-border-color: rgb(from var(--base-action-color) r g b / .6);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--base-withe-color);
    --bs-btn-disabled-bg: var(--base-action-color);
    --bs-btn-disabled-border-color: var(--base-action-color);
}

.loader-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(from var(--base-black-color) r g b / .7);
    z-index: 2;
    align-content: center;
    text-align: center;
    display: none;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid var(--base-withe-color);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}