@font-face {
  font-family: 'Fritz';
  src: local("Fritz Regular"), local("Fritz-Regular"), url("fonts/fritz/Fritz.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fritz';
  src: local("Fritz Bold"), local("Fritz-Bold"), url("fonts/fritz/Fritz-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Intro';
  src: local("Intro Regular"), local("Intro-Regular"), url("fonts/intro/Intro-Regular.eot"), url("fonts/intro/Intro-Regular.woff") format("woff"), url("fonts/intro/Intro-Regular.ttf") format("truetype"), url("fonts/intro/Intro-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Intro';
  src: local("Intro Bold"), local("Intro-Bold"), url("fonts/intro/Intro-Bold.eot"), url("fonts/intro/Intro-Bold.woff") format("woff"), url("fonts/intro/Intro-Bold.ttf") format("truetype"), url("fonts/intro/Intro-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}

@import url("https://web.archive.org/web/20250303170932cs_/https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@font-face {
  font-family: 'Beaufort';
  src: local("BeaufortforLOL Regular"), local("BeaufortforLOL-Regular"), url("fonts/beaufort/BeaufortforLOL-Regular.eot"), url("fonts/beaufort/BeaufortforLOL-Regular.woff") format("woff"), url("fonts/beaufort/BeaufortforLOL-Regular.ttf") format("truetype"), url("fonts/beaufort/BeaufortforLOL-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Beaufort';
  src: local("BeaufortforLOL Medium"), local("BeaufortforLOL-Medium"), url("fonts/beaufort/BeaufortforLOL-Medium.eot"), url("fonts/beaufort/BeaufortforLOL-Medium.woff") format("woff"), url("fonts/beaufort/BeaufortforLOL-Medium.ttf") format("truetype"), url("fonts/beaufort/BeaufortforLOL-Medium.svg") format("svg");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Beaufort';
  src: local("BeaufortforLOL Bold"), local("BeaufortforLOL-Bold"), url("fonts/beaufort/BeaufortforLOL-Bold.eot"), url("fonts/beaufort/BeaufortforLOL-Bold.woff") format("woff"), url("fonts/beaufort/BeaufortforLOL-Bold.ttf") format("truetype"), url("fonts/beaufort/BeaufortforLOL-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}

html, body, header, nav, section, aside, article, footer, div,
span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small,
strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: 'Fritz', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #eadfce;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a, span, p {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

font {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

input, button, select, textarea {
  outline: none;
  border: none;
  font-family: 'Fritz', sans-serif;
  font-size: 16px;
  color: #5a574f;
}

select, button {
  cursor: pointer;
}

::-webkit-input-placeholder {
  color: #5a574f;
  -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

::-moz-placeholder {
  color: #5a574f;
  -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

:-moz-placeholder {
  color: #5a574f;
  -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

:-ms-input-placeholder {
  color: #5a574f;
  -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

:focus::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

:focus::-moz-placeholder {
  opacity: 0;
  transform: translateX(20px);
}

:focus:-moz-placeholder {
  opacity: 0;
  transform: translateX(20px);
}

:focus:-ms-input-placeholder {
  opacity: 0;
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#detach-button-host {
  display: none;
}

.flex-sbc, .flex-sbs, .flex-sbe,
.flex-cc, .flex-cs, .flex-ce,
.flex-sc, .flex-ss, .flex-se,
.flex-ec, .flex-es, .flex-ee {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-sbc, .flex-sbs, .flex-sbe {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-cc, .flex-cs, .flex-ce {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-sc, .flex-ss, .flex-se {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.flex-ec, .flex-es, .flex-ee {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex-sbc, .flex-cc, .flex-sc, .flex-ec {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-sbs, .flex-cs, .flex-ss, .flex-es {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-sbe, .flex-ce, .flex-se, .flex-ee {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
body {
    background: #000;
    font-family: 'Open Sans', sans-serif;
    color: #eadfce;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.wrapper:after {
    content: '';
    width: 1600px;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0px;
    left: calc((100% - 1600px) / 2);
    pointer-events: none;
    background: linear-gradient(to right, #000 0px, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0) calc(100% - 200px), #000 100%);
}

.header {
    width: 100%;
    padding: 50px 0;
    background: url("../images/bg/header_bg.jpg") top center no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
}

header:after {
    content: '';
    width: 100%;
    height: 50px;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: -30px;
    background: url("../images/bg/sep_header_to_s1.png") center center no-repeat;
    pointer-events: none;
    background-size: contain;
}

header:before {
    content: '';
    width: 1600px;
    height: 1200px;
    position: absolute;
    z-index: 2;
    bottom: -600px;
    left: calc((100% - 1600px) / 2);
    background: url("../images/bg/header_deco_1.png") center center no-repeat;
    background-size: contain;
    pointer-events: none;
}

section {
    width: 100%;
    position: relative;
    padding: 80px 0;
}

section h2 {
    width: 100%;
    text-align: center;
    font-family: "Beaufort", sans-serif;
    font-weight: 700;
    color: #f4e9cf;
    font-size: 48px;
    line-height: 48px;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .wrapper {
        max-width: 100%;
    }

    .wrapper:after {
        width: 100%;
        left: 0;
    }

    header {
        padding: 40px 0;
    }

    header:before {
        width: 100%;
        height: 800px;
        bottom: -400px;
    }

    section {
        padding: 60px 0;
    }

    section h2 {
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 1300px) {
  section h2 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #f4e9cf;
    font-size: 48px;
    line-height: 48px;
  }
}

@media (max-width: 1024px) {
  section h2 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #f4e9cf;
    font-size: 34px;
    line-height: 34px;
  }
}

section h2 span {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-family: "Fritz";
  font-weight: 700;
  color: #ada183;
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
}

@media (max-width: 1300px) {
  section h2 span {
    font-family: "Fritz";
    font-weight: 700;
    color: #ada183;
    font-size: 16px;
    line-height: 22px;
  }
}

section.features {
  z-index: 5;
  background: url("../images/bg/section_1_bg.jpg") #1d0e09 top center no-repeat;
}

section.features h2 {
  color: #f4e9cf;
}

section.features h2 span {
  color: #ada183;
}

section.features:after {
  content: '';
  width: 100%;
  height: 44px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: -27px;
  background: url("../images/bg/sep_s1_to_s2.png") center center no-repeat;
  pointer-events: none;
}

section.chronicle {
  z-index: 4;
  background: url("../images/bg/section_2_bg.html") #0d1b0a top center no-repeat;
}

section.chronicle h2 {
  color: #f0f3d4;
}

section.chronicle h2 span {
  color: #b5c095;
}

section.chronicle:after {
  content: '';
  width: 100%;
  height: 44px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: -27px;
  background: url("../images/bg/sep_s2_to_s3.html") center center no-repeat;
  pointer-events: none;
}

section.info-1 {
  z-index: 3;
  background: url("../images/bg/section_3_bg0004.jpg?v2022112001") #020926 top center no-repeat;
}

section.info-1 h2 {
  color: #f4e9cf;
}

section.info-1 h2 span {
  color: #ada183;
}

section.info-1:after {
  content: '';
  width: 100%;
  height: 44px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: -27px;
  background: url("../images/bg/sep_s3_to_s4aef1.png?v2022112003") center center no-repeat;
  pointer-events: none;
}

section.info-1:before {
  content: '';
  width: 2600px;
  height: 558px;
  position: absolute;
  z-index: 2;
  bottom: -70px;
  left: calc( ( 100% - 2600px ) / 2);
  background: url("../images/bg/section_3_deco0004.png?v2022112001") center center no-repeat;
  pointer-events: none;
}

section.info-2 {
  z-index: 2;
  background: url("../images/bg/section_4_bg.jpg") #210a04 top center no-repeat;
}

section.info-2 h2 {
  color: #f4e9cf;
}

section.info-2 h2 span {
  color: #ada183;
}

section.info-2:after {
  content: '';
  width: 100%;
  height: 72px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: -27px;
  background: url("../images/bg/sep_s4_to_s5.png") center center no-repeat;
  pointer-events: none;
}

section.info-2:before {
  content: '';
  width: 2600px;
  height: 1062px;
  position: absolute;
  z-index: 2;
  bottom: -90px;
  left: calc( ( 100% - 2600px ) / 2);
  background: url("../images/bg/section_4_deco.png") center center no-repeat;
  pointer-events: none;
}

section.group {
  z-index: 1;
  background: url("../images/bg/footer_bg.jpg") #03070a top center no-repeat;
}

section.info-general {
  z-index: 2;
}

section.info-general h2 {
  color: #f4e9cf;
}

section.info-general h2 span {
  color: #ada183;
}

section.info-general:after {
  content: '';
  width: 100%;
  height: 28px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: -11px;
  background: url("../images/bg/sep_s5_to_footer.png") center center no-repeat;
  pointer-events: none;
}

header {
  padding: 90px 0px;
}

@media (max-width: 1300px) {
  header {
    padding: 70px 0px;
  }
}

@media (max-width: 1024px) {
  header {
    padding: 50px 0px;
  }
}

section {
  padding: 130px 0px;
}

@media (max-width: 1300px) {
  section {
    padding: 80px 0px;
  }
}

@media (max-width: 1024px) {
  section {
    padding: 60px 0px;
  }
}

section.group {
  padding: 0px !important;
}

footer {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 100px 0px;
}

@media (max-width: 1300px) {
  footer {
    padding: 70px 0px;
  }
}

@media (max-width: 1024px) {
  footer {
    padding: 50px 0px;
  }
}

.content-area {
  max-width: 1400px;
  width: calc( 100% - 60px);
  margin: 0 auto;
  height: auto;
  position: relative;
  z-index: 10;
}

@media (max-width: 1024px) {
  .content-area {
    width: calc( 100% - 40px);
  }
}

.icon {
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.icon img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center center;
  object-position: center center;
}

.bg {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  overflow: hidden;
}

.bg img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
}

.bg.gradient:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.bg.gradient.blue:after {
  background: -webkit-gradient(linear, left bottom, left top, from(#183343), color-stop(40%, rgba(24, 51, 67, 0.8)), color-stop(70%, rgba(24, 51, 67, 0.4)), to(rgba(24, 51, 67, 0)));
  background: -webkit-linear-gradient(bottom, #183343 0%, rgba(24, 51, 67, 0.8) 40%, rgba(24, 51, 67, 0.4) 70%, rgba(24, 51, 67, 0) 100%);
  background: -o-linear-gradient(bottom, #183343 0%, rgba(24, 51, 67, 0.8) 40%, rgba(24, 51, 67, 0.4) 70%, rgba(24, 51, 67, 0) 100%);
  background: linear-gradient(to top, #183343 0%, rgba(24, 51, 67, 0.8) 40%, rgba(24, 51, 67, 0.4) 70%, rgba(24, 51, 67, 0) 100%);
}

.bg.gradient.green:after {
  background: -webkit-gradient(linear, left bottom, left top, from(#1b4821), color-stop(40%, rgba(27, 72, 33, 0.8)), color-stop(70%, rgba(27, 72, 33, 0.4)), to(rgba(27, 72, 33, 0)));
  background: -webkit-linear-gradient(bottom, #1b4821 0%, rgba(27, 72, 33, 0.8) 40%, rgba(27, 72, 33, 0.4) 70%, rgba(27, 72, 33, 0) 100%);
  background: -o-linear-gradient(bottom, #1b4821 0%, rgba(27, 72, 33, 0.8) 40%, rgba(27, 72, 33, 0.4) 70%, rgba(27, 72, 33, 0) 100%);
  background: linear-gradient(to top, #1b4821 0%, rgba(27, 72, 33, 0.8) 40%, rgba(27, 72, 33, 0.4) 70%, rgba(27, 72, 33, 0) 100%);
}

.bg.gradient.gray:after {
  background: -webkit-gradient(linear, left bottom, left top, from(#29292b), color-stop(40%, rgba(41, 41, 43, 0.8)), color-stop(70%, rgba(41, 41, 43, 0.4)), to(rgba(41, 41, 43, 0)));
  background: -webkit-linear-gradient(bottom, #29292b 0%, rgba(41, 41, 43, 0.8) 40%, rgba(41, 41, 43, 0.4) 70%, rgba(41, 41, 43, 0) 100%);
  background: -o-linear-gradient(bottom, #29292b 0%, rgba(41, 41, 43, 0.8) 40%, rgba(41, 41, 43, 0.4) 70%, rgba(41, 41, 43, 0) 100%);
  background: linear-gradient(to top, #29292b 0%, rgba(41, 41, 43, 0.8) 40%, rgba(41, 41, 43, 0.4) 70%, rgba(41, 41, 43, 0) 100%);
}

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

.header__info {
  width: 100%;
  padding: 0px calc((100% - 770px) / 2);
  margin-top: 60px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.header__button {
  width: 406px;
  height: 91px;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  margin-top: 60px;
  -webkit-transition: -webkit-filter .3s ease-in-out;
  transition: -webkit-filter .3s ease-in-out;
  -o-transition: filter .3s ease-in-out;
  transition: filter .3s ease-in-out;
  transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out;
}

.header__button:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}

.header__button img {
  width: 488px;
  height: 203px;
  position: absolute;
  top: -61px;
  left: -41px;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1300px) {
  .header__button img {
    width: 375px;
    height: 156px;
    top: -47px;
    left: -30px;
  }
}

@media (max-width: 1024px) {
  .header__button img {
    width: 292px;
    height: 121px;
    top: -37px;
    left: -24px;
  }
}

.header__button span {
  width: 100%;
  position: relative;
  z-index: 2;
  font-family: "Beaufort", sans-serif;
  font-weight: 700;
  color: #482512;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 10px #ffd000, 0px 0px 20px #ffd000;
}

@media (max-width: 1300px) {
  .header__button span {
    font-family: "Beaufort", sans-serif;
    font-weight: 700;
    color: #482512;
    font-size: 26px;
    line-height: 26px;
  }
}

@media (max-width: 1024px) {
  .header__button span {
    font-family: "Beaufort", sans-serif;
    font-weight: 700;
    color: #482512;
    font-size: 20px;
    line-height: 20px;
  }
}

.header__socials {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.header__socials a {
  width: 58px;
  height: 58px;
  position: relative;
  z-index: 1;
  margin: 10px;
  -webkit-transition: -webkit-filter .3s ease-in-out;
  transition: -webkit-filter .3s ease-in-out;
  -o-transition: filter .3s ease-in-out;
  transition: filter .3s ease-in-out;
  transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out;
}

@media (max-width: 1024px) {
  .header__socials a {
    width: 38px;
    height: 36px;
  }
}

.header__socials a:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}

.header__socials a img {
  width: 93px;
  height: 93px;
  position: absolute;
  top: -16px;
  left: -18px;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .header__socials a img {
    width: 62px;
    height: 62px;
    top: -11px;
    left: -12px;
  }
}

.features__content {
  padding-left: calc( 100% / 3);
}

@media (max-width: 1300px) {
  .features__content {
    padding-left: calc( 100% / 4);
  }
}

@media (max-width: 1024px) {
  .features__content {
    padding-left: 0px;
  }
}

.features__play {
  width: 191px;
  height: 112px;
  position: absolute;
  top: 450px;
  left: calc( ( ( ( 100% / 3 ) - 191px ) / 2 ) - 70px);
  cursor: pointer;
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

@media (max-width: 1024px) {
  .features__play {
    width: 140px;
    height: 82px;
    position: relative;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    margin-top: 30px;
  }
}

.features__play img {
  width: 100%;
  height: 100%;
}

.features__play:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.features__info {
  width: 100%;
}

.features__info:not(:first-child) {
  margin-top: 54px;
}

@media (max-width: 1300px) {
  .features__info:not(:first-child) {
    margin-top: 44px;
  }
}

@media (max-width: 1024px) {
  .features__info:not(:first-child) {
    margin-top: 30px;
  }
}

.features__info h3 {
  width: 100%;
  display: block;
  font-family: "Beaufort";
  font-weight: 700;
  color: #ffeb9d;
  font-size: 34px;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1300px) {
  .features__info h3 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #ffeb9d;
    font-size: 28px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  .features__info h3 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #ffeb9d;
    font-size: 22px;
    line-height: 22px;
  }
}

.features__info h3:not(:first-child) {
  margin-top: 30px;
}

@media (max-width: 1300px) {
  .features__info h3:not(:first-child) {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  .features__info h3:not(:first-child) {
    margin-top: 15px;
  }
}

.features__info p {
  width: 100%;
  display: block;
  font-family: "Fritz";
  font-weight: 400;
  color: #eadfce;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 1300px) {
  .features__info p {
    font-family: "Fritz";
    font-weight: 400;
    color: #eadfce;
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  .features__info p {
    font-family: "Fritz";
    font-weight: 400;
    color: #eadfce;
    font-size: 16px;
    line-height: 26px;
  }
}

.features__info p:not(:first-child) {
  margin-top: 20px;
}

@media (max-width: 1300px) {
  .features__info p:not(:first-child) {
    margin-top: 15px;
  }
}

@media (max-width: 1024px) {
  .features__info p:not(:first-child) {
    margin-top: 10px;
  }
}

.features__items {
  width: 100%;
}

.features__items:not(:first-child) {
  margin-top: 70px;
}

@media (max-width: 1300px) {
  .features__items:not(:first-child) {
    margin-top: 50px;
  }
}

@media (max-width: 1024px) {
  .features__items:not(:first-child) {
    margin-top: 30px;
  }
}

@media (max-width: 680px) {
  .features__items:not(:first-child) {
    padding: 0px calc( ( 100% - 280px ) / 2);
  }
}

.features__items-list {
  width: calc( 100% + 30px);
  margin: -15px;
}

@media (max-width: 1024px) {
  .features__items-list {
    width: calc( 100% + 20px);
    margin: -10px;
  }
}

.features__items-list .bg {
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.features__items-list-item {
  width: calc( ( 100% / 3 ) - 30px);
  height: 380px;
  margin: 15px;
  position: relative;
  background: #282828;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

@media (max-width: 1300px) {
  .features__items-list-item {
    height: 300px;
  }
}

@media (max-width: 1024px) {
  .features__items-list-item {
    width: calc( ( 100% / 3 ) - 20px);
    margin: 10px;
  }
}

@media (max-width: 680px) {
  .features__items-list-item {
    width: calc( ( 100% / 1 ) - 20px);
  }
}

.features__items-list-item-content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  padding: 20px;
  -webkit-transform: translateY(196px);
  -ms-transform: translateY(196px);
  transform: translateY(196px);
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

@media (max-width: 1300px) {
  .features__items-list-item-content {
    -webkit-transform: translateY(120px);
    -ms-transform: translateY(120px);
    transform: translateY(120px);
  }
}

@media (max-width: 1024px) {
  .features__items-list-item-content {
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px);
  }
}

.features__items-list-item-content .icon {
  width: 120px;
  height: 120px;
  margin: -10px auto;
}

@media (max-width: 1024px) {
  .features__items-list-item-content .icon {
    height: 100px;
  }
}

.features__items-list-item-content h4 {
  font-family: "Beaufort";
  font-weight: 700;
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

@media (max-width: 1300px) {
  .features__items-list-item-content h4 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
  }
}

@media (max-width: 1024px) {
  .features__items-list-item-content h4 {
    font-family: "Beaufort";
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
  }
}

.features__items-list-item-content-text {
  width: 100%;
  margin-top: 10px;
  font-family: "Fritz";
  font-weight: 400;
  color: #eadfce;
  font-size: 16px;
  line-height: 24px;
  max-height: calc( 24px * 8);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  text-align: center;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

@media (max-width: 1300px) {
  .features__items-list-item-content-text {
    font-family: "Fritz";
    font-weight: 400;
    color: #eadfce;
    font-size: 16px;
    line-height: 24px;
    max-height: calc( 24px * 5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
}

@media (max-width: 1024px) {
  .features__items-list-item-content-text {
    font-family: "Fritz";
    font-weight: 400;
    color: #eadfce;
    font-size: 16px;
    line-height: 24px;
    max-height: calc( 24px * 6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }
}

.features__items-list-item:hover .features__items-list-item-content {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}

.features__items-list-item:hover .features__items-list-item-content-text {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}

.features__items-list-item:hover .bg {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.chronicle__list {
  width: calc( 100% + ( 25% - 230px ));
  margin: 0px calc( ( ( 25% - 230px ) * -1 ) / 2);
}

@media (max-width: 1024px) {
  .chronicle__list {
    width: 100%;
    margin: 0px;
  }
}

.chronicle__list:not(:first-child) {
  margin-top: 290px;
}

@media (max-width: 1024px) {
  .chronicle__list:not(:first-child) {
    margin-top: 250px;
  }
}

.chronicle__list-item {
  width: 25%;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  padding: 15px;
  position: relative;
  z-index: 2;
  padding-bottom: 140px;
}

@media (max-width: 1024px) {
  .chronicle__list-item {
    width: 100%;
    padding-bottom: 50px;
  }
}

@media (max-width: 1024px) {
  .chronicle__list-item:not(:last-child) {
    padding-bottom: 100px;
  }
}

.chronicle__list-item-icon {
  width: 100%;
  margin: -50px 0px;
}

.chronicle__list-item-icon img {
  height: 200px;
  display: block;
}

.chronicle__list-item-game {
  width: 100%;
  font-family: "Fritz";
  font-weight: 700;
  color: #fff;
  font-size: 17px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .chronicle__list-item:first-child .chronicle__list-item-game {
    margin-top: -20px;
  }
}

.chronicle__list-item-chronicle {
  width: 100%;
  font-family: "Fritz";
  font-weight: 700;
  color: #fedc0b;
  font-size: 17px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 5px;
}

.chronicle__list-item-point {
  width: 140px;
  height: 140px;
  position: absolute;
  left: calc( ( 100% - 140px ) / 2);
  bottom: -15px;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .chronicle__list-item-point {
    width: 40px;
    height: 40px;
    left: calc( ( 100% - 40px ) / 2);
    bottom: 50px;
  }
}

.chronicle__list-item-point-bg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.chronicle__list-item-point-active {
  width: 180px;
  height: 180px;
  position: absolute;
  z-index: 2;
  top: calc( ( 100% - 180px ) / 2);
  left: calc( ( 100% - 180px ) / 2);
  display: none;
}

@media (max-width: 1024px) {
  .chronicle__list-item-point-active {
    width: 70px;
    height: 70px;
    top: calc( ( 100% - 70px ) / 2);
    left: calc( ( 100% - 70px ) / 2);
  }
}

@media (max-width: 1024px) {
  .chronicle__list-item:last-child .chronicle__list-item-point {
    width: 40px;
    height: 40px;
    left: calc( ( 100% - 40px ) / 2);
    bottom: 0px;
  }
}

.chronicle__list-item.active .chronicle__list-item-point-active {
  display: block;
}

.chronicle__list-item:not(:last-child):after {
  content: '';
  width: calc( 100% - 100px);
  height: 87px;
  position: absolute;
  bottom: 10px;
  right: calc( ( 100% - 100px ) / 2 * -1);
  background: url("../images/chronicles/step.html") center center no-repeat;
  background-size: contain;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .chronicle__list-item:not(:last-child):after {
    display: none;
  }
}

.chronicle__list-item:not(:last-child):before {
  content: '';
  width: calc( 100% + 40px);
  height: 113px;
  position: absolute;
  bottom: 20px;
  right: -20px;
  background: url("../images/chronicles/arrow.html") center center no-repeat;
  pointer-events: none;
  display: none;
}

@media (max-width: 1024px) {
  .chronicle__list-item:not(:last-child):before {
    display: block;
  }
}

.info-1__content {
  width: 100%;
  margin-top: 50px;
}

@media (max-width: 1024px) {
  .info-1__content {
    margin-top: 40px;
  }
}

.info-2__content {
  width: 100%;
  margin-top: 80px;
}

@media (max-width: 1024px) {
  .info-2__content {
    margin-top: 50px;
  }
}

.info-list {
  width: 100%;
}

.info-list__items {
  width: calc( 100% + 30px);
  margin: -40px -15px;
}

@media (max-width: 1024px) {
  .info-list__items {
    width: calc( 100% + 20px);
    margin: -20px -10px;
  }
}

.info-list__items-item {
  width: calc( ( 100% / 4 ) - 30px);
  margin: 40px 15px;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  position: relative;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .info-list__items-item {
    width: calc( ( 100% / 4 ) - 20px);
    margin: 20px 10px;
  }
}

@media (max-width: 860px) {
  .info-list__items-item {
    width: calc( ( 100% / 3 ) - 20px);
  }
}

@media (max-width: 740px) {
  .info-list__items-item {
    width: calc( ( 100% / 2 ) - 20px);
  }
}

@media (max-width: 560px) {
  .info-list__items-item {
    width: calc( ( 100% / 1 ) - 20px);
  }
}

.info-list__items-item-icon {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  margin: -30px auto;
}

@media (max-width: 1300px) {
  .info-list__items-item-icon {
    margin: -20px auto;
  }
}

.info-list__items-item-icon img {
  width: 248px;
  height: 248px;
}

@media (max-width: 1300px) {
  .info-list__items-item-icon img {
    width: 150px;
    height: 150px;
  }
}

.info-list__items-item-title {
  width: 100%;
  font-family: "Fritz";
  font-weight: 700;
  color: #ffdf61;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 15px;
  position: relative;
  z-index: 2;
  -webkit-transition: color .3s ease-in-out;
  -o-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;
}

@media (max-width: 1300px) {
  .info-list__items-item-title {
    font-family: "Fritz";
    font-weight: 700;
    color: #ffdf61;
    font-size: 18px;
    line-height: 22px;
  }
}

.info-list__items-item:hover .info-list__items-item-title {
  color: #fff;
}

.info-list__items-item:after {
  content: '';
  width: 100%;
  height: 120%;
  border-radius: 50%;
  position: absolute;
  top: -10%;
  left: 0px;
  background: #000;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}

.info-list__items-item:hover:after {
  opacity: .35;
}

.info-list.borders .info-list__items-item-title {
  margin-top: 35px;
}

.info-general__content {
  width: 100%;
  margin-top: 90px;
}

@media (max-width: 1300px) {
  .info-general__content {
    margin-top: 60px;
  }
}

@media (max-width: 1024px) {
  .info-general__content {
    margin-top: 40px;
  }
}

.info-general__list {
  width: calc( 100% + 30px);
  margin: -40px -15px;
}

@media (max-width: 1300px) {
  .info-general__list {
    margin: -20px -15px;
  }
}

@media (max-width: 1024px) {
  .info-general__list {
    width: calc( 100% + 20px);
    margin: -20px -10px;
  }
}

.info-general__list-col {
  width: calc( ( 100% / 3 ) - 30px);
  margin: 40px 15px;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

@media (max-width: 1300px) {
  .info-general__list-col {
    margin: 20px 15px;
  }
}

@media (max-width: 1024px) {
  .info-general__list-col {
    width: calc( ( 100% / 3 ) - 20px);
    margin: 20px 10px;
  }
}

@media (max-width: 780px) {
  .info-general__list-col {
    width: calc( ( 100% / 2 ) - 20px);
  }
}

@media (max-width: 600px) {
  .info-general__list-col {
    width: calc( ( 100% / 1 ) - 20px);
  }
}

.info-general__list-item {
  width: 100%;
  max-width: 350px;
}

.info-general__list-item-img {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.info-general__list-item-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
}

.info-general__list-item-title {
  width: 100%;
  font-family: "Beaufort";
  font-weight: 700;
  color: #ffde60;
  font-size: 32px;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
}

@media (max-width: 1300px) {
  .info-general__list-item-title {
    font-family: "Beaufort";
    font-weight: 700;
    color: #ffde60;
    font-size: 24px;
    line-height: 30px;
  }
}

@media (max-width: 1024px) {
  .info-general__list-item-title {
    font-family: "Beaufort";
    font-weight: 700;
    color: #ffde60;
    font-size: 20px;
    line-height: 24px;
  }
}

.info-general__list-item-text {
  width: 100%;
  font-family: "Fritz";
  font-weight: 500;
  color: #eadfce;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .info-general__list-item-text {
    margin-top: 5px;
  }
}

.footer__title {
  width: 100%;
  font-family: "Fritz";
  font-weight: 600;
  color: #a5a4a3;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
}

.footer__text {
  width: 100%;
  font-family: "Fritz";
  font-weight: 600;
  color: #a5a4a3;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
}

.footer .unsimple {
  display: block;
  width: 152px;
  height: 30px;
  opacity: 0.7;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  margin: 30px auto 0px;
}

.footer .unsimple:hover {
  opacity: 1;
}

.video-wnd {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(27, 21, 18, 0.9);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  padding: 20px;
  overflow-y: scroll;
}

.video-wnd.active {
  opacity: 1;
  pointer-events: auto;
}

.video-wnd__box {
  width: 800px;
  height: 500px;
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: auto;
}

.video-wnd__navigation {
  width: 100%;
  margin-top: auto;
  margin-bottom: 20px;
}

.video-wnd__cancel {
  width: 30px;
  height: 30px;
  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: -webkit-transform .5s ease-in-out;
  -o-transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
  cursor: pointer;
}

.video-wnd__cancel:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.discord-icon{
	display: flex;
	position: fixed;
	right: -10rem;
	bottom: 2rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s;
    }
.discord-icon:hover{
   right: 1rem;
}
/*
     FILE ARCHIVED ON 17:09:32 Mar 03, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 17:37:45 Mar 06, 2025.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.565
  exclusion.robots: 0.02
  exclusion.robots.policy: 0.009
  esindex: 0.011
  cdx.remote: 19.898
  LoadShardBlock: 357.488 (3)
  PetaboxLoader3.datanode: 254.141 (4)
  PetaboxLoader3.resolve: 313.124 (2)
  load_resource: 271.212
*/

/* Estilos para os servidores */
.header__main-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  z-index: 2;
}

.header__servers {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-shrink: 0;
}

.header__right-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  flex-shrink: 0;
  padding-top: 18%;
}

/* Estilos para o seletor de idiomas na nova posição */
.header__right-section .header__langs {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.header__right-section .lang-button {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 234, 158, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.header__right-section .lang-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 234, 158, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.header__right-section .lang-button:hover {
  border-color: rgba(255, 234, 158, 0.6);
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

.header__right-section .lang-button:hover::before {
  opacity: 1;
}

.header__right-section .lang-button.active {
  border-color: #ffd000;
  background: rgba(255, 208, 0, 0.1);
  box-shadow: 0 0 20px rgba(255, 208, 0, 0.3);
  transform: scale(1.05);
}

.header__right-section .lang-button.active::before {
  opacity: 1;
}

.header__right-section .lang-button img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  transition: all 0.3s ease-in-out;
}

.header__right-section .lang-button:hover img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}

.header__right-section .lang-button.active img {
  filter: drop-shadow(0 0 10px rgba(255, 208, 0, 0.5));
}



.server-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #ffea9e;
  border-radius: 20px;
  padding: 35px;
  backdrop-filter: blur(15px);
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.server-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 234, 158, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.server-card:hover::before {
  opacity: 1;
}

.server-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 50px rgba(255, 234, 158, 0.4);
  border-color: #ffd000;
  background: rgba(0, 0, 0, 0.5);
}

.server-logo {
  width: 180px;
  height: 180px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}

.server-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(255, 234, 158, 0.4));
  transition: all 0.4s ease-in-out;
}

.server-card:hover .server-logo img {
  filter: drop-shadow(0 12px 30px rgba(255, 234, 158, 0.6));
  transform: scale(1.08);
}

.server-info {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.server-title {
  font-family: "Beaufort", sans-serif;
  font-weight: 700;
  color: #ffea9e;
  font-size: 36px;
  line-height: 36px;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.9);
}

.server-description {
  font-family: "Fritz", sans-serif;
  font-weight: 400;
  color: #eadfce;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 25px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

.server-details {
  margin-bottom: 25px;
}

.server-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 8px 15px;
  background: rgba(255, 234, 158, 0.1);
  border-radius: 25px;
  border: 1px solid rgba(255, 234, 158, 0.3);
  transition: all 0.3s ease-in-out;
}

.server-card:hover .server-feature {
  background: rgba(255, 234, 158, 0.2);
  border-color: rgba(255, 234, 158, 0.5);
  transform: scale(1.02);
}

.feature-icon {
  font-size: 20px;
  margin-right: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.feature-text {
  font-family: "Fritz", sans-serif;
  font-weight: 500;
  color: #f4e9cf;
  font-size: 16px;
  line-height: 20px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

.server-launch {
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 234, 158, 0.1) 100%);
  border-radius: 15px;
  border: 2px solid rgba(255, 234, 158, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.server-launch::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 234, 158, 0.2), transparent);
  transition: left 0.6s ease-in-out;
}

.server-card:hover .server-launch::before {
  left: 100%;
}

.server-card:hover .server-launch {
  border-color: rgba(255, 234, 158, 0.6);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 234, 158, 0.15) 100%);
  transform: scale(1.02);
}

.launch-label {
  display: block;
  font-family: "Beaufort", sans-serif;
  font-weight: 700;
  color: #ffea9e;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
}

.launch-date {
  display: block;
  font-family: "Beaufort", sans-serif;
  font-weight: 700;
  color: #ffd000;
  font-size: 20px;
  line-height: 24px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(255, 208, 0, 0.5);
  }
  to {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 20px rgba(255, 208, 0, 0.8), 0px 0px 30px rgba(255, 208, 0, 0.6);
  }
}

.launch-date.coming-soon {
  color: #ff6b6b;
  animation: glow-red 2s ease-in-out infinite alternate;
}

@keyframes glow-red {
  from {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(255, 107, 107, 0.5);
  }
  to {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 20px rgba(255, 107, 107, 0.8), 0px 0px 30px rgba(255, 107, 107, 0.6);
  }
}

.server-button {
  width: 280px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  background: linear-gradient(135deg, #ffea9e 0%, #ffd000 100%);
  border-radius: 30px;
  border: 2px solid #ffd000;
  box-shadow: 0 5px 15px rgba(255, 234, 158, 0.4);
}

.server-button span {
  font-family: "Beaufort", sans-serif;
  font-weight: 700;
  color: #482512;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
}

.server-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 234, 158, 0.6);
  background: linear-gradient(135deg, #ffd000 0%, #ffea9e 100%);
}

.server-button.disabled {
  background: linear-gradient(135deg, #666 0%, #999 100%);
  border-color: #666;
  cursor: default;
  opacity: 0.7;
}

.server-button.disabled:hover {
  transform: none;
  box-shadow: 0 5px 15px rgba(255, 234, 158, 0.4);
  background: linear-gradient(135deg, #666 0%, #999 100%);
}

.server-button.disabled span {
  color: #333;
  text-shadow: none;
}

/* Botões lado a lado */
.header__buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Indicador de scroll */
.scroll-indicator {
  top: 70px;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: bounce 2s infinite;
}

.scroll-text {
  font-family: "Fritz", sans-serif;
  font-weight: 500;
  color: #ffea9e;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 15px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.scroll-arrow {
  font-size: 32px;
  color: #ffd000;
  text-shadow: 0px 0px 20px rgba(255, 208, 0, 0.8);
  animation: pulse 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsividade para os servidores */
@media (max-width: 1300px) {
  .header__main-content {
    max-width: 1200px;
    gap: 40px;
  }
  
  .header__servers {
    gap: 40px;
  }
  
  .server-card {
    padding: 30px;
    min-height: 450px;
  }
  
  .server-logo {
    width: 150px;
    height: 150px;
  }
  
  .server-title {
    font-size: 32px;
    line-height: 32px;
  }
  
  .server-description {
    font-size: 18px;
    line-height: 24px;
  }
  
  .server-button {
    width: 240px;
    height: 50px;
  }
  
  .server-button span {
    font-size: 18px;
    line-height: 18px;
  }
  
  .header__right-section {
    gap: 30px;
  }
}

@media (max-width: 1024px) {
  .header__main-content {
    flex-direction: column;
    gap: 40px;
    max-width: 800px;
  }
  
  .header__servers {
    flex-direction: column;
    gap: 30px;
    max-width: 500px;
  }
  
  .header__right-section {
    gap: 30px;
    padding-top: 0;
  }
  
  .server-card {
    padding: 25px;
    min-height: 400px;
  }
  
  .server-logo {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
  }
  
  .server-title {
    font-size: 28px;
    line-height: 28px;
  }
  
  .server-description {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
  }
  
  .server-button {
    width: 200px;
    height: 45px;
  }
  
  .server-button span {
    font-size: 16px;
    line-height: 16px;
  }
  
  .scroll-text {
    font-size: 16px;
    line-height: 22px;
  }
  
  .scroll-arrow {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .header__main-content {
    max-width: 500px;
    gap: 30px;
  }
  
  .header__servers {
    max-width: 400px;
    gap: 25px;
  }
  
  .server-card {
    padding: 20px;
    min-height: 350px;
  }
  
  .server-logo {
    width: 120px;
    height: 120px;
  }
  
  .server-title {
    font-size: 24px;
    line-height: 24px;
  }
  
  .server-description {
    font-size: 14px;
    line-height: 20px;
  }
  
  .server-button {
    width: 180px;
    height: 40px;
  }
  
  .server-button span {
    font-size: 14px;
    line-height: 14px;
  }
  
  .feature-text {
    font-size: 14px;
    line-height: 18px;
  }
  
  .launch-date {
    font-size: 16px;
    line-height: 20px;
  }
  
  .scroll-text {
    font-size: 14px;
    line-height: 20px;
  }
  
  .scroll-arrow {
    font-size: 24px;
  }
}