#sr {
    height: 2.8em;
    width: 9em;
    background: transparent;
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
    border: 2px solid #e74c3c;
    outline: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 17px;
    border-radius: 6px;
    font-family: IRANSansX !important;
    font-weight: 700;
  }

  #sr:hover {
    background: #e74c3c;
    color: #ffffff;
    animation: squeeze3124 0.9s both;
  }

  @keyframes squeeze3124 {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }

    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }

    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

    .st::before {
      content: "";
      position: absolute;
      top: -2px;
      z-index: 1;
      right: -11px;
      display: block;
      border-radius: 59px;
      background: #b1dae7;
      width: 55px;
      height: 55px;
      transition: all 0.3s ease;
    }

    .lines {
      height: unset !important;
    }


    .page-bg p {
      color: #00abb51f !important;
    }

    .cta:before {
      background: #00abb5 !important;
    }

    .page::before {
      --line: color-mix(in hsl, canvasText, #00acb6 70%) !important;
    }

    .HoverButton .bg {
      background-color: #00abb5 !important;
    }

    /* From Uiverse.io by pathikcomp */
    .main>.inp {
      display: none;
    }

    .main {
      direction: rtl;
      font-weight: 800;
      color: #444444;
      border: 2px double #00abb5;
      padding: 3px 15px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      height: 3.055rem;
      width: 12rem;
      position: relative;
      cursor: pointer;
      justify-content: space-between;
    }

    .sticky .main {
      color: #ffffff;
      border: 1px double #ffffff;
    }

    .sticky .bar-list {
      background-color: #fff;
    }

    .arrow {
      height: 34%;
      aspect-ratio: 1;
      margin-block: auto;
      position: relative;
      display: flex;
      justify-content: center;
      transition: all 0.3s;
    }

    .arrow::after,
    .arrow::before {
      content: "";
      position: absolute;
      background-color: #444444;
      height: 100%;
      width: 2.5px;
      border-radius: 500px;
      transform-origin: bottom;
    }

    .arrow::after {
      transform: rotate(35deg) translateX(-0.5px);
    }

    .arrow::before {
      transform: rotate(-35deg) translateX(0.5px);
    }

    .main>.inp:checked+.arrow {
      transform: rotateX(180deg);
    }

    .menu-container {
      background-color: #00abb5;
      color: #f5f5f5;
      border-radius: 10px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 130%;
      overflow: hidden;
      clip-path: inset(0% 0% 0% 0% round 10px);
      transition: all 0.4s;
    }

    .menu-list {
      --delay: 0.4s;
      --trdelay: 0.15s;
      padding: 8px 10px;
      border-radius: inherit;
      transition: background-color 0.2s 0s;
      position: relative;
      transform: translateY(30px);
      opacity: 0;
      display: flex;
      justify-content: space-between;
    }

    .menu-list::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      height: 1px;
      background-color: rgb(255 255 255 / 31%);
      width: 95%;
    }

    .menu-list:hover {
      background-color: #175053;
    }

    .inp:checked~.menu-container {
      clip-path: inset(10% 50% 90% 50% round 10px);
    }

    .inp:not(:checked)~.menu-container .menu-list {
      transform: translateY(0);
      opacity: 1;
    }

    .inp:not(:checked)~.menu-container .menu-list:nth-child(1) {
      transition: transform 0.4s var(--delay), opacity 0.4s var(--delay);
    }

    .inp:not(:checked)~.menu-container .menu-list:nth-child(2) {
      transition: transform 0.4s calc(var(--delay) + (var(--trdelay) * 1)),
        opacity 0.4s calc(var(--delay) + (var(--trdelay) * 1));
    }

    .inp:not(:checked)~.menu-container .menu-list:nth-child(3) {
      transition: transform 0.4s calc(var(--delay) + (var(--trdelay) * 2)),
        opacity 0.4s calc(var(--delay) + (var(--trdelay) * 2));
    }

    .inp:not(:checked)~.menu-container .menu-list:nth-child(4) {
      transition: transform 0.4s calc(var(--delay) + (var(--trdelay) * 3)),
        opacity 0.4s calc(var(--delay) + (var(--trdelay) * 3));
    }

    .bar-inp {
      -webkit-appearance: none;
      display: none;
      visibility: hidden;
    }

    .bar {
      display: flex;
      height: 50%;
      width: 20px;
      flex-direction: column;
      gap: 3px;
    }

    .bar-list {
      --transform: -25%;
      display: block;
      width: 100%;
      height: 3px;
      border-radius: 50px;
      background-color: #444444;
      transition: all 0.4s;
      position: relative;
    }

    .inp:not(:checked)~.bar>.top {
      transform-origin: top right;
      transform: translateY(var(--transform)) rotate(-45deg);
    }

    .inp:not(:checked)~.bar>.middle {
      transform: translateX(-50%);
      opacity: 0;
    }

    .inp:not(:checked)~.bar>.bottom {
      transform-origin: bottom right;
      transform: translateY(calc(var(--transform) * -1)) rotate(45deg);
    }