* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.l2-header {
    width: 100%;
    height: 86px;

    position: relative;
    z-index: 100;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 6, .98) 0%,
            rgba(5, 9, 11, .96) 45%,
            rgba(10, 13, 15, .93) 100%
        );

    border-bottom: 1px solid rgba(201, 158, 89, .25);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 4px 18px rgba(0, 0, 0, .45);
}

.l2-header__inner {
    width: 100%;
    height: 100%;

    padding: 0 42px;

    display: flex;
    align-items: center;
}


/* =========================
   LOGO
========================= */

.l2-header__logo {
    width: 72px;
    min-width: 72px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}


/* =========================
   SEPARATOR
========================= */

.l2-header__separator {
    width: 1px;
    height: 35px;

    margin: 0 28px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(202, 158, 86, .55),
        transparent
    );
}


/* =========================
   NAVIGATION
========================= */

.l2-header__nav {
    height: 100%;

    display: flex;
    align-items: stretch;

    gap: 38px;
}

.l2-header__nav-link {
    min-width: 115px;
    height: 100%;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3px 8px 0;

    color: rgba(224, 224, 224, .72);

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;

    text-decoration: none;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.l2-header__nav-link:hover {
    color: #d7b276;
}

.l2-header__nav-link.active {
    color: #d7b276;

    text-shadow:
        0 0 12px rgba(207, 163, 92, .25);
}


/* золота лінія */

.l2-header__nav-link.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 8px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        #8f6a38 15%,
        #d3a75e 50%,
        #8f6a38 85%,
        transparent 100%
    );

    box-shadow:
        0 0 5px rgba(218, 173, 97, .4);
}


/* ромб по центру */

.l2-header__nav-link.active::before {
    content: "";

    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 5px;

    width: 6px;
    height: 6px;

    background: #d7ab64;

    transform:
        translateX(-50%)
        rotate(45deg);

    box-shadow:
        0 0 8px rgba(228, 184, 105, .8);
}


/* =========================
   RIGHT
========================= */

.l2-header__right {
    height: 100%;

    margin-left: auto;

    display: flex;
    align-items: center;
}


/* =========================
   ACCOUNT
========================= */

.l2-header__account {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 15px;

    color: rgba(224, 224, 224, .78);

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;

    white-space: nowrap;

    text-decoration: none;

    transition: color .25s ease;
}

.l2-header__account:hover {
    color: #d8ae6b;
}


/* круглая иконка */

.l2-header__account-icon {
    width: 46px;
    height: 46px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d8a95f;

    border: 2px solid rgba(209, 161, 87, .75);
    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(203, 154, 80, .15),
        inset 0 0 10px rgba(203, 154, 80, .08);
}


/* декоративні риски навколо круга */

.l2-header__account-icon::before,
.l2-header__account-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 56px;
    height: 56px;

    transform: translate(-50%, -50%);

    background:
        linear-gradient(#c69753, #c69753)
        center top / 1px 6px no-repeat,

        linear-gradient(#c69753, #c69753)
        center bottom / 1px 6px no-repeat,

        linear-gradient(#c69753, #c69753)
        left center / 6px 1px no-repeat,

        linear-gradient(#c69753, #c69753)
        right center / 6px 1px no-repeat;

    opacity: .7;
}


/* =========================
   LANGUAGES
========================= */

.l2-header__languages {
    display: flex;
    align-items: center;

    gap: 27px;
}

.l2-header__languages a {
    position: relative;

    padding: 10px 0;

    color: rgba(220, 220, 220, .65);

    font-family: Arial, sans-serif;
    font-size: 13px;

    text-decoration: none;

    transition: color .2s ease;
}

.l2-header__languages a:hover {
    color: #d8ae6b;
}

.l2-header__languages a.active {
    color: #d8ae6b;
}

.l2-header__languages a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 24px;
    height: 1px;

    transform: translateX(-50%);

    background: #bd8e4b;

    box-shadow:
        0 0 5px rgba(211, 163, 88, .4);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1300px) {

    .l2-header__inner {
        padding: 0 25px;
    }

    .l2-header__nav {
        gap: 18px;
    }

    .l2-header__nav-link {
        min-width: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    .l2-header__separator {
        margin-left: 18px;
        margin-right: 18px;
    }
}


@media (max-width: 1050px) {

    .l2-header__nav {
        gap: 8px;
    }

    .l2-header__nav-link {
        font-size: 12px;
    }

    .l2-header__account span:last-child {
        display: none;
    }

    .l2-header__languages {
        gap: 15px;
    }
}
.site-footer {
    min-height: 760px;
    width: 100%;

    position: relative;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    color: #d9c7a5;

    background:
        url("/images/footerBg.png")
        center center / cover no-repeat;

    font-family: Georgia, "Times New Roman", serif;
}


/* =========================
   OVERLAY
========================= */

.site-footer__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .18) 0%,
            rgba(0, 0, 0, .22) 30%,
            rgba(0, 0, 0, .38) 65%,
            rgba(0, 0, 0, .72) 100%
        );

    pointer-events: none;
}


/* =========================
   CONTENT
========================= */

.site-footer__content {
    width: 100%;
    min-height: 760px;

    position: relative;
    z-index: 2;

    padding: 115px 60px 45px;
}


/* =========================
   TOP NAVIGATION
========================= */

.site-footer__nav-wrap {
    width: min(1080px, calc(100% - 100px));

    margin: 0 auto;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px 40px;

    border-top: 1px solid rgba(190, 145, 75, .42);
    border-bottom: 1px solid rgba(190, 145, 75, .42);
}


.site-footer__nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 38px;
}


.site-footer__nav a {
    color: #e1cda7;

    font-size: 20px;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .8);

    transition:
        color .25s ease,
        text-shadow .25s ease;
}


.site-footer__nav a:hover {
    color: #e6b963;

    text-shadow:
        0 0 10px rgba(217, 166, 83, .4);
}


.site-footer__nav-separator {
    width: 1px;
    height: 27px;

    display: block;

    background: linear-gradient(
        to bottom,
        transparent,
        #b78a4c,
        transparent
    );
}


/* декоративні ромби */

.site-footer__decor {
    position: absolute;

    top: 50%;

    color: #c89b54;

    font-size: 22px;

    transform: translateY(-50%);
}


.site-footer__decor--left {
    left: -50px;
}


.site-footer__decor--right {
    right: -50px;
}


/* =========================
   MAIN
========================= */

.site-footer__main {
    width: 100%;

    margin-top: 25px;

    display: grid;

    grid-template-columns: 1fr 720px 1fr;

    align-items: center;
}


/* =========================
   CENTER
========================= */

.site-footer__center {
    text-align: center;
}


/* LOGO PLACE */

.site-footer__logo {
    width: 300px;
    height: 210px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}


.site-footer__domain {
    margin-top: -3px;

    color: #e4d5bb;

    font-size: 21px;

    text-shadow:
        0 2px 5px #000;
}


.site-footer__description {
    margin-top: 17px;

    color: rgba(222, 210, 188, .85);

    font-size: 16px;
    line-height: 1.55;

    text-shadow:
        0 2px 4px #000;
}


/* =========================
   SOCIALS
========================= */

.site-footer__socials {
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 27px;
}


.site-footer__social {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f0d69e;

    text-decoration: none;

    transition:
        transform .2s ease,
        filter .2s ease;
}


/*
    СЮДИ ВСТАВЛЯЄШ SVG / IMG

    .site-footer__social img {
        width: 28px;
        max-height: 28px;
    }
*/


.site-footer__social:hover {
    transform: translateY(-3px);

    filter: drop-shadow(
        0 0 7px rgba(227, 179, 92, .6)
    );
}


.site-footer__social-separator {
    width: 1px;
    height: 31px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(185, 139, 72, .8),
        transparent
    );
}


/* =========================
   BOTTOM GOLD LINE
========================= */

.site-footer__bottom-line {
    width: 510px;
    height: 20px;

    position: relative;

    margin: 22px auto 0;
}


.site-footer__bottom-line::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #b78a4c 12%,
        #b78a4c 88%,
        transparent
    );
}


.site-footer__bottom-line-decor {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    padding: 0 8px;

    color: #c79a52;

    font-size: 18px;

    background: rgba(5, 7, 6, .8);

    transform: translate(-50%, -50%);
}


/* =========================
   SLOGAN
========================= */

.site-footer__slogan {
    margin-top: 12px;

    color: rgba(194, 169, 125, .52);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 12px;

    white-space: nowrap;
}


/* =========================
   LEFT / RIGHT TEXT
========================= */

.site-footer__side {
    margin-top: 40px;

    display: flex;
    flex-direction: column;

    align-items: center;

    color: rgba(186, 163, 123, .45);

    font-size: 16px;
    line-height: 1.5;

    text-align: center;
}


.site-footer__side-line {
    width: 105px;
    height: 20px;

    position: relative;

    margin-top: 15px;
}


.site-footer__side-line::before,
.site-footer__side-line::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 43px;
    height: 1px;

    background: rgba(185, 140, 73, .65);
}


.site-footer__side-line::before {
    left: 0;
}


.site-footer__side-line::after {
    right: 0;
}


.site-footer__side-line span {
    width: 8px;
    height: 8px;

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(191, 144, 75, .75);

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* =========================
   CORNERS
========================= */

.site-footer__corner {
    position: absolute;

    bottom: 5px;

    color: rgba(186, 163, 123, .45);

    font-size: 13px;
    line-height: 1.5;

    letter-spacing: 1px;
}


.site-footer__corner--left {
    left: 5px;

    text-align: left;
}


.site-footer__corner--right {
    right: 5px;

    text-align: right;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {

    .site-footer__main {
        grid-template-columns: 180px 1fr 180px;
    }

    .site-footer__nav {
        gap: 22px;
    }

    .site-footer__nav a {
        font-size: 17px;
    }
}


@media (max-width: 900px) {

    .site-footer {
        min-height: auto;
    }

    .site-footer__content {
        min-height: auto;

        padding:
            70px 20px
            100px;
    }

    .site-footer__nav-wrap {
        width: 100%;

        padding:
            25px 10px;
    }

    .site-footer__nav {
        flex-wrap: wrap;

        gap: 20px;
    }

    .site-footer__nav-separator {
        display: none;
    }

    .site-footer__decor {
        display: none;
    }

    .site-footer__main {
        display: block;
    }

    .site-footer__side {
        display: none;
    }

    .site-footer__logo {
        width: 250px;
        height: 180px;
    }

    .site-footer__description br {
        display: none;
    }

    .site-footer__bottom-line {
        max-width: 100%;
    }

    .site-footer__slogan {
        letter-spacing: 5px;
        white-space: normal;
    }
}

.hero-section {
    width: 100%;
    height: 100vh;
    min-height: 720px;

    position: relative;

    overflow: hidden;

    color: #fff;

    background: #080a0b;
}


/* ==========================================
   BACKGROUND
========================================== */

.hero-section__bg {
    position: absolute;
    inset: 0;

    background:
        url("/images/mainHero.png")
        center center / cover no-repeat;

    transform: scale(1.01);
}


/*
 * Затемнення країв.
 * Сам арт при цьому залишається яскравим.
 */
.hero-section__shadow {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .40) 0%,
            rgba(0, 0, 0, .05) 35%,
            rgba(0, 0, 0, 0) 65%,
            rgba(0, 0, 0, .18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .30) 0%,
            transparent 35%
        );

    pointer-events: none;
}


/* ==========================================
   CENTER CONTENT
========================================== */

.hero-section__content {
    width: 820px;
    max-width: calc(100% - 120px);

    position: absolute;
    z-index: 5;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    text-align: center;
}


/* ==========================================
   LOGO
========================================== */

.hero-section__logo {
    width: 430px;
    height: 300px;

    margin: 0 auto -15px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-section__logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================
   SERVER BAR
========================================== */

.hero-server-bar {
    width: 650px;
    max-width: 100%;
    height: 55px;

    position: relative;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 6, .55),
            rgba(3, 5, 6, .90) 15%,
            rgba(3, 5, 6, .90) 85%,
            rgba(3, 5, 6, .55)
        );

    border-top: 1px solid rgba(201, 155, 84, .55);
    border-bottom: 1px solid rgba(201, 155, 84, .55);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25);
}


.hero-server-bar__item {
    min-width: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    color: rgba(238, 238, 238, .85);

    font-family: Arial, sans-serif;
    font-size: 15px;
}


.hero-server-bar__item--online {
    color: #52e438;
}


.hero-server-bar__dot {
    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #42df2d;

    box-shadow:
        0 0 7px #42df2d,
        0 0 15px rgba(66, 223, 45, .9),
        0 0 30px rgba(66, 223, 45, .4);
}


.hero-server-bar__separator {
    width: 1px;
    height: 28px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(202, 157, 89, .7),
            transparent
        );
}


.hero-server-bar__players-icon {
    width: 25px;
    height: 25px;

    display: block;
}


/* краї статус-бара */

.hero-server-bar__edge {
    position: absolute;

    top: 50%;

    color: #c4944d;

    font-size: 18px;

    transform: translateY(-50%);
}


.hero-server-bar__edge--left {
    left: 12px;
}


.hero-server-bar__edge--right {
    right: 12px;
}


/* ==========================================
   TITLE
========================================== */

.hero-section__title {
    margin: 24px 0 0;

    color: #f3f0ea;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 4.2vw, 74px);
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 3px 5px rgba(0, 0, 0, .9),
        0 0 20px rgba(0, 0, 0, .45);
}


/* ==========================================
   SUBTITLE
========================================== */

.hero-section__subtitle {
    margin-top: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    color: rgba(232, 232, 232, .7);

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;

    letter-spacing: 8px;

    white-space: nowrap;
}


.hero-section__subtitle span {
    width: 100px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(193, 145, 72, .8)
    );
}


.hero-section__subtitle span:last-child {
    transform: scaleX(-1);
}


/* ==========================================
   BUTTONS
========================================== */

.hero-section__buttons {
    margin-top: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;
}


.hero-main-btn {
    width: 365px;
    height: 95px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    padding: 0 40px;

    color: #fff;

    text-decoration: none;

    clip-path: polygon(
        9% 0,
        91% 0,
        100% 50%,
        91% 100%,
        9% 100%,
        0 50%
    );

    transition:
        transform .3s ease,
        filter .3s ease;
}


.hero-main-btn::before {
    content: "";

    position: absolute;

    inset: 2px;

    clip-path: inherit;

    border: 1px solid rgba(255, 211, 139, .4);

    pointer-events: none;
}


.hero-main-btn:hover {
    transform: translateY(-4px);

    filter: brightness(1.15);
}


.hero-main-btn--download {
    background:
        linear-gradient(
            110deg,
            #604321 0%,
            #a7783f 48%,
            #6c4926 100%
        );

    box-shadow:
        0 0 25px rgba(193, 140, 64, .2);
}


.hero-main-btn--register {
    background:
        linear-gradient(
            110deg,
            #102838 0%,
            #17506f 50%,
            #102c3e 100%
        );

    box-shadow:
        0 0 25px rgba(34, 118, 164, .2);
}


.hero-main-btn__icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;
}


.hero-main-btn__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;
}


.hero-main-btn__content strong {
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;

    letter-spacing: .5px;
}


.hero-main-btn__content small {
    color: rgba(255, 255, 255, .55);

    font-family: Arial, sans-serif;
    font-size: 13px;
}


.hero-main-btn__decor {
    position: absolute;

    right: 25px;

    color: #d0a15c;
}


/* ==========================================
   LEFT INFORMATION
========================================== */

.hero-section__left-info {
    position: absolute;
    z-index: 4;

    left: 55px;
    top: 50px;

    padding-left: 23px;

    border-left: 1px solid rgba(183, 138, 72, .35);
}


.hero-section__small-text {
    color: rgba(214, 214, 214, .55);

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.8;

    letter-spacing: 2px;
}


.hero-section__left-line {
    width: 1px;
    height: 25px;

    margin: 12px 0;

    background: #a77c40;
}


/* ==========================================
   PAGINATION
========================================== */

.hero-section__pagination {
    position: absolute;
    z-index: 10;

    left: 52px;
    top: 39%;

    display: flex;
    flex-direction: column;
}


.hero-section__pagination-item {
    width: 40px;
    height: 47px;

    position: relative;

    padding: 0;

    color: rgba(219, 201, 169, .65);

    font-family: Georgia, serif;
    font-size: 13px;

    text-align: left;

    background: none;
    border: 0;

    cursor: pointer;
}


.hero-section__pagination-item.active {
    color: #e7bd78;
}


.hero-section__pagination-line {
    width: 1px;
    height: 70px;

    position: absolute;

    left: 7px;
    top: 30px;

    background:
        linear-gradient(
            to bottom,
            #b98b47,
            rgba(185, 139, 71, .3)
        );
}


/* ==========================================
   RIGHT FEATURES
========================================== */

.hero-section__features {
    position: absolute;
    z-index: 5;

    right: 35px;
    top: 53%;

    display: grid;

    grid-template-columns: auto 15px;

    align-items: center;

    gap: 15px 15px;

    color: rgba(218, 218, 218, .58);

    font-family: Arial, sans-serif;
    font-size: 10px;

    text-align: right;

    letter-spacing: 1px;
}


.hero-section__features i {
    width: 5px;
    height: 5px;

    display: block;

    border: 1px solid #c89a52;

    transform: rotate(45deg);
}


/* ==========================================
   TRAILER
========================================== */

.hero-trailer {
    width: 310px;
    height: 115px;

    position: absolute;
    z-index: 5;

    right: 0;
    bottom: 110px;

    display: flex;
    align-items: center;

    color: rgba(230, 230, 230, .7);

    text-decoration: none;

    background: rgba(5, 8, 9, .82);

    border-top: 1px solid rgba(190, 143, 74, .65);
    border-bottom: 1px solid rgba(190, 143, 74, .65);
}


.hero-trailer__play {
    width: 48px;
    height: 48px;

    margin-left: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d0a15b;

    border: 2px solid #c79a55;
    border-radius: 50%;

    font-size: 14px;
}


.hero-trailer__text {
    margin-left: 18px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.6;

    letter-spacing: 2px;
}


.hero-trailer__preview {
    width: 100px;
    height: 100%;

    margin-left: auto;

    background:
        url("/images/trailer-preview.jpg")
        center / cover no-repeat;
}


/* ==========================================
   SOCIALS
========================================== */

.hero-section__socials {
    position: absolute;
    z-index: 5;

    left: 55px;
    bottom: 50px;

    display: flex;
    align-items: center;

    gap: 20px;
}


.hero-section__socials a {
    width: 20px;
    height: 20px;

    display: block;
}


.hero-section__socials > span {
    width: 1px;
    height: 15px;

    background: #a57b41;
}


.hero-section__socials div {
    color: rgba(190, 161, 113, .65);

    font-family: Arial, sans-serif;
    font-size: 10px;

    letter-spacing: 3px;
}


/* ==========================================
   SCROLL
========================================== */

.hero-scroll {
    position: absolute;
    z-index: 10;

    left: 50%;
    bottom: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #c29654;

    transform: translateX(-50%);
}


.hero-scroll > span {
    margin-bottom: 8px;

    font-family: Georgia, serif;
    font-size: 10px;

    letter-spacing: 2px;
}


.hero-scroll__mouse {
    width: 26px;
    height: 45px;

    position: relative;

    border: 1px solid #c29654;
    border-radius: 14px;
}


.hero-scroll__mouse i {
    width: 2px;
    height: 9px;

    position: absolute;

    left: 50%;
    top: 7px;

    background: #d3a45c;

    transform: translateX(-50%);

    animation: heroMouse 1.8s infinite;
}


.hero-scroll__arrow {
    margin-top: 6px;
}


@keyframes heroMouse {

    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 15px);
    }
}


/* ==========================================
   BOTTOM RIGHT
========================================== */

.hero-section__bottom-right {
    position: absolute;
    z-index: 5;

    right: 60px;
    bottom: 40px;

    display: flex;
    align-items: center;

    gap: 17px;

    color: rgba(205, 205, 205, .5);

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.7;

    letter-spacing: 1px;
}


.hero-section__bottom-right i {
    width: 1px;
    height: 35px;

    display: block;

    background: #bd8e4c;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1200px) {

    .hero-section__left-info,
    .hero-section__features,
    .hero-trailer,
    .hero-section__bottom-right {
        display: none;
    }

}


@media (max-width: 768px) {

    .hero-section {
        min-height: 650px;
    }

    .hero-section__content {
        width: 100%;
        max-width: none;

        padding: 0 25px;
    }

    .hero-section__logo {
        width: 280px;
        height: 200px;
    }

    .hero-section__title {
        font-size: 42px;

        white-space: normal;
    }

    .hero-section__subtitle {
        font-size: 9px;

        letter-spacing: 3px;
    }

    .hero-section__subtitle span {
        display: none;
    }

    .hero-section__buttons {
        flex-direction: column;

        gap: 12px;

        margin-top: 25px;
    }

    .hero-main-btn {
        width: min(360px, 100%);
        height: 75px;
    }

    .hero-section__pagination {
        display: none;
    }

    .hero-section__socials {
        display: none;
    }

    .hero-scroll {
        bottom: 15px;
    }

}

.about-slide {
    width: 100%;
    height: 100vh;
    min-height: 750px;

    position: relative;

    overflow: hidden;

    background: #090a09;

    color: #fff;
}


/* ========================================
   BACKGROUND
======================================== */

.about-slide__bg {
    position: absolute;

    inset: 0;

    background:
        url("/images/aboutHero.png")
        center center / cover no-repeat;

    transform: scale(1.02);
}


.about-slide__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .45) 0%,
            rgba(0, 0, 0, .10) 20%,
            rgba(0, 0, 0, .05) 50%,
            rgba(0, 0, 0, .10) 80%,
            rgba(0, 0, 0, .45) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .08) 45%,
            rgba(0, 0, 0, .20) 100%
        );

    pointer-events: none;
}


/* ========================================
   CONTENT
======================================== */

.about-slide__content {
    width: 100%;
    height: 100%;

    position: relative;
    z-index: 5;

    padding:
        clamp(55px, 7vh, 90px)
        8vw
        50px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ========================================
   INTRO
======================================== */

.about-slide__intro {
    width: 100%;

    text-align: center;
}


/* TOP SMALL TITLE */

.about-slide__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    color: #d7aa65;

    font-family: Arial, sans-serif;
    font-size: clamp(14px, 1.15vw, 21px);
}


.about-slide__eyebrow span {
    width: 120px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(203, 154, 78, .85)
        );
}


.about-slide__eyebrow span:last-child {
    transform: scaleX(-1);
}


.about-slide__eyebrow i {
    color: #d4a45b;

    font-size: 18px;
    font-style: normal;
}


/* ========================================
   TITLE
======================================== */

.about-slide__title {
    margin: 15px 0 0;

    color: #f2f0eb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 4.2vw, 74px);
    font-weight: 400;
    line-height: 1.05;

    white-space: nowrap;

    text-shadow:
        0 4px 15px rgba(0, 0, 0, .8);
}


.about-slide__title strong {
    color: #dfb56f;

    font-weight: 400;
}


/* ========================================
   SUBTITLE
======================================== */

.about-slide__subtitle {
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    color: rgba(225, 225, 225, .5);

    font-family: Arial, sans-serif;
    font-size: clamp(13px, 1vw, 18px);
}


.about-slide__subtitle span {
    width: 105px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199, 151, 78, .8)
        );
}


.about-slide__subtitle span:last-child {
    transform: scaleX(-1);
}


/* TITLE DECOR */

.about-slide__title-decor {
    width: 300px;

    margin: 14px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.about-slide__title-decor span {
    width: 100px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c39148
        );
}


.about-slide__title-decor span:last-child {
    transform: scaleX(-1);
}


.about-slide__title-decor i {
    color: #d2a257;

    font-style: normal;
}


/* ========================================
   QUOTES
======================================== */

.about-slide__quote {
    position: absolute;

    top: 45%;

    color: rgba(222, 222, 222, .55);

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;

    text-align: center;
}


.about-slide__quote--left {
    left: 17%;
}


.about-slide__quote--right {
    right: 17%;
}


.about-slide__quote > span {
    width: 70px;
    height: 1px;

    display: block;

    margin: 0 auto 13px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(186, 139, 69, .7),
            transparent
        );
}


.about-slide__quote p {
    margin: 0;
}


.about-slide__quote i {
    width: 40px;
    height: 1px;

    display: block;

    position: relative;

    margin: 14px auto 0;

    background: rgba(190, 143, 73, .65);
}


.about-slide__quote i::after {
    content: "";

    width: 5px;
    height: 5px;

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid #b98b48;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* ========================================
   CARDS
======================================== */

.about-slide__cards {
    width: 100%;

    margin-top: auto;
    margin-bottom: 55px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;
}


/* ========================================
   CARD
======================================== */

.about-card {
    height: clamp(180px, 22vh, 225px);

    position: relative;

    display: block;

    overflow: hidden;

    color: #fff;

    text-decoration: none;

    background: #080909;

    border:
        1px solid
        rgba(202, 153, 78, .75);

    /*
     * Зрізаємо кути як на макеті
     */
    clip-path: polygon(
        20px 0,
        calc(100% - 20px) 0,

        100% 20px,

        100% calc(100% - 20px),

        calc(100% - 20px) 100%,

        20px 100%,

        0 calc(100% - 20px),

        0 20px
    );
}


/* IMAGE */

.about-card__bg {
    position: absolute;

    inset: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}


.about-card:hover .about-card__bg {
    transform: scale(1.07);

    filter: brightness(1.15);
}


/* DARK BOTTOM */

.about-card__shadow {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .05) 0%,
            rgba(0, 0, 0, .15) 35%,
            rgba(0, 0, 0, .88) 100%
        );
}


/* CONTENT */

.about-card__content {
    position: absolute;

    z-index: 3;

    left: 35px;
    right: 35px;
    bottom: 25px;

    display: flex;
    align-items: center;
}


/* ICON */

.about-card__icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d9a95f;

    border:
        1px solid
        rgba(211, 163, 87, .85);

    border-radius: 50%;
}


/*
.about-card__icon svg {
    width: 26px;
    height: 26px;
}
*/


/* TEXT */

.about-card__text {
    min-width: 0;

    margin-left: 20px;

    display: flex;
    flex-direction: column;

    text-align: left;
}


.about-card__text strong {
    color: #f0ede7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(17px, 1.3vw, 23px);
    font-weight: 400;

    white-space: nowrap;
}


.about-card__text span {
    margin-top: 5px;

    color: rgba(220, 220, 220, .5);

    font-family: Arial, sans-serif;
    font-size: 13px;
}


/* ARROW */

.about-card__arrow {
    width: 47px;
    height: 47px;

    flex: 0 0 47px;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d8a75d;

    border:
        1px solid
        rgba(206, 157, 79, .7);

    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 25px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.about-card:hover .about-card__arrow {
    color: #17110a;

    background: #d1a05a;

    transform: translateX(4px);
}


/* ========================================
   CARD GOLD GLOW
======================================== */

.about-card::after {
    content: "";

    width: 150px;
    height: 1px;

    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #e1af60,
            transparent
        );

    box-shadow:
        0 0 8px rgba(222, 170, 88, .8);
}


/* ========================================
   BOTTOM
======================================== */

.about-slide__bottom {
    position: absolute;

    left: 50%;
    bottom: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    color: rgba(201, 166, 109, .75);

    font-family: Arial, sans-serif;
    font-size: 11px;

    letter-spacing: 7px;

    white-space: nowrap;

    transform: translateX(-50%);
}


.about-slide__bottom span {
    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a77a3c
        );
}


.about-slide__bottom span:last-child {
    transform: scaleX(-1);
}


.about-slide__bottom i {
    color: #c9984c;

    font-size: 16px;
    font-style: normal;
}


/* ========================================
   HOVER BORDER GLOW
======================================== */

.about-card {
    transition:
        border-color .3s ease,
        filter .3s ease;
}


.about-card:hover {
    border-color: #d9a653;

    filter:
        drop-shadow(
            0 5px 15px rgba(0, 0, 0, .45)
        );
}


/* ========================================
   <= 1400
======================================== */

@media (max-width: 1400px) {

    .about-slide__content {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .about-slide__cards {
        gap: 20px;
    }

    .about-slide__quote--left {
        left: 12%;
    }

    .about-slide__quote--right {
        right: 12%;
    }

}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .about-slide {
        height: auto;
        min-height: 100vh;
    }

    .about-slide__content {
        min-height: 100vh;

        padding:
            70px
            25px
            100px;
    }

    .about-slide__title {
        white-space: normal;
    }

    .about-slide__quote {
        display: none;
    }

    .about-slide__cards {
        margin-top: 70px;

        grid-template-columns: 1fr;

        max-width: 650px;
    }

    .about-card {
        height: 210px;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

    .about-slide__content {
        padding:
            50px
            15px
            90px;
    }

    .about-slide__eyebrow span,
    .about-slide__subtitle span {
        display: none;
    }

    .about-slide__eyebrow {
        font-size: 13px;
    }

    .about-slide__title {
        margin-top: 15px;

        font-size: 37px;
    }

    .about-slide__subtitle {
        font-size: 13px;
    }

    .about-slide__cards {
        margin-top: 45px;

        gap: 15px;
    }

    .about-card {
        height: 170px;
    }

    .about-card__content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .about-card__icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;
    }

    .about-card__text {
        margin-left: 12px;
    }

    .about-card__text strong {
        font-size: 17px;

        white-space: normal;
    }

    .about-card__arrow {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .about-slide__bottom {
        bottom: 30px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .about-slide__bottom span {
        display: none;
    }

}

.server-about {
    width: 100%;
    height: 100vh;
    min-height: 760px;

    position: relative;

    overflow: hidden;

    background: #080908;

    color: #fff;
}


/* ==================================================
   BACKGROUND
================================================== */

.server-about__bg {
    position: absolute;

    inset: 0;

    background:
        url("/images/serverAboutHero.png")
        center center / cover no-repeat;

    transform: scale(1.01);
}


.server-about__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .08) 28%,
            rgba(0, 0, 0, .03) 50%,
            rgba(0, 0, 0, .08) 72%,
            rgba(0, 0, 0, .55) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .70) 0%,
            rgba(0, 0, 0, .05) 45%,
            rgba(0, 0, 0, .15) 100%
        );

    pointer-events: none;
}


/* ==================================================
   CONTENT
================================================== */

.server-about__content {
    width: 100%;
    height: 100%;

    position: relative;
    z-index: 3;

    padding:
        clamp(35px, 5vh, 65px)
        8vw
        40px;

    display: flex;
    flex-direction: column;
}


/* ==================================================
   HEAD
================================================== */

.server-about__head {
    position: relative;
    z-index: 5;

    text-align: center;
}


.server-about__label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #d8aa62;

    font-family: Arial, sans-serif;
}


.server-about__label strong {
    font-size: 20px;
    font-weight: 400;

    letter-spacing: 2px;
}


.server-about__label span {
    width: 70px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #bd8c46
    );
}


.server-about__label span:last-child {
    transform: scaleX(-1);
}


.server-about__label i {
    color: #d7a65a;

    font-size: 20px;
    font-style: normal;
}


/* ==================================================
   TITLE
================================================== */

.server-about__title {
    margin: 15px 0 0;

    color: #f3f1ec;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(46px, 4.3vw, 72px);
    font-weight: 400;
    line-height: .9;

    text-shadow:
        0 4px 15px rgba(0, 0, 0, .7);
}


.server-about__title strong {
    color: #e0b36d;

    font-weight: 400;
}


/* ==================================================
   SUBTITLE
================================================== */

.server-about__subtitle {
    margin-top: 28px;

    color: rgba(238, 238, 238, .75);

    font-family: Arial, sans-serif;
    font-size: 11px;

    letter-spacing: 7px;
}


.server-about__subtitle i {
    width: 4px;
    height: 4px;

    display: inline-block;

    margin: 0 12px;

    vertical-align: middle;

    border-radius: 50%;

    background: #c59752;
}


/* ==================================================
   SIDE INFO
================================================== */

.server-about__side {
    position: absolute;

    z-index: 4;

    top: 95px;

    width: 220px;

    color: rgba(225, 225, 225, .65);

    font-family: Arial, sans-serif;
}


.server-about__side--left {
    left: 4.5%;
}


.server-about__side--right {
    right: 4.5%;

    text-align: right;
}


.server-about__side-small {
    font-size: 10px;
    line-height: 1.8;

    letter-spacing: 2px;
}


.server-about__quote {
    margin-top: 100px;

    font-size: 16px;
    line-height: 1.5;

    text-align: center;
}


.server-about__quote-line {
    width: 140px;
    height: 15px;

    position: relative;

    margin: 14px auto 0;
}


.server-about__quote-line::before,
.server-about__quote-line::after {
    content: "";

    width: calc(50% - 7px);
    height: 1px;

    position: absolute;

    top: 50%;

    background:
        rgba(199, 150, 76, .75);
}


.server-about__quote-line::before {
    left: 0;
}


.server-about__quote-line::after {
    right: 0;
}


.server-about__quote-line span {
    width: 8px;
    height: 8px;

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        #c7954c;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* ==================================================
   CARDS WRAPPER
================================================== */

.server-about__cards {
    width: 100%;

    margin-top: auto;
    margin-bottom: 70px;

    display: grid;

    grid-template-columns:
        .95fr
        1fr
        1fr;

    gap: 35px;
}


/* ==================================================
   CARD
================================================== */

.server-about-card {
    height: clamp(275px, 35vh, 355px);

    position: relative;

    overflow: hidden;

    color: #fff;

    text-decoration: none;

    background: rgba(5, 5, 5, .93);

    clip-path: polygon(
        22px 0,
        calc(50% - 20px) 0,
        50% 12px,
        calc(50% + 20px) 0,
        calc(100% - 22px) 0,

        100% 22px,

        100% calc(100% - 22px),

        calc(50% + 20px) 100%,
        50% calc(100% - 12px),
        calc(50% - 20px) 100%,

        22px 100%,

        0 calc(100% - 22px),

        0 22px
    );
}


/*
 * Окрема золота рамка через псевдоелемент.
 */

.server-about-card::before {
    content: "";

    position: absolute;

    z-index: 10;

    inset: 0;

    pointer-events: none;

    border:
        1px solid
        rgba(205, 155, 77, .9);
}


/* ==================================================
   INFO CARD
================================================== */

.server-about-card__inner {
    height: 100%;

    padding:
        35px
        45px
        20px;

    display: flex;
    flex-direction: column;
}


.server-about-card__inner h3 {
    margin: 0 0 25px;

    color: #e2b86f;

    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
}


/* ==================================================
   SERVER LIST
================================================== */

.server-about-list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;

    list-style: none;
}


.server-about-list li {
    display: flex;
    align-items: center;

    gap: 17px;

    color: rgba(224, 224, 224, .72);

    font-family: Arial, sans-serif;
    font-size: 16px;
}


.server-about-list__icon {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d7a65c;
}


/* ==================================================
   INFO CARD FOOTER
================================================== */

.server-about-card__footer {
    margin-top: auto;

    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 40px;

    border-top:
        1px solid
        rgba(191, 143, 70, .55);
}


.server-about-card__footer > a:first-child {
    color: #d2a25b;

    font-family: Arial, sans-serif;
    font-size: 11px;

    letter-spacing: 1px;

    text-decoration: none;
}


/* ==================================================
   IMAGE CARDS
================================================== */

.server-about-card__bg {
    position: absolute;

    inset: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.server-about-card--image:hover
.server-about-card__bg {
    transform: scale(1.07);
}


.server-about-card__gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .02) 0%,
            rgba(0, 0, 0, .12) 35%,
            rgba(0, 0, 0, .88) 78%,
            rgba(0, 0, 0, .96) 100%
        );
}


/* ==================================================
   IMAGE CARD CONTENT
================================================== */

.server-about-card__image-content {
    position: absolute;

    z-index: 5;

    left: 50px;
    right: 80px;
    bottom: 38px;

    display: flex;
    flex-direction: column;
}


.server-about-card__overline {
    margin-bottom: 8px;

    color: #d0a15a;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;
}


.server-about-card__image-content strong {
    color: #f0e8da;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
    font-weight: 400;
}


.server-about-card__image-content p {
    margin:
        10px
        0
        0;

    color:
        rgba(215, 215, 215, .58);

    font-family: Arial, sans-serif;
    font-size: 13px;
}


/* ==================================================
   ARROW
================================================== */

.server-about-card__arrow {
    width: 47px;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 47px;

    color: #d9aa60;

    border:
        1px solid
        rgba(211, 161, 82, .8);

    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 24px;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.server-about-card--image >
.server-about-card__arrow {
    position: absolute;

    z-index: 6;

    right: 45px;
    bottom: 40px;
}


.server-about-card:hover
.server-about-card__arrow {
    color: #111;

    background: #d1a158;

    transform: translateX(4px);
}


/* ==================================================
   GOLD LIGHT AT BOTTOM
================================================== */

.server-about-card::after {
    content: "";

    width: 170px;
    height: 1px;

    position: absolute;

    z-index: 20;

    left: 50%;
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e1ad5b,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(229, 174, 89, .9);

    transform:
        translateX(-50%);
}


/* ==================================================
   BOTTOM CAPTION
================================================== */

.server-about__bottom {
    position: absolute;

    left: 50%;
    bottom: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    transform:
        translateX(-50%);
}


.server-about__bottom strong {
    color:
        rgba(204, 169, 110, .75);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;

    letter-spacing: 8px;

    white-space: nowrap;
}


.server-about__bottom span {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a97c3d
        );
}


.server-about__bottom span:last-child {
    transform: scaleX(-1);
}


.server-about__bottom i {
    color: #c9994f;

    font-style: normal;
}


/* ==================================================
   <= 1400
================================================== */

@media (max-width: 1400px) {

    .server-about__content {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .server-about__cards {
        gap: 20px;
    }

    .server-about-card__inner {
        padding-left: 30px;
        padding-right: 30px;
    }

    .server-about-card__image-content {
        left: 35px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1050px) {

    .server-about {
        height: auto;

        min-height: 100vh;
    }

    .server-about__content {
        min-height: 100vh;

        padding:
            60px
            25px
            100px;
    }

    .server-about__side {
        display: none;
    }

    .server-about__cards {
        max-width: 700px;

        margin:
            70px
            auto
            60px;

        grid-template-columns: 1fr;
    }

    .server-about-card {
        height: 300px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .server-about__content {
        padding:
            45px
            15px
            90px;
    }

    .server-about__label strong {
        font-size: 15px;
    }

    .server-about__label span {
        width: 35px;
    }

    .server-about__title {
        font-size: 39px;
        line-height: 1;
    }

    .server-about__subtitle {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .server-about__subtitle i {
        margin:
            0
            5px;
    }

    .server-about__cards {
        margin-top: 45px;

        gap: 15px;
    }

    .server-about-card {
        height: 250px;
    }

    .server-about-card__inner {
        padding:
            25px
            25px
            15px;
    }

    .server-about-card__inner h3 {
        margin-bottom: 17px;

        font-size: 21px;
    }

    .server-about-list {
        gap: 10px;
    }

    .server-about-list li {
        font-size: 14px;
    }

    .server-about-card__image-content {
        left: 25px;
        bottom: 25px;
    }

    .server-about-card__image-content strong {
        font-size: 25px;
    }

    .server-about-card--image >
    .server-about-card__arrow {
        right: 25px;
        bottom: 25px;
    }

    .server-about__bottom strong {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .server-about__bottom span {
        display: none;
    }

}

.community-slide {
    width: 100%;
    height: 100vh;
    min-height: 750px;

    position: relative;

    overflow: hidden;

    color: #fff;

    background: #0b0e0e;
}


/* ==================================================
   BACKGROUND
================================================== */

.community-slide__bg {
    position: absolute;

    inset: 0;

    background:
        url("/images/communityHero.png")
        center center / cover no-repeat;

    transform: scale(1.01);
}


/* Легке затемнення країв */

.community-slide__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .52) 0%,
            rgba(0, 0, 0, .10) 18%,
            rgba(0, 0, 0, .02) 50%,
            rgba(0, 0, 0, .10) 82%,
            rgba(0, 0, 0, .52) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .30) 0%,
            transparent 35%,
            rgba(0, 0, 0, .08) 100%
        );

    pointer-events: none;
}


/* ==================================================
   CENTER CONTENT
================================================== */

.community-slide__content {
    width: 1000px;
    max-width: calc(100% - 150px);

    position: absolute;
    z-index: 5;

    left: 50%;
    top: 17%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transform: translateX(-50%);
}


/* ==================================================
   EYEBROW
================================================== */

.community-slide__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    color: rgba(235, 235, 235, .75);
}


.community-slide__eyebrow strong {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;

    letter-spacing: 3px;
}


.community-slide__eyebrow > i {
    color: #c9994f;

    font-size: 19px;
    font-style: normal;
}


.community-slide__eyebrow > span {
    width: 100px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200, 151, 76, .75)
        );
}


.community-slide__eyebrow > span:last-child {
    transform: scaleX(-1);
}


/* ==================================================
   TITLE
================================================== */

.community-slide__title {
    margin: 22px 0 0;

    display: flex;
    flex-direction: column;

    color: #f0efec;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(55px, 5vw, 88px);
    font-weight: 400;
    line-height: .95;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, .5);
}


.community-slide__title span {
    color: #e3bc7a;
}


/* ==================================================
   SUBTITLE
================================================== */

.community-slide__subtitle {
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(230, 230, 230, .65);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;

    letter-spacing: 7px;

    white-space: nowrap;
}


.community-slide__subtitle i {
    width: 4px;
    height: 4px;

    margin: 0 14px;

    display: block;

    border-radius: 50%;

    background: #c5944d;
}


/* ==================================================
   DIVIDER
================================================== */

.community-slide__divider {
    width: 600px;
    max-width: 80%;

    margin-top: 23px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.community-slide__divider span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(196, 147, 73, .65)
        );
}


.community-slide__divider span:last-child {
    transform: scaleX(-1);
}


.community-slide__divider i {
    width: 8px;
    height: 8px;

    margin: 0 10px;

    border: 1px solid #c6964c;

    transform: rotate(45deg);
}


/* ==================================================
   DISCORD
================================================== */

.community-discord {
    margin-top: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;

    text-decoration: none;
}


/* horizontal decoration */

.community-discord__row {
    display: flex;
    align-items: center;
}


.community-discord__line {
    width: 130px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 151, 76, .8)
        );
}


.community-discord__line:last-child {
    transform: scaleX(-1);
}


.community-discord__diamond {
    width: 12px;
    height: 12px;

    position: relative;
    z-index: 2;

    margin: 0 -3px;

    border: 1px solid #c99950;

    background: rgba(8, 10, 10, .65);

    transform: rotate(45deg);
}


/* circle */

.community-discord__circle {
    width: 125px;
    height: 125px;

    position: relative;
    z-index: 3;

    margin: 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(210, 162, 84, .85);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(11, 15, 20, .88),
            rgba(6, 8, 10, .92)
        );

    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, .4),
        0 5px 30px rgba(0, 0, 0, .25);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.community-discord:hover
.community-discord__circle {
    transform: scale(1.06);

    border-color: #e1b266;

    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, .4),
        0 0 30px rgba(209, 158, 78, .2);
}


/* icon placeholder */

.community-discord__icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/*
.community-discord__icon svg {
    width: 55px;
    height: 55px;
}
*/


/* ==================================================
   DISCORD TEXT
================================================== */

.community-discord__text {
    margin-top: 15px;

    color: rgba(238, 238, 238, .8);

    font-family: Arial, sans-serif;
    font-size: 11px;

    letter-spacing: 2px;
}


/* ==================================================
   ARROW
================================================== */

.community-discord__arrow {
    width: 110px;

    position: relative;

    margin-top: 13px;
}


.community-discord__arrow span {
    width: 100%;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(203, 154, 77, .7)
        );
}


.community-discord__arrow i {
    width: 7px;
    height: 7px;

    position: absolute;

    right: 0;
    top: 50%;

    border-top: 1px solid #c89951;
    border-right: 1px solid #c89951;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==================================================
   SIDE TEXT
================================================== */

.community-slide__side {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 20px;

    color: rgba(220, 220, 220, .52);

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.7;

    letter-spacing: 2px;
}


/* LEFT */

.community-slide__side--left-top {
    left: 45px;
    top: 15%;
}


.community-slide__side--left-bottom {
    left: 45px;
    bottom: 13%;
}


/* RIGHT */

.community-slide__side--right-top {
    right: 45px;
    top: 15%;

    text-align: right;
}


.community-slide__side--right-bottom {
    right: 45px;
    bottom: 13%;

    text-align: right;
}


/* vertical line */

.community-slide__side i {
    width: 1px;
    height: 100px;

    position: relative;

    display: block;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(203, 155, 80, .75),
            transparent
        );
}


.community-slide__side i::before {
    content: "";

    width: 8px;
    height: 8px;

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid #c99a51;

    background: rgba(5, 7, 7, .7);

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* ==================================================
   ENTER ANIMATION
================================================== */

.community-slide__eyebrow,
.community-slide__title,
.community-slide__subtitle,
.community-slide__divider,
.community-discord {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


/*
 * Коли слайд активний, просто додаємо .active
 * або потім прив'яжемо до swiper-slide-active.
 */

.community-slide.active
.community-slide__eyebrow {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .1s;
}


.community-slide.active
.community-slide__title {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .2s;
}


.community-slide.active
.community-slide__subtitle {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .3s;
}


.community-slide.active
.community-slide__divider {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .4s;
}


.community-slide.active
.community-discord {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .5s;
}


/* Якщо він всередині Swiper */

.swiper-slide-active
.community-slide__eyebrow,
.swiper-slide-active
.community-slide__title,
.swiper-slide-active
.community-slide__subtitle,
.swiper-slide-active
.community-slide__divider,
.swiper-slide-active
.community-discord {
    opacity: 1;

    transform: translateY(0);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1100px) {

    .community-slide__side {
        display: none;
    }

    .community-slide__content {
        max-width: calc(100% - 50px);
    }

}


@media (max-width: 700px) {

    .community-slide {
        min-height: 650px;
    }


    .community-slide__bg {
        background-position: 65% center;
    }


    .community-slide__content {
        width: 100%;
        max-width: none;

        top: 15%;

        padding: 0 20px;
    }


    .community-slide__eyebrow > span {
        display: none;
    }


    .community-slide__eyebrow strong {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .community-slide__title {
        margin-top: 18px;

        font-size: 45px;
    }


    .community-slide__subtitle {
        margin-top: 20px;

        font-size: 8px;

        letter-spacing: 3px;

        white-space: normal;
    }


    .community-slide__subtitle i {
        margin: 0 7px;
    }


    .community-slide__divider {
        width: 350px;
    }


    .community-discord {
        margin-top: 25px;
    }


    .community-discord__circle {
        width: 100px;
        height: 100px;
    }


    .community-discord__line {
        width: 70px;
    }


    .community-discord__icon {
        width: 45px;
        height: 45px;
    }

}

.community-slide__eyebrow,
.community-slide__title,
.community-slide__subtitle,
.community-slide__divider,
.community-discord {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;
}