* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100vh;
    }

    body {
      background: #0B0D0F;
      font-family: 'Montserrat', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      position: relative;
      padding-top: 92px;
    }

    .page-bg {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1920px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      pointer-events: none;
      z-index: 4;
      top: 0;
    }

    .page-bg--top {
      top: 0;
    }

    .main-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 4;
      flex: 1 0 auto;
      overflow: hidden;
    }

    .section-wrapper {
      width: 1026px;
      max-width: 95%;
      z-index: 4;
      position: relative;
      flex: 1 0 auto;
    }

    .section-spacing {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 120px;
      padding-bottom: 60px;
    }

    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1920px;
      max-width: 100%;
      height: 92px;
      padding: 8px 76px;
      background: rgba(9, 10, 12, 0.12);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      flex-shrink: 0;
      z-index: 1000;
    }

    .top-bar .left {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 205px;
      height: 40px;
      cursor: pointer;
      text-decoration: none;
    }

    .top-bar .left img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .logo-text {
      display: flex;
      font-style: italic;
      font-weight: 900;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: -0.02em;
    }

    .logo-text .griff {
      color: #FFFFFF;
    }

    .logo-text .rewards {
      color: #00A6FD;
    }

    .top-bar .middle {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 44px;
      height: 40px;
    }

    .top-bar .middle a {
      text-decoration: none;
      color: #B3BBC4;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      transition: color 0.25s ease;
    }

    .top-bar .middle a:hover:not(.leaderboards) {
      color: #00A6FD;
    }

    .top-bar .middle .leaderboards {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .top-bar .middle .leaderboards .lb-text {
      color: #B3BBC4;
      transition: color 0.25s ease;
    }

    .top-bar .middle .leaderboards .prize {
      color: #00A6FD;
    }

    .top-bar .middle .leaderboards:hover .lb-text {
      color: #00A6FD;
    }

    .top-bar .right {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 251px;
      justify-content: flex-end;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 14px 26px;
      border-radius: 7px;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      text-decoration: none;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      transition: box-shadow 0.3s ease;
    }

    .btn--join {
      background: #00A6FD;
      transition: filter 0.3s ease;
    }

    .btn--join:hover {
      filter: brightness(0.65);
    }

    .bonuses-page-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      isolation: isolate;
      width: 491.46px;
      max-width: 100%;
      position: relative;
      margin-top: 20px;
    }

    .bonuses-page-title .check-out-exclusive {
      width: 230px;
      height: 11px;
      font-style: italic;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
    }

    .bonuses-page-title .bonuses-title {
      width: 100%;
      max-width: 487px;
      height: 67px;
      font-style: italic;
      font-weight: 900;
      font-size: clamp(48px, 12vw, 96px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: #00A6FD;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
      white-space: nowrap;
      z-index: 1;
      margin-bottom: 15px;
    }

    .bonuses-page-title .ellipse-bonus-bg {
      position: absolute;
      width: 353px;
      max-width: 90%;
      height: 55px;
      left: 52.49px;
      top: 34px;
      background: #00A6FD;
      mix-blend-mode: screen;
      filter: blur(65.45px);
      transform: rotate(-2.76deg);
      z-index: 2;
      pointer-events: none;
      border-radius: 50%;
    }

    .bonus-tabs {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 26px;
      width: 1026px;
      max-width: 100%;
      flex-wrap: wrap;
      z-index: 1;
      position: relative;
    }

    .bonus-cards-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 60px;
      width: 1026px;
      max-width: 100%;
      flex-wrap: wrap;
    }

    .bonus-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      isolation: isolate;
      width: 280px;
      height: 380px;
      margin-top: -30px;
      position: relative;
      cursor: default;
      overflow: visible;
    }

    .bonus-card .bonus-top {
      width: 280px;
      height: 140px;
      background: #0B0D0F;
      border-radius: 20px 20px 0px 0px;
      margin: -15px 0px;
      position: relative;
      overflow: hidden;
      z-index: 2;
      flex-shrink: 0;
      transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  border-radius 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: height;
    }

    .bonus-card:hover .bonus-top {
      height: 200px;
      border-radius: 20px 20px 0px 0px;
    }

    .bonus-top .bonus-images {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .bonus-top .bonus-images img {
      position: absolute;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, left, top, width, height, filter, opacity;
      object-fit: contain;
    }

    .bonus-card .bonus-images .img-caseTITAN {
      right: -45px;
      top: 100px;
      width: 130px;
      height: auto;
      transform: translate(-50%, -50%) rotate(8deg);
      filter: blur(0px);
      opacity: 0.6;
      z-index: 3;
    }
    .bonus-card .bonus-images .img-caseDLORE {
      left: 102px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card .bonus-images .img-GUNGNIR {
      right: -95px;
      top: 75px;
      width: 140px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-20deg);
      filter: blur(3px);
      opacity: 0.35;
      z-index: 1;
    }
    .bonus-card .bonus-images .img-TITAN {
      left: 50px;
      top: 80px;
      width: 110px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-12deg);
      filter: blur(3px);
      opacity: 0.45;
      z-index: 0;
    }

    .bonus-card.csgogem .bonus-images .img-caseHOWL {
      left: 102px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card.csgogem .bonus-images .img-caseVULCAN {
      right: -75px;
      top: 100px;
      width: 160px;
      height: auto;
      transform: translate(-50%, -50%) rotate(8deg);
      filter: blur(0px);
      opacity: 0.6;
      z-index: 3;
    }
    .bonus-card.csgogem .bonus-images .img-TALON {
      right: -55px;
      top: 55px;
      width: 100px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(3px);
      opacity: 0.35;
      z-index: 1;
    }
    .bonus-card.csgogem .bonus-images .img-VICE {
      left: 60px;
      top: 70px;
      width: 90px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(3px);
      opacity: 0.45;
      z-index: 0;
    }

    .bonus-card.roobet .bonus-images .img-HADES {
      right: -22px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(0px);
      opacity: 0.7;
      z-index: 3;
    }
    .bonus-card.roobet .bonus-images .img-SMOKEY {
      left: 77px;
      top: 110px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-8deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card.roobet .bonus-images .img-SHROOM {
      left: 138px;
      top: 45px;
      width: 70px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg) scaleX(-1);
      filter: blur(2px);
      opacity: 0.5;
      z-index: 0;
    }
    .bonus-card.roobet .bonus-images .img-1000X {
      right: 3px;
      top: 45px;
      width: 50px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(1px);
      opacity: 0.5;
      z-index: 1;
    }

    .bonus-card:hover .bonus-images .img-caseTITAN {
      right: -95px;
      top: 150px;
      width: 180px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-8deg);
    }
    .bonus-card:hover .bonus-images .img-caseDLORE {
      left: 102px;
      top: 130px;
      width: 170px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(7deg);
    }
    .bonus-card:hover .bonus-images .img-GUNGNIR {
      right: -75px;
      top: 75px;
      width: 170px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-30deg) scaleX(-1);
    }
    .bonus-card:hover .bonus-images .img-TITAN {
      left: 50px;
      top: 60px;
      width: 140px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-12deg);
    }

    .bonus-card.csgogem:hover .bonus-images .img-caseHOWL {
      left: 55px;
      top: 130px;
      width: 170px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(16deg);
    }
    .bonus-card.csgogem:hover .bonus-images .img-caseVULCAN {
      right: -135px;
      top: 150px;
      width: 210px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-15deg);
    }
    .bonus-card.csgogem:hover .bonus-images .img-TALON {
      right: -75px;
      top: 75px;
      width: 150px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-120deg) scaleX(-1);
    }
    .bonus-card.csgogem:hover .bonus-images .img-VICE {
      left: 100px;
      top: 110px;
      width: 140px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-22deg);
    }

    .bonus-card.roobet:hover .bonus-images .img-HADES {
      right: -122px;
      top: 90px;
      width: 180px;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(0px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-SMOKEY {
      left: 57px;
      top: 90px;
      width: 160px;
      transform: translate(-50%, -50%) rotate(-8deg);
      filter: blur(0px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-SHROOM {
      left: 138px;
      top: 133px;
      width: 100px;
      transform: translate(-50%, -50%) rotate(15deg) scaleX(-1);
      filter: blur(1px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-1000X {
      right: 75px;
      top: 45px;
      width: 70px;
      transform: translate(-50%, -50%) rotate(15deg);
      filter: blur(1px);
      opacity: 0.8;
    }

    .bonus-card .bonus-top .top-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }

    .bonus-card .bonus-top .top-lights .ellipse-7 {
      position: absolute;
      width: 340px;
      height: 200px;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #25405a;
      opacity: 0.18;
      filter: blur(210.5px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card .bonus-top .top-lights .ellipse-8 {
      position: absolute;
      width: 420px;
      height: 250px;
      left: 50%;
      bottom: -50px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.18;
      filter: blur(210.5px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card .bonus-top .top-lights .ellipse-9 {
      position: absolute;
      width: 280px;
      height: 120px;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.18;
      filter: blur(85.95px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card:hover .bonus-top .top-lights .ellipse-7 {
      opacity: 0.32;
    }
    .bonus-card:hover .bonus-top .top-lights .ellipse-8 {
      opacity: 0.34;
    }
    .bonus-card:hover .bonus-top .top-lights .ellipse-9 {
      opacity: 0.34;
    }

    .bonus-card .bonus-top .bonus-icon {
      position: absolute;
      width: 120px;
      height: 50px;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
      z-index: 5;
      object-fit: contain;
    }

    .bonus-card.csgogem .bonus-top .bonus-icon {
      width: 180px;
      height: 35px;
    }

    .bonus-card.roobet .bonus-top .bonus-icon {
      width: 190px;
      height: 45px;
    }

    .bonus-card .bonus-frame {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 25px 25px;
      gap: 30px;
      isolation: isolate;
      width: 280px;
      height: 260px;
      background: #080A0C;
      border: 1px solid #152638cb;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin-top: -15px;
      z-index: 3;
      transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  padding-top 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform-origin: bottom center;
      will-change: height, padding-top;
    }

    .bonus-card:hover .bonus-frame {
      height: 200px;
      padding-top: 10px;
    }

    .bonus-card .bonus-frame .frame-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-7 {
      position: absolute;
      width: 320px;
      height: 220px;
      left: 78%;
      top: 68%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #4C5864;
      opacity: 0.15;
      filter: blur(80px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-8 {
      position: absolute;
      width: 360px;
      height: 250px;
      left: 82%;
      top: 72%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.12;
      filter: blur(80px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-9 {
      position: absolute;
      width: 270px;
      height: 125px;
      left: 82%;
      top: 82%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.12;
      filter: blur(40px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-23 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 15px;
      width: 100%;
      z-index: 2;
      position: relative;
      transition: gap 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      flex-shrink: 0;
    }

    .bonus-card:hover .bonus-frame .frame-23 {
      gap: 4px;
      transform: translateY(-10px);
    }

    .bonus-card .bonus-frame .frame-23 .bonus-percent {
      width: 100%;
      font-weight: 700;
      font-size: 24px;
      line-height: 1.2;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .bonus-card .bonus-frame .frame-23 .bonus-desc {
      width: 100%;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.4;
      text-align: center;
      letter-spacing: -0.02em;
      color: #B3BBC4;
    }

    .bonus-card .bonus-frame .frame-21 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 8px;
      width: 100%;
      z-index: 3;
      position: absolute;
      bottom: 25px;
      left: 0;
      padding-left: 25px;
      padding-right: 25px;
    }

    .bonus-card .bonus-frame .frame-21 .code-box {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 44px;
      gap: 10px;
      width: 100%;
      height: 45px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 7px;
      cursor: default;
      user-select: none;
    }

    .bonus-card .bonus-frame .frame-21 .code-box span {
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #B3BBC4;
      text-align: center;
      white-space: nowrap;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 44px;
      gap: 10px;
      width: 100%;
      height: 45px;
      background: #00A6FD;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.2s;
      text-decoration: none;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn:hover {
      background: #0088dd;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn span {
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
    }

    .bonuses-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 65px;
      width: 1026px;
      max-width: 100%;
      position: relative;
      scroll-margin-top: 100px;
    }

    .bonuses-lights {
      position: absolute;
      width: 850px;
      height: 612px;
      left: 50%;
      top: 120%;
      transform: translate(-50%, -50%) rotate(180deg);
      pointer-events: none;
      z-index: -1;
      overflow: visible;
    }

    .bonuses-lights .ellipse-8 {
      position: absolute;
      width: 800px;
      height: 540px;
      left: calc(50% - 400px - 31.85px);
      top: calc(50% - 270px + 313.48px);
      background: #00A6FD;
      opacity: 0.01;
      filter: blur(210.5px);
      transform: rotate(174.7deg);
      border-radius: 50%;
    }

    .footer-lights {
      position: absolute;
      width: 100%;
      height: 500px;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }

    .footer-lights .ellipse-7 {
      position: absolute;
      width: 787px;
      height: 400px;
      left: 50%;
      top: 50px;
      background: #4C5864;
      opacity: 0.25;
      filter: blur(150px);
      transform: translateX(-50%) rotate(-5.3deg);
      border-radius: 50%;
    }

    .footer-lights .ellipse-9 {
      position: absolute;
      width: 667px;
      height: 300px;
      left: 50%;
      top: 100px;
      background: #00A6FD;
      opacity: 0.25;
      filter: blur(80px);
      transform: translateX(-50%) rotate(-5.3deg);
      border-radius: 50%;
    }

    .footer {
      box-sizing: border-box;
      width: 1920px;
      max-width: 100%;
      height: 421px;
      background: #080A0C;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin-top: 60px;
      z-index: 5;
      flex-shrink: 0;
    }

    .footer .footer-disclaimer {
      position: absolute;
      width: 714px;
      height: 31px;
      left: calc(50% - 357px);
      top: 346.98px;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      color: #4E5B69;
      opacity: 0.5;
      z-index: 1;
    }

    .footer .footer-main {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      gap: 665px;
      position: absolute;
      width: 1451px;
      height: 121px;
      left: calc(50% - 725.5px);
      top: 74.98px;
      z-index: 1;
    }

    .footer .footer-left {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 169px;
      width: 544px;
      height: 121px;
    }

    .footer .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 17px;
      width: 288px;
      height: 118.81px;
    }

    .footer .footer-griff-rewards {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 264px;
      height: 86px;
      font-style: italic;
      font-weight: 900;
      font-size: 48px;
      line-height: 90%;
      letter-spacing: -0.02em;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
    }

    .footer .footer-griff-rewards .griff {
      color: #FFFFFF;
      display: block;
    }

    .footer .footer-griff-rewards .rewards {
      color: #00A6FD;
      display: block;
      margin-top: -5px;
    }

    .footer .footer-copyright-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      height: 16px;
    }

    .footer .footer-copyright-text {
      height: 16px;
      font-weight: 700;
      font-size: 13px;
      line-height: 16px;
      color: #4E5B69;
      white-space: nowrap;
    }

    .footer .footer-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 11px;
      width: 99px;
      height: 121px;
    }

    .footer .footer-nav-title {
      width: 69px;
      height: 17px;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      color: #B3BBC4;
    }

    .footer .footer-nav a {
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      color: #4E5B69;
      text-decoration: none;
      transition: color 0.25s ease;
    }

    .footer .footer-nav a:hover {
      color: #00A6FD;
    }

    .footer .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 27px;
      width: 242px;
      height: 92.75px;
    }

    .footer .footer-socials-block {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      width: 102.03px;
      height: 50.75px;
    }

    .footer .footer-socials-label {
      width: 64px;
      height: 17px;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      color: #B3BBC4;
    }

    .footer .footer-social-icons {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 15px;
      width: 102.03px;
      height: 21.75px;
    }

    .footer .footer-social-icons a {
      display: inline-flex;
      line-height: 0;
    }

    .footer .footer-social-icons img {
      width: 21px;
      height: 21px;
      object-fit: contain;
      opacity: 0.8;
      transition: opacity 0.3s ease;
      filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(1000%) hue-rotate(165deg);
    }

    .footer .footer-social-icons img:hover {
      opacity: 1;
    }

    .footer .footer-credits {
      width: 242px;
      height: 15px;
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      text-align: left;
      text-transform: uppercase;
      margin-bottom: -15px;
      transform: translateX(50px);
      color: #4C5864;
    }

    .footer .footer-credits .credit-link {
      color: #4C5864;
      text-decoration: none;
      transition: color 0.25s ease;
    }

    .footer .footer-credits .credit-link:hover {
      color: #00A6FD;
    }