.navigation-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0;
  min-width: 70px;
  min-height: 70px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: 0.3s;
}

.navigation-btn::after {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Cpath d='M35.875 5.25126H13.125C12.642 5.25126 12.25 5.64326 12.25 6.12626C12.25 6.60925 12.642 7.00126 13.125 7.00126H35V28.8763C35 29.3593 35.392 29.7513 35.875 29.7513C36.358 29.7513 36.75 29.3593 36.75 28.8763V6.12626C36.75 5.64326 36.358 5.25126 35.875 5.25126Z' fill='white'/%3E%3Cpath d='M35.8749 5.25122C35.6509 5.25122 35.4269 5.33698 35.2554 5.50673L5.50545 35.2568C5.1642 35.5981 5.1642 36.1528 5.50545 36.4941C5.8467 36.8353 6.40145 36.8353 6.7427 36.4941L36.4927 6.74415C36.834 6.4029 36.834 5.84797 36.4927 5.50673C36.323 5.33698 36.0989 5.25122 35.8749 5.25122Z' fill='white'/%3E%3C/svg%3E");
  width: 32px;
  height: 32px;
  background-size: 32px;
  background-repeat: no-repeat;
  transition: 0.3s;
  z-index: 3;
}

.navigation-btn.transparent {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5.050000190734863px);
  min-width: 80px;
  min-height: 80px;
  width: 80px;
  height: 80px;
}

.navigation-btn.primary {
  border: 1px solid var(--elsel-blue);
  background: var(--elsel-blue);
}

.navigation-btn.primary:hover {
  background: transparent;
}

.navigation-btn.primary:hover::after {
  transform: translate(5px, -5px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M21.6514 3.8406H8.42003C8.13912 3.8406 7.91113 4.06859 7.91113 4.3495C7.91113 4.63041 8.13912 4.8584 8.42003 4.8584H21.1425V17.5809C21.1425 17.8619 21.3705 18.0898 21.6514 18.0898C21.9323 18.0898 22.1603 17.8619 22.1603 17.5809V4.3495C22.1603 4.06859 21.9323 3.8406 21.6514 3.8406Z' fill='%230097d8'/%3E%3Cpath d='M21.6516 3.84048C21.5213 3.84048 21.391 3.89035 21.2913 3.98908L3.9887 21.2917C3.79023 21.4902 3.79023 21.8128 3.9887 22.0113C4.18717 22.2098 4.50981 22.2098 4.70828 22.0113L22.0109 4.70877C22.2093 4.51029 22.2093 4.18755 22.0109 3.98908C21.9121 3.89035 21.7819 3.84048 21.6516 3.84048Z' fill='%230097d8'/%3E%3C/svg%3E");
}

.back-btn {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--elsel-grey);
  font-size: var(--font-16);
  font-weight: 400;
  transition: 0.3s;
}

.back-btn > svg {
  transition: 0.3s rotate, 0.3s transform;
}

.back-btn:hover {
  font-weight: 700;
}

.back-btn:hover > svg {
  rotate: 360deg;
  transform: translateX(-5px);
}

.elba-btn {
  position: relative;
  min-width: 200px;
  width: 200px;
  height: 60px;
  border-radius: 900px;
  border: 1px solid var(--elsel-blue-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  gap: 1rem;
  transition: 0.3s;
}

.elba-btn > .icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  transition: 0.3s;
}

.elba-btn > .icon > svg,
.elba-btn > .icon > svg > path {
  transition: 0.3s;
}

.elba-btn > span {
  color: var(--elsel-blue-3);
  font-size: var(--font-18);
  font-weight: 400;
  transition: 0.3s;
}

.elba-btn:hover {
  background: var(--elsel-blue-3);
}

.elba-btn:hover > span {
  opacity: 0;
}

.elba-btn:hover > .icon {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.elba-btn:hover > .icon > svg > path {
  fill: var(--elsel-white);
}

.outlined-btn {
  position: relative;
  min-width: 240px;
  width: fit-content;
  height: 60px;
  border-radius: 100px;
  border: 1px solid var(--elsel-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 4rem 0.5rem 1.5rem;
  gap: 1rem;
  transition: 0.3s;
  z-index: 3;
}

.outlined-btn > span {
  color: var(--elsel-blue);
  font-size: var(--font-18);
  font-weight: 400;
  transition: 0.3s;
}

.outlined-btn::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 90px;
  background: var(--elsel-blue);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: 0.3s;
  z-index: -1;
}

.outlined-btn > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.outlined-btn > .icon > svg {
  transition: 0.3s;
}

.outlined-btn:hover > span {
  color: var(--elsel-white);
}

.outlined-btn:hover::after {
  width: calc(100% - 0.5rem);
}

.outlined-btn:hover > .icon > svg {
  transform: translate(5px, -5px);
}

@media (max-width: 992px) {
  .navigation-btn.transparent {
    min-width: 70px;
    min-height: 70px;
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 768px) {
  .navigation-btn {
    width: 55px;
    height: 55px;
  }
  .navigation-btn::after {
    width: 24px;
    height: 24px;
    background-size: 24px;
  }
  .navigation-btn.transparent {
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 576px) {
  .navigation-btn.transparent {
    min-width: 80px;
    min-height: 80px;
    width: 80px;
    height: 80px;
  }
  .elba-btn {
    min-width: 160px;
    width: fit-content;
    height: 50px;
  }
}

@media (max-width: 450px) {
  .navigation-btn.transparent {
    min-width: 70px;
    min-height: 70px;
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 390px) {
  .navigation-btn.transparent {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
  }
}