* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open-Sans" !important;
    scroll-behavior: smooth;
    user-select: none;
}

    *:focus {
        outline: none;
    }



@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: "Open-Sans";
    src: url('/fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
}

:root {
    /*font*/
    --font-family: "Open-Sans";
    /*main-colors*/
    --color-coyote: #8C6538;
    --color-white: #fff;
    --color-gunmetal: #182228;
    /*other-colors*/
    --color-sepia: #734A12;
    --color-lion: #BCA083;
    --color-dun: #D3BFAB;
    --color-almond: #E9DED4;
    --color-seaShell: #FFF8F4;
    --color-richBlack: #0E181E;
    --color-onyx: #353C40;
    --color-slateGray: #697B86;
    --color-frenchGray: #B7C2C8;
    --color-aliceBlue: #D4DEE4;
    --color-seaSalt: #F6F8F9;
    --color-steelGray: #6C7A85;
    --color-anonim: #687C86;
}

.font-d1 {
    font-family: var(--font-family);
    font-size: 80px;
    font-weight: 400;
}

.font-d2 {
    font-family: var(--font-family);
    font-size: 80px;
    font-weight: 400;
    font-style: italic;
}

.font-d3 {
    font-family: var(--font-family);
    font-size: 80px;
    font-weight: 600;
}

.font-d4 {
    font-family: var(--font-family);
    font-size: 80px;
    font-weight: 600;
    font-style: italic;
}

.font-d5 {
    font-family: var(--font-family);
    font-size: 30px;
    font-weight: 600;
}

.font-d6 {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 600;
}

.font-d7 {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 400;
}

.font-d8 {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
}

.font-d9 {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
}

.font-d10 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
}

.font-d11 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 800;
}

.font-d12 {
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 700;
}

.font-d13 {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
}

@media screen and (max-width: 600px) {
    .font-d1 {
        font-size: 40pt !important;
    }

    .font-d2 {
        font-size: 40pt !important;
    }

    .font-d6 {
        font-size: 16pt !important;
    }

    .font-d7 {
        font-size: 14pt !important
    }

    .font-d8 {
        font-size: 14pt !important;
    }

    .font-d9 {
        font-size: 16pt !important;
    }
}


.loading-progress-text {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
    gap:80px;
}
.loader {
    position: absolute;
    top: calc(50% - 47px);
    left: calc(50% - 47px);
    width: 94px;
    height: 94px;
    border-radius: 50%;
    perspective: 800px;
}



.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

    .inner.one {
        left: 0%;
        top: 0%;
        animation: rotate-one 1s linear infinite;
        border-bottom: 3px solid #EFEFFA;
    }

    .inner.two {
        right: 0%;
        top: 0%;
        animation: rotate-two 1s linear infinite;
        border-right: 3px solid #EFEFFA;
    }

    .inner.three {
        right: 0%;
        bottom: 0%;
        animation: rotate-three 1s linear infinite;
        border-top: 3px solid #EFEFFA;
    }

.loader-text{
    color:#fff;
    font-size:24px;
}

.loader-text > b{
    font-size:26px;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}