@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    text-rendering: optimizeLegibility
}

html {
    color: #fff;
    font-family: "Rajdhani", serif;
    height: 100%;
    scroll-behavior: smooth
}

body {
    background: #0d0c0c;
    display: flex;
    flex-direction: column;
    min-height: 100%
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

::-webkit-scrollbar-thumb {
    background: #7c4b12
}

::-webkit-scrollbar-thumb:hover {
    background: #d6a84e
}

::-webkit-scrollbar-track {
    background: #060307
}

.icon--download-direct {
    background: url("../img/icons/direct.svg") center no-repeat;
    background-size: 24px 24px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%)
}

.icon--download-google-drive {
    background: url("../img/icons/google-drive.svg") center no-repeat;
    background-size: 24px 24px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%)
}

.icon--download-mega-nz {
    background: url("../img/icons/mega-nz.svg") center no-repeat;
    background-size: 24px 24px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%)
}

.button__top {
    align-items: center;
    background: #1a1208;
    border-radius: 50%;
    bottom: 20px;
    color: #fff;
    display: flex;
    height: 50px;
    justify-content: center;
    opacity: 0;
    position: fixed;
    right: 20px;
    text-decoration: none;
    transition: opacity .3s ease-in-out, visibility .3s linear;
    visibility: hidden;
    width: 50px;
    z-index: calc(9999 + 9999 - 1)
}

.button__top > i {
    font-size: 22px
}

.button--top-visible {
    opacity: 1;
    visibility: visible
}

.button__small {
    align-items: center;
    background: linear-gradient(to right, #39383d 50%, #49474f 50%);
    background-position: 100% 0;
    background-size: 200% 100%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    padding: 0 20px 0 20px;
    outline: none;
    text-decoration: none;
    text-transform: capitalize;
    transform: skew(-22deg);
    transition: background-position 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    width: max-content
}

.button__small:hover {
    background-position: 0 0
}

.button__small > span {
    display: block;
    transform: skew(22deg)
}

.button__medium {
    align-items: center;
    background: linear-gradient(to right, #39383d 50%, #49474f 50%);
    background-position: 100% 0;
    background-size: 200% 100%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600;
    height: 40px;
    padding: 0 20px 0 20px;
    outline: none;
    text-decoration: none;
    text-transform: capitalize;
    transform: skew(-22deg);
    transition: background-position 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    width: 100%
}

.button__medium:hover {
    background-position: 0 0
}

.button__medium > span {
    display: block;
    text-transform: capitalize;
    transform: skew(22deg)
}

.button__slogan {
    align-items: center;
    background: rgba(15, 15, 16, 0.42);
    border: 4px solid #d6a84e;
    color: #fff;
    display: flex;
    font-size: 22px;
    font-weight: 500;
    height: 48px;
    padding: 0 36px 0 36px;
    text-decoration: none;
    transform: skew(22deg);
    transition: all .18s ease-in-out;
    width: max-content
}

.button__slogan:hover {
    background: #5435b8;
    border: 4px solid #5435b8
}

.button__slogan > span {
    display: block;
    transform: skew(-22deg)
}

.button__download {
    align-items: center;
    background: transparent;
    border: 3px solid #d6a84e;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    max-width: 368px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    transform: skew(22deg);
    transition: all .18s ease-in-out;
    width: 100%
}

.button__download:hover {
    background: #d6a84e;
    border: 3px solid #d6a84e
}

.button__download .button__body {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    transform: skew(-22deg);
    width: 100%
}

.button__download .button__body > .icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px
}

.alerts {
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.alerts__alert, .alert {
    background: #0e0e0e;
    border-left: 4px solid #d6a84e;
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 20px 20px 20px;
    width: 100%
}

.window-l {
    background: rgba(0, 0, 0, 0.4);
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .3s ease-in-out;
    width: 100vw;
    z-index: calc(9999 + 1)
}

.window--visible {
    opacity: 1;
    pointer-events: all
}

.sidebar {
    background: #141016;
    box-shadow: 0px 0px 16px -3px rgba(52, 34, 66, 0.25);
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 290px;
    overflow: auto;
    position: fixed;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    width: 290px;
    z-index: calc(9999 + 2)
}

.sidebar__top {
    border-bottom: 1px solid #0e0e0e;
    display: flex;
    justify-content: center;
    padding: 10px 0 10px 0;
    position: relative;
    width: 100%
}

.sidebar__close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: 10px;
    width: 26px
}

.sidebar__close:hover .close__line {
    background: #d6a84e
}

.sidebar__close .close__line {
    background: #fff;
    height: 3px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: center;
    transition: background-color .15s ease-in-out;
    width: 22px
}

.sidebar__close .close__line:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
}

.sidebar__close .close__line:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg)
}

.sidebar__logo {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%);
    height: 70px;
    width: 70px
}

.sidebar__heading {
    align-items: center;
    background: #0f0f10;
    border-bottom: 1px solid #0e0e0e;
    display: flex;
    height: 46px;
    min-height: 46px;
    padding: 0 20px 0 20px
}

.gc {}

.sidebar__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase
}

.sidebar__menu {
    padding: 0 0 120px 0
}

.sidebar__menu .menu__item {
    align-items: center;
    border-bottom: 1px solid #0e0e0e;
    cursor: pointer;
    display: flex;
    height: 52px;
    padding: 0 20px 0 0
}

.sidebar__menu .menu__item .arrow {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 20px;
    justify-content: center;
    transform: rotate(-180deg);
    transition: transform .3s ease-in-out;
    width: 20px
}

.sidebar__menu .menu__item .arrow > i {
    color: #fff;
    font-size: 16px
}

.sidebar__menu .menu__item .arrow--open {
    transform: rotate(0deg)
}

.sidebar__menu .menu__link {
    align-items: center;
    color: #fff;
    display: flex;
    flex: 1;
    height: 100%;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize
}

.sidebar__menu .menu__link::before, .sidebar__menu .menu__link.active::before {
    background: #d6a84e;
    content: '';
    display: inline-block;
    height: 100%;
    margin: 0 14px 0 0;
    opacity: 0;
    transition: opacity .15s ease-in-out;
    width: 6px
}

.sidebar__menu .menu__link.active::before {
    opacity: 1 !important
}

.sidebar__menu .menu__link:hover::before {
    opacity: 1
}

.sidebar__menu .menu__collapsible {
    background: #0f0f10;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    row-gap: 10px;
    transition: max-height .3s ease-in-out, border-bottom .001s ease-in-out .001s
}

.sidebar__menu .menu__collapsible.collapsible--border {
    border-bottom: 1px solid #0e0e0e
}

.sidebar__menu .menu__collapsible .collapsible__item {
    align-items: center;
    display: flex;
    padding: 0 20px 0 30px
}

.sidebar__menu .menu__collapsible .collapsible__item:first-child {
    padding: 20px 20px 0 30px
}

.sidebar__menu .menu__collapsible .collapsible__item:last-child {
    padding: 0 20px 20px 30px
}

.sidebar__menu .menu__collapsible .collapsible__link {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;
    transition: color .15s ease-in-out
}

.sidebar__menu .menu__collapsible .collapsible__link:hover {
    color: #d6a84e
}

.sidebar--visible {
    transform: translateX(0)
}

.header__top {
    align-items: center;
    background: #0d0c0c;
    border-bottom: 1px solid #7c4b12;
    display: flex;
    height: 62px;
    justify-content: center;
    width: 100%
}

.header__top .container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    max-width: 1280px;
    width: 100%
}

.header__auth {
    column-gap: 16px;
    display: flex
}

.header__social {
    display: none
}

.header__nav {
    align-items: center;
    background: #060405;
    display: flex;
    height: 88px;
    justify-content: center;
    width: 100%
}

.header__nav .header__portable {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    max-width: 1280px;
    position: relative;
    width: 100%
}

.header__nav .header__desktop {
    display: none
}

.header__mobile {
    align-items: center;
    display: flex;
    height: 88px;
    justify-content: center;
    left: 0;
    position: absolute;
    width: 88px
}

.header .mobile__button {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 48px;
    justify-content: center;
    row-gap: 6px;
    width: 48px
}

.header .mobile__button:hover .mobile__line {
    background: #d6a84e
}

.header .mobile__line {
    background: #fff;
    height: 3px;
    transform: skew(-14deg);
    transition: background-color .15s ease-in-out;
    width: 30px
}

.header__logo {
    align-items: center;
    display: flex;
    height: 88px;
    justify-content: center;
    width: 88px
}

.header__logo > img {
    height: 70px;
    width: 70px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%)
}

@media screen and (min-width: 610px) {
    .header__top .container {
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 0 20px 0 20px
    }

    .header__social {
        column-gap: 10px;
        display: flex
    }

    .header__social .social__box {
        align-items: center;
        background: #1a1208;
        border-radius: 6px;
        color: #fff;
        display: flex;
        font-size: 18px;
        height: 35px;
        justify-content: center;
        text-decoration: none;
        transition: background-color .03s ease-in-out, color .03s ease-in-out .03s;
        width: 35px
    }

    .header__social .social__box:hover {
        background: #060405;
        color: #fff;
    }
}

@media screen and (min-width: 1240px) {
    .header__top .container {
        padding: 0 70px 0 70px
    }

    .header__nav {
        height: 100px
    }

    .header__nav .header__portable {
        display: none
    }

    .header__nav .header__desktop {
        display: flex;
        height: 100%;
        justify-content: center;
        max-width: 1280px;
        padding: 0 60px 0 60px;
        position: relative;
        width: 100%
    }

    .header__nav .header__desktop .wrapper {
        display: flex;
        height: 100%;
        justify-content: center;
        max-width: 1280px;
        overflow: hidden;
        width: 100%
    }

    .header__nav .header__menu-box {
        border-left: 1px solid #7c4b12;
        border-right: 1px solid #7c4b12;
        height: calc(100% + 8px);
        width: 100%;
        transform: perspective(22px) rotateX(-1deg);
        transform-origin: top
    }

    .header__nav .header__menu-area {
        display: flex;
        height: 100%;
        justify-content: start;
        padding: 0 60px 0 60px;
        position: absolute;
        top: 0;
        width: inherit
    }

    .header__nav .header__menu-area .logo-reference {
        height: 100%;
        width: 236px
    }

    .header__nav .header__menu-area .menu__left {
        justify-content: start;
        padding: 6px 30px 0 0
    }

    .header__nav .header__menu-area .menu__right {
        justify-content: start;
        padding: 6px 0 0 30px
    }

    .header__nav .header__menu-area .menu__right, .header__nav .header__menu-area .menu__left {
        display: flex;
        flex: 1;
        height: 100%;
        width: 100%;
        margin: 0px 0px 0px 78px;
    }

    .header__nav .header__menu-area .menu__links {
        column-gap: 20px;
        display: flex;
        height: 100%
    }

    .header__nav .header__menu-area .menu__item {
        height: 100%;
        position: relative
    }

    .header__nav .header__menu-area .menu__item:hover .menu__link::after {
        opacity: 1
    }

    .header__nav .header__menu-area .menu__item:hover .menu__dropdown {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .2s ease-in, transform .2s ease-in;
        visibility: visible
    }

    .header__nav .header__menu-area .menu__link {
        align-items: center;
        color: #fff;
        display: flex;
        font-family: "Rajdhani", serif;
        font-size: 18px;
        font-weight: 600;
        height: 100%;
        padding: 0 10px 0 10px;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        width: max-content
    }

    .header__nav .header__menu-area .menu__link::after, .header__nav .header__menu-area .menu__link.active::after {
        background: #7c4b12;
        bottom: 0;
        content: '';
        height: 10px;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: skew(22deg);
        transition: opacity .15s ease-in-out;
        width: 100%
    }

    .header__nav .header__menu-area .menu__link.active::after {
        opacity: 1 !important
    }

    .header__nav .header__menu-area .menu__link:hover::after {
        opacity: 1
    }

    .header__nav .header__menu-area .menu__dropdown {
        background: rgba(21, 11, 29, 0.97);
        display: flex;
        flex-direction: column;
        left: -2px;
        opacity: 0;
        padding: 20px 20px 20px 20px;
        position: absolute;
        row-gap: 18px;
        transform: translateY(10%);
        transition: opacity .1s ease-out .05s, transform .1s ease-out, visibility 0s linear .1s;
        visibility: hidden;
        width: 260px;
        z-index: calc(9999 - 1)
    }

    .header__nav .header__menu-area .menu__dropdown .dropdown__item {
        align-items: center;
        display: flex;
        height: 100%
    }

    .header__nav .header__menu-area .menu__dropdown .dropdown__link {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 16px;
        font-weight: 600;
        height: 100%;
        padding: 2px 0 2px 0;
        text-decoration: none;
        text-transform: uppercase;
        transition: margin .5s ease-in-out
    }

    .header__nav .header__menu-area .menu__dropdown .dropdown__link::before {
        background: #d6a84e;
        content: '';
        display: inline-block;
        height: 3px;
        margin: 0 0 0 0;
        transform: skew(22deg);
        transition: margin .05s ease-in-out, width .15s ease-in-out .05s;
        vertical-align: middle;
        width: 0px
    }

    .header__nav .header__menu-area .menu__dropdown .dropdown__link:hover::before {
        margin: 0 8px 0 0;
        width: 20px
    }

    .header__nav .header__logo-box {
        background: #fff;
        height: 210px;
        position: absolute;
        top: 0;
        transform: perspective(5px) rotateX(-1deg);
        transform-origin: top;
        width: 236px;
        z-index: calc(9999 - 1)
    }

    .header__nav .header__logo-area {
        align-items: center;
        background: transparent;
        display: flex;
        height: 122px;
        justify-content: center;
        position: absolute;
        top: 0;
        width: 236px;
        z-index: 9999
    }

    .header__nav .header__logo-area > img {
        height: 104px;
        filter: invert(4%) sepia(1%) saturate(2727%) hue-rotate(211deg) brightness(91%) contrast(95%);
        width: 104px
    }
}

.banner {
    background: #0f0f10;
    height: 600px;
    max-height: 600px;
    min-height: 600px;
    width: 100%
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.banner .wrapper {
    height: inherit;
    justify-content: center;
    max-height: inherit;
    min-height: inherit;
    position: relative;
    width: 100%
}

.banner .wrapper .container {
    height: inherit;
    max-width: 1280px;
    position: absolute;
    width: 100%
}

.banner__image {
    height: inherit;
    max-height: inherit;
    max-width: 1920px;
    min-height: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%
}

.banner__slogan {
    display: none
}

.banner video
{
    position: relative;
    top: 700px;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-70%);
    background-size: cover;
    transition: 1s opacity;
}

@media screen and (min-width: 880px) {
    .banner {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }
}

@media screen and (min-width: 910px) {
    .banner .wrapper .container {
        display: flex;
        justify-content: center
    }

    .banner__slogan {
        background: rgba(15, 15, 16, 0.4);
        bottom: 52px;
        display: flex;
        flex-direction: column;
        padding: 20px 20px 20px 20px;
        position: absolute;
        row-gap: 20px
    }

    .banner__slogan .slogan__title {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 62px;
        font-weight: 700;
        text-transform: uppercase
    }

    .banner__slogan .slogan__buttons {
        column-gap: 20px;
        display: flex;
        justify-content: center
    }
}

@media screen and (min-width: 1200px) {
    .banner {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }

    .banner__slogan {
        left: 100px
    }

    .banner__slogan .slogan__buttons {
        justify-content: start;
        padding: 0 0 0 14px
    }
}

@media screen and (min-width: 1600px) {
    .banner {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }
}

.marquee {
    background: #060405;
    display: flex;
    height: 40px;
    width: 100%
}

.marquee__left, .marquee__right {
    background: #7c4b12;
    flex: 1;
    position: relative;
    width: 100%;
    z-index: 9999
}

.marquee__left::after {
    background: inherit;
    content: '';
    height: 100%;
    position: absolute;
    right: -15px;
    top: 0;
    transform: skewX(-22deg);
    width: 35px
}

.marquee__right::after {
    background: inherit;
    content: '';
    height: 100%;
    position: absolute;
    left: -15px;
    top: 0;
    transform: skewX(22deg);
    width: 35px
}

.marquee__content {
    background: transparent;
    display: flex;
    justify-content: center;
    max-width: calc(918px + 30px);
    width: 75%
}

.marquee__track {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    visibility: hidden;
    width: 100%
}

.marquee__track p {
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.marquee__track p > span {
    margin: 0 0 0 80px
}

.marquee__track p > span::before {
    content: '//';
    color: #d6a84e;
    margin: 0 8px 0 0
}

.marquee__track p > span > a {
    color: #d6a84e;
    font-style: italic;
    margin: 0 0 0 10px;
    text-decoration: none
}

.marquee__track p > span > a:hover {
    text-decoration: underline
}

.breadcrumbs {
    align-items: center;
    background: rgba(16, 9, 21, 0.6) url(../img/breadcrumb.jpg) no-repeat center/cover;
    background-blend-mode: lighten;
    display: flex;
    justify-content: center;
    padding: 40px 10px 40px 10px;
    width: 100%
}

.breadcrumbs .wrapper {
    width: 100%
}

.breadcrumbs .container {
    max-width: 1280px;
    width: 100%;
    z-index: calc(9999 - 3)
}

.breadcrumbs__body {
    align-items: center;
    display: flex;
    height: 46px;
    width: 100%
}

.breadcrumbs__body::before {
    background: #d6a84e;
    display: inline-block;
    content: '';
    height: 46px;
    margin: 0 18px 0 10px;
    transform: skew(-22deg);
    vertical-align: middle;
    width: 4px
}

.breadcrumbs__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 0 -2px;
    text-transform: uppercase;
    width: 100%
}

.breadcrumbs__pages {
    display: none
}

@media screen and (min-width: 410px) {
    .breadcrumbs .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        row-gap: 2px;
        width: 100%
    }

    .breadcrumbs__body {
        height: 68px
    }

    .breadcrumbs__body::before {
        height: 58px;
        margin: 0 20px 0 12px
    }

    .breadcrumbs__title {
        font-size: 38px
    }

    .breadcrumbs__pages {
        align-items: center;
        column-gap: 4px;
        display: flex;
        height: max-content
    }

    .breadcrumbs__pages > li:not(:first-child)::before {
        color: #d6a84e;
        content: '/';
        font-family: "Rajdhani", serif;
        font-size: 16px;
        font-weight: 600
    }

    .breadcrumbs__link {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none
    }
}

@media screen and (min-width: 610px) {
    .breadcrumbs {
        padding: 40px 20px 40px 20px
    }

    .breadcrumbs__body {
        height: 80px
    }

    .breadcrumbs__body::before {
        height: 80px;
        margin: 0 34px 0 16px;
        width: 6px
    }

    .breadcrumbs__title {
        font-size: 58px
    }
}

@media screen and (min-width: 768px) {
    .breadcrumbs {
        height: 242px;
        padding: 0 20px 0 20px
    }
}

@media screen and (min-width: 1200px) {
    .breadcrumbs {
        padding: 0 0 0 0
    }

    .breadcrumbs .container {
        padding: 0 100px 0 100px
    }
}

.content {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.content .container {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 40px 0 70px 0;
    max-width: 1280px;
    min-width: 0;
    padding: 0 10px 0 10px;
    row-gap: 40px;
    width: 100%
}

@media screen and (min-width: 610px) {
    .content .container {
        padding: 0 20px 0 20px
    }
}

@media screen and (min-width: 768px) {
    .content .container {
        align-items: start;
        column-gap: 40px;
        display: flex;
        flex-direction: row
    }
}

@media screen and (min-width: 1200px) {
    .content .container {
        padding: 0 60px 0 60px
    }
}

.heading__column-title {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 26px;
    font-weight: 700;
    height: 30px;
    text-transform: uppercase
}

.heading__column-title::before {
    background: #d6a84e;
    display: inline-block;
    content: '';
    height: 26px;
    margin: 0 18px 0 0;
    transform: skew(-22deg);
    vertical-align: middle;
    width: 3px
}

.heading__main-title {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%
}

.heading__main-title::before {
    background: #d6a84e;
    display: inline-block;
    content: '';
    height: 32px;
    margin: 0 18px 0 0;
    transform: skew(-22deg);
    vertical-align: middle;
    width: 3px
}

.heading__main-subtitle {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%
}

.heading__main-subtitle::before {
    background: #d6a84e;
    display: inline-block;
    content: '';
    height: 28px;
    margin: 0 14px 0 0;
    transform: skew(-22deg);
    vertical-align: middle;
    width: 3px
}

@media screen and (min-width: 768px) {
    .heading__main-title {
        font-size: 40px
    }

    .heading__main-title::before {
        height: 40px;
        margin: 0 20px 0 0;
        width: 4px
    }
}

.column {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 36px;
    width: 100%
}

.column__default {
    align-items: center;
    row-gap: 6px;
    display: flex;
    flex-direction: column
}

.column__content {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%
}

.column__box {
    align-items: center;
    background: #060606;
    display: flex;
    padding: 20px 26px 20px 26px;
    width: 100%
}

@media screen and (min-width: 768px) {
    .column {
        flex: 1;
        min-width: 256px;
        width: 256px
    }
}

.status__loading {
    background: #0e0e0e;
    height: 24px;
    transform: skew(-27deg);
    width: 100%
}

.status__loaded {
    background: repeating-linear-gradient(45deg, #20d15b, #20d15b 12px, #48d474 12px, #48d474 24px);
    height: 24px
}

.status__description {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.status__total {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 46px;
    font-weight: 700
}

.summary__definition {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.summary__detail {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.event__time {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.event__description {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    width: 100%
}

.event__name {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.event__hour {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    row-gap: 40px;
    width: 100%
}

.main__title {
    align-items: center;
    display: flex;
    height: 80px;
    margin: 0 0 14px 0;
    padding: 0 16px 0 20px;
    width: 100%
}

.main__title .title__link {
    display: none
}

.main__subtitle {
    align-items: center;
    display: flex;
    height: 56px;
    margin: 0 0 10px 0;
    padding: 0 16px 0 20px;
    width: 100%
}

.main__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%
}

@media screen and (min-width: 610px) {
    .main__title {
        display: flex;
        justify-content: space-between
    }

    .main__title .title__link {
        display: block
    }
}

@media screen and (min-width: 920px) {
    .main__title {
        padding: 0 20px 0 20px
    }
}

.table {
    display: flex;
    flex-direction: column;
    letter-spacing: 0.1px;
    row-gap: 2px;
    width: 100%
}

.table__wrapper {
    overflow-x: auto !important;
    width: 100%
}

.table thead, .table tbody {
    height: 100%;
    width: 100%
}

.table thead, .table tbody {
    display: flex;
    flex-direction: column;
    row-gap: 2px
}

.table tr {
    column-gap: 2px;
    display: flex;
    height: 100%;
    justify-content: space-around;
    text-align: center;
    width: 100%
}

.table a {
    color: #fff;
    text-decoration: none;
}

.table th, .table td {
    align-items: center;
    background: #060606;
    display: flex;
    font-family: "Rajdhani", serif;
    font-weight: 600;
    justify-content: center;
    padding: 14px 16px 14px 16px;
    text-transform: uppercase;
    width: 100%
}

.table th {
    color: #d6a84e;
    font-size: 16px
}

.table th > span {
    color: #fff
}

.table td {
    color: #fff;
    font-size: 15px
}

.table td > span {
    color: #d6a84e
}

.news {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%
}

.news__item {
    align-items: center;
    background: #060606;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 20px 20px 20px;
    row-gap: 8px;
    transition: background-color .15s ease-in-out;
    width: 100%
}

.news__item:hover {
    background: #0e0e0e;
}

.news__item:has(.news__title:hover) {
    background: #0e0e0e
}

.news__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .05s ease-in-out .03s;
    width: 100%
}

.news__title:hover {
    color: #ffffff
}

.news__description {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    width: 100%
}

@media screen and (min-width: 610px) {
    .news__item {
        justify-content: start
    }

    .news__title {
        text-align: start
    }

    .news__description {
        text-align: start
    }
}

@media screen and (min-width: 840px) {
    .news--grid {
        column-gap: 20px;
        display: grid;
        grid-template-columns:1fr 1fr
    }
}

.post {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%
}

.post__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    word-break: break-word
}

.post__content {
    border-bottom: 1px solid #7c4b12;
    display: flex;
    flex-direction: column;
    padding: 0 0 30px 0;
    row-gap: 20px;
    width: 100%
}

.post__text {
    color: #fff;
    font-family: "Work Sans", sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.2;
    line-height: 1.2
}

.post__figure {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%
}

.post__img {
    border: 4px solid #d6a84e;
    height: auto;
    object-fit: cover;
    width: 100%
}

.post__figcaption {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase
}

.post__list {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    width: 100%
}

.post__list .list__item {
    align-items: center;
    display: inline-flex;
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    letter-spacing: 0.2;
    line-height: 1.2
}

.post__list .list__item::before {
    background: #d6a84e;
    content: '';
    display: inline-block;
    height: 7px;
    margin: 0 10px 0 0;
    width: 7px
}

.post__description {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    width: 100%
}

@media screen and (min-width: 700px) {
    .post__img {
        height: auto;
        width: auto
    }
}

.castle {
    background: #060606;
    padding: 20px 20px 20px 20px;
    width: 100%
}

.castle__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 18px;
    width: 100%
}

.castle__guild {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 14px;
    width: 100%
}

.castle__guild .guild__emblem {
    border: 3px solid #d6a84e;
    height: 60px;
    width: 60px
}

.castle__guild .guild__name {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 28px;
    font-weight: 700
}

.castle__description {
    display: none
}

@media screen and (min-width: 460px) {
    .castle__description {
        border-top: 1px solid #0f0f10;
        column-gap: 40px;
        display: flex;
        justify-content: space-around;
        padding: 20px 0 0 0;
        width: 100%
    }

    .castle__description .description__item {
        align-items: center;
        display: flex;
        flex-direction: column;
        row-gap: 6px
    }

    .castle__description .description__definition {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 20px;
        font-weight: 700
    }

    .castle__description .description__definition > span {
        color: #d6a84e
    }

    .castle__description .description__detail {
        color: #d6a84e;
        font-family: "Rajdhani", serif;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase
    }
}

@media screen and (min-width: 960px) {
    .castle__content {
        flex-direction: row;
        justify-content: space-between
    }

    .castle__guild {
        column-gap: 20px;
        flex-direction: row;
        row-gap: 0;
        width: max-content
    }

    .castle__description {
        border-top: none;
        column-gap: 36px;
        flex: 1;
        justify-content: end;
        width: 100%;
        padding: 0 0 0 0
    }

    .castle__description .description__item {
        align-items: start
    }
}

.rankings__title {
    display: none
}

.rankings__content {
    column-gap: 20px;
    display: flex;
    user-select: none;
    width: 100% !important
}

.rankings__item {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%
}

.rankings__box {
    align-items: center;
    background: #060606;
    display: flex;
    padding: 20px 26px 20px 26px;
    width: 100%
}

.rankings__menu {
    background: #060606;
    display: flex;
    justify-content: center;
    padding: 20px 20px 0 20px;
    width: 100%
}

.rankings__menu .menu__links {
    align-items: start;
    column-gap: 2px;
    height: 44px;
    display: flex
}

.rankings__menu .menu__link {
    align-items: start;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600;
    height: 44px;
    padding: 0 8px 0 8px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: max-content
}

.rankings__menu .menu__link::after, .rankings__menu .menu__link.active::after {
    background: #d6a84e;
    bottom: 0;
    content: '';
    height: 10px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: skew(22deg);
    transition: opacity .15s ease-in-out;
    width: 100%
}

.rankings__menu .menu__link.active::after {
    opacity: 1 !important
}

.rankings__menu .menu__link:hover::after {
    opacity: 1
}

.rankings--rating {
    height: 68px !important;
    padding: 0 22px 0 10px !important;
    column-gap: 10px
}

.rankings__rank {
    align-items: center;
    background: #0e0e0e;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    width: 42px
}

.rankings__rank > span {
    color: #d6a84e
}

.rankings__player {
    align-items: start;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    row-gap: 2px;
    width: 100%
}

.rankings__character {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 17px;
    font-weight: 700
}

.rankings__class {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase
}

.rankings__guild {
    align-items: center;
    column-gap: 6px;
    display: flex;
    flex: 1
}

.rankings__guild-name {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 17px;
    font-weight: 700
}

.rankings__emblem {
    border: 1px solid #d6a84e;
    height: 28px;
    width: 28px
}

.rankings__score {
    align-items: center;
    background: #0e0e0e;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    padding: 0 14px 0 14px;
    transform: skew(-22deg);
    width: max-content
}

.rankings__score > span {
    transform: skew(22deg);
    display: inline-block
}

@media screen and (min-width: 320px) {
    .rankings__item {
        max-width: 286px
    }
}

@media screen and (min-width: 460px) {
    .rankings__flag-title {
        display: none !important
    }

    .rankings__title {
        align-items: center;
        display: flex;
        justify-content: end;
        height: 100%;
        margin: 0 0 14px 0;
        width: 100%
    }

    .rankings__heading {
        color: #fff;
        flex: 1;
        font-family: "Rajdhani", serif;
        font-size: 50px;
        font-weight: 700;
        text-align: end;
        text-transform: uppercase;
        width: 100%
    }

    .rankings__tag {
        display: none
    }
}

@media screen and (min-width: 960px) {
    .rankings__title {
        height: 136px;
        position: relative
    }

    .rankings__heading {
        font-size: 64px;
        margin: 0 52px 0 0
    }

    .rankings__tag {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 16px;
        font-weight: 700;
        display: inline-block;
        position: absolute;
        right: -30px;
        text-transform: uppercase;
        transform: rotate(270deg)
    }

    .rankings__tag > span {
        color: #d6a84e !important
    }
}

.form {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%
}

.form__content {
    background: #060606;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 20px;
    width: 100%
}

.form__columns {
    display: grid;
    grid-template-columns:1fr;
    row-gap: 20px;
    width: 100%
}

.form__group {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%
}

.form__group > label {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.form__group > input[type="text"], .form__group > input[type="search"], .form__group > input[type="password"], .form__group > input[type="email"], .form__group > input[type="file"], .form__group > select, .form__group > textarea {
    background: #0e0e0e;
    border: 2px solid transparent;
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    outline: none;
    padding: 0 20px 0 20px;
    transition: border .15s ease-in-out, box-shadow .1s ease-in-out .1s;
    width: 100%
}

.form__group > input[type="text"]:focus, .form__group > input[type="password"]:focus, .form__group > input[type="email"]:focus, .form__group > input[type="file"]:focus, .form__group > select:focus, .form__group > select:textarea {
    border: 2px solid #d6a84e;
    box-shadow: 0 0 0 2px #0e0e0e
}

.form__group > input[type="text"]::placeholder, .form__group > input[type="password"]::placeholder, .form__group > input[type="email"]::placeholder, .form__group > input[type="file"]::placeholder, .form__group > select::placeholder, .form__group > select::textarea {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500
}

.form__checkbox {
    align-items: center;
    background: #0e0e0e;
    cursor: pointer;
    display: flex;
    height: 56px;
    padding: 0 20px 0 calc(20px + 18px + 10px);
    position: relative
}

.form__checkbox > .description {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500
}

.form__checkbox > .description > a {
    color: #d6a84e;
    text-decoration: none
}

.form__checkbox input[type="checkbox"] {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.form__checkbox .checkmark {
    background: #181818;
    cursor: pointer;
    height: 18px;
    left: 20px;
    position: absolute;
    width: 18px
}

.form__checkbox input[type="checkbox"]:checked ~ .checkmark {
    background: #161616 url(../img/icons/checked.svg) center no-repeat;
    background-size: 10px 10px
}

.form__button {
    padding: 0 8px 0 8px
}

.form__button button {
    justify-content: center
}

@media screen and (min-width: 700px) {
    .form__columns {
        column-gap: 20px;
        grid-template-columns:1fr 1fr
    }

    .form .button--submit {
        width: 186px
    }
}

.info {
    background: #060606;
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    padding: 20px 20px 20px 20px;
    row-gap: 20px;
    width: 100%
}

.info__item {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%
}

.info__definition {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.info__box {
    align-items: center;
    background: #0e0e0e;
    display: flex;
    height: 50px;
    max-height: 100%;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    width: 100%;
    word-break: break-word
}

.info__detail {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500
}

@media screen and (min-width: 700px) {
    .info {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 768px) {
    .info {
        grid-template-columns:1fr
    }
}

@media screen and (min-width: 996px) {
    .info {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 700px) {
    .register--checkbox {
        max-width: 280px
    }

    .register--checkbox a:hover {
        text-decoration: underline
    }
}

.login {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%
}

.login__heading {
    background: #060606;
    display: flex;
    padding: 28px 26px 28px 30px;
    width: 100%
}

.login__title {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 26px;
    font-weight: 700;
    height: 30px;
    text-transform: uppercase
}

.login__title::before {
    background: #d6a84e;
    display: inline-block;
    content: '';
    height: 26px;
    margin: 0 18px 0 0;
    transform: skew(-22deg);
    vertical-align: middle;
    width: 3px
}

.login__content {
    background: #060606;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 20px;
    width: 100%
}

.login__additional {
    align-items: center;
    border-top: 1px solid #0f0f10;
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 0;
    row-gap: 10px
}

.login__additional > span {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500
}

.login__additional a {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none
}

.login__additional a:hover {
    text-decoration: underline
}

@media screen and (min-width: 410px) {
    .login {
        max-width: 506px
    }

    .login__heading {
        padding: 30px 26px 30px 30px
    }

    .login__title {
        font-size: 40px
    }

    .login__title::before {
        height: 40px;
        margin: 0 20px 0 0;
        width: 4px
    }
}

.characters {
    display: flex;
    flex-direction: column;
    row-gap: 36px;
    width: 100%
}

.characters__item {
    align-items: start;
    display: flex;
    flex-direction: column;
    width: 100%
}

.characters__content {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%
}

.characters__guild {
    column-gap: 8px
}

.characters__emblem {
    border: 1px solid #d6a84e;
    height: 22px;
    width: 22px
}

.package {
    align-items: center;
    background: #060606;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 10px;
    width: 100%
}

.package__title {
    border-bottom: 1px solid #0f0f10;
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 26px;
    font-weight: 700;
    padding: 0 0 10px 0;
    text-align: center;
    width: 100%
}

.package__body {
    align-items: center;
    border-bottom: 1px solid #0f0f10;
    display: flex;
    flex-direction: column;
    padding: 0 0 10px 0;
    row-gap: 6px;
    width: 100%
}

.package__amount {
    color: #ebcd0e;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 600
}

.package__bonus {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600
}

.package__price {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 700
}

.package__button {
    width: 100%;
    padding: 0 8px 0 8px
}

@media screen and (min-width: 700px) {
    .package__title {
        font-size: 22px
    }
}

@media screen and (min-width: 920px) {
    .package__title {
        font-size: 26px
    }
}

.cards {
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    row-gap: 36px;
    width: 100%
}
.cards.cards-characters {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (min-width: 518px) {
    .cards {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 700px) {
    .cards {
        grid-template-columns:1fr 1fr 1fr
    }
}

@media screen and (min-width: 768px) {
    .cards {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 1054px) {
    .cards {
        grid-template-columns:1fr 1fr 1fr
    }
}

.payments {
    background: #060606;
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    padding: 20px 20px 20px 20px;
    row-gap: 20px;
    width: 100%
}

.payments__box {
    align-items: center;
    background: #0e0e0e;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 10px;
    width: 100%
}

.payments__logo {
    align-items: center;
    display: flex;
    height: 108px;
    justify-content: center;
    width: 100%
}

.payments__logo > img {
    height: 92px;
    object-fit: contain;
    width: calc(100% - 16px)
}

@media screen and (min-width: 560px) {
    .payments {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 768px) {
    .payments__logo {
        height: 94px
    }

    .payments__logo > img {
        height: 78px
    }
}

@media screen and (min-width: 940px) {
    .payments__logo {
        height: 108px
    }

    .payments__logo > img {
        height: 92px
    }
}

.security {
    display: flex;
    flex-direction: column;
    row-gap: 36px;
    width: 100%
}

.about {
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    row-gap: 36px;
    width: 100%
}

.about__item {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%
}

.about__box {
    align-items: center;
    background-color: #060606;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 20px 26px;
    text-align: center;
    width: 100%
}

.about__definition {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.about__detail {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

@media screen and (min-width: 586px) {
    .about {
        grid-template-columns:repeat(4, 1fr)
    }

    .about__item {
        grid-column: span 2
    }

    .about__item:last-child {
        grid-column: 2 / span 2
    }
}

@media screen and (min-width: 890px) {
    .about {
        grid-template-columns:1fr 1fr 1fr;
        max-width: 840px
    }

    .about__item {
        grid-column: auto !important
    }
}

.evolution {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%
}

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

.evolution__line {
    display: none
}

.evolution__badge {
    display: none
}

.evolution__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.evolution__heading {
    align-items: center;
    display: flex;
    font-family: "Rajdhani", serif;
    flex-direction: column;
    margin: 0 0 10px 0;
    row-gap: 2px;
    width: 100%
}

.evolution__title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase
}

.evolution__subtitle {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize
}

.evolution__box {
    align-items: center;
    background: #060606;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 10px;
    width: 100%
}

.evolution__points {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase
}

.evolution__award {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: max-content
}

.evolution__award:hover .evolution__tooltip {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .3s ease-in-out;
    visibility: visible
}

.evolution__tooltip {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    opacity: 0;
    padding: 10px 20px 10px 20px;
    pointer-events: none;
    position: absolute;
    row-gap: 4px;
    top: calc(100% + 10px);
    transition: opacity .3s ease-in-out, visibility 0s linear .3s;
    visibility: hidden;
    width: 210px
}

.evolution__tooltip::after {
    bottom: calc(100% - 5px);
    border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
    border-style: solid;
    border-width: 5px;
    content: '';
    left: 50%;
    margin-left: -5x;
    position: absolute;
    transform: translate(-50%, -50%)
}

.evolution__tooltip .tooltip__item {
    color: #141016;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600
}

.evolution__tooltip .tooltip__detail {
    color: #d6a84e
}

.evolution__description {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
    row-gap: 4px;
    width: 100%
}

@media screen and (min-width: 380px) {
    .evolution__item {
        max-width: 312px
    }
}

@media screen and (min-width: 710px) {
    .evolution {
        height: 100%;
        max-width: 820px;
        position: relative
    }

    .evolution__content {
        justify-content: end;
        padding: 20px 0 20px 0;
        position: relative
    }

    .evolution__content:nth-child(even) {
        justify-content: start
    }

    .evolution__line {
        background: #2d2137;
        display: block;
        height: 100%;
        position: absolute;
        width: 5px
    }
}

@media screen and (min-width: 740px) {
    .evolution__badge {
        background: #060606;
        display: block;
        height: 40px;
        left: 50%;
        transform: translate(-50%);
        position: absolute;
        width: 40px
    }
}

.awards {
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    row-gap: 36px;
    width: 100%
}

.awards__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%
}

@media screen and (min-width: 1200px) {
    .awards {
        grid-template-columns:1fr 1fr
    }
}

.commands {
    display: grid;
    grid-template-columns:1fr;
    row-gap: 36px;
    width: 100%
}

.commands__column {
    display: flex;
    flex-direction: column;
    row-gap: 36px;
    width: 100%
}

.commands__item {
    display: flex;
    flex-direction: column;
    width: 100%
}

.commands__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 18px 0;
    text-transform: uppercase
}

.commands__list {
    display: flex;
    flex-direction: column;
    width: 100%
}

.commands__definition {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px 0
}

.commands__detail {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 12px 0;
    text-transform: uppercase
}

.commands__detail:last-child, .commands__detail:only-child {
    margin: 0 0 0 0
}

@media screen and (min-width: 680px) {
    .commands {
        grid-template-columns:1fr 1fr
    }

    .commands__list {
        padding: 0 0 0 20px
    }
}

.downloads {
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    row-gap: 36px;
    width: 100%
}

.downloads__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    row-gap: 2px;
    width: 100%
}

.downloads__box {
    background: #060606;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 30px 20px 30px;
    row-gap: 20px;
    width: 100%
}

@media screen and (min-width: 860px) {
    .downloads {
        grid-template-columns:1fr 1fr
    }
}

.drivers {
    background: #060606;
    column-gap: 20px;
    display: grid;
    grid-template-columns:1fr;
    padding: 20px 20px 20px 20px;
    row-gap: 20px;
    width: 100%
}

.drivers__box {
    align-items: center;
    background: #0e0e0e;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    row-gap: 10px;
    width: 100%
}

.drivers__logo {
    align-items: center;
    background: #fff;
    display: flex;
    height: 100px;
    justify-content: center;
    width: 100px
}

.drivers__logo > img {
    height: 84px;
    object-fit: cover;
    width: 84px
}

.drivers__description {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    row-gap: 4px;
    width: 100%
}

.drivers__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 24px;
    font-weight: 600
}

.drivers__link {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase
}

.drivers__link:hover {
    text-decoration: underline
}

@media screen and (min-width: 480px) {
    .drivers__box {
        column-gap: 14px;
        flex-direction: row
    }

    .drivers__description {
        align-items: start
    }

    .drivers__title {
        font-size: 26px
    }
}

@media screen and (min-width: 710px) {
    .drivers {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 768px) {
    .drivers__title {
        font-size: 28px
    }
}

.ranking {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%
}

.ranking__menu {
    background: #060606;
    display: flex;
    justify-content: center;
    padding: 20px 20px 0 20px;
    width: 100%
}

.ranking__menu .menu__links {
    align-items: start;
    column-gap: 2px;
    height: 40px;
    display: flex
}

.ranking__menu .menu__link {
    align-items: start;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 17px;
    font-weight: 600;
    height: 40px;
    padding: 0 4px 0 4px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: max-content
}

.ranking__menu .menu__link::after, .ranking__menu .menu__link.active::after {
    background: #d6a84e;
    bottom: 0;
    content: '';
    height: 10px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: skew(22deg);
    transition: opacity .15s ease-in-out;
    width: 100%
}

.ranking__menu .menu__link.active::after {
    opacity: 1 !important
}

.ranking__menu .menu__link:hover::after {
    opacity: 1
}

.ranking__score {
    align-items: center;
    background: #0e0e0e;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    padding: 0 14px 0 14px;
    transform: skew(-22deg);
    width: max-content
}

.ranking__score > span {
    transform: skew(22deg);
    display: inline-block
}

.ranking__character {
    column-gap: 2px
}

.ranking__character > .status {
    column-gap: 4px;
    display: flex;
    height: 100%;
    margin: -10px 0 0 0
}

.ranking__character > .status > .online, .ranking__character > .status > .vip {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 10px;
    font-weight: 700;
    height: 15px;
    padding: 0 8px 0 8px;
    text-transform: uppercase
}

.ranking__character > .status > .online {
    background: #6ab961
}

.ranking__character > .status > .vip {
    background: #d6a84e
}

.ranking__guild {
    column-gap: 8px
}

.ranking__emblem {
    border: 1px solid #d6a84e;
    height: 22px;
    width: 22px
}

@media screen and (min-width: 410px) {
    .ranking__menu {
        justify-content: start
    }

    .ranking__menu .menu__links {
        height: 44px
    }

    .ranking__menu .menu__link {
        font-size: 18px;
        height: 44px;
        padding: 0 8px 0 8px
    }
}

.pagination {
    display: flex;
    justify-content: center;
    width: 100%
}

.pagination__list {
    column-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px
}

.pagination__link {
    align-items: center;
    border: 2px solid transparent;
    color: #fff;
    background: #060606;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    transition: all .18s ease-in-out;
    width: 40px
}

.pagination__link:not(.disabled):hover {
    border: 2px solid #d6a84e;
    color: #d6a84e
}

.pagination__link.disabled {
    color: #7f6c8d
}

.pagination__link.active {
    border: 2px solid #d6a84e;
    color: #d6a84e
}

.footer {
    margin-top: auto
}

.footer__top {
    background: #060405;
    /*border-bottom: 1px solid #7c4b12;*/
    border-top: 1px solid #7c4b12;
    width: 100%
}

.footer__portable {
    padding: 34px 10px 34px 10px
}

.footer__desktop {
    display: none
}

.footer__social {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.footer__social .social__box {
    align-items: center;
    background: #1a1208;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: 20px;
    height: 42px;
    justify-content: center;
    text-decoration: none;
    transition: background-color .03s ease-in-out, color .03s ease-in-out .03s;
    width: 42px
}

.footer__social .social__box:hover {
    background: #101010;
    color: #fff;
}

.footer__copy {
    background: #0f0f10;
    width: 100%
}

.footer__copy .container {
    align-items: center;
    background: #0f0f10;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 1280px;
    padding: 22px 10px 22px 10px;
    width: 100%
}

.footer__copy .copy__made-by {
    display: none
}

.footer__copy .copy__text {
    color: #d6a84e;
    font-family: "Rajdhani", serif;
    font-weight: 700;
    font-size: 15px;
    height: 100%;
    text-align: center;
    text-transform: uppercase
}

.footer__copy .copy__text .symbol {
    color: #d6a84e !important;
    font-size: 22px;
    vertical-align: middle
}

.footer__copy .copy__text > a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-transform: none;
    transition: text-decoration-color .15s ease-in-out
}

.footer__copy .copy__text > a:hover {
    text-decoration-color: #d6a84e
}

@media screen and (min-width: 610px) {
    .footer__portable {
        padding: 34px 10px 34px 10px
    }

    .footer__copy .container {
        padding: 22px 20px 22px 20px
    }
}

@media screen and (min-width: 796px) {
    .footer__copy .container {
        justify-content: space-between
    }

    .footer__copy .copy__made-by {
        color: #d6a84e;
        display: inline-block;
        font-family: "Rajdhani", serif;
        font-weight: 700;
        font-size: 15px;
        height: 100%;
        text-transform: capitalize
    }

    .footer__copy .copy__made-by > a {
        color: #fff;
        transition: color .15s ease-in-out;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 2px;
        transition: text-decoration-color .15s ease-in-out
    }

    .footer__copy .copy__made-by > a:hover {
        text-decoration-color: #d6a84e
    }
}

@media screen and (min-width: 1200px) {
    .footer__portable {
        display: none
    }

    .footer__desktop {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .footer__desktop .wrapper {
        display: flex;
        height: 100%;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%
    }

    .footer__menu-box {
        border-bottom: 1px solid #7c4b12;
        /* border-left: 1px solid #7c4b12; */
        /* border-right: 1px solid #7c4b12; */
        height: 186px;
        max-width: 930px;
        transform: perspective(22px) rotateX(-1deg);
        transform-origin: bottom;
        width: 930px;
    }

    .footer__menu-area {
        height: 120px;
        top: 0;
        padding: 99px 56px 26px 56px;
        position: absolute;
        width: 1038px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .footer__menu-area .menu__links {
        align-items: center;
        column-gap: 20px;
        display: flex;
        height: 100%;
        justify-content: center
    }

    .footer__menu-area .menu__item {
        align-items: end;
        display: flex;
        height: 100%
    }

    .footer__menu-area .menu__link {
        color: #fff;
        font-family: "Rajdhani", serif;
        font-size: 18px;
        font-weight: 600;
        height: 38px;
        padding: 0 10px 0 10px;
        position: relative;
        text-decoration: none;
        text-transform: uppercase
    }

    .footer__menu-area .menu__link::after {
        background: #d6a84e;
        bottom: 0;
        content: '';
        height: 10px;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: skew(22deg);
        transition: opacity .15s ease-in-out;
        width: 100%
    }

    .footer__menu-area .menu__link:hover::after {
        opacity: 1
    }

    .footer__social {
        padding: 30px 0 30px 0
    }

    .footer__copy .container {
        padding: 22px 60px 22px 60px
    }
}

.alert--warning, .alert-warning {
    border-left: 4px solid #fecd2f !important;
    color: #fecd2f !important
}

.alert--danger, .alert-danger {
    border-left: 4px solid #e64340 !important;
    color: #e64340 !important
}

.alert--success, .alert-success {
    border-left: 4px solid #6ab961 !important;
    color: #6ab961 !important
}

.button--red {
    background: linear-gradient(to right, #7c4b12 50%, #1a1208 50%) !important;
    background-position: 100% 0 !important;
    background-size: 200% 100% !important
}

.button--red:hover {
    background-position: 0 0 !important
}

.button--red-slogan {
    border: 4px solid #d6a84e !important
}

.button--red-slogan:hover {
    background: #a86a15 !important;
    border: 4px solid #a86a15 !important
}

.button--orange {
    background: linear-gradient(to right, #eaba11 50%, #ebcd0e 50%) !important;
    background-position: 100% 0 !important;
    background-size: 200% 100% !important
}

.button--orange:hover {
    background-position: 0 0 !important
}

.input--danger, .is-invalid {
    border: 2px solid #ff3147 !important
}

.input--success {
    border: 2px solid #6ab961 !important
}

.column--heading {
    padding: 28px 26px 28px 30px !important
}

.column--heading-rankings {
    padding: 28px 20px 28px 24px !important
}

.text--align-start {
    text-align: start !important
}

.text--transform-none {
    text-transform: none !important
}

.text--transform-capitalize {
    text-transform: capitalize !important
}

.text--green {
    color: #6ab961 !important
}

.text--red {
    color: #d6a84e !important
}

.text--orange {
    color: #ebcd0e !important
}

.event--open {
    color: #6ab961 !important
}

.width--60 {
    width: 60px !important
}

.width--120 {
    width: 120px !important
}

.width--152 {
    width: 152px !important
}

.width--180 {
    width: 180px !important
}

.width--208 {
    width: 208px !important
}

.width--220 {
    width: 220px !important
}

.width--290 {
    width: 290px !important
}

.width--320 {
    width: 320px !important
}

.width--380 {
    width: 380px !important
}

.width--max-280 {
    max-width: 280px
}

.width--min-128 {
    min-width: 128px !important
}

.width--min-394 {
    min-width: 394px !important
}

.width--min-440 {
    min-width: 440px !important
}

.width--min-520 {
    min-width: 520px !important
}

.width--min-610 {
    min-width: 610px !important
}

.width--min-746 {
    min-width: 746px !important
}

.width--min-820 {
    min-width: 820px !important
}

.width--min-864 {
    min-width: 864px !important
}

.width--min-880 {
    min-width: 880px !important
}

.width--min-1050 {
    min-width: 1050px !important
}

.flex {
    display: flex !important
}

.flex--justify-start {
    justify-content: start !important
}

.flex--justify-center {
    justify-content: center !important
}

.flex--1 {
    flex: 1 !important
}
.preloader {
    display: none;
    position: absolute;
    opacity: 0;
}
.preloaderr {
    align-items: center;
    background: #0d0c0c;
    display: flex;
    height: 100vh;
    justify-content: center;
    overflow: auto;
    pointer-events: all;
    position: fixed;
    width: 100vw;
    z-index: calc(9999 + 9999)
}

.preloader__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 16px
}

.preloader__logo {
    align-items: center;
    background-color: #160d1c;
    border-radius: 18px;
    display: flex;
    height: 120px;
    justify-content: center;
    width: 120px
}

.preloader__img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(101%) contrast(103%);
    height: 82px;
    object-fit: contain;
    width: 82px
}

.preloader__text {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-weight: 700;
    font-size: 23px;
    margin: 0 0 0 16px 0;
    text-transform: uppercase
}

.preloader__loaded {
    color: #6ab961
}

.invalid-feedback {
    background: #0e0e0e;
    border-left: 4px solid #e64340 !important;
    color: #e64340 !important;
    font-family: "Rajdhani", serif;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 20px 20px 20px;
    width: 100%;
}

.loginModal {
    display: flex;
    height: 100vh;
    justify-content: center;
    opacity: 0;
    overflow: auto;
    padding: 40px 20px 40px 20px;
    pointer-events: none;
    transition: opacity .3s ease-in-out, visibility 0s linear .3s;
    visibility: hidden;
    width: 100vw;
}

.loginModal--visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity .3s ease-in-out;
    visibility: visible !important;
}

.login__close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 26px;
}

.login__close .close__line {
    background: #ffffff;
    height: 3px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: center;
    transition: background-color .15s ease-in-out;
    width: 22px;
}

.login__close:hover .close__line {
    background: #d6a84e;
}

.login__close .close__line:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.login__close .close__line:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

#morpheus-popup-container .morpheus-popup-content {
    border: 2px solid #7c4b12;
    outline: 1px solid #000;
    background-color: #000000;
}

.help-desk {
    margin: 5px 0 5px 0;
    grid-template-columns: auto;
}
.help-desk.admin {
    border: 1px solid #1a1208;
}
.help-desk .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #101010;
    padding-bottom: 12px;
}
.help-desk .header .is_admin {
    color: #d6a84e;
}

/* ==========================================================================
   WEBSHOP PLUGIN - ESTILIZAÇÃO RELICMU
   ========================================================================== */

/* Container Principal */
.webshop-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* Layout de Colunas (Sidebar + Conteúdo) */
.ws-main-layout, .ws-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.ws-sidebar-area, .ws-sidebar {
    flex: 0 0 280px;
}

.ws-content-area, .ws-main {
    flex: 1;
    min-width: 300px;
}

@media (max-width: 992px) {
    .ws-sidebar-area, .ws-sidebar, .ws-content-area, .ws-main {
        flex: 0 0 100%;
    }
}

/* Grid de Produtos e Lojas */
.webshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Estilo dos Cards (Baseado no Visual do Site) */
.ws-card {
    background: #0d0c0c;
    border: 1px solid #7c4b12;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    position: relative;
    height: 100%;
}

.ws-card:hover {
    border-color: #d6a84e;
    box-shadow: 0 0 15px rgba(214, 168, 78, 0.15);
    transform: translateY(-2px);
}

.ws-card-header {
    background: rgba(124, 75, 18, 0.2);
    padding: 15px;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #7c4b12;
    color: #fff;
}

.ws-card-body {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ws-card-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.ws-card-description {
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.ws-card-footer {
    padding: 15px;
    border-top: 1px dotted #7c4b12;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

/* Badges de Preço e Info */
.ws-price-badge, .ws-item-price-tag {
    background: #7c4b12;
    color: #fff;
    padding: 6px 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 10px;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); /* Efeito inclinado para combinar com botões */
}

.ws-sold-count, .ws-item-sold-info {
    font-size: 12px;
    color: #888;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Categorias Sidebar */
.ws-category-group {
    margin-bottom: 25px;
}

.ws-category-root-title {
    background: linear-gradient(90deg, #7c4b12 0%, #0d0c0c 100%);
    padding: 12px 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border-left: 3px solid #d6a84e;
    margin-bottom: 8px;
}

.ws-category-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    transition: all 0.2s ease;
    font-family: 'Work Sans', sans-serif;
}

.ws-category-link:hover, .ws-category-link.active {
    background: rgba(255, 255, 255, 0.05);
    color: #d6a84e;
    padding-left: 20px;
}

/* Widget de Ofertas (Offer.phtml) */
.ws-offer-widget {
    background: #0d0c0c;
    border: 1px solid #7c4b12;
    padding: 15px;
}

.ws-widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #7c4b12;
    padding-bottom: 10px;
}

.ws-widget-title h3 {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    color: #fff;
}


.ws-product-details {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border: 1px solid #1a1a1a;
}

.ws-item-fields .form__group {
    margin-bottom: 15px;
}

.ws-item-fields select.form-control {
    background: #0d0c0c;
    border: 1px solid #7c4b12;
    color: #fff;
    padding: 8px;
    width: 100%;
    outline: none;
}

.ws-item-fields select.form-control:focus {
    border-color: #d6a84e;
}


.ws-input-group {
    display: flex;
    width: 100%;
    align-items: stretch; 
    margin-bottom: 20px;
}

.ws-input-group .form-control {
    flex: 1;
    margin-bottom: 0 !important;
    border-right: none;
    background: #0d0c0c;
    border: 1px solid #7c4b12;
    color: #fff;
    padding: 10px;
}

.ws-input-group .button__medium {
    margin: 0 !important;
    height: auto;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px; 
}

.ws-input-group .form-control:focus {
    border-color: #d6a84e;
    z-index: 2;
}

.ws-checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    padding: 8px 15px;
    border: 1px solid #1a1a1a;
    transition: 0.3s;
}
.ws-checkbox-container:hover {
    border-color: #7c4b12;
    background: rgba(124, 75, 18, 0.1);
}
.ws-checkbox-label {
    color: #fff;
    font-family: 'Rajdhani';
    text-transform: uppercase;
    font-size: 14px;
}
.ws-opt-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
    cursor: pointer;
    padding: 8px;
    background: #080808;
    border: 1px solid #1a1a1a;
    font-family: 'Rajdhani';
    font-size: 13px;
    transition: 0.2s;
}
.ws-opt-label:hover {
    border-color: #00ff00;
    color: #fff;
}
.ws-opt-label input[type="checkbox"] {
    accent-color: #00ff00;
}

.ws-card-placeholder {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 75, 18, 0.05);
    border: 1px dashed #333;
    margin-bottom: 15px;
}

.ws-card-placeholder i {
    font-size: 40px;
    color: #7c4b12; 
    filter: drop-shadow(0 0 10px rgba(214, 168, 78, 0.2));
}

.ws-card:hover .ws-card-placeholder i {
    color: #d6a84e;
}

.ws-card-image {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-card-image img {
    max-height: 110px;
    object-fit: contain;
}

.ws-checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    padding: 8px 12px;
    border: 1px solid #1a1a1a;
    transition: 0.3s;
    flex: 1;
    justify-content: center;
}
.ws-checkbox-container:hover {
    border-color: #d6a84e;
    background: rgba(124, 75, 18, 0.1);
}
.ws-checkbox-label {
    color: #fff;
    font-family: 'Rajdhani';
    text-transform: uppercase;
    font-size: 13px;
}
.ws-opt-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
    cursor: pointer;
    padding: 8px;
    background: #080808;
    border: 1px solid #1a1a1a;
    font-family: 'Rajdhani';
    font-size: 12px;
    transition: 0.2s;
}
.ws-opt-label:hover {
    border-color: #00ff00;
    color: #fff;
}
.form-control {
    background: #0d0c0c;
    border: 1px solid #7c4b12;
    color: #fff;
    padding: 8px;
    outline: none;
}
.form-control:focus {
    border-color: #d6a84e;
}

/* ===== ItemMarket estilo original da página /market/items ===== */

.webshop-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.ws-card{
  background: rgba(0,0,0,.2);
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
}

.ws-card-header{
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #1a1a1a;
  font-size: 14px;
}

.ws-card-body{
  padding: 16px;
}

.ws-seller{
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.text--red{
  color: #d6a84e;
  font-weight: 600;
}

.ws-card-image{
  display: flex;
  justify-content: center;
  align-items: center;
}

.ws-card-image img{
  max-height: 200px;
  width: auto;
  height: auto;
}

.ws-expire{
  text-align: center;
  font-size: 11px;
  margin-top: 12px;
  opacity: .6;
}

.ws-card-footer{
  padding: 12px 16px;
  border-top: 1px solid #1a1a1a;
}

.ws-buy{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Responsivo igual ao original */
@media (max-width: 900px){
  .webshop-grid{
    grid-template-columns: 1fr;
  }
}
.page {width: 100%;}
/*# sourceMappingURL=styles.min.css.map */
/*gamecode*/