@font-face {
      font-family: 'Font Awesome 5 Free';
      src: url('/webfonts/fa-regular-400.woff2') format('woff2'),
          url('/webfonts/fa-regular-400.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      /* ✅ Add this */
  }

  @font-face {
      font-family: 'Font Awesome 5 Brands';
      src: url('/webfonts/fa-brands-400.woff2') format('woff2'),
          url('/webfonts/fa-brands-400.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      /* ✅ Add this */
  }

  @font-face {
      font-family: 'Inspiro Icons';
      src: url('../webfonts/inspiro-icons.ttf?ijzgpf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
      /* ✅ Ensures text is visible immediately */
  }

  @font-face {
      font-family: 'Font Awesome 5 Free';
      src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
          url('../webfonts/fa-solid-900.woff') format('woff');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
      /* ✅ Fixes render-blocking font */
  }

  :root {
      --main-icon-color: white;
      --call-icon-bg: rgba(202, 33, 33);
      --tele-icon-bg: rgb(40, 164, 226);
      --call-icon-box-shadow: ;
      --tele-icon-box-shadow: ;
      --call-ani-color: rgb(211, 168, 49);
      --tele-ani-color: rgb(40, 164, 226);
      --animation-width: 50px;
      --animation-height: 50px;
      --animation-start-range: 5px;
      --animation-end-range: 30px;

  }


  .bottom-call-tel.btn-animation::before {
      content: "";
      width: var(--animation-width);
      height: var(--animation-height);
      margin-top: 2px;
      position: absolute;
      border-radius: 50%;
      padding: 25px;
      border-style: solid;
      border-width: 5px;
      opacity: 0.75;
      animation-name: animation-border;
      animation-duration: 2s;
      box-sizing: unset;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
      pointer-events: none;
      transition: .4s;
  }

  .bottom-call-tel.btn-animation::after {
      content: "";
      width: var(--animation-width);
      height: var(--animation-height);
      margin-top: 2px;
      position: absolute;
      border-radius: 50%;
      padding: 25px;
      border-style: solid;
      border-width: 5px;
      opacity: 0.75;
      animation-name: animation-border1;
      animation-duration: 2s;
      box-sizing: unset;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
      pointer-events: none;
      transition: .4s;
  }

  .bottom-call-tel.btn-animation1::before {
      border-color: transparent var(--call-ani-color) transparent transparent;
  }

  .bottom-call-tel.btn-animation1::after {
      border-color: transparent transparent transparent var(--call-ani-color);
  }

  .btn-animation2::before {
      border-color: transparent var(--tele-ani-color) transparent transparent;
  }

  .bottom-call-tel.btn-animation2::after {
      border-color: transparent transparent transparent var(--tele-ani-color);
  }

  @keyframes animation-border {
      0% {
          padding: var(--animation-start-range);
          padding: var(--animation-start-range);
          opacity: 0.75;
      }

      75% {
          padding: var(--animation-end-range);
          padding: var(--animation-end-range);
          opacity: 0;
      }

      100% {
          opacity: 0;
      }
  }

  @keyframes animation-border1 {
      0% {
          padding: var(--animation-start-range);
          padding: var(--animation-start-range);
          opacity: 0.75;
      }

      75% {
          padding: var(--animation-end-range);
          padding: var(--animation-end-range);
          opacity: 0;
      }

      100% {
          opacity: 0;
      }
  }


  .bottom-call-tel.call-container {
      z-index: 999;
      position: fixed;
      left: 30px;
      bottom: 50px;
      display: none;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: var(--main-icon-font-size);
      color: var(--main-icon-color);
      background: var(--call-icon-bg);
      box-shadow: var(--call-icon-box-shadow);
      background-size: 40px;
      background-position: center;
      background-repeat: no-repeat;
      transition: 1s;
      opacity: 0;
      cursor: pointer;
  }

  .bottom-call-tel.telegram-container {
      z-index: 999;
      position: fixed;
      left: 30px;
      bottom: 120px;
      display: none;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: var(--main-icon-font-size);
      color: var(--main-icon-color);
      background: var(--tele-icon-bg);
      box-shadow: var(--tele-icon-box-shadow);
      background-size: 40px;
      background-position: center;
      background-repeat: no-repeat;
      transition: 1s;
      opacity: 0;
      cursor: pointer;
  }

  .bottom-call-tel.call-container span {
      position: absolute;
      left: calc(100% + 10px);
      width: max-content;
      padding: 5px 30px;
      color: var(--main-icon-color);
      background: var(--call-icon-bg);
      border-radius: 100px;
      font-size: 14px;
      opacity: 0;
      transition: .4s;
      transform: translateX(-30px);
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;

  }

  .bottom-call-tel.telegram-container span {
      position: absolute;
      left: calc(100% + 10px);
      width: max-content;
      padding: 5px 30px;
      background: var(--tele-icon-bg);
      box-shadow: var(--tele-icon-box-shadow);
      border-radius: 100px;
      font-size: 14px;
      opacity: 0;
      transition: .4s;
      transform: translateX(-30px);
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .bottom-call-tel.call-container:hover span,
  .bottom-call-tel.telegram-container:hover span {
      opacity: 1;
      transform: translateX(0px);
  }

  .bottom-call-tel:hover::after,
  .bottom-call-tel:hover::before {
      transform: scale(0);
  }

  .heading-text.heading-section h2:before {
      background-color: rgb(255, 189, 43);
  }

  button.btn.btn-shadow,
  .btn:not(.close):not(.mfp-close).btn-shadow,
  a.btn:not([href]):not([tabindex]).btn-shadow {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;

  }

  .heading-text h2>* {
      -webkit-text-fill-color: transparent !important;
      -webkit-background-clip: text !important;
      background: radial-gradient(circle at left top, rgb(248 53 0), rgb(202, 33, 33));
  }

  section button {
      background-color: rgba(202, 33, 33) !important;
  }

  section button:hover {
      background-color: rgb(248 53 0) !important;
  }

  img {
      vertical-align: top;
      border-style: none;
  }

  button.btn,
  .btn:not(.close):not(.mfp-close),
  a.btn:not([href]):not([tabindex]) {
      background-color: rgba(202, 33, 33) !important;
      border: 1px rgb(113, 113, 113) solid !important;

  }

  .btn:not(.close):not(.mfp-close):hover {
      background-color: rgb(248 53 0) !important;
  }

  a.btn:not([href]):not([tabindex]):hover {
      -webkit-box-shadow: none;

  }

  .inspiro-slider .flickity-button:hover {
      background-color: rgb(248 53 0) !important;
  }

  .dropdown.none::before {
      content: none !important;
  }

  .dropdown-submenu::before {
      left: 0 !important;
      width: max-content;
  }


  button.btn,
  .btn:not(.close):not(.mfp-close),
  a.btn:not([href]):not([tabindex]) {
      background-color: rgba(202, 33, 33) !important;
      border: none !important;

  }

  .btn:not(.close):not(.mfp-close):hover {
      background-color: rgb(248 53 0) !important;
  }

  a.btn:not([href]):not([tabindex]):hover {
      -webkit-box-shadow: none;

  }

  .inspiro-slider .flickity-button:hover {
      background-color: rgb(248 53 0) !important;
  }

  .dropdown.none::before {
      content: none !important;
  }


  .dropdown-submenu::before {
      left: 0 !important;
      width: max-content;
  }

  .dropdown-submenu:hover::before {
      left: 3px !important;
  }


  .flickity-button:before {
      color: #ffffff;
  }



  @media (width < 500px) {

      .flickity-button {
          top: 60% !important;
      }
  }

  body {
      overflow-x: hidden;
  }


  @media (width < 1025px) {

      .dropdown-submenu::before {
          content: none !important;
      }

      .header-extras {
          display: none;
      }

      #header #logo {
          /* margin-left: 10px !important; */
          text-align: start !important;
      }


  }

  .share-box {
      width: max-content;
      border-radius: 5px;
      gap: 10px;
  }

  .share-box a svg {
      color: white;
  }

  .share-box a:hover svg {
      color: grey;
  }

  .share-box a {
      border: 1px solid white;
      padding: 10px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }


  .page-links {
      background-color: rgba(0, 0, 0, 0.295);
  }

  .readme-link a {
      color: rgb(234, 194, 56);
  }

  .readme-link {
      background-color: rgba(0, 0, 0, 0.295);
  }

  .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }