/* fonts starts */
@font-face {
  font-family: 'Albertus Nova';
  src: local('Albertus Nova Thin'), local('Albertus-Nova-Thin'),
      url('../fonts/AlbertusNovaThin.woff2') format('woff2'),
      url('../fonts/AlbertusNovaThin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Albertus Nova';
  src: local('Albertus Nova Light'), local('Albertus-Nova-Light'),
      url('../fonts/AlbertusNovaLight.woff2') format('woff2'),
      url('../fonts/AlbertusNovaLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Albertus Nova';
  src: local('Albertus Nova Regular'), local('Albertus-Nova-Regular'),
      url('../fonts/AlbertusNova.woff2') format('woff2'),
      url('../fonts/AlbertusNova.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Albertus Nova';
  src: local('Albertus Nova Bold'), local('Albertus-Nova-Bold'),
      url('../fonts/AlbertusNova-Bold.woff2') format('woff2'),
      url('../fonts/AlbertusNova-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Albertus Nova';
  src: local('Albertus Nova Black'), local('Albertus-Nova-Black'),
      url('../fonts/AlbertusNovaBlack.woff2') format('woff2'),
      url('../fonts/AlbertusNovaBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* fonts ends */

:root {
  --base-color: #77a266;
  --brand-primary: #dcd575;
  --heading-color: var(--brand-primary);
  --fill-blue: #5865f2;
  --fill-dark-green: rgb(9, 20, 6);
  --fill-green: #3a5f30;
  --fill-green-v1: #77732f;
  --fill-green-v2: #13240c;
  --fill-green-v3: #15290e;
}

body {
  background-image: url(../images/solid-background.jpg);
  background-repeat: repeat-y;
  background-position: center center;
  font-family: 'Albertus Nova';
  color: var(--base-color);
  font-size: 14px;
  line-height: 1.5;
}

select,
select:focus {
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

section {
  position: relative;
}

a {
  color: var(--base-color);
  text-decoration: none;
  transition: 0.3s all ease;

  &:hover,
  &:focus {
    color: var(--brand-primary);
  }
}

button,
button:focus {
  background: transparent;
  outline: none;
  border: none;
  box-shadow: none;
}

img {
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6 {
  color: var(--brand-primary);
  margin-bottom: 0;
  font-weight: 900;
}

.highlighted {
  transition: 0.3s all ease;
  text-decoration: underline;
  color: var(--brand-primary);
}
a.highlighted:hover {
  color: var(--fill-green-v1);
}
.primary-text {
  color: var(--brand-primary);
}
.arrow-btn {
  outline: none;
  border: none;
  width: 100%;
  padding: 5.5px 18px 5.5px;
  font-size: 12px;
  background: url(../images/login-btn-bg.png) no-repeat center center / cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--brand-primary);
  margin-top: 35px;
  cursor: pointer;
  transition: 0.3s all ease;

  .bi {
    font-size: 30px;
    line-height: 0;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  &:active {
    background: url(../images/login-btn-bg.png) no-repeat center center / cover;
     color: var(--brand-secondary);
  }
  &:hover {
    background: url(../images/login-btn-bg.png) no-repeat center center / cover;
    color: var(--brand-secondary);



    .bi {
      transform: translateX(10px);
      color: var(--brand-secondary);
    }
  }
}

/* top-bg starts */
.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;

  @media (max-width: 767.98px) {

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(9,20,6, 0.8);
      display: block;
    }
  }

  img {
    height: 130vh;
    width: 100%;
    object-fit: cover;

    @media (max-width: 767.98px) {
      object-position: 63%;
    }
  }
}
/* top-bg ends */

/* header starts */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: 0.3s all ease;

  &.fixed {
    background-color: var(--fill-green-v3);
  }

  .navbar {
    border-bottom: 2px solid rgba(255, 255, 255, 0.10);
    gap: 24px;

    .navbar-collapse {

      @media (max-width: 991.98px) {
        position: absolute;
        left: 0;
        top: 60.4px;
        width: 100%;
        background-color: var(--fill-green-v3);
        overflow: hidden;
      }
    }

    .navbar-nav {

      .nav-link {
        color: var(--base-color);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 35px 30px;
        position: relative;

        @media (max-width: 991.98px) {
          padding: 10px;

          img {
            width: 28px;
            height: 28px;
            object-fit: contain;
          }
        }

        &.active {
          
          &:after {
            content: '';
            width: 100%;
            height: 2px;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--brand-primary);
            display: block;
            box-shadow: 0px 0px 30px 10px rgba(220, 213, 170, 0.15);
          }
        }
  
        &:hover {
          color: var(--brand-primary);
        }
      }
    }
  }

  .header-social-links {
    display: flex;
    align-items: center;
    gap: 12px;

    @media (max-width: 991.98px) {
      margin-left: 42px;
    }
  }

  .select-language {
    position: relative;

    select {
      background-color: rgba(119, 162, 102, 0.1);
      border: 1px solid var(--base-color);
      border-radius: 6px;
      color: #fff;
      font-weight: bold;
      font-size: 12px;
      padding: 3px 0 3px 23px;

      option {
        color: black;
      }
    }

    .bi-globe2 {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--brand-primary);
    }
  }

  /* ANIMATED X */
  .navbar-toggler,
  .navbar-toggler:focus {
    padding: 0;
    background: transparent;
    outline: none;
    border: none;
    box-shadow: none;
  }
  .navbar-toggler .icon-bar {
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--base-color);
    display: block;
    transition: 0.3s all ease;
  }
  .navbar-toggler .icon-bar + .icon-bar {
    margin-top: 4px;
  }
  .navbar-toggler .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
  }

  .navbar-toggler .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .navbar-toggler .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
  }

  /* ANIMATED X COLLAPSED */
  .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }

  .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  /* END ANIMATED X */
}
/* header ends */

/* hero starts */
.hero {
  position: relative;
  
  .inner {
    min-height: 100vh;
    padding: 120px 0 0;
    display: flex;
    flex-direction: column;

    @media (max-width: 991.98px) {
      min-height: initial;
    }
  }

  .brand-logo {

    @media (max-width: 991.98px) {
      max-width: 500px;
    }

    @media (max-width: 767.98px) {
      max-width: 300px;
    }

    @media (max-width: 427.98px) {
      max-width: 250px;
    }
  }
  
  .hero-content-slider {
    max-width: 500px;
  }

  h1 {
    font-size: 26px;
  }

  .carousel-indicators {
    position: static;
    margin: 20px 0 40px;
    justify-content: initial;

    [data-bs-target] {
      width: 22px;
      height: 10px;
      border-radius: 5px;
      box-sizing: border-box;
      border: 0;
      background-color: black;
      opacity: 1 !important;
      transition: 0.3s all ease;
      margin-left: 4px;
      margin-right: 4px;
    }

    .active[data-bs-target] {
      background-color: var(--brand-primary);
    }
  }

  .hero-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    row-gap: 50px;

    @media (max-width: 991.98px) {
      flex-direction: column;
      align-items: center;
      row-gap: 20px;
    }

    .hero-cta {
      min-height: 51px;
      display: flex;
      align-items: center;
      padding: 5px 32px;
      border-radius: 8px;
      gap: 18px;
      font-weight: 900;
    }

    .discord-btn {
      background-color: var(--fill-blue);
      color: var(--brand-primary);

      .bi {
        font-size: 200%;
      }

      &:hover {
        background-color: var(--fill-green-v1);
      }
    }

    .create-account-btn {
      background-color: var(--fill-dark-green);
      color: var(--base-color);

      &:hover {

        .highlighted {
          color: var(--fill-green-v1);
        }
      }
    }

    .server-presentation-btn {
      margin-left: auto;
      color: #fff;
      background-image: url(../images/btn-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-left: 50px;
      padding-right: 20px;
      position: relative;

      @media (max-width: 991.98px) {
        margin-left: initial;
        padding-left: 25px;
        padding-right: 25px;
        margin-left: 30px;
      }

      &:before {
        content: url(../images/btn-attachment.png);
        position: absolute;
        right: calc(100% - 30px);
      }

      &:hover {

        .highlighted {
          color: var(--fill-dark-green);
        }
      }
    }
  }
}
/* hero ends */

/* content-wrapper starts */
.content-wrapper {
  background-image: url(../images/content-bottom-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  padding-bottom: 450px;

  @media (max-width: 991.98px) {
    background-size: 180%;
    background-position-x: 46%;
  }

  @media (max-width: 767.98px) {
    padding-bottom: 350px;
  }

  @media (max-width: 575.98px) {
    padding-bottom: 250px;
  }

  @media (max-width: 427.98px) {
    padding-bottom: 200px;
  }
}
/* content-wrapper ends */

/* custom-card starts */
.cards-wrapper {
  margin-top: 61px;
}

.custom-card {
  position: relative;

  &:after {
    content: url(../images/card-badge.png);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
  }

  .arrow-btn {
    max-width: 248px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .arrow-btn:active {
    transform: scale(0.98);
  }
  .arrow-btn:hover {
    transform: scale(0.98);
  }
  .c-header {
    background-image: url(../images/heading-bg-small.png);
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: center center;
    position: relative;
    z-index: 1;

    @media (min-width: 420px) {
      background-image: url(../images/heading-bg-large.png);
      background-size: 100%;
    }

    @media (min-width: 1200px) {
      background-image: url(../images/heading-bg-small.png);
    }

    h2 {
      font-size: 16px;
      margin-bottom: 0;
      text-align: center;
      padding: 20px;
      text-transform: uppercase;
      background: linear-gradient(to bottom, #FFFF97 20%, #7B723E 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .c-body {
    padding: 25px;
    background-image: url(../images/card-bg-sm.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
    background: url(../images/bottom-border.png) no-repeat center bottom/100%, url(../images/card-bg-sm.png) no-repeat center top/cover;
    -webkit-box-shadow: inset 0px 0px 30px 2px rgba(255,255,255,0.17);
    -moz-box-shadow: inset 0px 0px 30px 2px rgba(255,255,255,0.17);
    box-shadow: inset 0px 0px 30px 2px rgba(255,255,255,0.17);
    position: relative;
    border-radius: 8px;

    @media (min-width: 420px) {
      border-radius: none;
    }

    &:before, &:after {
      content: ' ';
      position: absolute;
      top: calc(100% - 40px);
    }

    &:before {
      content: url(../images/bottom-left-leaf.png);
      left: -20px;
    }

    &:after {
      content: url(../images/bottom-right-leaf.png);
      right: -20px;
    }
  }

  &.card-sm {

    .c-body {
      width: 96%;

      @media (min-width: 1200px) {
        width: 90%;
      }
    }
  }

  &.card-lg {

    .c-header {
      background-image: url(../images/heading-bg-small.png);

      @media (min-width: 420px) {
        background-image: url(../images/heading-bg-large.png);
      }
    }

    .c-body {
      background: url(../images/bottom-border.png) no-repeat center bottom/100%, url(../images/card-bg-lg.png) no-repeat center top/cover;
      width: 96%;
    }
  }

  &.userpanel {

    .body-heading {
      background: url(../images/userpanel-heading-bg.png) no-repeat center center / contain;
      text-align: center;
      padding: 7px 25px 9px;

      h3 {
        font-size: 10px;
      }
    }

    .login-form {
      margin-top: 15px;
      margin-bottom: 35px;

      .input-group {
        position: relative;

        & + .input-group {
          margin-top: 10px;
        }

        .bi {
          position: absolute;
          left: 10px;
          top: 48%;
          transform: translateY(-50%);
        }
      }

      input {
        background-color: transparent;
        box-shadow: none;
        outline: none;
        border: none;
        color: var(--base-color);
        font-size: 10px;
        background-color: var(--fill-green-v2);
        padding: 13px 15px 13px 40px;
        width: 100%;
        background-image: url(../images/input-bg-shape.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 30px;

        &::placeholder {
          color: var(--base-color);
        }
      }
    }

    .c-footer {
      font-size: 12px;

      p {
        margin-bottom: 0;
      }
    }
  }

  &.ranking {

    .c-body {
      padding-left: 15px;
      padding-right: 15px;
    }

    .rank-listing {
      margin-top: 10px;
    }

    .ranking-cat-toggler {
      display: flex;
      justify-content: center;
      gap: 9px;

      button {
        color: var(--base-color);
        font-size: 12px;
        transition: 0.3s all ease;
        padding: 6px 25px;
        border-radius: 8px;
        border: 1px solid rgba(119, 162, 102, 0.1);

        &.active {
          color: var(--brand-primary);
          background-color: var(--fill-green-v3);
        }
      }
    }

    .rank-listing {

      .item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;

        &:nth-child(even) {
          background-color: var(--fill-green-v2);
        }

        p {
          margin: 0;

          span {
            display: block;
          }

          .rank {
            font-size: 11px;
          }
        }

        .profile-image {
          position: relative;

          .rank-number {
            font-size: 10px;
            background-color: var(--fill-green-v3);
            padding: 2px 8px;
            border-radius: 2px;
            border: 1px solid rgba(119, 162, 102, 0.4);
            position: absolute;
            left: 0;
            bottom: -5px;
            color: var(--brand-primary);
            font-weight: 900;
          }

          img {
            min-width: 54px;
            max-width: 54px;
          }
        }

        .profile-title {
          display: flex;
          align-items: center;
          gap: 5px;
          flex: 1;

          p {
            flex: 1;
          }

          .rank-poster {
            min-width: 33px;
          }
        }

        .level-number {
          margin-left: auto;
          background-color: var(--fill-dark-green);
          padding: 3px;
          border-radius: 6px;
          border: 1px solid rgba(119, 162, 102, 0.4);
          text-align: center;
          font-size: 11px;

          span {
            display: block;
          }
        }
      }
    }

  }

  &.news {

    .c-body {
      padding: 50px;
      font-size: 12px;

      @media (max-width: 767.98px) {
        padding: 50px 20px;
      }
    }

    .news-item {

      & + .news-item {
        margin-top: 60px;
      }
    }

    .news-item-header {
      background-image: url(../images/news-header-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right center;
      display: flex;
      align-items: center;
      padding: 21px 25px;
      gap: 15px;
      margin-bottom: 41px;
      border-radius: 8px;

      @media (max-width: 767.98px) {
        flex-direction: column;
        text-align: center;
        padding: 12px;
      }

      .update-btn {
        background-color: var(--fill-green-v1);
        color: #fff;
        text-transform: uppercase;
        padding: 8px 20px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 900;

        &:hover {
          background-color: var(--fill-green-v3);
        }
      }

      h3 {
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .news-arrival-time {
        font-size: 12px;
        margin-left: auto;

        @media (max-width: 767.98px) {
          margin-left: initial;
        }
      }
    }

    .news-item-footer {
      margin-top: 24px;
      display: flex;
      align-items: center;
      background-color: var(--fill-dark-green);
      padding: 16px 20px;
      border-radius: 8px;
      font-size: 11px;

      p {
        margin-bottom: 0;
      }

      .news-author {
        margin-right: auto;

        span {
          color: var(--brand-primary);
        }
      }

      .read-more-btn {
        color: var(--brand-primary);

        &:hover {
          color: var(--base-color);
        }
      }
    }
  }
}
/* custom-card ends */

/* footer starts */
footer {
  background-image: url(../images/footer-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 40px;

  p {
    margin-bottom: 0;
  }

  .inner {
    display: flex;
    align-items: center;
    gap: 30px;

    @media (max-width: 767.98px) {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  .footer-nav-links {
    margin-right: auto;
    display: flex;
    gap: 35px;

    @media (max-width: 767.98px) {
      gap: 15px;
      margin-right: initial;
      flex-direction: column;
      align-items: center;
    }

    a {
      color: var(--brand-primary);

      &:hover {
        color: var(--base-color);
      }
    }
  }

  .copyright-text {
    font-size: 12px;
    color: var(--fill-green);
  }
}
/* footer ends */