@font-face {
    font-family: 'SFProDisplayRegular';
    src: url('../fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SFProDisplayBold';
    src: url('../fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Consolas';
    src: url('../fonts/CONSOLA.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#particles-js {
    opacity: 65%;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
}

.nav-logo {
    height: 100px;
    margin: -60px;
}

header {
    background-color: rgba(6, 6, 10, 0.7);
    backdrop-filter: blur(25px);
    height: 80px;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: solid 1px #4b4b4b75;
}

body {
    display: grid;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #080811;
    color: #fff;
    font-family: SFProDisplayRegular, sans-serif;
    overflow-x: hidden;
}

span {
    color: #e1e2e9;
}

.server-name {
    font-family: SFProDisplayBold;
    margin-top: 300px;
    font-size: 8rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    text-align: center;
    animation: title-glow 4s infinite;
}

@keyframes title-glow {
      0%, 100% {
        text-shadow:
        0 0 6px #47eaff,
        0 0 30px #266beb,
        0 0 40px #0523aa,
        0 0 190px #142280;
      }
      50% {
        text-shadow:
        0 0 10px #47eaff,
        0 0 50px #266beb,
        0 0 60px #0523aa,
        0 0 300px #142280;
      }
    }
    
.block-title{
    font-size: 5rem;
    font-weight: 700;
    text-align: center;
    margin-top: 150px;
}

.block-title-glow-blue {
    color: white;
    text-shadow:
        0 0 5px #47eaff,
        0 0 25px #266beb,
        0 0 40px #1935a7,
        0 0 60px #142280;
}

.block-title-glow-yellow {
    color: white;
    text-shadow:
        0 0 5px #ffdd47,
        0 0 25px #eb9c26,
        0 0 40px #a73a19,
        0 0 60px #801422;
}

.block-title-glow-pink {
    color: white;
    text-shadow:
        0 0 5px #ff47f6,
        0 0 25px #eb26ba,
        0 0 40px #a7196c,
        0 0 60px #801434;
}

.block-title-grey-left{
    background: -webkit-linear-gradient(-35deg, #7e84aa, #dedfeb 90%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.block-title-grey-right{
    background: -webkit-linear-gradient(180deg, #7e84aa, #dedfeb 90%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.block-title-yellow-right{
    background: -webkit-linear-gradient(180deg, #9e887b, #e4ded5 90%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.block-title-yellow-left{
    background: -webkit-linear-gradient(-35deg, #9e887b, #e4ded5 90%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.block-description {
    text-align: center;
    font-size: 1.8rem;
    background: linear-gradient(180deg, #BDBEC8 40%, #6f7496);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
}

.block-description-yellow {
    text-align: center;
    font-size: 1.8rem;
    background: linear-gradient(180deg, #c8c4bd 40%, #967d6f);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
}

.block-description-pink {
    text-align: center;
    font-size: 1.8rem;
    background: linear-gradient(180deg, #c8bdc7 40%, #966f84);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
}

.card-title {
    font-size: 3rem;
    font-weight: 600;
    background: linear-gradient(120deg, rgb(41, 134, 255) 0%, rgb(73, 255, 244) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: SFProDisplayBold, sans-serif;
    line-height: 110%;
}

.progression {
    margin-bottom: 40px;
}

.icons-title {
    font-size: 1.9rem;
    font-weight: 600;
    color: #fff;
    font-family: SFProDisplayBold, sans-serif;
    line-height: 110%;
}

.small-title {
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
    font-family: SFProDisplayBold, sans-serif;
    line-height: 110%;
}

.chat-img {
    image-rendering: pixelated;
    width: 110px;
    height: 110px;
    margin-bottom: 10px;
    animation: item-image__anim 3s ease-in-out infinite;
}

.chat-pm-img {
    image-rendering: pixelated;
    width: 190px;
    height: 110px;
    margin-bottom: 10px;
    animation: item-image__anim 3s ease-in-out infinite;
}

.technoorganics-title {
    color: #e94eb5;
}

.icons-img{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.icons-card {
    display: flex;
    flex-direction: column;
    justify-items: center;
    background-color: #1d1e2566;
    backdrop-filter: blur(3px);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 15px;
    border: solid 1px #55555575;
    box-shadow: 0 0 20px #000000e6;
    z-index: 1;
}

.blue-gradient{
    background: linear-gradient(120deg, rgb(41, 134, 255) 0%, rgb(73, 255, 244) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blue{
    background: linear-gradient(120deg, rgb(41, 134, 255) 0%, rgb(41, 187, 255) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cyan{
    background: linear-gradient(120deg, rgb(41, 187, 255) 0%, rgb(73, 255, 244) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-img {
    border-radius: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    transition: 200ms transform;
}

.menu-img {
    border-radius: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    transition: 200ms transform;
    padding-top: 10px;
}

.separator {
    height: 1px;
    width: 100%;
    background-color: #5555558f; 
    margin: 10px 0;
}

.center {
    text-align: center;
}

.card-img:hover {
    transform: scale(1.1);
    transition: 200ms transform;
}

.card-img:not(:hover) {
    transform: scale(1);
}

.card-desc {
    font-size: 1.3rem;
    color: #7f848f;
}

.card {
    box-sizing: border-box;
    background-color: #1a1b2266;
    backdrop-filter: blur(3px);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 20px;
    border: solid 1px #55555575;
    box-shadow: 0 0 20px #000000e6;
    z-index: 1;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gradient-box {
    position: absolute;
    height: 110%;
    width: 30%;
    transform: translateX(100%) translateY(10%) rotate(25deg);
    border-top-left-radius: 20rem;
    border-bottom-right-radius: 50rem;
    background: linear-gradient(-45deg, #002e83 30%, #0010697e 35%, #000a92);
    opacity: 0.6;
    filter: blur(65px);
    z-index: -1;
}

.age-row {
    display: flex;
    flex-direction: column; 
}

.age-card {
    display: flex;
    flex-direction: column;
    width: calc(50% + 3px);
    align-items: center;
}

.age-card:nth-child(odd) {
    align-self: flex-end;
    align-items: flex-start;
    border-left: 6px dotted #2998ff;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.age-card:nth-child(even) {
    align-self: flex-start;
    align-items: flex-end;
    border-right: 6px dotted #2998ff;
    padding-right: 20px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.age-card:nth-child(odd) .age-title {
    margin-left: -22px;
    padding-left: 22px;
}

.age-card:nth-child(even) .age-title {
    margin-right: -22px;
    padding-right: 22px
}

.age-card .age-title {
    font-size: 3rem;
    color: #fff;
    font-weight: 500;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #ffffff;
    margin-top: 10px;
    z-index: -1;
}

.scroll {
    margin-top: 70px;
    margin-bottom: 250px;
    margin-inline: auto;
    width: 60px;
    height: 60px;
    position: relative;
    animation: down 1s infinite;
    -webkit-animation: down 1s infinite;

    &::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 18px;
        width: 18px;
        height: 18px;
        border-left: 2px solid #BDBEC8;
        border-bottom: 2px solid #BDBEC8;
        transform: rotate(-45deg);
    }
}

@keyframes down {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translateY(15px);
    }

    100% {
        transform: translate(0);
    }
}

@-webkit-keyframes down {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translateY(15px);
    }

    100% {
        transform: translate(0);
    }
}

.header-about {
    margin-left: 23%;
    margin-right: 23%;
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    font-size: 2.4rem;
    background: linear-gradient(180deg, #BDBEC8 0%, #6f7496 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.about {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    font-size: 2rem;
    background: linear-gradient(180deg, #BDBEC8 0%, #6f7496 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.item-image{
    image-rendering: pixelated;
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
    animation: item-image__anim 3s ease-in-out infinite;
}

@keyframes item-image__anim {
   0% {
        filter: saturate(1) contrast(1.1); 
    }
    50% {
        filter: saturate(1.7) contrast(1.3);
    }
    100% {
        filter: saturate(1) contrast(1.1);
    }
}

.material-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    text-align: center;
    min-height: 310px;
    box-sizing: border-box;
    background-color: #1a1b2266;
    backdrop-filter: blur(3px);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 20px;
    border: solid 1px #55555575;
    box-shadow: 0 0 20px #000000e6;
    z-index: 1;
    border-radius: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

.pulse-container {
    position: relative;
    display: inline-block;
  }

.pulse-container::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #ac7fff, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }
  
  @keyframes pulse-shadow {
    0% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.35);
      opacity: .8;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
  }

.pulse-container-technoorganics {
    position: relative;
    display: inline-block;
  }

.pulse-container-technoorganics::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #aa00b9, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-grey-ingot-container {
    position: relative;
    display: inline-block;
  }

.pulse-grey-ingot-container::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #ac7fff, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-blue-ingot-container {
    position: relative;
    display: inline-block;
  }

.pulse-blue-ingot-container::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #0017e6, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-green-container {
    position: relative;
    display: inline-block;
}

.pulse-green-container::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #49d844, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-green-ingot-container {
    position: relative;
    display: inline-block;
}

.pulse-green-ingot-container::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #49d844, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-yellow-ingot-container {
    position: relative;
    display: inline-block;
}

.pulse-yellow-ingot-container::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff9b17, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.pulse-yellow-container {
    position: relative;
    display: inline-block;
}

.pulse-yellow-container::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff9b17, transparent);
    filter: blur(45px);
    animation: pulse-shadow 3s infinite;
    z-index: -1;
  }

.nav-link {
    font-family: SFProDisplayBold;
    font-size: 1.9rem;
    font-weight: 500;
    padding: 10px 20px;
    color: #7f848f;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important; 
    transition: transform 0.3s ease ,color 0.3s ease, background-color 0.3s ease !important;
}

.nav-link:hover{
    border: none !important;
    color: #c5c6d3;
    background-color: transparent;
}

ul.nav-tabs .nav-link.active {
    color: #0b0b11 !important;
    background-color: #c5c6d3 !important;
    border: none !important;
    transition: color 0.5s ease, background-color 0.5s ease !important;
}

.nav-link:focus {
    outline: none;
}

.nav-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    border-bottom: 1px solid #7f848f;
}

.nav-tabs .nav-link {
    border-bottom: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover {
    border-bottom: 1px solid #c5c6d3 !important;
    transition: color 0.5s ease, background-color 0.5s ease !important;
}

.nav-tabs .nav-link.active {
    border-bottom: 1px solid #c5c6d3 !important;
    transition: color 0.5s ease, background-color 0.5s ease !important;
}

.nav-item {
    margin-right: 50px;
}

.nav-item:last-child {
    margin-right: 0;
}

.tab-pane {
    opacity: 0;
    animation: none;
    display: none;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
    opacity: 1;
}


  .img-grid img {
    width: 100%;
    border-radius: 10px;
  }


/*Мультиблоки - начало*/


.row__mb {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    margin: 170px 0;
    top: -70px;
}

.col__mb {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

.mb-img img {
    image-rendering: optimizeQuality;
    width: 100%;
    max-width: 50vw;
    height: auto;
    object-fit: cover;
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
    transform-origin: center;
    position: relative;
    z-index: 2;
    animation: item-image__anim 3s ease-in-out infinite;
}

@keyframes item-image__anim {
   0% {
        filter: saturate(1.5) contrast(1.2);
    }
    50% {
        filter: saturate(1.2) contrast(1.1);
    }
    100% {
        filter: saturate(1.5) contrast(1.2);
    }
}

.mb-pulse-blue-container {
    position: relative;
    display: inline-block;
  }

.mb-pulse-blue-container::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, #0c0075, transparent);
    filter: blur(100px);
    opacity: 40%;
    animation: mb-pulse-shadow 3s infinite;
    z-index: -1;
  }
  
  @keyframes mb-pulse-shadow {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: .8;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

.mb-num {
    font-size: 3rem;
    color: #7f848f;
    font-family: Consolas, sans-serif;
    line-height: 70%;
    order: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    top: -20px;
}

.mb-img.left {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    left: -60px;
    z-index: -1;
}

.mb-desc{
    font-family: SFProDisplayRegular, sans-serif;
    font-size: 1.5rem;
    line-height: 130%;
    color: #7f848f;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 100%;
    margin-top: 20px;
}

.mb-title.right {
    font-size: 2.5rem;
    color: #fff;
    font-family: SFProDisplayBold, sans-serif;
    line-height: 100%;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 120px;
    top: -100px;
    position: relative;
}

.mb-img.right {
    order: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    right: -60px;
    z-index: -1;
}

.mb-title.left {
    font-size: 2.5rem;
    color: #fff;
    font-family: SFProDisplayBold, sans-serif;
    line-height: 100%;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 120px;
    top: -100px;
    position: relative;
}

.end-button{
    padding: 5px 20px;
    margin: 0 auto;
    margin-bottom: 100px !important;
    margin-top: 30px !important;
    display: block;
    height: 50px;
}


  /*Мультиблоки - конец*/


@media (max-width: 768px) {
    .server-name {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 5rem;
    }

    .about{
        font-size: 1.7rem;
        margin-left: 15%;
        margin-right: 15%;
    }

    .row__mb {
        flex-direction: column;
    }

    .mb-img,
    .mb-title {
        order: 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .server-name {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 4rem;
    }

    .about{
        font-size: 1.4rem;
        margin-left: 13%;
        margin-right: 13%;
    }
    .server-name{
        font-size: 2rem;
    }
    .header-about{
        font-size: 1rem;
    }
    .block-title{
        font-size: 1.25rem;
    }
    .block-description{
        font-size: 1rem;
    }
    .scroll{
        margin-bottom: 60px;
    }
    .card-title{
        font-size: 1.25rem;
    }
    .card-desc{
        font-size: 1rem;
    }
    .card-img{
        display: inline;
    }
    .icons-title{
        font-size: 1.25rem;
    }
    .gradient-box{
        display: none;
    }
    .age-title{
        font-size: 1.25rem !important;
    }
    .mb-desc{
        font-size: 1.25rem !important;
    }
    .mb-title{
        font-size: 1rem !important;
    }
}