:root {
      --size-unit: 16;
      --size-container-ideal: 1440;
      --size-container-min: 991px;
      --size-container-max: 1920px;
      --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
      --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
    }

    html {
      font-size: var(--size-font);
    }

    /* Tablet (Portrait & Landscape) */
    @media screen and (max-width: 991px) and (orientation: portrait) {
      :root {
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;
      }
    }

    /* Mobile Landscape */
    @media screen and (max-width: 991px) and (orientation: landscape) {
      :root {
        --size-container-ideal: 667;
        /* iPhone landscape fallback */
        --size-container-min: 480px;
        --size-container-max: 991px;
      }
    }

    /* Mobile Portrait */
    @media screen and (max-width: 479px) and (orientation: portrait) {
      :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 479px;
      }
    }



    .body.no-scroll {
      overflow: hidden;
    }

    .navbar.color-nav,
    .navigation-content.color-nav {
      background-color: #191919;
    }


    .btn-a-up:hover .arrow._1 {
      transform: translate(150%, -150%);
    }

    .btn-a-up:hover .arrow__bg {
      width: 100%;
      height: 100%;

    }


    .btn-a-d:hover .arrow._1 {
      transform: translate(150%, 150%);
    }

    .btn-a-d:hover .arrow__bg {
      width: 100%;
      height: 100%;

    }






    @media (min-width: 1024px) {
      .line-animation::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0.1em;
        background: var(--blue);
        transform: scaleX(0);
        transition: transform 0.3s;
        transform-origin: right;
      }

      .line-animation:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }


      .wrapper-arrow-slider-left:hover .arrow.left {
        transform: translate(-150%);
      }

      .wrapper-arrow-slider-left:hover .arrow__bg {
        width: 100%;
        height: 100%;

      }

      .wrapper-arrow-slider:hover .arrow.right {
        transform: translate(150%);
      }

      .wrapper-arrow-slider:hover .arrow__bg {
        width: 100%;
        height: 100%;

      }

    }