@import url(https://fonts.googleapis.com/css?family=Poppins:300,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&display=swap);

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-width: 320px;
}

body {
  color: rgb(240, 240, 245);
  line-height: 1;
  font-family: "Inter Tight", sans-serif;
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea {
  font-family: "Inter Tight", sans-serif;
  font-size: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: inherit;
}

input::-ms-clear {
  display: none;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a {
  color: inherit;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img, svg {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

/* Remove annoying border on linked images. */
a img {
  border: none;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

blockquote, q {
  quotes: "" "";
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

table, td, th {
  vertical-align: middle;
}

html {
  scroll-behavior: smooth;
}

body {
  background: hsl(245, 75%, 5%);
}
.lock body {
  overflow: hidden;
  touch-action: none;
}
.wrapper {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.wrapper > main {
  flex: 1 1 auto;
}
.wrapper > * {
  min-width: 0;
}

/*
(i) Стили будут применяться ко 
всем классам содержащим *__container
Например header__container, main__container и т.д.
Снипет (HTML): cnt
*/
[class*=__container] {
  max-width: 71.25rem;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 0 0.9375rem;
}

body::after {
  content: "";
  background-color: hsla(246, 76%, 5%, 0.85);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease 0s;
  pointer-events: none;
  z-index: 149;
}

.popup-show body::after {
  opacity: 1;
}

.popup {
  position: fixed;
  inset: 0;
  padding: 1.5rem;
  transition: visibility 0.7s ease 0s;
  visibility: hidden;
  pointer-events: none;
}
.popup__wrapper {
  flex-direction: column;
  min-height: 100%;
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup__content {
  visibility: hidden;
  transform: scale(0);
  transition: transform 0.3s ease 0s;
  background-color: #242236;
  width: 50%;
  max-width: 40rem;
  text-align: center;
  border: solid 0.1875rem hsl(266, 96%, 65%);
}
@supports (padding: clamp( 2rem , -0.389380531rem  +  7.0796460177vw , 4rem )) {
  .popup__content {
    padding: clamp( 2rem , -0.389380531rem  +  7.0796460177vw , 4rem );
  }
}
@supports not (padding: clamp( 2rem , -0.389380531rem  +  7.0796460177vw , 4rem )) {
  .popup__content {
    padding: calc(
			2rem + 2 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .popup__content {
    border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem );
  }
}
@supports not (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .popup__content {
    border-radius: calc(
			0.75rem + 0.75 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (max-width: 768px) {
  .popup__content {
    width: 80%;
  }
}
@media (max-width: 540px) {
  .popup__content {
    width: 100%;
  }
}
.popup__text {
  font-weight: 500;
  line-height: 1.25;
}
@supports (font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .popup__text {
    font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem );
  }
}
@supports not (font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .popup__text {
    font-size: calc(
			1.25rem + 1 * (100vw - 20rem) / 42
		);
  }
}
@supports (margin-bottom: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .popup__text {
    margin-bottom: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem );
  }
}
@supports not (margin-bottom: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .popup__text {
    margin-bottom: calc(
			1.25rem + 1 * (100vw - 20rem) / 42
		);
  }
}
.popup__mail {
  color: hsl(266, 96%, 65%);
}

.popup_show {
  z-index: 150;
  visibility: visible;
  overflow: auto;
  pointer-events: auto;
}

.popup_show .popup__content {
  visibility: visible;
  transform: scale(1);
}

._sending .popup__text_sending {
  display: block;
}
._sending .popup__text_error {
  display: none;
}
._sending .popup__text_success {
  display: none;
}
._sending .popup__close {
  display: none;
}

._error .popup__text_sending {
  display: none;
}
._error .popup__text_error {
  display: block;
}
._error .popup__text_success {
  display: none;
}
._error .popup__close {
  display: inline-block;
}

._success .popup__text_sending {
  display: none;
}
._success .popup__text_error {
  display: none;
}
._success .popup__text_success {
  display: block;
}
._success .popup__close {
  display: inline-block;
}

[class*=-ibg] {
  position: relative;
}
[class*=-ibg] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

[class*=-ibg_contain] img {
  object-fit: contain;
}

.btn {
  text-transform: capitalize;
  display: inline-block;
  border-radius: 0.75rem;
  line-height: 1;
  padding: 0.75em;
  transition: box-shadow 0.3s ease;
  text-align: center;
  min-width: 8.5rem;
  cursor: pointer;
  letter-spacing: 0.0625rem;
  border: solid 0.1875rem;
}
@supports (font-size: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem )) {
  .btn {
    font-size: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem )) {
  .btn {
    font-size: calc(
			1rem + 0.25 * (100vw - 20rem) / 53.125
		);
  }
}
@media (max-width: 768px) {
  .btn {
    width: 35%;
  }
}
.btn_main {
  font-weight: 700;
  color: #000766;
  border-color: hsl(36, 100%, 50%);
  background-color: hsl(36, 100%, 50%);
}
@media (any-hover: hover) {
  .btn_main:hover {
    box-shadow: 0 0rem 0.75rem 0.5rem hsla(36, 100%, 50%, 0.55);
  }
}
.btn_main:focus-visible {
  box-shadow: 0 0rem 0.75rem 0.5rem hsla(36, 100%, 50%, 0.55);
}
.btn_second {
  font-weight: 600;
  border-color: hsl(266, 96%, 55%);
}
@media (any-hover: hover) {
  .btn_second:hover {
    box-shadow: 0 0rem 0.75rem 0.5rem hsla(266, 96%, 70%, 0.4);
  }
}
.btn_second:focus-visible {
  box-shadow: 0 0rem 0.75rem 0.5rem hsla(266, 96%, 70%, 0.4);
}

.subtitle {
  text-transform: uppercase;
  color: hsl(36, 100%, 50%);
  letter-spacing: 3px;
  text-align: center;
}
@supports (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .subtitle {
    font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .subtitle {
    font-size: calc(
			1rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}

.title {
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
@supports (margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem )) {
  .title {
    margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem );
  }
}
@supports not (margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem )) {
  .title {
    margin-bottom: calc(
			1.5rem + 1.5 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 3.375rem , -0.1081460674rem  +  5.6179775281vw , 4rem )) {
  .title {
    font-size: clamp( 3.375rem , -0.1081460674rem  +  5.6179775281vw , 4rem );
  }
}
@supports not (font-size: clamp( 3.375rem , -0.1081460674rem  +  5.6179775281vw , 4rem )) {
  .title {
    font-size: calc(
			3.375rem + 0.625 * (100vw - 62rem) / 11.125
		);
  }
}
@media (max-width: 992px) {
  @supports (font-size: clamp( 2rem , 1.3452380952rem  +  3.2738095238vw , 3.375rem )) {
    .title {
      font-size: clamp( 2rem , 1.3452380952rem  +  3.2738095238vw , 3.375rem );
    }
  }
  @supports not (font-size: clamp( 2rem , 1.3452380952rem  +  3.2738095238vw , 3.375rem )) {
    .title {
      font-size: calc(
			2rem + 1.375 * (100vw - 20rem) / 42
		);
    }
  }
}
.title_hero {
  text-align: start;
  margin-bottom: 0;
}
@supports (font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem )) {
  .title_hero {
    font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem );
  }
}
@supports not (font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem )) {
  .title_hero {
    font-size: calc(
			3.6875rem + 0.6875 * (100vw - 62rem) / 11.125
		);
  }
}
@media (max-width: 992px) {
  @supports (font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem )) {
    .title_hero {
      font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem );
    }
  }
  @supports not (font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem )) {
    .title_hero {
      font-size: calc(
			2.8125rem + 0.875 * (100vw - 48rem) / 14
		);
    }
  }
}
@media (max-width: 768px) {
  .title_hero {
    text-align: center;
  }
  @supports (font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
    .title_hero {
      font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem );
    }
  }
  @supports not (font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
    .title_hero {
      font-size: calc(
			1.875rem + 1.125 * (100vw - 20rem) / 28
		);
    }
  }
}

.header {
  position: fixed;
  width: 100%;
  z-index: 99;
  border-bottom: solid 2px transparent;
  transition: all 0.4s ease-in-out, top 0.5s ease;
}
.header._shadowed {
  backdrop-filter: blur(10px);
  background: rgba(5, 3, 29, 0.75);
  border-bottom: solid 2px rgba(255, 255, 255, 0.3);
}
.menu {
  display: flex;
  color: #d2d2d2;
  align-items: center;
  font-size: 0;
}
.menu__home {
  margin-right: auto;
  margin-block: 0.375rem;
}
.menu__home::before {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  -webkit-mask: url(../img/icons/home.svg) no-repeat 50% 50%;
  mask: url(../img/icons/home.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #d2d2d2;
  transition: background-color 0.3s ease-in-out;
}
@supports (width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem )) {
  .menu__home::before {
    width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem );
  }
}
@supports not (width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem )) {
  .menu__home::before {
    width: calc(
			2.25rem + 1 * (100vw - 20rem) / 53.125
		);
  }
}
@media (any-hover: hover) {
  .menu__home:hover::before {
    background-color: hsl(266, 96%, 65%);
  }
}
.menu__home:focus-visible::before {
  background-color: hsl(266, 96%, 65%);
}
.menu__items {
  display: flex;
  font-weight: 700;
}
@supports (font-size: clamp( 1.25rem , 1.0617647059rem  +  0.9411764706vw , 1.75rem )) {
  .menu__items {
    font-size: clamp( 1.25rem , 1.0617647059rem  +  0.9411764706vw , 1.75rem );
  }
}
@supports not (font-size: clamp( 1.25rem , 1.0617647059rem  +  0.9411764706vw , 1.75rem )) {
  .menu__items {
    font-size: calc(
			1.25rem + 0.5 * (100vw - 20rem) / 53.125
		);
  }
}
@supports (margin-right: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem )) {
  .menu__item:not(:last-child) {
    margin-right: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem );
  }
}
@supports not (margin-right: clamp( 1rem , 0.9058823529rem  +  0.4705882353vw , 1.25rem )) {
  .menu__item:not(:last-child) {
    margin-right: calc(
			1rem + 0.25 * (100vw - 20rem) / 53.125
		);
  }
}
.menu__link {
  padding-block: 12px;
  position: relative;
  transition: all 0.3s ease-in-out;
}
@media (any-hover: hover) {
  .menu__link:hover {
    color: hsl(266, 96%, 65%);
  }
}
.menu__link:focus-visible {
  color: hsl(266, 96%, 65%);
}

.footer {
  border-top: solid 2px rgba(255, 255, 255, 0.3);
}
.footer__wrapper {
  display: flex;
  align-items: center;
}
@media (max-width: 540px) {
  .footer__wrapper {
    flex-direction: column-reverse;
  }
}
.footer__text {
  margin-right: auto;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
  color: #d2d2d2;
  font-weight: 300;
}
@supports (font-size: clamp( 0.875rem , 0.6964285714rem  +  0.8928571429vw , 1.25rem )) {
  .footer__text {
    font-size: clamp( 0.875rem , 0.6964285714rem  +  0.8928571429vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 0.875rem , 0.6964285714rem  +  0.8928571429vw , 1.25rem )) {
  .footer__text {
    font-size: calc(
			0.875rem + 0.375 * (100vw - 20rem) / 42
		);
  }
}
@media (max-width: 540px) {
  .footer__text {
    margin-right: unset;
    margin-bottom: 0.875rem;
  }
}
.social-icons {
  font-size: 0;
  display: flex;
}

.social-icon {
  display: block;
  margin-block: 0.75rem;
  transition: scale 0.3s ease;
}
@supports (max-width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem )) {
  .social-icon {
    max-width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem );
  }
}
@supports not (max-width: clamp( 2.25rem , 1.8735294118rem  +  1.8823529412vw , 3.25rem )) {
  .social-icon {
    max-width: calc(
			2.25rem + 1 * (100vw - 20rem) / 53.125
		);
  }
}
@supports (margin-right: clamp( 0.75rem , 0.3019911504rem  +  1.3274336283vw , 1.125rem )) {
  .social-icon:not(:last-child) {
    margin-right: clamp( 0.75rem , 0.3019911504rem  +  1.3274336283vw , 1.125rem );
  }
}
@supports not (margin-right: clamp( 0.75rem , 0.3019911504rem  +  1.3274336283vw , 1.125rem )) {
  .social-icon:not(:last-child) {
    margin-right: calc(
			0.75rem + 0.375 * (100vw - 33.75rem) / 28.25
		);
  }
}
.social-icon img {
  height: auto;
  width: 100%;
}
@media (any-hover: hover) {
  .social-icon:hover {
    scale: 1.1;
  }
}
.social-icon:focus-visible {
  scale: 1.1;
}

.typing-text {
  text-align: start;
  font-weight: 700;
  line-height: 1.2;
}
@supports (margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem )) {
  .typing-text {
    margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem );
  }
}
@supports not (margin-bottom: clamp( 1.5rem , 0.7857142857rem  +  3.5714285714vw , 3rem )) {
  .typing-text {
    margin-bottom: calc(
			1.5rem + 1.5 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem )) {
  .typing-text {
    font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem );
  }
}
@supports not (font-size: clamp( 3.6875rem , -0.1439606742rem  +  6.1797752809vw , 4.375rem )) {
  .typing-text {
    font-size: calc(
			3.6875rem + 0.6875 * (100vw - 62rem) / 11.125
		);
  }
}
@media (max-width: 992px) {
  @supports (font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem )) {
    .typing-text {
      font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem );
    }
  }
  @supports not (font-size: clamp( 2.8125rem , -0.1875rem  +  6.25vw , 3.6875rem )) {
    .typing-text {
      font-size: calc(
			2.8125rem + 0.875 * (100vw - 48rem) / 14
		);
    }
  }
}
@media (max-width: 768px) {
  .typing-text {
    text-align: center;
  }
  @supports (font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
    .typing-text {
      font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem );
    }
  }
  @supports not (font-size: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
    .typing-text {
      font-size: calc(
			1.875rem + 1.125 * (100vw - 20rem) / 28
		);
    }
  }
}
.typing-text__text {
  color: hsl(266, 96%, 65%);
}
.typed-cursor {
  color: hsl(266, 96%, 65%);
  font-weight: 400;
  text-indent: -6.25rem;
}

.social-icon {
  transform: translateY(100%);
  opacity: 0;
}

._animated .social-icon {
  animation: b-to-t 0.5s cubic-bezier(0.5, 1.5, 0.7, 1) forwards;
}

._anim__parent > *:nth-child(1) {
  animation-delay: 0.15s;
}

._anim__parent > *:nth-child(2) {
  animation-delay: 0.3s;
}

._anim__parent > *:nth-child(3) {
  animation-delay: 0.45s;
}

._anim__parent > *:nth-child(4) {
  animation-delay: 0.6s;
}

._anim__parent > *:nth-child(5) {
  animation-delay: 0.75s;
}

@keyframes b-to-t {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
._shader {
  background-color: hsl(245, 75%, 5%);
  position: absolute;
  inset: 0;
  z-index: 999;
}
._shader.loaded {
  animation: fade-in 0.7s ease-in forwards;
}

@keyframes fade-in {
  to {
    opacity: 0;
  }
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 7.5rem;
  column-gap: 10%;
}
@supports (padding-top: clamp( 5rem , 2.9166666667rem  +  10.4166666667vw , 9.375rem )) {
  .hero {
    padding-top: clamp( 5rem , 2.9166666667rem  +  10.4166666667vw , 9.375rem );
  }
}
@supports not (padding-top: clamp( 5rem , 2.9166666667rem  +  10.4166666667vw , 9.375rem )) {
  .hero {
    padding-top: calc(
			5rem + 4.375 * (100vw - 20rem) / 42
		);
  }
}
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    row-gap: 10%;
  }
  @supports (margin-bottom: clamp( 5rem , 1.4285714286rem  +  17.8571428571vw , 10rem )) {
    .hero {
      margin-bottom: clamp( 5rem , 1.4285714286rem  +  17.8571428571vw , 10rem );
    }
  }
  @supports not (margin-bottom: clamp( 5rem , 1.4285714286rem  +  17.8571428571vw , 10rem )) {
    .hero {
      margin-bottom: calc(
			5rem + 5 * (100vw - 20rem) / 28
		);
    }
  }
}
.hero__text-content {
  flex: 0 0 65%;
}
@media (max-width: 768px) {
  .hero__text-content {
    flex-basis: auto;
  }
  @supports (margin-bottom: clamp( 3.4375rem , 1.4285714286rem  +  10.0446428571vw , 6.25rem )) {
    .hero__text-content {
      margin-bottom: clamp( 3.4375rem , 1.4285714286rem  +  10.0446428571vw , 6.25rem );
    }
  }
  @supports not (margin-bottom: clamp( 3.4375rem , 1.4285714286rem  +  10.0446428571vw , 6.25rem )) {
    .hero__text-content {
      margin-bottom: calc(
			3.4375rem + 2.8125 * (100vw - 20rem) / 28
		);
    }
  }
}
@media (min-width: 768.1px) {
  .hero__subtitle {
    text-align: start;
  }
}
.hero__descr {
  line-height: 1.35;
  font-family: "Poppins", sans-serif;
  color: #d2d2d2;
}
@supports (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .hero__descr {
    font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .hero__descr {
    font-size: calc(
			1rem + 0.25 * (100vw - 20rem) / 42
		);
  }
}
@supports (margin-bottom: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
  .hero__descr {
    margin-bottom: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem );
  }
}
@supports not (margin-bottom: clamp( 1.875rem , 1.0714285714rem  +  4.0178571429vw , 3rem )) {
  .hero__descr {
    margin-bottom: calc(
			1.875rem + 1.125 * (100vw - 20rem) / 28
		);
  }
}
@media (max-width: 768px) {
  .hero__descr {
    text-align: center;
    max-width: 41.25rem;
  }
}
.hero__btns {
  display: flex;
  justify-content: center;
}
@supports (gap: clamp( 1rem , -0.4933628319rem  +  4.4247787611vw , 2.25rem )) {
  .hero__btns {
    gap: clamp( 1rem , -0.4933628319rem  +  4.4247787611vw , 2.25rem );
  }
}
@supports not (gap: clamp( 1rem , -0.4933628319rem  +  4.4247787611vw , 2.25rem )) {
  .hero__btns {
    gap: calc(
			1rem + 1.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (max-width: 768px) {
  .hero__btns {
    justify-content: space-evenly;
  }
}
.hero::before, .hero::after {
  content: "";
  display: block;
  position: absolute;
  width: min(50vw, min(40rem, 50vh));
  height: min(50vw, min(40rem, 50vh));
  background: linear-gradient(162deg, rgba(0, 195, 255, 0.4) 0%, rgba(255, 40, 195, 0.6) 100%);
  filter: blur(100px);
  border-radius: 50%;
  z-index: -5;
}
.hero::before {
  opacity: 0.8;
  top: 0;
  left: 0;
  transform: translate(-50%, -23%);
}
.hero::after {
  opacity: 0.6;
  right: 0;
  bottom: 0;
  transform: translate(48%, 70%);
}

.media-hero {
  position: relative;
  flex: 1 1 auto;
  z-index: -1;
}
@media (max-width: 768px) {
  .media-hero {
    width: 35%;
  }
}
.media-hero__man {
  position: relative;
  z-index: -5;
}
.media-hero__man img {
  height: auto;
  width: 100%;
}
.media-hero__mouse {
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 30%;
}
.media-hero__mouse img {
  height: auto;
  width: 100%;
}
.media-hero__like {
  position: absolute;
  z-index: -3;
  top: 30%;
  left: -40%;
  width: 28%;
}
.media-hero__like img {
  height: auto;
  width: 100%;
}
.media-hero__webcam {
  position: absolute;
  bottom: -15%;
  right: -25%;
  width: 30%;
}
.media-hero__webcam img {
  height: auto;
  width: 100%;
}
.media-hero__keyboard {
  position: absolute;
  top: -40%;
  left: 5%;
  width: 40%;
}
.media-hero__keyboard img {
  height: auto;
  width: 100%;
}
.media-hero__joistick {
  position: absolute;
  top: -15%;
  right: -25%;
  width: 25%;
}
.media-hero__joistick img {
  height: auto;
  width: 100%;
}

.media-hero._rotation > :not(:first-child) {
  animation: 180s linear 0s infinite rotate_clockwise;
}
.media-hero._rotation > :not(:first-child) img {
  animation: 180s linear 0s infinite rotate_counterclockwise;
}

@keyframes rotate_clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate_counterclockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@supports (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .benefits {
    margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem );
  }
}
@supports not (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .benefits {
    margin-bottom: calc(
			3.75rem + 3.75 * (100vw - 20rem) / 42
		);
  }
}
.benefits__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@supports (row-gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .benefits__cards {
    row-gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem );
  }
}
@supports not (row-gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .benefits__cards {
    row-gap: calc(
			1rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (margin-inline: clamp( -0.75rem , -0.2013274336rem  +  -0.8849557522vw , -0.5rem )) {
  .benefits__cards {
    margin-inline: clamp( -0.75rem , -0.2013274336rem  +  -0.8849557522vw , -0.5rem );
  }
}
@supports not (margin-inline: clamp( -0.75rem , -0.2013274336rem  +  -0.8849557522vw , -0.5rem )) {
  .benefits__cards {
    margin-inline: calc(
			-0.5rem + -0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
.perk-card {
  flex: 0 1 33.333%;
}
@supports (padding-inline: clamp( 0.5rem , 0.2013274336rem  +  0.8849557522vw , 0.75rem )) {
  .perk-card {
    padding-inline: clamp( 0.5rem , 0.2013274336rem  +  0.8849557522vw , 0.75rem );
  }
}
@supports not (padding-inline: clamp( 0.5rem , 0.2013274336rem  +  0.8849557522vw , 0.75rem )) {
  .perk-card {
    padding-inline: calc(
			0.5rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (max-width: 768px) {
  .perk-card {
    flex: 0 1 50%;
  }
}
@media (max-width: 640px) {
  .perk-card:last-child {
    flex: 0 1 100%;
  }
}
@media (max-width: 540px) {
  .perk-card {
    flex: 0 1 100%;
  }
}
.perk-card__wrapper {
  background-color: #242236;
  height: 100%;
}
@supports (padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .perk-card__wrapper {
    padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .perk-card__wrapper {
    padding-block: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .perk-card__wrapper {
    padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem );
  }
}
@supports not (padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .perk-card__wrapper {
    padding-inline: calc(
			1rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .perk-card__wrapper {
    border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem );
  }
}
@supports not (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .perk-card__wrapper {
    border-radius: calc(
			0.75rem + 0.75 * (100vw - 33.75rem) / 28.25
		);
  }
}
.perk-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@supports (gap: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem )) {
  .perk-card__head {
    gap: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem );
  }
}
@supports not (gap: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem )) {
  .perk-card__head {
    gap: calc(
			0.5rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (margin-bottom: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem )) {
  .perk-card__head {
    margin-bottom: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem );
  }
}
@supports not (margin-bottom: clamp( 0.5rem , -0.0973451327rem  +  1.7699115044vw , 1rem )) {
  .perk-card__head {
    margin-bottom: calc(
			0.5rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
.perk-card__title {
  color: #d2d2d2;
  font-weight: 500;
}
@supports (font-size: clamp( 1.3125rem , -0.1875rem  +  3.125vw , 1.75rem )) {
  .perk-card__title {
    font-size: clamp( 1.3125rem , -0.1875rem  +  3.125vw , 1.75rem );
  }
}
@supports not (font-size: clamp( 1.3125rem , -0.1875rem  +  3.125vw , 1.75rem )) {
  .perk-card__title {
    font-size: calc(
			1.3125rem + 0.4375 * (100vw - 48rem) / 14
		);
  }
}
@media (max-width: 768px) {
  @supports (font-size: clamp( 1.3125rem , 0.5723684211rem  +  2.1929824561vw , 1.625rem )) {
    .perk-card__title {
      font-size: clamp( 1.3125rem , 0.5723684211rem  +  2.1929824561vw , 1.625rem );
    }
  }
  @supports not (font-size: clamp( 1.3125rem , 0.5723684211rem  +  2.1929824561vw , 1.625rem )) {
    .perk-card__title {
      font-size: calc(
			1.3125rem + 0.3125 * (100vw - 33.75rem) / 14.25
		);
    }
  }
}
@media (max-width: 540px) {
  @supports (font-size: clamp( 1.3125rem , 0.8579545455rem  +  2.2727272727vw , 1.625rem )) {
    .perk-card__title {
      font-size: clamp( 1.3125rem , 0.8579545455rem  +  2.2727272727vw , 1.625rem );
    }
  }
  @supports not (font-size: clamp( 1.3125rem , 0.8579545455rem  +  2.2727272727vw , 1.625rem )) {
    .perk-card__title {
      font-size: calc(
			1.3125rem + 0.3125 * (100vw - 20rem) / 13.75
		);
    }
  }
}
.perk-card__title span {
  font-weight: 700;
  text-transform: uppercase;
  color: hsl(266, 96%, 65%);
}
.perk-card__image {
  flex-grow: 1;
}
@supports (max-width: clamp( 2.625rem , -0.375rem  +  6.25vw , 3.5rem )) {
  .perk-card__image {
    max-width: clamp( 2.625rem , -0.375rem  +  6.25vw , 3.5rem );
  }
}
@supports not (max-width: clamp( 2.625rem , -0.375rem  +  6.25vw , 3.5rem )) {
  .perk-card__image {
    max-width: calc(
			2.625rem + 0.875 * (100vw - 48rem) / 14
		);
  }
}
@media (max-width: 768px) {
  @supports (max-width: clamp( 2.625rem , 1.7368421053rem  +  2.6315789474vw , 3rem )) {
    .perk-card__image {
      max-width: clamp( 2.625rem , 1.7368421053rem  +  2.6315789474vw , 3rem );
    }
  }
  @supports not (max-width: clamp( 2.625rem , 1.7368421053rem  +  2.6315789474vw , 3rem )) {
    .perk-card__image {
      max-width: calc(
			2.625rem + 0.375 * (100vw - 33.75rem) / 14.25
		);
    }
  }
}
@media (max-width: 540px) {
  @supports (max-width: clamp( 2.625rem , 2.0795454545rem  +  2.7272727273vw , 3rem )) {
    .perk-card__image {
      max-width: clamp( 2.625rem , 2.0795454545rem  +  2.7272727273vw , 3rem );
    }
  }
  @supports not (max-width: clamp( 2.625rem , 2.0795454545rem  +  2.7272727273vw , 3rem )) {
    .perk-card__image {
      max-width: calc(
			2.625rem + 0.375 * (100vw - 20rem) / 13.75
		);
    }
  }
}
.perk-card__image img {
  height: auto;
  width: 100%;
}
.perk-card__text {
  line-height: 1.35;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  color: #d2d2d2;
}
@supports (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .perk-card__text {
    font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .perk-card__text {
    font-size: calc(
			1rem + 0.25 * (100vw - 20rem) / 42
		);
  }
}

.portfolio {
  text-align: center;
}
@supports (scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem )) {
  .portfolio {
    scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem );
  }
}
@supports not (scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem )) {
  .portfolio {
    scroll-margin-top: calc(
			1rem + 1 * (100vw - 20rem) / 42
		);
  }
}
@supports (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .portfolio {
    margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem );
  }
}
@supports not (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .portfolio {
    margin-bottom: calc(
			3.75rem + 3.75 * (100vw - 20rem) / 42
		);
  }
}
.work {
  display: flex;
  align-items: center;
}
@supports (gap: clamp( 1rem , -0.7142857143rem  +  3.5714285714vw , 1.5rem )) {
  .work {
    gap: clamp( 1rem , -0.7142857143rem  +  3.5714285714vw , 1.5rem );
  }
}
@supports not (gap: clamp( 1rem , -0.7142857143rem  +  3.5714285714vw , 1.5rem )) {
  .work {
    gap: calc(
			1rem + 0.5 * (100vw - 48rem) / 14
		);
  }
}
@media (max-width: 768px) {
  .work {
    flex-direction: column-reverse;
    gap: 0;
  }
}
.work__text {
  flex: 1 1 50%;
  margin-bottom: 2.25rem;
}
.work__title {
  color: hsl(266, 96%, 65%);
  font-weight: 700;
}
@supports (margin-bottom: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .work__title {
    margin-bottom: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem );
  }
}
@supports not (margin-bottom: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .work__title {
    margin-bottom: calc(
			1rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem )) {
  .work__title {
    font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem );
  }
}
@supports not (font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem )) {
  .work__title {
    font-size: calc(
			2.5rem + 0.5 * (100vw - 62rem) / 11.125
		);
  }
}
@media (max-width: 992px) {
  @supports (font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem )) {
    .work__title {
      font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem );
    }
  }
  @supports not (font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem )) {
    .work__title {
      font-size: calc(
			1.5rem + 1 * (100vw - 20rem) / 42
		);
    }
  }
}
.work__descr {
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: #d2d2d2;
  margin-bottom: 1.125rem;
}
@supports (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .work__descr {
    font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .work__descr {
    font-size: calc(
			1rem + 0.25 * (100vw - 20rem) / 42
		);
  }
}
.work__picture {
  flex: 1 1 50%;
  display: flex;
  max-height: 22.5rem;
  cursor: pointer;
  perspective: 500px;
  margin-bottom: 2.25rem;
}
.work__picture img {
  width: 100%;
  height: auto;
  transition: transform 0.35s ease-out;
  transform-origin: 80%;
  object-fit: contain;
  transform: rotateY(-4deg);
}
.work__picture:hover img, .work__picture:focus img {
  transform: rotateY(0deg);
}
.work__picture picture {
  perspective: 500px;
  display: flex;
}
.work_reverse {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .work_reverse {
    flex-direction: column-reverse;
  }
}
.work_reverse .work__picture img {
  transform-origin: 20%;
  transform: rotateY(4deg);
}
.work_reverse .work__picture:hover img, .work_reverse .work__picture:focus img {
  transform: rotateY(0deg);
}

.work:not(:first-child),
._hidden-works .work {
  border-top: 2px solid hsl(266, 96%, 55%);
  padding-top: 2.25rem;
}

._hidden-works {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

@supports (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .testimon {
    margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem );
  }
}
@supports not (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .testimon {
    margin-bottom: calc(
			3.75rem + 3.75 * (100vw - 20rem) / 42
		);
  }
}
.client__wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.client__info {
  display: flex;
  align-items: flex-end;
}
@supports (padding-inline: clamp( 1rem , 0.578125rem  +  1.25vw , 1.25rem )) {
  .client__info {
    padding-inline: clamp( 1rem , 0.578125rem  +  1.25vw , 1.25rem );
  }
}
@supports not (padding-inline: clamp( 1rem , 0.578125rem  +  1.25vw , 1.25rem )) {
  .client__info {
    padding-inline: calc(
			1rem + 0.25 * (100vw - 33.75rem) / 20
		);
  }
}
@supports (gap: clamp( 0.75rem , 0.328125rem  +  1.25vw , 1rem )) {
  .client__info {
    gap: clamp( 0.75rem , 0.328125rem  +  1.25vw , 1rem );
  }
}
@supports not (gap: clamp( 0.75rem , 0.328125rem  +  1.25vw , 1rem )) {
  .client__info {
    gap: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 20
		);
  }
}
.client__image {
  flex: 0 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: solid 0.5rem #242236;
  z-index: 1;
  overflow: hidden;
}
@supports (flex-basis: clamp( 6.25rem , 1.7045454545rem  +  22.7272727273vw , 9.375rem )) {
  .client__image {
    flex-basis: clamp( 6.25rem , 1.7045454545rem  +  22.7272727273vw , 9.375rem );
  }
}
@supports not (flex-basis: clamp( 6.25rem , 1.7045454545rem  +  22.7272727273vw , 9.375rem )) {
  .client__image {
    flex-basis: calc(
			6.25rem + 3.125 * (100vw - 20rem) / 13.75
		);
  }
}
@supports (margin-bottom: clamp( -4.6875rem , -0.8522727273rem  +  -11.3636363636vw , -3.125rem )) {
  .client__image {
    margin-bottom: clamp( -4.6875rem , -0.8522727273rem  +  -11.3636363636vw , -3.125rem );
  }
}
@supports not (margin-bottom: clamp( -4.6875rem , -0.8522727273rem  +  -11.3636363636vw , -3.125rem )) {
  .client__image {
    margin-bottom: calc(
			-3.125rem + -1.5625 * (100vw - 20rem) / 13.75
		);
  }
}
.client__image img {
  width: 100%;
  height: auto;
}
.client__name {
  text-transform: capitalize;
  color: #d2d2d2;
  font-weight: 700;
  overflow-wrap: break-word;
  height: 2em;
  display: flex;
  align-items: flex-end;
}
@supports (font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .client__name {
    font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem );
  }
}
@supports not (font-size: clamp( 1.25rem , 0.7738095238rem  +  2.380952381vw , 2.25rem )) {
  .client__name {
    font-size: calc(
			1.25rem + 1 * (100vw - 20rem) / 42
		);
  }
}
@supports (margin-bottom: clamp( 0.375rem , -0.0730088496rem  +  1.3274336283vw , 0.75rem )) {
  .client__name {
    margin-bottom: clamp( 0.375rem , -0.0730088496rem  +  1.3274336283vw , 0.75rem );
  }
}
@supports not (margin-bottom: clamp( 0.375rem , -0.0730088496rem  +  1.3274336283vw , 0.75rem )) {
  .client__name {
    margin-bottom: calc(
			0.375rem + 0.375 * (100vw - 33.75rem) / 28.25
		);
  }
}
.client__feedback {
  backdrop-filter: blur(8px);
  background-color: #242236;
}
@supports (padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .client__feedback {
    padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (padding-block: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .client__feedback {
    padding-block: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .client__feedback {
    padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem );
  }
}
@supports not (padding-inline: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .client__feedback {
    padding-inline: calc(
			1rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .client__feedback {
    border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem );
  }
}
@supports not (border-radius: clamp( 0.75rem , -0.1460176991rem  +  2.6548672566vw , 1.5rem )) {
  .client__feedback {
    border-radius: calc(
			0.75rem + 0.75 * (100vw - 33.75rem) / 28.25
		);
  }
}
.client__position {
  font-weight: 500;
  color: hsl(266, 96%, 65%);
}
@supports (margin-bottom: clamp( 0.375rem , 0.1931818182rem  +  0.9090909091vw , 0.5rem )) {
  .client__position {
    margin-bottom: clamp( 0.375rem , 0.1931818182rem  +  0.9090909091vw , 0.5rem );
  }
}
@supports not (margin-bottom: clamp( 0.375rem , 0.1931818182rem  +  0.9090909091vw , 0.5rem )) {
  .client__position {
    margin-bottom: calc(
			0.375rem + 0.125 * (100vw - 20rem) / 13.75
		);
  }
}
@supports (font-size: clamp( 1rem , 0.7013274336rem  +  0.8849557522vw , 1.25rem )) {
  .client__position {
    font-size: clamp( 1rem , 0.7013274336rem  +  0.8849557522vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.7013274336rem  +  0.8849557522vw , 1.25rem )) {
  .client__position {
    font-size: calc(
			1rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (margin-left: clamp( 10.125rem , 9.8263274336rem  +  0.8849557522vw , 10.375rem )) {
  .client__position {
    margin-left: clamp( 10.125rem , 9.8263274336rem  +  0.8849557522vw , 10.375rem );
  }
}
@supports not (margin-left: clamp( 10.125rem , 9.8263274336rem  +  0.8849557522vw , 10.375rem )) {
  .client__position {
    margin-left: calc(
			10.125rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (max-width: 540px) {
  @supports (margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem )) {
    .client__position {
      margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem );
    }
  }
  @supports not (margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem )) {
    .client__position {
      margin-left: calc(
			7rem + 3.125 * (100vw - 20rem) / 13.75
		);
    }
  }
}
@supports (margin-bottom: clamp( 0.375rem , -0.1704545455rem  +  2.7272727273vw , 0.75rem )) {
  .client__rating {
    margin-bottom: clamp( 0.375rem , -0.1704545455rem  +  2.7272727273vw , 0.75rem );
  }
}
@supports not (margin-bottom: clamp( 0.375rem , -0.1704545455rem  +  2.7272727273vw , 0.75rem )) {
  .client__rating {
    margin-bottom: calc(
			0.375rem + 0.375 * (100vw - 20rem) / 13.75
		);
  }
}
@supports (margin-left: clamp( 10.125rem , 9.703125rem  +  1.25vw , 10.375rem )) {
  .client__rating {
    margin-left: clamp( 10.125rem , 9.703125rem  +  1.25vw , 10.375rem );
  }
}
@supports not (margin-left: clamp( 10.125rem , 9.703125rem  +  1.25vw , 10.375rem )) {
  .client__rating {
    margin-left: calc(
			10.125rem + 0.25 * (100vw - 33.75rem) / 20
		);
  }
}
@media (max-width: 540px) {
  @supports (margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem )) {
    .client__rating {
      margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem );
    }
  }
  @supports not (margin-left: clamp( 7rem , 2.4545454545rem  +  22.7272727273vw , 10.125rem )) {
    .client__rating {
      margin-left: calc(
			7rem + 3.125 * (100vw - 20rem) / 13.75
		);
    }
  }
}
.client__rating img {
  max-width: 100%;
  height: auto;
}
.client__text {
  line-height: 1.35;
  font-family: "Poppins", sans-serif;
  color: #d2d2d2;
  font-weight: 300;
}
@supports (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .client__text {
    font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.880952381rem  +  0.5952380952vw , 1.25rem )) {
  .client__text {
    font-size: calc(
			1rem + 0.25 * (100vw - 20rem) / 42
		);
  }
}

.slider__wrapper {
  position: relative;
}

@supports (margin-top: clamp( -0.5rem , 1.7143133929rem  +  -3.5714732143vw , 0.00000625rem )) {
  .swiper {
    margin-top: clamp( -0.5rem , 1.7143133929rem  +  -3.5714732143vw , 0.00000625rem );
  }
}
@supports not (margin-top: clamp( -0.5rem , 1.7143133929rem  +  -3.5714732143vw , 0.00000625rem )) {
  .swiper {
    margin-top: calc(
			0.00000625rem + -0.50000625 * (100vw - 48rem) / 14
		);
  }
}
@media (min-width: 1240px) {
  .swiper {
    padding-inline: 0;
  }
}
@media (min-width: 993px) and (max-width: 1239.999px) {
  .swiper {
    padding-inline: 24px;
  }
}
@media (max-width: 992.999px) {
  .swiper {
    padding-inline: 16px;
  }
}
@media (max-width: 768px) {
  .swiper {
    padding-inline: 0;
  }
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  width: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 992px) {
  @supports (width: clamp( 0.5rem , -0.3571428571rem  +  1.7857142857vw , 0.75rem )) {
    .swiper-button-next,
    .swiper-button-prev {
      width: clamp( 0.5rem , -0.3571428571rem  +  1.7857142857vw , 0.75rem );
    }
  }
  @supports not (width: clamp( 0.5rem , -0.3571428571rem  +  1.7857142857vw , 0.75rem )) {
    .swiper-button-next,
    .swiper-button-prev {
      width: calc(
			0.5rem + 0.25 * (100vw - 48rem) / 14
		);
    }
  }
}
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

.swiper-button-prev {
  left: -30px;
  right: auto;
}
@media (min-width: 992px) and (max-width: 1239px) {
  .swiper-button-prev {
    left: -6px;
  }
}
@media (max-width: 992px) {
  @supports (left: clamp( -0.25rem , 0.3035714286rem  +  -0.8928571429vw , -0.125rem )) {
    .swiper-button-prev {
      left: clamp( -0.25rem , 0.3035714286rem  +  -0.8928571429vw , -0.125rem );
    }
  }
  @supports not (left: clamp( -0.25rem , 0.3035714286rem  +  -0.8928571429vw , -0.125rem )) {
    .swiper-button-prev {
      left: calc(
			-0.125rem + -0.125 * (100vw - 48rem) / 14
		);
    }
  }
}

.swiper-button-next {
  right: -30px;
  left: auto;
}
@media (min-width: 992px) and (max-width: 1239px) {
  .swiper-button-next {
    right: -6px;
  }
}
@media (max-width: 992px) {
  @supports (right: clamp( -0.25rem , 0.6893939394rem  +  -1.5151515152vw , -0.125rem )) {
    .swiper-button-next {
      right: clamp( -0.25rem , 0.6893939394rem  +  -1.5151515152vw , -0.125rem );
    }
  }
  @supports not (right: clamp( -0.25rem , 0.6893939394rem  +  -1.5151515152vw , -0.125rem )) {
    .swiper-button-next {
      right: calc(
			-0.125rem + -0.125 * (100vw - 53.75rem) / 8.25
		);
    }
  }
}

.swiper-button-prev:after {
  content: "";
  display: block;
  background: url("../img/icons/pagArrow.svg") center/100% auto no-repeat;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}

.swiper-button-next:after {
  content: "";
  display: block;
  background: url("../img/icons/pagArrow.svg") center/100% auto no-repeat;
  width: 100%;
  height: 100%;
}

.hire {
  text-align: center;
}
@supports (scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem )) {
  .hire {
    scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem );
  }
}
@supports not (scroll-margin-top: clamp( 1rem , 0.5238095238rem  +  2.380952381vw , 2rem )) {
  .hire {
    scroll-margin-top: calc(
			1rem + 1 * (100vw - 20rem) / 42
		);
  }
}
@supports (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .hire {
    margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem );
  }
}
@supports not (margin-bottom: clamp( 3.75rem , 1.9642857143rem  +  8.9285714286vw , 7.5rem )) {
  .hire {
    margin-bottom: calc(
			3.75rem + 3.75 * (100vw - 20rem) / 42
		);
  }
}
.hire__wrapper {
  display: grid;
  grid-template-columns: min(33.75rem, 100%);
  grid-template-rows: repeat(5, auto);
  justify-items: center;
  align-items: center;
  justify-content: center;
}
@supports (gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .hire__wrapper {
    gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem );
  }
}
@supports not (gap: clamp( 1rem , 0.4026548673rem  +  1.7699115044vw , 1.5rem )) {
  .hire__wrapper {
    gap: calc(
			1rem + 0.5 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (min-width: 860px) {
  .hire__wrapper {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: repeat(2, auto);
  }
}
.hire__label {
  font-weight: 600;
  color: #d2d2d2;
}
@supports (font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem )) {
  .hire__label {
    font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem );
  }
}
@supports not (font-size: clamp( 2.5rem , -0.2865168539rem  +  4.4943820225vw , 3rem )) {
  .hire__label {
    font-size: calc(
			2.5rem + 0.5 * (100vw - 62rem) / 11.125
		);
  }
}
@media (max-width: 992px) {
  @supports (font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem )) {
    .hire__label {
      font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem );
    }
  }
  @supports not (font-size: clamp( 1.5rem , 1.0238095238rem  +  2.380952381vw , 2.5rem )) {
    .hire__label {
      font-size: calc(
			1.5rem + 1 * (100vw - 20rem) / 42
		);
    }
  }
}
.hire__label_upwork {
  grid-area: 1/1/2/2;
}
@media (min-width: 860px) {
  .hire__label_upwork {
    grid-area: 1/1/2/2;
  }
}
.hire__label_direct {
  grid-area: 4/1/5/2;
}
@media (min-width: 860px) {
  .hire__label_direct {
    grid-area: 1/3/2/4;
  }
}
.hire__upwork {
  grid-area: 2/1/3/2;
  overflow: hidden;
  min-width: 100%;
}
@supports (border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .hire__upwork {
    border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .hire__upwork {
    border-radius: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@media (min-width: 860px) {
  .hire__upwork {
    grid-area: 2/1/3/2;
  }
}
.hire__upwork img {
  width: 100%;
  height: auto;
}
.hire__divider {
  grid-area: 3/1/4/2;
  align-self: stretch;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: 0;
  margin-block: 0.75rem;
  min-width: 100%;
}
@supports (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .hire__divider {
    font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .hire__divider {
    font-size: calc(
			1rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}
@media (min-width: 860px) {
  .hire__divider {
    grid-area: 2/2/3/3;
    flex-direction: column;
    margin-inline: 0.75rem;
    margin-block: 0;
  }
}
.hire__divider::before, .hire__divider::after {
  content: "";
  background-color: hsl(266, 96%, 55%);
  height: 2px;
  flex: 0 0 42%;
}
@media (min-width: 860px) {
  .hire__divider::before, .hire__divider::after {
    width: 2px;
  }
}
.hire__form {
  grid-area: 5/1/6/2;
  min-width: 100%;
}
@media (min-width: 860px) {
  .hire__form {
    grid-area: 2/3/3/4;
  }
}

.form__item {
  position: relative;
  font-size: 0rem;
}
.form__label {
  position: absolute;
  left: 0.5rem;
  padding-inline: 0.5rem;
  background-color: hsl(245, 75%, 5%);
  line-height: 1;
  border-radius: 0.25rem;
  pointer-events: none;
  transition: all 0.15s ease-out;
}
@supports (top: clamp( 0.75rem , 0.6904761905rem  +  0.2976190476vw , 0.875rem )) {
  .form__label {
    top: clamp( 0.75rem , 0.6904761905rem  +  0.2976190476vw , 0.875rem );
  }
}
@supports not (top: clamp( 0.75rem , 0.6904761905rem  +  0.2976190476vw , 0.875rem )) {
  .form__label {
    top: calc(
			0.75rem + 0.125 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 1.125rem , 0.7083333333rem  +  2.0833333333vw , 2rem )) {
  .form__label {
    font-size: clamp( 1.125rem , 0.7083333333rem  +  2.0833333333vw , 2rem );
  }
}
@supports not (font-size: clamp( 1.125rem , 0.7083333333rem  +  2.0833333333vw , 2rem )) {
  .form__label {
    font-size: calc(
			1.125rem + 0.875 * (100vw - 20rem) / 42
		);
  }
}
.form__input {
  width: 100%;
  box-shadow: none;
  outline: none;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 2rem;
  padding-inline: 1rem;
  color: rgb(240, 240, 245);
  line-height: 1.25;
}
@supports (padding-block: clamp( 0.5rem , 0.380952381rem  +  0.5952380952vw , 0.75rem )) {
  .form__input {
    padding-block: clamp( 0.5rem , 0.380952381rem  +  0.5952380952vw , 0.75rem );
  }
}
@supports not (padding-block: clamp( 0.5rem , 0.380952381rem  +  0.5952380952vw , 0.75rem )) {
  .form__input {
    padding-block: calc(
			0.5rem + 0.25 * (100vw - 20rem) / 42
		);
  }
}
@supports (border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input {
    border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (border-radius: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input {
    border-radius: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
@supports (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .form__input {
    font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem );
  }
}
@supports not (font-size: clamp( 1rem , 0.7619047619rem  +  1.1904761905vw , 1.5rem )) {
  .form__input {
    font-size: calc(
			1rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}
@media (max-width: 540px) {
  .form__input {
    margin-bottom: 1.5rem;
  }
}
.form__counter {
  position: absolute;
  bottom: 0.75rem;
  left: 1rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 540px) {
  .form__counter {
    left: 0.5rem;
    font-size: 0.875rem;
    bottom: 0.5rem;
  }
}
.form__error {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 1rem;
  color: #ff4848;
  font-weight: 600;
}
@media (max-width: 540px) {
  .form__error {
    right: 0.5rem;
    font-size: 0.875rem;
    bottom: 0.5rem;
  }
}

textarea.form__input {
  resize: vertical;
  min-height: 150px;
  max-height: 450px;
  scrollbar-width: thin;
}
textarea.form__input::-webkit-scrollbar {
  width: 0.5rem;
}
textarea.form__input::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
}
textarea.form__input::-webkit-scrollbar-track {
  margin-top: 0.5rem;
}
textarea.form__input::-webkit-scrollbar-corner {
  background: transparent;
}

.form__input:-webkit-autofill,
.form__input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s;
}

.form__input._form-error,
.form__input:invalid {
  border: 2px solid #ff4848;
}
.form__input._form-error ~ .form__label,
.form__input:invalid ~ .form__label {
  color: #ff4848;
}

.form__input:focus,
.form__input:focus-visible {
  border: 2px solid hsl(266, 96%, 65%);
}
.form__input:focus ~ .form__label,
.form__input:focus-visible ~ .form__label {
  color: hsl(266, 96%, 65%);
}
@supports (top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem );
  }
}
@supports not (top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    top: calc(
			-0.375rem + -0.375 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    font-size: calc(
			0.75rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}
@supports (left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input:focus ~ .form__label,
  .form__input:focus-visible ~ .form__label {
    left: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}

@supports (top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem );
  }
}
@supports not (top: clamp( -0.75rem , -0.1964285714rem  +  -0.8928571429vw , -0.375rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    top: calc(
			-0.375rem + -0.375 * (100vw - 20rem) / 42
		);
  }
}
@supports (font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem );
  }
}
@supports not (font-size: clamp( 0.75rem , 0.5119047619rem  +  1.1904761905vw , 1.25rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    font-size: calc(
			0.75rem + 0.5 * (100vw - 20rem) / 42
		);
  }
}
@supports (left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem );
  }
}
@supports not (left: clamp( 0.75rem , 0.4513274336rem  +  0.8849557522vw , 1rem )) {
  .form__input:not(:placeholder-shown) ~ .form__label {
    left: calc(
			0.75rem + 0.25 * (100vw - 33.75rem) / 28.25
		);
  }
}
/**
 * Swiper 7.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 27, 2021
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
 
  background: rgba(0, 0, 0, 0.1);
}

.swiper-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next + .swiper-slide,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}


.hire {
  text-align: center;
  padding: 20px;
}

.hire__subtitle {
  font-size: 60px;
  margin-bottom: 20px;
}

.hire__title {
  font-size: 32px;
  margin-bottom: 20px;
}

.hire__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* Generous spacing between items */
  padding: 20px 0;
  background: #fff; /* Clean background color */
  border-radius: 15px; /* Rounded corners for a modern look */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
  
}

.hire__wrapper p {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: #444;
  position: relative;
  padding: 10px;
  transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.hire__wrapper p:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  color: #0056b3; /* Darker color for text on hover */
  background-color: #f0f8ff; /* Light background change on hover */
}

.hire__wrapper p a {
  color: #0056b3;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.hire__wrapper p a:hover {
  color: #003d79; /* Darker shade on hover */
}

.hire__wrapper p::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #0056b3; /* Separator color */
  border-radius: 50%;
  margin-right: 15px; /* Space before the text */
}

.hire__wrapper p:first-child::before {
  content: ''; /* No separator for the first item */
  margin-right: 0;
}

@media (max-width: 768px) {
  .hire__wrapper {
      flex-direction: column;
      text-align: center;
  }

  .hire__wrapper p {
      margin: 10px 0; /* Adjust spacing for smaller screens */
  }

  .hire__wrapper p::before {
      display: none; /* Remove separators on small screens */
  }
}



/* In your CSS file */

/* In your CSS file */

.work {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.work__picture,
.work__text {
  opacity: 0;
  transform: translateX(-100%); /* Default position for image (comes from left) */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.work__text {
  transform: translateX(100%); /* Default position for text (comes from right) */
}

.work.visible .work__picture {
  opacity: 1;
  transform: translateX(0);
}

.work.visible .work__text {
  opacity: 1;
  transform: translateX(0);
}

/* Adjust margin to reduce the gap between Portfolio and Contact sections */
.portfolio {
  margin-bottom: 50px; /* Adjust as needed to reduce the gap */
}

.hire {
  margin-top: -30px; /* Move the section up closer to the Portfolio section */
  padding-top: 30px; /* Adjust padding if needed for alignment */
}

.hire__subtitle {
  margin-bottom: 10px; /* Adjust spacing below the subtitle if necessary */
}

/* Add any other styles for the hire section if needed */