@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff") format("woff"), url("../fonts/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter-Regular.ttf") format("truetype"), url("../fonts/Inter-Regular.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Medium.ttf") format("woff"), url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.ttf") format("truetype"), url("../fonts/Inter-Medium.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff") format("woff"), url("../fonts/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter-SemiBold.ttf") format("truetype"), url("../fonts/Inter-SemiBold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff") format("woff"), url("../fonts/Inter-Bold.woff2") format("woff2"), url("../fonts/Inter-Bold.ttf") format("truetype"), url("../fonts/Inter-Bold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-ExtraBold.woff") format("woff"), url("../fonts/Inter-ExtraBold.woff2") format("woff2"), url("../fonts/Inter-ExtraBold.ttf") format("truetype"), url("../fonts/Inter-ExtraBold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Black.woff") format("woff"), url("../fonts/Inter-Black.woff2") format("woff2"), url("../fonts/Inter-Black.ttf") format("truetype"), url("../fonts/Inter-Black.eot") format("embedded-opentype");
}
html {
  scrollbar-width: thin;
  scrollbar-color: #0066FF transparent;
}
html::-webkit-scrollbar {
  width: 8px;
  background: #0066FF;
  border: 1px solid #0066FF;
}
html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
.body {
  font-family: "Inter", "Arial", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #1A1A1A;
  background-color: #F8FAFC;
  position: relative;
  z-index: 0;
}
.body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1160px;
  background: linear-gradient(to bottom, rgba(0, 102, 255, 0.08) 0%, rgba(248, 250, 252, 0) 100%);
  z-index: -1;
}
@media (max-width: 700px) {
  .body::before {
    height: 100%;
  }
}
.body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1160px;
  z-index: -1;
  background-image: url(../images/bg/noise.png);
  background-repeat: repeat;
  opacity: 50%;
}
@media (max-width: 700px) {
  .body::after {
    height: 100%;
  }
}
.body.noScroll {
  overflow: hidden;
}
.bodyAuth::before,
.bodyAuth::after {
  display: none;
}
.bodyPayment::before,
.bodyPayment::after {
  display: none;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
ul,
ol {
  padding: 0;
  margin: 0;
}
ul li {
  list-style: none;
}
input,
textarea,
select {
  padding: 0;
  border: none;
  outline: none;
  font-family: "Inter", "Arial", sans-serif;
}
input::placeholder {
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}
button {
  cursor: pointer;
  outline: none;
}
fieldset {
  padding: 0;
  margin: 0;
  border: none;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}
p {
  padding: 0;
  margin: 0;
}
form .error {
  color: #EF4444;
  margin-bottom: 8px;
}
.button {
  border: none;
  font-family: "Inter", "Arial", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #000000;
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.buttonAccent {
  color: #ffffff;
  background-color: #0066FF;
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.buttonAccentUppercase {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #0066FF;
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.buttonAccentUppercase:hover {
  background-color: #1A75FF;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}
.buttonAccentUppercase:active {
  background-color: #004BCC;
}
.buttonAccent:hover {
  background-color: #1A75FF;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}
.buttonAccent:active {
  background-color: #004BCC;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.15);
}
.buttonGreen {
  color: #ffffff;
  background-color: #1AD1A5;
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.1);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.buttonGreenUppercase {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #1AD1A5;
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.1);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.buttonGreenUppercase:hover {
  background-color: #0FBF90;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.15);
}
.buttonGreen:hover {
  background-color: #0FBF90;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.15);
}
.buttonWhite {
  color: #1A1A1A;
  background-color: #ffffff;
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.3s;
  font-weight: 600;
}
.buttonWhiteUppercase {
  text-transform: uppercase;
  background-color: #ffffff;
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.3s;
  font-weight: 600;
}
.buttonWhiteUppercase:hover {
  background-color: #F3F6FB;
}
.buttonWhite:hover {
  background-color: #F3F6FB;
}
.buttonLight {
  color: #6B7280;
  background-color: #F3F6FB;
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.3s;
  font-weight: 600;
}
.buttonLightUppercase {
  text-transform: uppercase;
  color: #6B7280;
  background-color: #F3F6FB;
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  font-weight: 600;
}
.buttonLightUppercase:hover {
  color: #ffffff;
  background-color: #004BCC;
}
.buttonLight:hover {
  color: #ffffff;
  background-color: #004BCC;
}
.buttonGrey {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #9CA3AF;
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.4s ease-in-out;
  font-weight: 600;
}
.buttonGrey:hover {
  background-color: #004BCC;
}
.wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 1000px) {
  .wrapper {
    padding: 0 40px;
  }
}
@media (max-width: 700px) {
  .wrapper {
    padding: 0 20px;
  }
}
.bottomMenu {
  display: none;
}
@media (max-width: 700px) {
  .bottomMenu {
    display: block;
    position: fixed;
    bottom: 20px;
    width: 100%;
  }
  .bottomMenuList {
    width: 100%;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .bottomMenuLink {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F3F6FB;
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }
  .bottomMenuLink svg path {
    fill: #9CA3AF;
    transition: fill 0.4s ease-in-out;
  }
  .bottomMenuLink.active {
    background-color: #0066FF;
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.15);
  }
  .bottomMenuLink.active svg path {
    fill: #ffffff;
  }
}
.footer {
  background-color: #ffffff;
  padding: 52px 0;
}
.footerContent {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.footerApps {
  display: flex;
  align-items: center;
  gap: 48px;
}
.footerLogos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: flex-end;
  width: 200px;
}
.footerPrivacyItem {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: normal;
}
.footerLink {
  color: #1A1A1A;
  transition: color 0.3s ease-in-out;
}
.footerLink:hover {
  color: #0066FF;
}
@media (max-width: 1300px) {
  .footer {
    padding: 42px 0;
  }
  .footerContent {
    flex-wrap: wrap;
  }
  .footerLogos {
    width: calc(50% - 24px);
  }
  .footerPrivacy {
    width: calc(50% - 24px);
  }
}
@media (max-width: 700px) {
  .footer {
    padding: 32px 0;
  }
  .footerContent {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .footerLogos {
    gap: 16px 32px;
    justify-content: center;
    width: 200px;
  }
  .footerPrivacy {
    width: 100%;
    margin-bottom: 32px;
  }
  .footerPrivacyItem {
    text-align: center;
  }
  .footerApps {
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 32px;
  }
}
.header {
  padding: 20px 0;
}
.headerContent {
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  border-radius: 40px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.headerMenu {
  display: none;
}
.headerAuthLinkMobile {
  display: none;
}
@media (max-width: 1300px) {
  .header {
    position: relative;
    z-index: 10;
  }
  .headerContent {
    position: relative;
    z-index: 10;
  }
  .headerMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: relative;
    margin-left: 24px;
    border-radius: 24px;
    background-color: #F8FAFC;
    box-shadow: 0 8px 16px transparent;
    transition: box-shadow 0.4s ease-in-out;
  }
  .headerMenu:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  .headerMenu.active .headerMenuToggle {
    background-color: transparent;
  }
  .headerMenu.active .headerMenuToggle::before {
    top: 0;
    transform: rotate(45deg);
  }
  .headerMenu.active .headerMenuToggle::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
  .headerMenuToggle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 1.5px;
    background-color: #1A1A1A;
    border-radius: 2px;
  }
  .headerMenuToggle::before,
  .headerMenuToggle::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 1.5px;
    background-color: #1A1A1A;
    border-radius: 2px;
    transition: transform 0.4s ease-in-out;
  }
  .headerMenuToggle::before {
    top: -6px;
  }
  .headerMenuToggle::after {
    bottom: -6px;
  }
  .headerLogo {
    order: -2;
  }
}
@media (max-width: 700px) {
  .headerAuthLink {
    display: none;
  }
  .headerAuthLinkMobile {
    display: flex;
  }
  .headerContent {
    padding: 16px;
  }
  .headerLogo {
    width: 50px;
  }
  .headerMenu {
    width: 32px;
    height: 32px;
    margin-left: 8px;
  }
  .headerMenuToggle {
    width: 18px;
  }
  .headerMenuToggle::before,
  .headerMenuToggle::after {
    width: 18px;
  }
}
.faq {
  margin: 82px 0;
  overflow: hidden;
}
.faqTitle {
  margin-bottom: 42px;
}
.faqList {
  width: calc(50% - 12px);
  align-items: flex-start;
}
.faqListWrapper {
  display: flex;
  gap: 24px;
}
.faqItem {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.faqItemHeader {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  cursor: pointer;
  transition: padding-bottom 0.4s ease-in-out;
}
.faqItemHeaderText {
  width: calc(100% - 47px);
}
.faqItemHeader.active {
  padding-bottom: 10px;
}
.faqItemHeader.active .faqItemIcon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faqItemIcon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #0066FF;
  transition: background-color 0.4s ease-in-out;
  position: relative;
}
.faqItemIcon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 16px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.4s ease-in-out;
}
.faqItemIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 1px;
  height: 16px;
  background: #ffffff;
  border-radius: 2px;
}
.faqItemIcon:hover {
  background-color: #1A75FF;
}
.faqItemIcon:active {
  background-color: #004BCC;
}
.faqItemBody {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.faqItemBody.active {
  max-height: 1000px;
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 1350px) {
  .faqList {
    width: 100%;
  }
  .faqListWrapper {
    flex-direction: column;
    gap: 0;
  }
}
@media (max-width: 1000px) {
  .faq {
    margin: 62px 0;
  }
  .faqTitle {
    margin-bottom: 24px;
  }
  .faqList {
    width: 100%;
  }
  .faqListWrapper {
    flex-direction: column;
  }
  .faqItem {
    padding: 16px;
    margin-bottom: 16px;
  }
  .faqItemHeader {
    font-size: 16px;
    line-height: 28px;
  }
}
@media (max-width: 700px) {
  .faq {
    margin: 52px 0;
  }
}
.featuresHome {
  padding: 52px 0;
}
.featuresHomeTitle {
  margin-bottom: 42px;
}
@media (max-width: 1200px) {
  .featuresHome {
    padding: 42px 0;
  }
  .featuresHomeTitle {
    margin-bottom: 32px;
  }
}
@media (max-width: 700px) {
  .featuresHome {
    padding: 32px 0;
  }
  .featuresHomeTitle {
    margin-bottom: 24px;
  }
}
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.featuresItem {
  width: calc(50% - 12px);
  padding: 24px;
  border-radius: 24px;
  background-color: #F3F6FB;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto auto;
  gap: 16px 24px;
}
.featuresItem img {
  grid-row: 1 / span 2;
  grid-column: 1 / 2;
}
.featuresTitle {
  margin-top: auto;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
@media (max-width: 1300px) {
  .featuresItem {
    grid-template-columns: 100px 1fr;
  }
  .featuresItem img {
    width: 100px;
    margin: auto 0;
  }
}
@media (max-width: 1200px) {
  .features {
    display: flex;
    flex-direction: column;
  }
  .featuresItem {
    width: 100%;
    padding: 24px;
    grid-template-columns: 120px 1fr;
  }
  .featuresItem img {
    width: 120px;
  }
}
@media (max-width: 700px) {
  .featuresItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 16px;
  }
  .featuresItem img {
    width: 160px;
    margin-bottom: 8px;
  }
  .featuresTitle {
    font-size: 20px;
    line-height: 28px;
  }
}
.forWho {
  padding: 52px 0 40px;
}
.forWhoTitle {
  margin-bottom: 16px;
}
.forWho p {
  text-align: center;
  margin-bottom: 12px;
}
@media (max-width: 1000px) {
  .forWho {
    padding: 42px 0 30px;
  }
}
@media (max-width: 700px) {
  .forWho {
    padding: 32px 0;
  }
}
.heroHome {
  text-align: center;
  margin-bottom: 102px;
}
.heroHomeTitle {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 27px;
}
.heroHomeText {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #6B7280;
  max-width: 728px;
  width: 100%;
  margin: 0 auto 52px;
  text-align: center;
}
.heroHomeLinkReg {
  display: inline-block;
}
.heroHomeApps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 48px;
  max-width: 728px;
  width: 100%;
  margin: 52px auto 0;
}
.heroHomeAppsTitle {
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #1AD1A5;
}
@media (max-width: 1000px) {
  .heroHome {
    margin-bottom: 62px;
  }
  .heroHomeTitle {
    max-width: 100%;
    margin: 0 auto;
  }
  .heroHomeText {
    font-size: 16px;
    line-height: 28px;
    max-width: 100%;
    margin: 0 auto 32px;
  }
  .heroHomeApps {
    max-width: 100%;
    margin: 48px auto 0;
  }
  .heroHomeAppsTitle {
    font-size: 16px;
    line-height: 28px;
  }
}
@media (max-width: 700px) {
  .heroHome {
    margin-bottom: 52px;
  }
  .heroHomeText {
    margin: 0 auto 24px;
  }
  .heroHomeApps {
    margin: 32px auto 0;
    gap: 15px;
  }
}
.instruction {
  padding-bottom: 82px;
}
.instructionTitle {
  margin-bottom: 32px;
}
.instructionList {
  display: flex;
  gap: 20px;
}
.instructionItem {
  flex: 1;
}
@media (max-width: 1000px) {
  .instruction {
    padding-bottom: 62px;
  }
  .instructionTitle {
    margin-bottom: 24px;
  }
  .instructionList {
    flex-direction: column;
    gap: 37px;
  }
  .instructionItem {
    width: 100%;
    flex: unset;
  }
}
@media (max-width: 700px) {
  .instruction {
    padding-bottom: 52px;
  }
  .instructionList {
    gap: 24px;
  }
}
.integrationSystems {
  padding: 42px 0 52px;
}
.integrationSystemsTitle {
  margin-bottom: 16px;
}
.integrationSystems p {
  text-align: center;
  margin-bottom: 16px;
}
.integrationSystems p.integrationSystemsItemTitle {
  text-align: left;
  font-size: 24px;
}
.integrationSystemsList {
  margin-top: 42px;
  display: flex;
  gap: 50px;
  z-index: 1;
  position: relative;
}
.integrationSystemsList::before {
  content: "";
  position: absolute;
  top: 43px;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #0066FF;
  pointer-events: none;
  z-index: -1;
}
.integrationSystems .integrationSystemsItem {
  flex: 1;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.4s ease-in-out;
}
.integrationSystems .integrationSystemsItem:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.integrationSystems .integrationSystemsItem.active {
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
}
@media (max-width: 1000px) {
  .integrationSystems {
    padding: 30px 0 42px;
  }
  .integrationSystems p.integrationSystemsItemTitle {
    justify-content: flex-start;
  }
  .integrationSystemsList {
    margin-top: 24px;
    flex-direction: column;
    gap: 24px;
  }
  .integrationSystemsList::before {
    top: unset;
    bottom: 0;
    width: 1px;
    height: 500px;
    right: 50%;
  }
  .integrationSystems .integrationSystemsItem {
    flex: unset;
    width: 100%;
  }
  .integrationSystems .integrationSystemsDesc {
    display: block;
    text-align: left;
  }
}
@media (max-width: 700px) {
  .integrationSystems {
    padding: 0 0 32px;
  }
  .integrationSystems p.integrationSystemsItemTitle {
    font-size: 20px;
    justify-content: center;
    gap: 8px;
  }
  .integrationSystems .integrationSystemsDesc {
    text-align: center;
  }
  .integrationSystems .integrationSystemsItem {
    padding: 16px;
  }
}
@media (max-width: 500px) {
  .integrationSystemsList::before {
    height: 600px;
  }
}
.language {
  position: relative;
  margin-left: 24px;
  padding: 10px 16px;
  border-radius: 24px;
  background-color: #F8FAFC;
  box-shadow: 0 8px 16px transparent;
  transition: box-shadow 0.4s ease-in-out;
}
.language:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.languageButton {
  font-size: 16px;
  line-height: 28px;
  text-transform: uppercase;
}
.language .languageDropdown {
  width: 138px;
}
.language .languageDropdownLink {
  color: #1A1A1A;
  transition: color 0.3s ease-in-out;
}
.language .languageDropdownLink:hover {
  font-weight: 400;
  color: #9CA3AF;
}
@media (max-width: 1300px) {
  .language {
    order: -1;
    margin-left: auto;
    margin-right: 24px;
  }
}
@media (max-width: 700px) {
  .language {
    order: -1;
    margin-left: auto;
    margin-right: 0;
    padding: 5px 16px;
  }
}
.logo {
  display: flex;
}
.main {
  margin-top: 14px;
}
@media (max-width: 700px) {
  .main {
    margin-top: 4px;
  }
}
.mainNav {
  position: relative;
  padding: 0 24px;
  margin: 0 24px;
}
.mainNav::before,
.mainNav:after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #E3E8EF;
  pointer-events: none;
}
.mainNav::before {
  left: 0;
}
.mainNav::after {
  right: 0;
}
.mainNavList {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mainNavItem {
  position: relative;
}
.mainNavItem .mainNavDropdown {
  width: 200px;
}
.mainNavLink {
  display: block;
  font-size: 16px;
  line-height: 28px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  padding: 8px 44px;
  border-radius: 24px;
  box-shadow: 0 8px 16px transparent;
  transition: box-shadow 0.4s ease-in-out;
}
.mainNavLink:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1300px) {
  .mainNav {
    display: none;
  }
}
.paymentInfo {
  padding: 52px 0;
}
.paymentInfoContent {
  display: flex;
  gap: 24px;
}
.paymentInfoText {
  max-width: 728px;
  width: 100%;
}
.paymentInfo .paymentInfoTitle {
  margin-bottom: 12px;
  text-align: left;
}
.paymentInfoCards {
  margin-top: 60px;
}
.paymentInfoCardsItem {
  display: flex;
  font-size: 0;
  line-height: 0;
  position: relative;
  margin-top: -60px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.paymentInfoCardsItem.lifted {
  transform: translateY(-30px);
  z-index: 0;
}
@media (max-width: 1300px) {
  .paymentInfo {
    padding: 42px 0 50px;
  }
  .paymentInfoContent {
    flex-wrap: wrap;
    gap: 32px 24px;
  }
  .paymentInfoText {
    max-width: 100%;
    width: 100%;
  }
  .paymentInfo .paymentInfoTitle {
    margin-bottom: 16px;
    text-align: center;
  }
  .paymentInfoCards {
    margin-top: 90px;
    width: calc(50% - 12px);
  }
  .paymentInfoCardsItem {
    margin-top: -90px;
    justify-content: center;
  }
  .paymentInfoImage {
    width: calc(50% - 12px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 700px) {
  .paymentInfo {
    padding: 32px 0;
  }
  .paymentInfoContent {
    gap: 32px;
  }
  .paymentInfoCards {
    width: 100%;
  }
  .paymentInfoImage {
    display: none;
  }
  .paymentInfoText p {
    text-align: center;
    padding-bottom: 16px;
  }
}
.priceHome {
  margin: 52px 0;
}
.priceHomeTitle {
  position: relative;
  width: fit-content;
  margin: 0 auto 24px;
}
.priceHomePercent {
  position: absolute;
  top: -70%;
  left: -10%;
  background-image: url('../images/icons/discount-sticker.svg');
  background-repeat: no-repeat;
  background-size: contain;
  padding: 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  z-index: -1;
  transform: rotate(-15deg);
}
.priceHomeSubtitle {
  font-weight: 600;
  color: #6B7280;
  text-align: center;
}
.priceHome p {
  text-align: center;
  max-width: 728px;
  width: 100%;
  margin: 0 auto 16px;
}
@media (max-width: 1000px) {
  .priceHome {
    margin: 62px 0;
  }
  .priceHomePercent {
    top: -100%;
    left: -20%;
  }
  .priceHome p {
    max-width: 100%;
    margin-bottom: 0;
  }
}
@media (max-width: 700px) {
  .priceHome {
    margin: 52px 0;
  }
}
.professions {
  padding-top: 85px;
  margin-bottom: 72px;
}
.professionsList {
  display: flex;
}
.professionsItem {
  display: flex;
  width: 230px;
  height: 230px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease-in-out;
}
.professionsItem:nth-child(odd) {
  border: 1px solid #0066FF;
}
.professionsItem:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background-color: rgba(0, 102, 255, 0.2);
  opacity: 0.7;
  pointer-events: none;
}
.professionsItem:nth-child(even) {
  border: 1px solid #1AD1A5;
}
.professionsItem:nth-child(even)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background-color: rgba(26, 209, 165, 0.1);
  opacity: 0.7;
  pointer-events: none;
}
.professionsItem:nth-child(even) .professionsAlt {
  background-color: #1AD1A5;
}
.professionsItem:nth-child(even) .professionsAlt::before {
  background-image: url('../images/icons/alt-corner-green.svg');
}
.professionsItem:first-child {
  transform: rotate(-4deg) translateY(24px);
}
.professionsItem:first-child.hover {
  transform: rotate(-4deg) translateY(-35px);
}
.professionsItem:nth-child(2) {
  transform: rotate(-3deg) translateY(16px);
}
.professionsItem:nth-child(2).hover {
  transform: rotate(-3deg) translateY(-35px);
}
.professionsItem:nth-child(3) {
  transform: rotate(-2deg) translateY(8px);
}
.professionsItem:nth-child(3).hover {
  transform: rotate(-2deg) translateY(-35px);
}
.professionsItem:nth-child(4) {
  transform: rotate(0deg) translateY(0px);
}
.professionsItem:nth-child(4).hover {
  transform: rotate(0deg) translateY(-35px);
}
.professionsItem:nth-child(5) {
  transform: rotate(0deg) translateY(0px);
}
.professionsItem:nth-child(5).hover {
  transform: rotate(0deg) translateY(-35px);
}
.professionsItem:nth-child(6) {
  transform: rotate(2deg) translateY(8px);
}
.professionsItem:nth-child(6).hover {
  transform: rotate(2deg) translateY(-35px);
}
.professionsItem:nth-child(7) {
  transform: rotate(3deg) translateY(16px);
}
.professionsItem:nth-child(7).hover {
  transform: rotate(3deg) translateY(-35px);
}
.professionsItem:nth-child(8) {
  transform: rotate(4deg) translateY(24px);
}
.professionsItem:nth-child(8).hover {
  transform: rotate(4deg) translateY(-35px);
}
.professionsItem:not(:first-child) {
  margin-left: -50px;
}
.professionsItem.move {
  transform: translateX(30px);
}
.professionsItem:hover .professionsAlt {
  opacity: 1;
  pointer-events: auto;
}
.professionsImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 23px;
}
.professionsAlt {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  bottom: 100%;
  margin-bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #ffffff;
  border-radius: 24px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #0066FF;
  transition: opacity 0.4s ease-in-out;
}
.professionsAlt::before {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 30px;
  width: 12px;
  height: 18px;
  background-image: url('../images/icons/alt-corner.svg');
  background-size: cover;
  background-repeat: no-repeat;
}
.professionsHero.swiper {
  display: none;
}
@media (max-width: 1200px) {
  .professions {
    display: none;
  }
  .professionsHero.swiper {
    display: block;
    padding-top: 117px;
    margin-bottom: 32px;
  }
  .professionsHeroButton {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #0066FF;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease-in-out;
  }
  .professionsHeroButton:hover {
    background-color: #1A75FF;
  }
  .professionsHeroButton:active {
    background-color: #004BCC;
  }
  .professionsHeroNav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 24px;
  }
  .professionsHeroPagination {
    max-width: 200px;
    display: flex;
    gap: 16px;
  }
  .professionsHeroPagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #9CA3AF !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: background-color 0.4s ease-in-out;
  }
  .professionsHeroPagination .swiper-pagination-bullet-active {
    background: #0066FF !important;
  }
  .professionsItem {
    transform: rotate(0) translateY(0);
    margin-left: 0;
  }
  .professionsItem:not(:first-child) {
    margin-left: 0;
  }
  .professionsItem.hover {
    transform: rotate(0) translateY(0);
  }
  .professionsItem.move {
    transform: translateX(0);
  }
  .professionsItem.swiper-slide {
    display: flex;
  }
  .professionsItem.swiper-slide::before {
    display: none;
  }
  .professionsItem.swiper-slide-active .professionsAlt {
    opacity: 1;
    pointer-events: auto;
  }
  .professionsItem.swiper-slide-active::before {
    display: none;
  }
  .professionsItem.swiper-slide .professionsImageWrapper {
    transform: scale(0.7);
    transition: transform 0.4s ease-in-out;
  }
  .professionsItem.swiper-slide-active .professionsImageWrapper {
    transform: scale(1);
  }
  .professionsItem:nth-child(odd) {
    border: none;
    box-shadow: none;
  }
  .professionsItem:nth-child(odd)::before {
    display: none;
  }
  .professionsItem:nth-child(odd) .professionsImageWrapper {
    border: 1px solid #0066FF;
  }
  .professionsItem:nth-child(odd) .professionsImageWrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-color: rgba(0, 102, 255, 0.2);
    opacity: 0.7;
    pointer-events: none;
  }
  .professionsItem:nth-child(even) {
    border: none;
    box-shadow: none;
  }
  .professionsItem:nth-child(even)::before {
    display: none;
  }
  .professionsItem:nth-child(even) .professionsImageWrapper {
    border: 1px solid #1AD1A5;
  }
  .professionsItem:nth-child(even) .professionsImageWrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-color: rgba(26, 209, 165, 0.1);
    opacity: 0.7;
    pointer-events: none;
  }
  .professionsItem:hover .professionsAlt {
    opacity: 0;
  }
  .professionsImageWrapper {
    position: relative;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 700px) {
  .professionsHero.swiper {
    padding-top: 100px;
    margin-bottom: 24px;
  }
  .professionsHeroNav {
    gap: 10px;
  }
  .professionsHeroPagination {
    gap: 12px;
    justify-content: center;
  }
  .professionsHeroButton {
    width: 32px;
    height: 32px;
  }
  .professionsItem.swiper-slide .professionsImageWrapper {
    transform: scale(0.7);
  }
  .professionsItem.swiper-slide-active .professionsImageWrapper {
    transform: scale(1.2);
  }
  .professionsAlt::before {
    left: 45px;
  }
}
.qrsInfo {
  margin: 52px 0 82px;
}
.qrsInfoTitle {
  margin-bottom: 32px;
}
.qrsInfoList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.qrsInfo .qrsInfoItem {
  padding: 24px;
  width: calc(33.33% - 14px);
}
.qrsInfo .qrsInfoItemTitle {
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 16px;
}
.qrsInfo .qrsInfoItemImage {
  margin-bottom: 0;
  display: flex;
}
@media (max-width: 1000px) {
  .qrsInfo {
    margin: 62px 0;
  }
  .qrsInfoList {
    gap: 24px;
  }
  .qrsInfo .qrsInfoItem {
    width: calc(50% - 12px);
  }
  .qrsInfo .qrsInfoItemTitle {
    font-size: 16px;
    line-height: 28px;
    justify-content: flex-start;
    gap: 16px;
  }
}
@media (max-width: 700px) {
  .qrsInfo {
    margin: 32px 0 52px;
  }
  .qrsInfoList {
    flex-wrap: wrap;
    gap: 16px;
  }
  .qrsInfo .qrsInfoItem {
    width: 100%;
  }
}
.sectionWhite {
  background-color: #ffffff;
}
.sectionBlue {
  background-color: #0066FF;
  color: #ffffff;
}
.sectionTextBlue {
  color: #0066FF;
}
.sectionCard {
  padding: 32px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.4s ease-in-out;
}
.sectionCard:hover {
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
}
.sectionCardTitle {
  margin-bottom: 32px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  display: flex;
  gap: 24px;
}
.sectionCardTitle span {
  color: #0066FF;
}
.sectionCardImage {
  background-color: #F3F6FB;
  border-radius: 32px;
  margin-bottom: 16px;
  width: 100%;
  padding: 32px;
}
.sectionCardImageSpecial {
  padding: 16px 32px 32px;
}
.sectionCardImageNobg {
  background-color: transparent;
  padding: 0;
}
@media (max-width: 1000px) {
  .sectionCard {
    padding: 16px;
  }
  .sectionCardTitle {
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
  }
  .sectionCardImage {
    display: flex;
    justify-content: center;
    padding: 16px;
  }
  .sectionCardImageSpecial {
    padding: 16px;
  }
  .sectionCardImageNobg {
    padding: 0;
  }
  .sectionCardDesc {
    display: block;
    text-align: center;
  }
}
.sliderProfessions {
  margin-top: 42px;
}
@media (min-width: 1800px) {
  .sliderProfessions {
    height: 880px;
  }
}
.sliderProfessionsWrapper {
  height: 450px !important;
  display: flex;
  transition: all 0.5s ease;
}
.sliderProfessionsSlide.swiper-slide {
  width: calc(50vw / 2) !important;
  position: relative;
}
@media (min-width: 1800px) {
  .sliderProfessionsSlide.swiper-slide {
    height: 800px;
  }
}
.sliderProfessionsSlide.swiper-slide.swiper-slide-active {
  width: 50vw !important;
}
.sliderProfessionsSlide.swiper-slide.swiper-slide-active::before {
  opacity: 0;
}
.sliderProfessionsSlide.swiper-slide.swiper-slide-active::after {
  opacity: 1;
}
.sliderProfessionsSlide.swiper-slide.swiper-slide-active .sliderProfessionsAlt {
  opacity: 1;
}
.sliderProfessionsSlide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4px);
  background-color: #000000;
  opacity: 50%;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.sliderProfessionsSlide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.sliderProfessionsSlide.active {
  width: 50%;
}
.sliderProfessionsSlide.active::before {
  opacity: 0;
}
.sliderProfessionsSlide.active::after {
  opacity: 1;
}
.sliderProfessionsSlide.active .sliderProfessionsAlt {
  opacity: 1;
}
.sliderProfessionsNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 42px;
}
.sliderProfessionsPagination {
  max-width: 200px;
  display: flex;
  gap: 16px;
}
.sliderProfessionsPagination .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: #9CA3AF !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: background-color 0.4s ease-in-out;
}
.sliderProfessionsPagination .swiper-pagination-bullet-active {
  background: #0066FF !important;
}
.sliderProfessionsButton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #0066FF;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-in-out;
}
.sliderProfessionsButton:hover {
  background-color: #1A75FF;
}
.sliderProfessionsButton:active {
  background-color: #004BCC;
}
.sliderProfessionsImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sliderProfessionsAlt {
  position: absolute;
  bottom: 52px;
  left: 52px;
  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  background: rgba(255, 255, 255, 0.2);
  padding: 16px;
  border-radius: 24px;
  backdrop-filter: blur(24px);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
@media (max-width: 1000px) {
  .sliderProfessions {
    margin-top: 24px;
  }
  .sliderProfessionsSlide.swiper-slide {
    width: 100% !important;
  }
  .sliderProfessionsSlide.swiper-slide.swiper-slide-active {
    width: 100% !important;
  }
  .sliderProfessionsSlide.active {
    width: 100%;
  }
  .sliderProfessionsNav {
    margin-bottom: 24px;
  }
  .sliderProfessionsAlt {
    bottom: 40px;
    left: 40px;
  }
}
@media (max-width: 700px) {
  .sliderProfessions {
    margin-top: 24px;
  }
  .sliderProfessionsWrapper {
    height: 360px !important;
  }
  .sliderProfessionsNav {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;
    left: 0;
    padding: 0 20px;
    z-index: 2;
  }
  .sliderProfessionsPagination {
    display: none;
  }
  .sliderProfessionsButton {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .sliderProfessionsAlt {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    padding: 8px 16px;
  }
}
.startingBlock {
  padding: 47px 0;
  position: relative;
}
.startingBlock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(75deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 19%, #ffffff 38%, rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0) 100%);
  opacity: 20%;
  pointer-events: none;
}
.startingBlockContent {
  padding: 0 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: relative;
}
.startingBlockImagesTop {
  display: none;
}
.startingBlockTitle {
  margin-bottom: 24px;
}
.startingBlock p {
  margin-bottom: 16px;
}
.startingBlockMiddle {
  text-align: center;
}
.startingBlockLink {
  margin-top: 16px;
  display: inline-block;
}
@media (max-width: 1300px) {
  .startingBlockContent {
    padding: 0;
  }
}
@media (max-width: 1000px) {
  .startingBlock {
    padding: 24px 0;
  }
  .startingBlockContent {
    padding: 0;
    flex-direction: column;
    gap: 24px;
  }
  .startingBlockImages {
    display: none;
  }
  .startingBlockImagesTop {
    display: block;
  }
  .startingBlockLink {
    margin-top: 24px;
  }
}
@media (max-width: 700px) {
  .startingBlock {
    padding: 32px 0;
  }
  .startingBlockContent {
    gap: 8px;
  }
}
.storeItem {
  width: 220px;
  padding: 18px 27px;
  border-radius: 12px;
  background-color: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.storeItemText {
  font-size: 20px;
  line-height: normal;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.storeItemTextSub {
  font-size: 12px;
  line-height: normal;
  color: #ffffff;
}
.titlePage {
  font-size: 42px;
  line-height: 56px;
  font-weight: 700;
  text-align: center;
}
.titlePage span {
  color: #0066FF;
}
.titleSection {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  color: #0066FF;
}
.titleSectionWhite {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}
.titleAbout {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  color: #1A1A1A;
}
.titleAbout span {
  color: #0066FF;
}
@media (max-width: 1000px) {
  .titlePage {
    font-size: 36px;
    line-height: 48px;
  }
  .titleSection {
    font-size: 28px;
    line-height: 32px;
  }
  .titleSectionWhite {
    font-size: 28px;
    line-height: 32px;
  }
  .titleAbout {
    font-size: 28px;
    line-height: 32px;
  }
}
@media (max-width: 700px) {
  .titlePage {
    font-size: 24px;
    line-height: 28px;
  }
  .titleSection {
    font-size: 24px;
    line-height: 28px;
  }
  .titleSectionWhite {
    font-size: 24px;
    line-height: 28px;
  }
  .titleAbout {
    font-size: 20px;
  }
}
.withdrawInfo {
  margin: 52px 0 82px;
}
.withdrawInfoTitle {
  margin-bottom: 16px;
}
.withdrawInfo p {
  text-align: center;
  margin-bottom: 12px;
}
.withdrawInfoDesign {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
}
.withdrawInfoDesignTiply {
  width: 352px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.withdrawInfoDesignDots {
  display: flex;
  align-items: center;
  gap: 16px;
}
.withdrawInfoDesignDot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0066FF;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.withdrawInfoDesignDot.active {
  transform: scale(1.3);
  background-color: #1AD1A5;
}
@media (max-width: 1000px) {
  .withdrawInfo {
    margin: 42px 0 62px;
  }
  .withdrawInfoDesign {
    margin-top: 32px;
    gap: 16px;
  }
  .withdrawInfoDesignTiply {
    width: 280px;
    height: 160px;
  }
  .withdrawInfoDesignDot {
    display: block;
    width: 10px;
    height: 10px;
  }
  .withdrawInfoDesignDot:nth-child(n+5) {
    display: none;
  }
  .withdrawInfoDesignCard {
    width: 280px;
  }
}
@media (max-width: 700px) {
  .withdrawInfo {
    margin: 52px 0;
  }
  .withdrawInfoDesign {
    flex-direction: column;
    justify-content: center;
    margin-top: 24px;
    gap: 8px;
  }
  .withdrawInfoDesignTiply {
    width: 320px;
  }
  .withdrawInfoDesignDots {
    flex-direction: column;
  }
  .withdrawInfoDesignCard {
    width: 320px;
  }
}
.dropdownMenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-top: 8px;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: 24px;
  transition: opacity 0.3s ease;
}
.dropdownMenu.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.dropdownMenuItem {
  text-align: center;
}
.dropdownMenuItem:not(:last-child) {
  margin-bottom: 10px;
}
.dropdownMenuLink {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 16px;
  line-height: 28px;
  color: #1A1A1A;
  font-weight: 400;
  transition: font-weight 0.2s ease-in-out;
}
.dropdownMenuLink:hover {
  font-weight: 700;
}
.dropdownArrow {
  transform: rotate(0);
  transition: transform 0.3s ease;
  stroke: #1A1A1A;
}
.dropdownToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1A1A1A;
  transition: color 0.3s ease-in-out;
}
.dropdownToggle.active {
  color: #9CA3AF;
}
.dropdownToggle.active .dropdownArrow {
  transform: rotate(180deg);
}
.dropdownToggle.active .dropdownArrow path {
  stroke: #9CA3AF;
  transition: stroke 0.3s ease;
}
.mobileMenu {
  display: none;
}
@media (max-width: 1300px) {
  .mobileMenu {
    display: block;
    width: 100%;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #F8FAFC;
    transition: opacity 0.4s ease-in-out;
  }
  .mobileMenu.active {
    pointer-events: auto;
    opacity: 1;
  }
  .mobileMenu .mainNav {
    display: block;
    height: 100%;
    padding: 162px 40px 0;
    margin: 0;
    transition: opacity 0.4s ease-in-out;
  }
  .mobileMenu .mainNav::before,
  .mobileMenu .mainNav:after {
    display: none;
  }
  .mobileMenu .mainNavList {
    flex-direction: column;
    gap: 0;
  }
  .mobileMenu .mainNavItem {
    width: 100%;
    margin-bottom: 16px;
  }
  .mobileMenu .mainNavItemList {
    margin-top: 16px;
    padding-top: 32px;
    border-top: 1px solid #E3E8EF;
  }
  .mobileMenu .mainNavLink {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .mobileMenu .mainNavLink.active {
    background-color: #0066FF;
    color: #ffffff;
  }
  .mobileMenu .mainNavLink.active svg path {
    fill: #ffffff;
  }
}
@media (max-width: 700px) {
  .mobileMenu {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0066FF transparent;
  }
  .mobileMenu .mainNav {
    padding: 136px 20px 0;
    margin-bottom: 70px;
  }
  .mobileMenu .mainNavAccount .mainNavLink {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobileMenu .mainNavAccount .mainNavLink.active {
    background-color: #0066FF;
    color: #ffffff;
  }
  .mobileMenu .mainNavAccount .mainNavLink.active svg path {
    fill: #ffffff;
  }
  .mobileMenu::-webkit-scrollbar {
    width: 8px;
    background: #0066FF;
    border: 1px solid #0066FF;
  }
  .mobileMenu::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
  }
  .mobileMenu::-webkit-scrollbar-track {
    background: transparent;
  }
}
.about {
  margin-top: 62px;
}
.aboutInfo {
  margin: 62px 0 102px;
  display: flex;
  gap: 24px;
}
.aboutInfoTab {
  display: none;
}
.aboutInfoItem {
  flex: 1;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  border-radius: 24px;
}
.aboutInfoItemTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 18px;
}
.aboutInfoItemTitle span {
  color: #0066FF;
}
.aboutInfoItemAccent {
  background-color: #0066FF;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.aboutInfoItemAccentTab {
  display: none;
}
.aboutInfoItemLink {
  margin-top: auto;
}
.aboutForWho {
  margin-bottom: 82px;
  display: flex;
  gap: 24px;
}
.aboutForWhoImages {
  width: calc(50% - 12px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 316px 316px;
  gap: 24px;
}
.aboutForWhoImages img {
  border-radius: 22px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aboutForWhoImageTab {
  display: none;
}
.aboutForWhoImageGreen {
  border: 1px solid #1AD1A5;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  border-radius: 24px;
}
.aboutForWhoImageBlue {
  border: 1px solid #0066FF;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  border-radius: 24px;
}
.aboutForWhoImageBig {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
.aboutForWhoText {
  width: calc(50% - 12px);
}
.aboutForWhoText p {
  margin-bottom: 12px;
}
.aboutForWhoTitle {
  text-align: left;
  margin-bottom: 24px;
}
.aboutForWhoList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.aboutForWhoItem {
  background-color: #1AD1A5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 24px;
}
.aboutTarget {
  padding: 52px 0;
  text-align: center;
}
.aboutTargetTitle {
  margin: 8px 0;
}
.aboutTargetSubtitle {
  font-weight: 600;
}
.aboutTargetList {
  display: flex;
  gap: 20px;
  margin-top: 32px;
}
.aboutTargetItem {
  flex: 1;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px 24px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.aboutTargetItem p {
  color: #1A1A1A;
}
.aboutCreation {
  padding: 82px 0;
}
.aboutCreationTitle {
  margin-bottom: 52px;
}
.aboutCreationContent {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.aboutCreationImage {
  display: flex;
}
.aboutCreationList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.aboutCreationItem {
  max-width: 728px;
  width: 100%;
  padding: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  margin-bottom: 24px;
}
.aboutCreationItem:last-child {
  margin-bottom: 0;
}
.aboutCreationItem span {
  font-weight: 600;
  color: #0066FF;
}
.aboutCreationItemAccent {
  background-color: #0066FF;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.aboutCreationItemAccent h3 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 8px;
}
.aboutCreationItemAccent a {
  margin-top: 97px;
  display: inline;
}
.aboutFeatures {
  padding: 52px 0;
}
.aboutFeaturesTitle {
  margin-bottom: 42px;
}
@media (max-width: 1300px) {
  .aboutInfo {
    margin: 52px 0;
    flex-direction: column;
  }
  .aboutInfoItemAccent {
    align-items: flex-start;
  }
  .aboutInfoItemLink {
    margin-top: 44px;
    display: inline;
  }
  .aboutForWho {
    margin-bottom: 52px;
    flex-direction: column-reverse;
    gap: 32px;
  }
  .aboutForWhoImages {
    width: 100%;
    display: block;
  }
  .aboutForWhoImageGreen {
    display: none;
    border-radius: 40px;
  }
  .aboutForWhoImageGreen.aboutForWhoImageTab {
    display: flex;
  }
  .aboutForWhoImageBlue {
    display: none;
  }
  .aboutForWhoImageBig {
    display: none;
  }
  .aboutForWhoText {
    width: 100%;
  }
  .aboutForWhoTitle {
    text-align: center;
  }
  .aboutForWhoList {
    justify-content: center;
    padding: 0 150px;
  }
}
@media (max-width: 1200px) {
  .about {
    margin-top: 42px;
  }
  .aboutTarget {
    padding: 32px 0;
  }
  .aboutTargetList {
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .aboutTargetItem {
    flex: unset;
    width: calc(50% - 12px);
    padding: 24px 42px;
  }
  .aboutCreation {
    padding: 52px 0;
  }
  .aboutCreationTitle {
    margin-bottom: 32px;
  }
  .aboutCreationContent {
    display: block;
  }
  .aboutCreationImage {
    display: none;
  }
  .aboutCreationItem {
    max-width: 100%;
  }
  .aboutFeatures {
    padding: 42px 0;
  }
  .aboutFeaturesTitle {
    margin-bottom: 32px;
  }
}
@media (max-width: 1000px) {
  .aboutForWhoList {
    padding: 0 50px;
  }
}
@media (max-width: 700px) {
  .about {
    margin-top: 22px;
  }
  .aboutInfo {
    display: none;
  }
  .aboutInfoTab {
    margin: 24px 0 16px;
    display: flex;
    gap: 16px;
  }
  .aboutInfoTab .aboutInfoItem {
    margin-bottom: 0;
    padding: 18px 16px;
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .aboutInfoTab .aboutInfoItemHeader {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    cursor: pointer;
    transition: padding-bottom 0.4s ease-in-out;
  }
  .aboutInfoTab .aboutInfoItemHeaderText {
    width: calc(100% - 47px);
  }
  .aboutInfoTab .aboutInfoItemHeader.active {
    padding-bottom: 10px;
  }
  .aboutInfoTab .aboutInfoItemHeader.active .aboutInfoItemIcon::before {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .aboutInfoTab .aboutInfoItemIcon {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0066FF;
    transition: background-color 0.4s ease-in-out;
    position: relative;
  }
  .aboutInfoTab .aboutInfoItemIcon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 16px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.4s ease-in-out;
  }
  .aboutInfoTab .aboutInfoItemIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 1px;
    height: 16px;
    background: #ffffff;
    border-radius: 2px;
  }
  .aboutInfoTab .aboutInfoItemIcon:hover {
    background-color: #1A75FF;
  }
  .aboutInfoTab .aboutInfoItemIcon:active {
    background-color: #004BCC;
  }
  .aboutInfoTab .aboutInfoItemBody {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  .aboutInfoTab .aboutInfoItemBody.active {
    max-height: 1000px;
    opacity: 1;
    pointer-events: all;
  }
  .aboutInfoItemAccent {
    align-items: stretch;
  }
  .aboutInfoItemAccentTab {
    display: flex;
    margin-bottom: 52px;
  }
  .aboutInfoItemLink {
    margin-top: 32px;
    display: flex;
  }
  .aboutForWho {
    margin-bottom: 52px;
    gap: 24px;
  }
  .aboutForWhoText p {
    margin-bottom: 8px;
    text-align: center;
  }
  .aboutForWhoList {
    padding: 0;
  }
  .aboutTargetItem {
    width: 100%;
    padding: 26px 24px;
  }
  .aboutCreationTitle {
    margin-bottom: 24px;
  }
  .aboutCreationItemAccent {
    align-items: stretch;
  }
  .aboutCreationItemAccent h3 {
    font-size: 16px;
    line-height: 28px;
  }
  .aboutCreationItemAccent a {
    margin-top: 57px;
    display: flex;
  }
  .aboutFeatures {
    padding: 32px 0;
  }
  .aboutFeaturesTitle {
    margin-bottom: 24px;
  }
}
.proffPage {
  margin-top: 62px;
}
.proffPageContent {
  padding: 32px 42px 52px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 85px;
}
.proffPageMain {
  margin: 52px 0;
  padding-bottom: 52px;
  border-bottom: 1px solid #E3E8EF;
  display: flex;
  gap: 24px;
}
.proffPageMainImage {
  display: flex;
  max-width: 600px;
  width: 100%;
}
.proffPageMainImage img {
  border-radius: 24px;
}
.proffPageMainInfo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.proffPageMainInfo p {
  margin-bottom: 16px;
  max-width: 772px;
  width: 100%;
}
.proffPageMainInfoText {
  display: none;
}
.proffPageMainLink {
  margin: 16px 0 32px;
  display: inline-block;
}
.proffPageMainTitle {
  margin-bottom: 24px;
  text-align: left;
}
.proffPageMainApps {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px 48px;
}
.proffPageMainAppsTitle {
  width: 100%;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #1AD1A5;
}
.proffPageReasons {
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid #E3E8EF;
}
.proffPageReasonsTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #0066FF;
  margin-bottom: 24px;
}
.proffPageReasons p {
  margin-bottom: 12px;
}
.proffPageReasonsList {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media (max-width: 1550px) {
  .proffPageReasonsList {
    gap: 24px 16px;
  }
}
.proffPageReasonsItem {
  width: calc(50% - 12px);
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px 16px;
}
@media (max-width: 1550px) {
  .proffPageReasonsItem {
    width: calc(50% - 8px);
    padding: 8px;
  }
}
.proffPageReasonsItemText {
  display: block;
  padding-left: 26px;
  position: relative;
}
@media (max-width: 1550px) {
  .proffPageReasonsItemText {
    padding-left: 16px;
  }
}
.proffPageReasonsItemText::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0066FF;
}
.proffPageInfo {
  display: flex;
  gap: 24px;
}
.proffPageInfoImage {
  width: 380px;
  display: flex;
  justify-content: center;
}
.proffPageInfoText {
  width: calc(100% - 404px);
}
.proffPageInfoText p {
  margin-bottom: 16px;
}
@media (max-width: 1470px) {
  .proffPageReasonsList {
    gap: 24px;
  }
  .proffPageReasonsItem {
    width: 100%;
    padding: 8px 16px;
  }
  .proffPageReasonsItemText {
    padding-left: 26px;
  }
}
@media (max-width: 1300px) {
  .proffPageMainImage {
    max-width: 100%;
    width: 400px;
  }
  .proffPageMainImage img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .proffPageMainInfo {
    flex-grow: unset;
    width: calc(100% - 324px);
  }
  .proffPageMainApps {
    margin-top: 32px;
  }
  .proffPageInfoImage {
    width: 300px;
  }
  .proffPageInfoText {
    width: calc(100% - 324px);
  }
}
@media (max-width: 1000px) {
  .proffPage {
    margin-top: 12px;
  }
  .proffPageMain {
    flex-direction: column;
    gap: 32px;
    margin: 32px 0;
    padding-bottom: 32px;
  }
  .proffPageMainTitle {
    display: none;
  }
  .proffPageMainInfoText {
    display: block;
    text-align: center;
  }
  .proffPageMainInfoText .proffPageMainTitle {
    display: block;
    text-align: center;
  }
  .proffPageMainInfoText p {
    display: block;
  }
  .proffPageMainInfo p {
    display: none;
  }
  .proffPageMainImage {
    width: 100%;
    height: 540px;
  }
  .proffPageMainImage img {
    object-position: top;
  }
  .proffPageMainInfo {
    width: 100%;
    align-items: center;
  }
  .proffPageMainApps {
    justify-content: center;
  }
  .proffPageMainAppsTitle {
    text-align: center;
  }
  .proffPageMainLink {
    margin-top: 0;
  }
  .proffPageReasons {
    margin-bottom: 64px;
    padding-bottom: 32px;
  }
  .proffPageReasonsTitle {
    font-size: 24px;
    text-align: center;
  }
  .proffPageReasons p {
    text-align: center;
  }
  .proffPageReasonsList {
    margin-top: 24px;
    gap: 10px;
  }
  .proffPageInfo {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .proffPageInfoImage {
    width: 100%;
  }
  .proffPageInfoText {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 700px) {
  .proffPage {
    margin-top: 28px;
  }
  .proffPageContent {
    padding: 16px 20px 32px;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 48px;
    width: calc(100% + 40px);
    position: relative;
    left: -20px;
  }
  .proffPageMainImage {
    height: 270px;
  }
  .proffPageMainTitle {
    font-size: 24px;
  }
  .proffPageReasons {
    margin-bottom: 32px;
  }
  .proffPageInfo {
    gap: 32px;
  }
}
.proffMenu {
  margin: 0 auto;
  background-color: #F8FAFC;
  border-radius: 40px;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
  padding: 16px 24px;
  width: fit-content;
}
.proffMenuList {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.proffMenuLink {
  display: block;
  padding: 8px 16px;
  border-radius: 24px;
  background-color: #ffffff;
  color: #1A1A1A;
  box-shadow: 0 2px 8px transparent;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.proffMenuLink:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.proffMenuLink.active {
  background-color: #0066FF;
  color: #ffffff;
}
.proffMenuLink:active {
  background-color: #0066FF;
  color: #ffffff;
}
.proffMenuDropdown {
  display: none;
}
@media (max-width: 1400px) {
  .proffMenu {
    display: none;
  }
  .proffMenuList {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .proffMenuLink {
    display: block;
    padding: 8px 16px;
    border-radius: 24px;
    background-color: #ffffff;
    color: #1A1A1A;
    box-shadow: 0 2px 8px transparent;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }
  .proffMenuLink:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .proffMenuLink.active {
    background-color: #0066FF;
    color: #ffffff;
  }
  .proffMenuLink:active {
    background-color: #0066FF;
    color: #ffffff;
  }
  .proffMenuDropdown {
    display: block;
    margin: 0 0 32px;
    padding: 0;
    box-shadow: none;
    width: 100%;
    position: relative;
  }
  .proffMenuDropdownHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #F8FAFC;
    border-radius: 40px;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
    cursor: pointer;
  }
  .proffMenuDropdownHeader span {
    color: #ffffff;
    background-color: #0066FF;
    display: block;
    padding: 8px 16px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .proffMenuDropdownHeader svg {
    transform: rotate(0);
    transition: transform 0.4s ease-in-out;
  }
  .proffMenuDropdownHeader.active svg {
    transform: rotate(180deg);
  }
  .proffMenuDropdown .proffMenuList {
    flex-direction: column;
    align-items: flex-start;
    background-color: #F8FAFC;
    border-radius: 40px;
    padding: 16px 24px;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
    opacity: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    top: 100%;
    margin-top: 8px;
    width: 100%;
    transition: opacity 0.4s ease-in-out;
  }
  .proffMenuDropdown .proffMenuList.active {
    opacity: 1;
    pointer-events: auto;
  }
  .proffMenuDropdown .proffMenuLink {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    color: #1A1A1A;
    box-shadow: 0 2px 8px transparent;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }
  .proffMenuDropdown .proffMenuLink:hover {
    box-shadow: 0 2px 8px transparent;
  }
  .proffMenuDropdown .proffMenuLink.active {
    background-color: transparent;
    color: #9CA3AF;
  }
  .proffMenuDropdown .proffMenuLink:active {
    background-color: transparent;
    color: #9CA3AF;
  }
}
@media (max-width: 700px) {
  .proffMenuDropdownHeader {
    padding: 12px 24px;
  }
  .proffMenuDropdownHeader span {
    padding: 4px 16px;
  }
  .proffMenuDropdown .proffMenuList {
    padding: 12px 24px;
  }
}
.contacts {
  margin-top: 156px;
}
.contactsTitle {
  margin-bottom: 62px;
}
.contactsList {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 210px;
}
.contactsItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(25% - 18px);
  padding: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  height: 220px;
}
.contactsItemTitle {
  margin-bottom: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.contactsItem a {
  color: #1A1A1A;
}
@media (max-width: 1200px) {
  .contacts {
    margin-top: 42px;
  }
  .contactsList {
    margin-bottom: 92px;
  }
  .contactsItem {
    height: 160px;
    width: calc(50% - 12px);
  }
}
@media (max-width: 700px) {
  .contacts {
    margin-top: 22px;
  }
  .contactsList {
    margin-bottom: 82px;
  }
  .contactsItem {
    height: auto;
    width: 100%;
  }
  .contactsItemTitle {
    margin-bottom: 24px;
  }
}
.policyPage {
  margin-top: 62px;
}
.policyPageContent {
  max-width: 1200px;
  margin: 0 40px 82px;
  padding: 0 60px;
}
.policyPageContent h3 {
  margin: 32px 0;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-transform: uppercase;
}
.policyPageContent ul {
  margin-bottom: 16px;
}
.policyPageContent ul li {
  list-style: disc;
  margin-left: 20px;
}
.policyPageContent p {
  margin-bottom: 16px;
}
.policyPageTitle {
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  margin-bottom: 32px;
}
@media (max-width: 1000px) {
  .policyPage {
    margin-top: 32px;
  }
  .policyPageContent {
    max-width: 100%;
    margin: 0 auto 52px;
    padding: 0 40px;
  }
  .policyPageContent h3 {
    font-size: 28px;
    line-height: 32px;
  }
  .policyPageTitle {
    font-size: 36px;
    line-height: 48px;
  }
}
@media (max-width: 700px) {
  .policyPageContent {
    padding: 0 20px;
  }
  .policyPageContent h3 {
    font-size: 24px;
    line-height: 28px;
  }
  .policyPageTitle {
    font-size: 30px;
    line-height: 36px;
  }
}
.authPage {
  min-height: 100vh;
  background-image: url('../images/bg/inner-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
  position: relative;
}
.authPageTitle {
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 24px;
}
.authPageTitleBlue {
  color: #0066FF;
  margin-bottom: 30px;
}
.authPageContent {
  padding: 110px 40px 66px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.authPageBack {
  position: absolute;
  top: 43px;
  left: 10%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  width: max-content;
}
.authPageLogo {
  width: 284px;
  height: 102px;
  margin: 0 auto 24px;
}
.authPageLogo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1000px) {
  .authPageContent {
    padding: 62px 40px;
    overflow: hidden;
  }
  .authPageBack {
    top: 32px;
    left: 40px;
  }
  .authPageLogo {
    width: 200px;
  }
}
@media (max-width: 700px) {
  .authPage {
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  .authPageContent {
    padding: 64px 20px 28px;
    overflow-y: auto;
  }
  .authPageBack {
    top: 20px;
    left: 20px;
    color: #9CA3AF;
  }
  .authPageBack svg path {
    fill: #9CA3AF;
  }
  .authPageLogo {
    width: 126px;
  }
  .authPageLogo svg path {
    fill: #0066FF;
  }
  .authPageTitle {
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 16px;
  }
  .authPageTitleBlue {
    margin-bottom: 42px;
    font-size: 24px;
    line-height: 28px;
  }
}
.authBlock {
  min-height: 742px;
  padding: 32px;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  justify-content: center;
}
.authBlockSettings {
  position: absolute;
  top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease-in-out;
}
.authBlockSettings.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  top: unset;
}
.authBlockBack {
  display: none;
}
.authBlockSteps {
  display: none;
}
@media (max-width: 1000px) {
  .authBlockSteps {
    display: block;
    position: relative;
  }
  .authBlockStepsFirst {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease-in-out;
  }
  .authBlockStepsFirst.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    top: unset;
  }
  .authBlockStepsSecond {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease-in-out;
  }
  .authBlockStepsSecond.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    top: unset;
  }
  .authBlockStepsThird {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease-in-out;
  }
  .authBlockStepsThird.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    top: unset;
  }
  .authBlockStepsThird .authForm {
    max-width: 416px;
    width: 100%;
  }
  .authBlockStepsFourth {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease-in-out;
  }
  .authBlockStepsFourth.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    top: unset;
  }
  .authBlockStepsFourth .authForm {
    max-width: 416px;
    width: 100%;
  }
  .authBlockSteps .authBlockLogo {
    margin: 32px 0;
  }
  .authBlockSteps .authForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .authBlockSteps .authFormLabel {
    width: 100%;
  }
  .authBlockSteps .authFormSubmit {
    margin-top: 70px;
  }
}
@media (max-width: 700px) {
  .authBlock {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
}
.authBlockStartCards {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 45px;
}
.authBlockStartCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  box-shadow: 0 2px 8px transparent;
}
.authBlockStartCardImage {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #F3F6FB;
  border-radius: 40px;
  display: flex;
  transition: box-shadow 0.4s ease-in-out, border 0.4s ease-in-out;
}
.authBlockStartCardImage img {
  border-radius: 40px;
}
.authBlockStartCardImage:hover {
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}
.authBlockStartCard.active .authBlockStartCardImage {
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.15);
  border: 1px solid #0066FF;
}
.authBlockStartContinue {
  margin: 0 auto 8px;
  transition: all 0.4s ease-in-out;
}
.authBlockStartContinue:disabled {
  background-color: #9CA3AF;
  color: #E3E8EF;
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.authBlockStartText {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.authBlockStartButtonLogin {
  font-weight: 700;
  color: #1AD1A5;
}
@media (max-width: 700px) {
  .authBlockStartCard {
    font-size: 16px;
    line-height: 28px;
  }
  .authBlockStartCardImage img {
    width: 100%;
  }
  .authBlockStartText {
    flex-direction: column;
    align-items: center;
  }
}
.authBlockFizText {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.authBlockFizButtonLogin {
  font-weight: 700;
  color: #1AD1A5;
}
@media (max-width: 700px) {
  .authBlockFizText {
    flex-direction: column;
    align-items: center;
  }
}
.authBlockFirmText {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.authBlockFirmButtonLogin {
  font-weight: 700;
  color: #1AD1A5;
}
@media (max-width: 700px) {
  .authBlockFirmText {
    flex-direction: column;
    align-items: center;
  }
}
.authForm {
  display: none;
}
.authFormFull {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
}
.authFormLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.authFormLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.authFormLabelCheckbox {
  width: 100%;
  flex-direction: row;
  gap: 18px;
}
.authFormLabelCheckbox span {
  width: calc(100% - 74px);
  text-align: left;
  margin-left: 0;
  line-height: 28px;
  color: #1A1A1A;
}
.authFormLabelFull {
  width: 100%;
  max-width: 416px;
}
.authFormLabel.error span {
  color: #EF4444;
}
.authFormLabel.error .authFormInput {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.authFormLabel.error .authFormPassword {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.authFormLabel.error .authFormPasswordInput {
  color: #EF4444;
}
.authFormInput {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.authFormInput::placeholder {
  color: #9CA3AF;
}
.authFormInputCheckbox {
  display: none;
}
.authFormInputCheckbox:checked + .customCheckbox::after {
  left: calc(100% - 24px);
  background-color: #0066FF;
}
.authFormPassword {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 24px;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.authFormPasswordInput {
  width: calc(100% - 40px);
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: transparent;
  transition: color 0.4s ease-in-out;
}
.authFormPasswordInput::placeholder {
  color: #9CA3AF;
}
.authFormPasswordToggle svg path {
  fill: #9CA3AF;
  transition: fill 0.4s ease-in-out;
}
.authFormPasswordToggle.show svg path {
  fill: #0066FF;
}
.authFormSubmit {
  margin-top: 14px;
}
.authFormSubmitSms {
  margin-top: 130px;
}
@media (max-width: 1000px) {
  .authForm {
    display: flex;
  }
  .authFormFull {
    display: none;
  }
  .authFormLabel {
    width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .authFormLabel span {
    font-size: 16px;
    line-height: 32px;
    color: #6B7280;
    margin-left: 16px;
    transition: color 0.4s ease-in-out;
  }
  .authFormLabelCheckbox {
    width: 100%;
    flex-direction: row;
    gap: 18px;
  }
  .authFormLabelCheckbox span {
    width: calc(100% - 74px);
    text-align: left;
    margin-left: 0;
    line-height: 28px;
    color: #1A1A1A;
  }
  .authFormLabelFull {
    width: 100%;
  }
  .authFormLabel.error span {
    color: #EF4444;
  }
  .authFormLabel.error .authFormInput {
    color: #EF4444;
    border: 1px solid #EF4444;
  }
  .authFormLabel.error .authFormPassword {
    color: #EF4444;
    border: 1px solid #EF4444;
  }
  .authFormLabel.error .authFormPasswordInput {
    color: #EF4444;
  }
  .authFormInput {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #E3E8EF;
    border-radius: 24px;
    font-size: 16px;
    line-height: 32px;
    color: #1A1A1A;
    background-color: #F8FAFC;
    transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
  }
  .authFormInput::placeholder {
    color: #9CA3AF;
  }
  .authFormInputCheckbox {
    display: none;
  }
  .authFormInputCheckbox:checked + .customCheckbox::after {
    left: calc(100% - 24px);
    background-color: #0066FF;
  }
  .authFormPassword {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 24px;
    padding: 10px 16px;
    border: 1px solid #E3E8EF;
    background-color: #F8FAFC;
    transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
  }
  .authFormPasswordInput {
    width: calc(100% - 40px);
    font-size: 16px;
    line-height: 32px;
    color: #1A1A1A;
    background-color: transparent;
    transition: color 0.4s ease-in-out;
  }
  .authFormPasswordInput::placeholder {
    color: #9CA3AF;
  }
  .authFormPasswordToggle svg path {
    fill: #9CA3AF;
    transition: fill 0.4s ease-in-out;
  }
  .authFormPasswordToggle.show svg path {
    fill: #0066FF;
  }
  .authFormSubmit {
    margin-top: 14px;
  }
  .authFormSubmitSms {
    margin-top: 130px;
  }
}
span.customCheckbox {
  width: 56px;
  height: 32px;
  border-radius: 40px;
  background-color: #F3F6FB;
  position: relative;
  cursor: pointer;
}
span.customCheckbox::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #9CA3AF;
  transition: left 0.3s ease-in-out, bacjkground-color 0.3s ease-in-out;
}
span.customCheckboxWhite {
  background-color: #ffffff;
}
.customMonth {
  width: 160px;
  position: relative;
}
.customMonthHeader {
  line-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 16px;
  background-color: #ffffff;
  cursor: pointer;
}
.customMonthBody {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.customMonthBody.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}
.customMonthList {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffffff transparent;
}
.customMonthList::-webkit-scrollbar {
  width: 8px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.customMonthList::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.customMonthList::-webkit-scrollbar-track {
  background: transparent;
}
.customMonthItem {
  line-height: 32px;
  cursor: pointer;
  color: #1A1A1A;
  transition: color 0.3s ease-in-out;
}
.customMonthItem:hover {
  color: #6B7280;
}
.authBlockSmsReg {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
.authBlockSmsRegText {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.authBlockSmsRegButtonLogin {
  font-weight: 700;
  color: #1AD1A5;
}
.authBlockSmsLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
@media (max-width: 700px) {
  .authBlockSmsReg,
  .authBlockSmsLogin {
    height: 570px;
  }
}
.smsForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}
.smsForm img {
  margin-bottom: 30px;
}
.smsFormInputs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.smsFormInputs.error input {
  border: 1px solid #EF4444;
}
.smsFormInputsBackup input {
  width: 33px;
  padding: 14px 11px;
}
.smsFormInput {
  width: 46px;
  height: 60px;
  padding: 16px;
  background-color: #F3F6FB;
  border-radius: 16px;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  color: #1A1A1A;
  font-weight: 600;
  border: 1px solid #F3F6FB;
  transition: border 0.4s ease-in-out;
}
.smsFormInput.approve {
  border: 1px solid #0066FF;
}
.smsFormText {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #6B7280;
}
@media (max-width: 700px) {
  .smsFormLogo {
    display: none;
  }
}
@media (max-width: 360px) {
  .smsFormInputs {
    transform: scale(0.8);
  }
}
.authBlockForgot {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
@media (max-width: 700px) {
  .authBlockForgot {
    height: 470px;
  }
}
.authBlockSuccess {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}
.authBlockSuccessTitle {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  max-width: 630px;
  text-align: center;
  margin: 0 auto;
}
.authBlockSuccessSubmit {
  margin-top: 180px;
}
@media (max-width: 700px) {
  .authBlockSuccess {
    gap: 42px;
  }
  .authBlockSuccessTitle {
    font-size: 24px;
    line-height: 28px;
  }
  .authBlockSuccessSubmit {
    margin-top: 180px;
  }
}
.authBlockPassword {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
.authBlockPasswordSubmit {
  margin-top: 100px;
}
@media (max-width: 700px) {
  .authBlockPassword {
    height: 470px;
  }
  .authBlockPasswordSubmit {
    margin-top: 60px;
  }
}
.authBlockLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
.authBlockLoginSubmit {
  margin-top: 65px;
}
.authBlockLoginText {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.authBlockLoginButtonRegister {
  font-weight: 700;
  color: #1AD1A5;
}
.authBlockLoginButtonForgot {
  font-weight: 700;
  color: #0066FF;
}
@media (max-width: 700px) {
  .authBlockLogin {
    height: 584px;
  }
  .authBlockLoginText {
    display: block;
  }
}
.searchUser {
  width: 320px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 24px;
  background-color: #F3F6FB;
}
.searchEmployer {
  width: 640px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 24px;
  background-color: #ffffff;
}
.searchInput {
  width: calc(100% - 36px);
  color: #1A1A1A;
  line-height: 32px;
  background-color: transparent;
}
.searchInput::placeholder {
  color: #9CA3AF;
}
@media (max-width: 1100px) {
  .searchUser {
    width: 100%;
  }
  .searchEmployer {
    width: 300px;
  }
}
@media (max-width: 700px) {
  .searchUser {
    width: 100%;
  }
  .searchEmployer {
    width: 100%;
    background-color: #F3F6FB;
  }
}
.sort {
  width: 220px;
  position: relative;
}
.sortReviews {
  margin-left: auto;
}
.sortHeader {
  line-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 16px;
  background-color: #ffffff;
  cursor: pointer;
}
.sortBody {
  position: absolute;
  top: 100%;
  left: -20px;
  margin-top: 8px;
  width: calc(100% + 40px);
  background-color: #ffffff;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.sortBody.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}
.sortList {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffffff transparent;
}
.sortList::-webkit-scrollbar {
  width: 8px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.sortList::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.sortList::-webkit-scrollbar-track {
  background: transparent;
}
.sortItem {
  line-height: 32px;
  cursor: pointer;
  color: #1A1A1A;
  transition: color 0.3s ease-in-out;
}
.sortItem:hover {
  color: #6B7280;
}
@media (max-width: 700px) {
  .sort {
    width: 100%;
  }
  .sortHeader {
    background-color: #F3F6FB;
  }
  .sortHeader svg {
    margin-left: auto;
  }
  .sortBody {
    left: 0;
    width: 100%;
    background-color: #F3F6FB;
  }
}
.account {
  margin-top: 22px;
}
.accountTitle {
  color: #1A1A1A;
  margin-bottom: 44px;
}
.accountContent {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 776px;
  margin-bottom: 42px;
}
.accountContentFull {
  height: auto;
}
.accountContentSpecial {
  min-height: 855px;
}
.accountInfo {
  width: calc(100% - 324px);
}
.accountEmployerCard {
  margin-left: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}
@media (max-width: 1400px) {
  .accountContent {
    flex-direction: column;
    margin-bottom: 82px;
    height: 900px;
  }
  .accountContentFull {
    height: auto;
  }
  .accountContentSpecial {
    min-height: unset;
    max-height: 1000px;
    height: auto !important;
  }
  .accountInfo {
    width: 100%;
  }
}
@media (max-width: 1100px) {
  .accountContent {
    height: 940px;
  }
  .accountContentFull {
    height: auto;
  }
  .accountContentSpecial {
    max-height: 1030px;
  }
}
@media (max-width: 700px) {
  .account {
    margin-top: 12px;
  }
  .accountBody .footer {
    display: none;
  }
  .accountTitle {
    margin-bottom: 24px;
  }
  .accountContent {
    padding: 24px 16px;
    border-radius: 24px;
    height: 653px;
    margin-bottom: 115px;
  }
  .accountContentFull {
    height: auto;
  }
  .accountContentFullMobile {
    height: auto;
  }
  .accountContentSpecial {
    max-height: 100%;
    height: 100%;
  }
}
.accountNav {
  width: 300px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid #E3E8EF;
}
.accountNavItem {
  margin-bottom: 16px;
}
.accountNavLink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-radius: 16px;
  background-color: #F3F6FB;
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  box-shadow: 0 8px 16px transparent;
}
.accountNavLink span {
  color: #1A1A1A;
  transition: color 0.4s ease-in-out;
}
.accountNavLink svg path {
  fill: #0066FF;
  transition: fill 0.4s ease-in-out;
}
.accountNavLink.active {
  background-color: #0066FF;
  box-shadow: 0 2px 4px rgba(0, 102, 255, 0.15);
}
.accountNavLink.active span {
  color: #ffffff;
}
.accountNavLink.active svg path {
  fill: #ffffff;
}
.accountNavLink:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1400px) {
  .accountNav {
    width: 100%;
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid #E3E8EF;
    border-right: none;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .accountNavItem {
    margin-bottom: 0;
  }
  .accountNavLink {
    padding: 0;
    width: 52px;
    height: 48px;
    justify-content: center;
    align-items: center;
    gap: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 700px) {
  .accountNav {
    display: none;
  }
}
.accountUsersHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.accountUsersHeaderTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.accountUsersContent {
  border-radius: 16px;
  background-color: #F3F6FB;
  padding: 24px;
  overflow-y: auto;
  height: 656px;
  scrollbar-width: thin;
  scrollbar-color: #F3F6FB transparent;
}
.accountUsersContent::-webkit-scrollbar {
  width: 8px;
  background: #F3F6FB;
  border: 1px solid #F3F6FB;
}
.accountUsersContent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.accountUsersContent::-webkit-scrollbar-track {
  background: transparent;
}
.accountUsersItem {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 20px 16px;
  background-color: #ffffff;
  border-radius: 16px;
}
.accountUsersItem:last-child {
  margin-bottom: 0;
}
.accountUsersItemText:first-child,
.accountUsersItemText:nth-child(2n) {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid #E3E8EF;
}
.accountUsersItemPlan {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  line-height: 24px;
  padding: 8px 16px;
  border-radius: 24px;
  color: #1A1A1A;
  background-color: #F3F6FB;
}
.accountUsersItemPlanWrapper {
  margin-left: auto;
}
.accountUsersItemPlanPremium {
  color: #ffffff;
  background-color: #0066FF;
  box-shadow: 0 2px 4px rgba(0, 102, 255, 0.15);
}
.accountUsersItemPlanStandard {
  background-color: #1AD1A5;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.1);
}
.accountUsersItemPlanBasic {
  color: #1A1A1A;
  border: 1px solid #E3E8EF;
}
.accountUsersInvite {
  width: 100%;
  margin-top: 16px;
}
@media (max-width: 1400px) {
  .accountUsersContent {
    height: 655px;
  }
}
@media (max-width: 1100px) {
  .accountUsersHeader {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .accountUsersHeaderTitle {
    font-size: 24px;
  }
  .accountUsersItem {
    flex-wrap: wrap;
    align-items: center;
    padding: 16px;
  }
  .accountUsersItemText {
    margin-right: auto;
  }
  .accountUsersItemText:first-child,
  .accountUsersItemText:nth-child(2n) {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid #E3E8EF;
  }
  .accountUsersItemPlan {
    width: fit-content;
  }
  .accountUsersItemPlanWrapper {
    width: 100%;
    margin-top: 16px;
    margin-left: 0;
  }
}
@media (max-width: 700px) {
  .accountUsersHeader {
    gap: 24px;
  }
  .accountUsersHeaderTitle {
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
  }
  .accountUsersContent {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    height: 470px;
  }
  .accountUsersItem {
    padding: 16px;
    background-color: #F3F6FB;
    justify-content: center;
    gap: 16px;
  }
  .accountUsersItemText {
    margin-right: 0;
  }
  .accountUsersItemText:first-child,
  .accountUsersItemText:nth-child(2n) {
    text-align: center;
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: none;
  }
  .accountUsersItemPlan {
    margin: 0 auto;
  }
  .accountUsersItemPlanWrapper {
    margin-top: 0;
  }
  .accountUsersItemPlanBasic {
    background-color: #ffffff;
  }
}
@media (max-width: 400px) {
  .accountUsersContent {
    height: 440px;
  }
}
.accountStatesHeader {
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background-color: #0066FF;
  color: #ffffff;
  margin-bottom: 24px;
}
.accountStatesHeaderTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.accountStatesHeaderSumm {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.accountStatesContent {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.accountStatesItem {
  width: calc(50% - 12px);
  padding: 24px;
  background-color: #F3F6FB;
  border-radius: 16px;
}
.accountStatesItemFull {
  width: 100%;
}
.accountStatesItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.accountStatesItemHeaderValue {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #1AD1A5;
}
.accountStatesItemTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #0066FF;
}
.accountStatesList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background-color: #ffffff;
  padding: 0;
}
.accountStatesListItem {
  padding: 24px;
  border-radius: 24px;
  background-color: #F3F6FB;
  width: calc(50% - 12px);
  display: flex;
  flex-wrap: wrap;
}
.accountStatesListItemMini {
  width: calc(33.333% - 16px);
  justify-content: center;
}
.accountStatesListItemMini .accountStatesListItemTitle {
  color: #1A1A1A;
}
.accountStatesListItemMini .accountStatesListItemTitle .green {
  color: #1AD1A5;
}
.accountStatesListItemMini .accountStatesListItemTitle .blue {
  color: #0066FF;
}
.accountStatesListItemTitle {
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #0066FF;
  margin-bottom: 24px;
}
.accountStatesListItem ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.accountStatesListItem ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 1px;
  background-color: #E3E8EF;
  z-index: 0;
}
.accountStatesListItem ul li {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.accountStatesListItemValue {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
}
.accountStatesReviewsItem {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #E3E8EF;
}
.accountStatesReviewsItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.accountStatesReviewsStars {
  width: 124px;
  margin-right: 90px;
}
.accountStatesCount {
  margin-right: auto;
}
.accountStatesPercent {
  font-weight: 700;
}
.accountStatesPercentGreen {
  color: #1AD1A5;
}
.accountStatesPercentYellow {
  color: #F59E0B;
}
.accountStatesPercentRed {
  color: #EF4444;
}
.accountStatesPrimeItem {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #E3E8EF;
}
.accountStatesPrimeItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.accountStatesPrimeTime {
  font-weight: 700;
  width: 200px;
  margin-right: 40px;
}
.accountStatesYearlyItem {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #E3E8EF;
}
.accountStatesYearlyItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.accountStatesYearlyMonth {
  width: 120px;
  margin-right: 32px;
}
.accountStatesYearlyCount {
  font-weight: 700;
  color: #1AD1A5;
  width: 120px;
  margin-right: 32px;
}
.accountStatesYearlyCountEmpty {
  color: #1A1A1A;
}
.accountStatesYearlyProgress {
  display: block;
  height: 24px;
  max-width: 600px;
  background-color: #0066FF;
  border-radius: 16px;
  margin-right: 50px;
}
.accountStatesYearlyPercent {
  margin-left: auto;
  font-weight: 700;
}
@media (max-width: 1250px) {
  .accountStatesYearlyProgress {
    max-width: 400px;
  }
}
@media (max-width: 1100px) {
  .accountStatesHeader {
    padding: 16px;
  }
  .accountStatesHeaderTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountStatesItem {
    width: 100%;
  }
  .accountStatesListItem {
    width: 100%;
  }
  .accountStatesListItemMini {
    width: 100%;
  }
  .accountStatesListItem ul li {
    width: 50%;
  }
  .accountStatesReviewsStars {
    margin-right: 200px;
  }
  .accountStatesPrimeTime {
    width: 240px;
    margin-right: 80px;
  }
  .accountStatesYearlyMonth {
    width: 80px;
    margin-right: 20px;
  }
  .accountStatesYearlyProgress {
    max-width: 300px;
    margin-right: 32px;
  }
}
@media (max-width: 800px) {
  .accountStatesYearlyProgress {
    display: none;
  }
}
@media (max-width: 700px) {
  .accountStatesHeader {
    flex-direction: column;
    align-items: center;
  }
  .accountStatesHeaderSumm {
    font-size: 24px;
    line-height: 36px;
  }
  .accountStatesItem {
    padding: 16px;
  }
  .accountStatesItemHeader {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .accountStatesList {
    padding: 0;
  }
  .accountStatesListItemTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountStatesListItem ul {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .accountStatesListItem ul::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;
    width: 160px;
  }
  .accountStatesListItem ul li {
    width: 100%;
  }
  .accountStatesReviewsItem {
    flex-direction: column;
    align-items: center;
  }
  .accountStatesReviewsStars {
    width: auto;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .accountStatesPrimeTime {
    width: auto;
    margin-right: 0;
  }
  .accountStatesPrimeItem {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .accountStatesYearlyMonth {
    width: 70px;
  }
  .accountStatesYearlyCount {
    width: 120px;
    margin: 0;
  }
  .accountStatesCount {
    margin: 0;
  }
}
.accountHistoryHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
}
.accountHistoryHeaderTitle {
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  font-weight: 700;
}
.accountHistoryHeaderTitleUser {
  margin-bottom: 24px;
}
.accountHistoryContent {
  border-radius: 16px;
  background-color: #F3F6FB;
  padding: 16px;
  overflow-y: auto;
  height: 645px;
  scrollbar-width: thin;
  scrollbar-color: #F3F6FB transparent;
}
.accountHistoryContent::-webkit-scrollbar {
  width: 8px;
  background: #F3F6FB;
  border: 1px solid #F3F6FB;
}
.accountHistoryContent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.accountHistoryContent::-webkit-scrollbar-track {
  background: transparent;
}
.accountHistoryContentHeader {
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background-color: #0066FF;
  color: #ffffff;
  margin-bottom: 16px;
}
.accountHistoryContentHeaderTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.accountHistoryContentHeaderSumm {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.accountHistoryItem {
  padding: 8px 16px;
  background-color: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.accountHistoryItem:last-child {
  margin-bottom: 0;
}
.accountHistoryItemSumm {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #1AD1A5;
}
.accountHistoryItemSumm.withdraw {
  color: #EF4444;
}
.accountHistoryItemDate {
  display: block;
  margin-left: auto;
}
.accountHistoryItemUser {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background-color: #F3F6FB;
  font-size: 12px;
  line-height: 18px;
}
.accountHistoryItemMonth {
  justify-content: space-between;
}
.accountHistoryItemMonthName {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.accountHistoryItemMonthSumm {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #0066FF;
}
@media (max-width: 1100px) {
  .accountHistoryHeader {
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
  }
  .accountHistoryHeaderTitle {
    font-size: 24px;
  }
  .accountHistoryContent {
    padding: 0;
    background-color: transparent;
    height: 663px;
  }
  .accountHistoryContentHeader {
    padding: 16px;
  }
  .accountHistoryContentHeaderTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountHistoryContentHeaderSumm {
    font-size: 24px;
  }
  .accountHistoryItem {
    background-color: #F3F6FB;
  }
  .accountHistoryItemUser {
    background-color: #ffffff;
  }
  .accountHistoryItemMonthName {
    font-size: 16px;
    line-height: 28px;
  }
  .accountHistoryItemMonthSumm {
    font-size: 24px;
  }
}
@media (max-width: 700px) {
  .accountHistoryHeader {
    gap: 24px;
    margin-bottom: 24px;
  }
  .accountHistoryHeaderTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountHistoryContent {
    height: 480px;
  }
  .accountHistoryContentHeader {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .accountHistoryItemMonthSumm {
    font-size: 20px;
    line-height: 32px;
  }
}
.accountReviewsTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 24px;
}
.accountReviewsContent {
  background-color: #F3F6FB;
  border-radius: 16px;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 670px;
}
.accountReviewsContentHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.accountReviewsButtons {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #F3F6FB;
  border-radius: 16px;
  margin-bottom: 12px;
}
.accountReviewsItem {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.accountReviewsItem:last-child {
  margin-bottom: 0;
}
.accountReviewsItemName {
  font-weight: 700;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid #E3E8EF;
}
.accountReviewsItemReview {
  max-width: 480px;
  width: 100%;
  font-size: 12px;
  line-height: 18px;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid #E3E8EF;
}
.accountReviewsItemStars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  margin-left: auto;
}
.accountReviewsItemDate {
  margin-left: 16px;
}
.accountReviewsSwitchReview {
  width: calc(50% - 8px);
  padding: 8px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: center;
  line-height: 32px;
  font-weight: 400;
  color: #1A1A1A;
  box-shadow: 0 2px 8px transparent;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, font-weight 0.3s ease-in-out;
}
.accountReviewsSwitchReview:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.accountReviewsSwitchReview.active {
  background-color: #0066FF;
  color: #ffffff;
  font-weight: 700;
}
.accountReviewsSwitchReview.active:hover {
  box-shadow: 0 2px 8px transparent;
}
@media (max-width: 1600px) {
  .accountReviewsUser .accountReviewsItem {
    flex-wrap: nowrap;
  }
  .accountReviewsUser .accountReviewsItemReview {
    max-width: 60%;
    order: -1;
  }
  .accountReviewsUser .accountReviewsItemStars {
    order: 0;
  }
  .accountReviewsUser .accountReviewsItemDate {
    order: 1;
  }
  .accountReviewsItem {
    flex-wrap: wrap;
    gap: 16px;
  }
  .accountReviewsItemName {
    border-right: none;
    padding: 0;
    margin: 0;
  }
  .accountReviewsItemReview {
    max-width: 100%;
    order: 1;
    border-right: none;
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 1400px) {
  .accountReviewsTitle {
    font-size: 24px;
    text-align: center;
  }
  .accountReviewsContent {
    height: 695px;
  }
}
@media (max-width: 1100px) {
  .accountReviewsContent {
    height: 735px;
  }
  .accountReviewsUser .accountReviewsItemReview {
    max-width: 50%;
  }
}
@media (max-width: 900px) {
  .accountReviewsUser .accountReviewsItemReview {
    max-width: 40%;
  }
}
@media (max-width: 700px) {
  .accountReviewsTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountReviewsContent {
    height: 553px;
    background-color: transparent;
    padding: 0;
  }
  .accountReviewsContentHeader {
    flex-direction: column-reverse;
    gap: 16px;
  }
  .accountReviewsItem {
    background-color: #F3F6FB;
    border-radius: 16px;
    padding: 8px 16px;
    gap: 8px;
  }
  .accountReviewsItemName {
    width: 100%;
  }
  .accountReviewsItemDate {
    width: calc(50% - 4px);
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
  }
  .accountReviewsItemStars {
    width: calc(50% - 4px);
    margin: 0;
    gap: 4px;
  }
  .accountReviewsItemStars svg {
    width: 16px;
    height: 16px;
  }
  .accountReviewsItemReview {
    margin-top: 8px;
  }
  .accountReviewsButtons {
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .accountReviewsSwitchReview {
    width: 100%;
  }
  .accountReviewsUser .accountReviewsItem {
    gap: 0 8px;
    flex-wrap: wrap;
  }
  .accountReviewsUser .accountReviewsItemReview {
    max-width: 100%;
    order: 1;
    padding-top: 16px;
    border-top: 1px solid #E3E8EF;
    margin-top: 4px;
  }
  .accountReviewsUser .accountReviewsItemStars {
    width: 96px;
    order: -1;
    margin: 0;
  }
  .accountReviewsUser .accountReviewsItemDate {
    width: calc(100% - 104px);
    order: 0;
    margin: 0;
  }
}
.accountPrintsTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 24px;
}
.accountPrintsList {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.accountPrintsItem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(50% - 12px);
  background-color: #F3F6FB;
  border-radius: 16px;
  padding: 8px 16px;
}
.accountPrintsItemLinks {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.accountPrintsItemLink {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #0066FF;
}
@media (max-width: 1400px) {
  .accountPrintsTitle {
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .accountPrintsTitle {
    font-size: 24px;
  }
  .accountPrintsList {
    gap: 16px;
  }
  .accountPrintsItem {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .accountPrints {
    height: 604px;
    overflow-y: auto;
  }
  .accountPrintsTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountPrintsItem {
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .accountPrintsItemLinks {
    margin-left: 0;
  }
  .accountPrintsItemName {
    text-align: center;
  }
}
.accountProfileContent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.accountProfileData {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.accountProfileDataLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.accountProfileDataLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.accountProfileDataLabel.error span {
  color: #EF4444;
}
.accountProfileDataLabel.error .authFormInput {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.accountProfileDataLabel.error .authFormPassword {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.accountProfileDataLabel.error .authFormPasswordInput {
  color: #EF4444;
}
.accountProfileDataInput {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.accountProfileDataInput::placeholder {
  color: #9CA3AF;
}
.accountProfileActions {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.accountProfileSecurity {
  width: 100%;
}
.accountProfileSecurity svg {
  display: none;
}
.accountProfileDelete,
.accountProfilePassword {
  width: calc(50% - 12px);
}
.accountProfilePolicyLink {
  display: none;
}
@media (max-width: 1400px) {
  .accountProfile {
    height: 100%;
  }
}
@media (max-width: 1200px) {
  .accountProfileSecurity svg {
    display: flex;
  }
}
@media (max-width: 700px) {
  .accountProfileData {
    flex-wrap: wrap;
  }
  .accountProfileDataLabel {
    width: 100%;
    gap: 16px;
  }
  .accountProfileActions {
    margin-top: 16px;
  }
  .accountProfileDelete,
  .accountProfilePassword {
    width: 100%;
  }
  .accountProfilePolicyLink {
    display: flex;
    width: 100%;
  }
}
.accountSupportContent {
  background-color: #F3F6FB;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
}
.accountSupportTitle {
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E3E8EF;
  margin-bottom: 32px;
}
@media (max-width: 1400px) {
  .accountSupport {
    height: 100%;
  }
  .accountSupportTitle {
    font-size: 24px;
  }
}
@media (max-width: 700px) {
  .accountSupportContent {
    background-color: #ffffff;
    border-radius: 0;
    padding: 0;
  }
  .accountSupportTitle {
    font-size: 16px;
    line-height: 28px;
    padding-bottom: 8px;
    margin-bottom: 24px;
  }
}
.paymentPage {
  min-height: 100vh;
  background-image: url('../images/bg/inner-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
  position: relative;
}
.paymentPageTitle {
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 24px;
}
.paymentPageTitleBlue {
  color: #0066FF;
  margin-bottom: 30px;
}
.paymentPageContent {
  padding: 82px 40px 66px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.paymentPageLogo {
  width: 284px;
  height: 102px;
  margin: 0 auto 24px;
}
.paymentPageLogo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.paymentPageForm {
  min-height: 742px;
  padding: 70px 30px;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.paymentPageFormTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #0066FF;
}
.paymentPageFormSubtitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.paymentPageFormStars {
  display: flex;
  align-items: center;
  gap: 6px;
}
.paymentPageFormStarBlock {
  display: flex;
  cursor: pointer;
}
.paymentPageFormStarBlock svg {
  width: 32px;
  height: 32px;
}
.paymentPageFormStarBlock svg path {
  fill: #6B7280;
  transition: fill 0.4s ease-in-out;
}
.paymentPageFormStarBlock.hover svg path {
  fill: #0066FF;
}
.paymentPageFormSumm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  background-color: #F3F6FB;
  border-radius: 16px;
}
.paymentPageFormSumm label {
  width: 100%;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.paymentPageFormSummInput {
  max-width: 200px;
  width: 100%;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
}
.paymentPageFormSummInput::placeholder {
  color: #6B7280;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
}
.paymentPageFormSummButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.paymentPageFormSummButton {
  width: 100px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  background-color: #1A1A1A;
  color: #ffffff;
  box-shadow: 0 2px 8px transparent;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.paymentPageFormSummButton:hover {
  color: #1A1A1A;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.paymentPageFormReview {
  height: 104px;
  resize: none;
  width: 100%;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  padding: 10px 16px;
  background-color: #F3F6FB;
  font-size: 16px;
  line-height: 28px;
}
.paymentPageFormSubmit {
  width: 100%;
}
@media (max-width: 1000px) {
  .paymentPageContent {
    padding: 55px 32px;
  }
}
@media (max-width: 700px) {
  .paymentPage {
    background: #ffffff;
  }
  .paymentPageContent {
    padding: 24px;
    margin: 0;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .paymentPageLogo {
    width: 126px;
  }
  .paymentPageLogo svg path {
    fill: #0066FF;
  }
  .paymentPageForm {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .paymentPageFormTitle {
    font-size: 20px;
    line-height: 32px;
  }
  .paymentPageFormSummButtons {
    gap: 8px;
  }
  .paymentPageFormSummButton {
    width: 44px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 28px;
  }
}
.accountUserContent {
  background-color: #F3F6FB;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accountUserContentTitle {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 90px;
}
.accountUserQr {
  display: flex;
}
.accountUserQr img {
  max-width: 360px;
  width: 100%;
}
.accountUserQrFullscreen {
  display: none;
}
.accountUserId {
  margin: 32px 0 64px;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.accountUserActions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.accountUserActionsBlock {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 8px 16px;
}
.accountUserActionsUrl {
  display: inline-block;
  padding: 8px 16px;
  background-color: #F3F6FB;
  border-radius: 16px;
  line-height: 32px;
  max-width: 380px;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.accountUserActionsUrl::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.accountUserActionsUrl::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.accountUserActionsUrl::-webkit-scrollbar-track {
  background: transparent;
}
.accountUserActionsShare {
  display: none;
}
.accountUserActionsFullscreen {
  display: none;
}
.accountUserActionsButton {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0066FF;
  border-radius: 16px;
}
@media (max-width: 1200px) {
  .accountUserContentTitle {
    font-size: 24px;
    margin-bottom: 52px;
    text-align: center;
  }
  .accountUserQr img {
    max-width: 280px;
  }
  .accountUserQrFullscreen {
    display: none;
  }
  .accountUserId {
    margin: 16px 0 29px;
    font-size: 16px;
    line-height: 28px;
  }
  .accountUserActions {
    flex-wrap: wrap;
    gap: 16px 8px;
  }
  .accountUserActionsUrl {
    max-width: 360px;
  }
  .accountUserActionsLink {
    order: 1;
  }
  .accountUserActionsDownload {
    order: -2;
    display: flex;
  }
  .accountUserActionsShare {
    order: -1;
    display: flex;
  }
  .accountUserActionsFullscreen {
    order: 0;
    display: flex;
  }
}
@media (max-width: 800px) {
  .accountUserQr img {
    max-width: 100%;
  }
  .accountUserQrFullscreen {
    display: none;
  }
  .accountUserId {
    margin: 16px 0 42px;
  }
  .accountUserActions {
    gap: 16px 8px;
    border-radius: 16px;
    padding: 8px;
    background-color: #ffffff;
  }
  .accountUserActionsBlock {
    padding: 0;
    background-color: transparent;
  }
  .accountUserActionsUrl {
    max-width: 200px;
    background-color: #ffffff;
  }
  .accountUserActionsLink {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #F3F6FB;
    padding: 8px;
  }
  .accountUserActionsDownload {
    display: none;
  }
  .accountUserActionsShare {
    font-size: 0;
    gap: 0;
  }
  .accountUserActionsFullscreen {
    font-size: 0;
    gap: 0;
  }
}
@media (max-width: 800px) {
  .accountUserContent {
    background-color: #ffffff;
    padding: 0;
  }
  .accountUserContentTitle {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 42px;
  }
  .accountUserQrFullscreen {
    display: none;
  }
  .accountUserActions {
    background-color: #F3F6FB;
  }
  .accountUserActionsUrl {
    background-color: #F3F6FB;
  }
  .accountUserActionsLink {
    background-color: #ffffff;
  }
}
.accountWithdraw {
  position: relative;
}
.accountWithdrawContentTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}
.accountWithdrawBalance {
  background-color: #F3F6FB;
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.accountWithdrawBalanceText {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
}
.accountWithdrawBalanceValue {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #0066FF;
}
.accountWithdrawTabsList {
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: #F3F6FB;
  border-radius: 16px;
  margin-bottom: 24px;
}
.accountWithdrawTabsListItem {
  width: calc(50% - 8px);
  background-color: #ffffff;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px transparent;
  transition: box-shadow 0.4s ease-in-out, color 0.4s ease-in-out, background-color 0.4s ease-in-out, font-weight 0.2s ease-in-out;
}
.accountWithdrawTabsListItem:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.accountWithdrawTabsListItem.active {
  background-color: #0066FF;
  color: #ffffff;
  font-weight: 700;
}
.accountWithdrawTabsListItem.active:hover {
  box-shadow: 0 2px 8px transparent;
}
.accountWithdrawTabsContent {
  overflow: hidden;
  position: relative;
  height: 570px;
}
.accountWithdrawTabsContentItem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.accountWithdrawTabsContentItem.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.accountWithdrawForm {
  display: flex;
  flex-wrap: wrap;
}
.accountWithdrawFormLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-right: 24px;
  margin-bottom: 24px;
}
.accountWithdrawFormLabel:nth-child(2n) {
  margin-right: 0;
}
.accountWithdrawFormLabel:nth-last-child(-n+2) {
  margin-bottom: 0;
}
.accountWithdrawFormLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.accountWithdrawFormLabelCheckbox {
  width: 100%;
  flex-direction: row;
  gap: 18px;
}
.accountWithdrawFormLabelCheckbox span {
  text-align: left;
  margin-left: 0;
  line-height: 28px;
  color: #1A1A1A;
}
.accountWithdrawFormLabel.error span {
  color: #EF4444;
}
.accountWithdrawFormLabel.error .accountWithdrawFormInput {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.accountWithdrawFormInput {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.accountWithdrawFormInput::placeholder {
  color: #9CA3AF;
}
.accountWithdrawFormInputCheckbox {
  display: none;
}
.accountWithdrawFormInputCheckbox:checked + .customCheckbox::after {
  left: calc(100% - 24px);
  background-color: #0066FF;
}
.accountWithdrawFormConfirm {
  width: 100%;
  background-color: #F3F6FB;
  font-size: 12px;
  line-height: 18px;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}
.accountWithdrawFormSubmit {
  width: 100%;
}
.accountWithdrawCredits {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.accountWithdrawCreditsSumm {
  font-weight: 700;
  color: #0066FF;
}
.accountWithdrawComission {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6B7280;
  margin-bottom: 24px;
}
.accountWithdrawComissionSumm {
  font-weight: 700;
}
.accountWithdrawNotes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 8px);
  background-color: #ffffff;
  z-index: 5;
  opacity: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
.accountWithdrawNotes.active {
  opacity: 1;
  pointer-events: auto;
}
.accountWithdrawNotesBlock {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accountWithdrawNotesMessage {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
  margin-top: 24px;
}
@media (max-width: 1400px) {
  .accountWithdrawTabsContent {
    height: 580px;
  }
  .accountWithdrawNotes {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0%;
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  .accountWithdrawNotesBlock {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    border-radius: 24px;
    height: auto;
    max-width: 400px;
    width: 100%;
    margin: 0 20px;
  }
  .accountWithdrawNotes img {
    width: 118px;
  }
  .accountWithdrawNotes h3 {
    display: none;
  }
  .accountWithdrawNotesMessage {
    font-size: 20px;
    line-height: 32px;
  }
}
@media (max-width: 1000px) {
  .accountWithdrawContentTitle {
    font-size: 24px;
    text-align: center;
  }
  .accountWithdrawBalance {
    margin-bottom: 16px;
    padding: 20px 24px;
  }
  .accountWithdrawBalanceText {
    font-size: 16px;
    line-height: 28px;
  }
  .accountWithdrawBalanceValue {
    font-size: 24px;
  }
}
@media (max-width: 870px) {
  .accountWithdrawTabsContent {
    height: 600px;
  }
}
@media (max-width: 770px) {
  .accountWithdrawTabsContent {
    height: 620px;
  }
}
@media (max-width: 700px) {
  .accountWithdrawContentTitle {
    font-size: 16px;
    line-height: 28px;
  }
  .accountWithdrawBalance {
    margin-bottom: 8px;
    padding: 18px 24px;
  }
  .accountWithdrawBalanceValue {
    font-size: 20px;
    line-height: 32px;
  }
  .accountWithdrawTabsList {
    flex-wrap: wrap;
    gap: 10px;
  }
  .accountWithdrawTabsListItem {
    width: 100%;
  }
  .accountWithdrawTabsContent {
    max-height: 2000px;
    height: 100%;
  }
  .accountWithdrawTabsContent {
    height: 100%;
  }
  .accountWithdrawTabsContentItem {
    position: relative;
    transform: translateX(0);
    max-height: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, max-height 0.3s ease-in-out;
  }
  .accountWithdrawTabsContentItem.active {
    max-height: 1500px;
  }
  .accountWithdrawFormLabel {
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
  }
  .accountWithdrawFormLabel:nth-last-child(-n+2) {
    margin-bottom: 16px;
  }
  .accountWithdrawFormLabel:last-child {
    margin-bottom: 0;
  }
  .accountWithdrawNotesBlock {
    max-width: 100%;
    width: calc(100% - 40px);
  }
}
.userProfileTitle {
  display: none;
}
.userProfileContent {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  gap: 32px;
}
.userProfileImage {
  width: 308px;
  height: 308px;
  border-radius: 50%;
  background-color: #E6FFF7;
}
.userProfileImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background-color: #E6FFF7;
}
.userProfileName {
  width: 308px;
  height: 308px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
  opacity: 30%;
}
.userProfileInfo {
  width: calc(100% - 340px);
}
.userProfileInfoSrl {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.userProfileInfoSrl .userProfileForm {
  margin-bottom: 16px;
}
.userProfileForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  margin-bottom: 32px;
}
.userProfileFormLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.userProfileFormLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.userProfileFormLabel.error span {
  color: #EF4444;
}
.userProfileFormLabel.error .userProfileFormInput {
  color: #EF4444;
}
.userProfileFormLabel.error .userProfileFormInputWrapper {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.userProfileFormInput {
  width: calc(100% - 40px);
  background-color: transparent;
  font-size: 16px;
  line-height: 28px;
  color: #1A1A1A;
}
.userProfileFormInput::placeholder {
  color: #9CA3AF;
}
.userProfileFormInputWrapper {
  position: relative;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.userProfileFormInputSrl {
  font-weight: 700;
}
.userProfileFormEdit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.userProfileFormEdit.show {
  opacity: 1;
  width: 20px;
  height: 20px;
  margin-left: 20px;
}
.userProfileFormSave {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.userProfileFormSave.show {
  opacity: 1;
  width: 20px;
  height: 20px;
  margin-left: 20px;
}
.userProfileActions {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.userProfileSecurity {
  width: 100%;
}
.userProfileDelete,
.userProfilePassword {
  width: calc(50% - 12px);
}
.userProfileLogoutSrl {
  width: calc(50% - 12px);
  align-self: center;
}
@media (max-width: 1000px) {
  .userProfileTitle {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 32px;
  }
  .userProfileContent {
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
  }
  .userProfileImage {
    margin-bottom: 32px;
    width: 240px;
    height: 240px;
  }
  .userProfileName {
    width: 240px;
    height: 240px;
  }
  .userProfileInfo {
    width: 100%;
    margin-bottom: 16px;
  }
  .userProfileLogout {
    width: 100%;
  }
  .userProfileFormLabel {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .userProfileTitle {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 24px;
  }
  .userProfileDelete,
  .userProfilePassword {
    width: 100%;
  }
  .userProfileLogout {
    margin-top: 16px;
  }
  .userProfileInfoSrl {
    margin-bottom: 0;
  }
}
.userPlan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 24px;
  background-color: #F3F6FB;
  border: 1px solid #E3E8EF;
  margin-bottom: 24px;
}
.userPlanStandard {
  background-color: #1AD1A5;
  box-shadow: 0px 1px 4px rgba(26, 209, 165, 0.1);
  border: none;
}
.userPlanPremium {
  background-color: #0066FF;
  box-shadow: 0px 1px 4px rgba(0, 102, 255, 0.15);
  border: none;
}
.userPlanLabel {
  font-weight: 700;
  line-height: 32px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.userPlanLabelWhite {
  color: #ffffff;
}
.userPlanUpdate {
  padding: 6px 10px;
  background-color: #1A1A1A;
  border-radius: 16px;
  color: #ffffff;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  transition: background-color 0.4s ease-in-out;
}
.userPlanUpdate:hover {
  background-color: #2B2B2B;
}
@media (max-width: 1000px) {
  .userPlan {
    margin-bottom: 16px;
  }
}
.modal {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease-in-out;
  z-index: 1000;
}
.modal.active {
  opacity: 1;
  pointer-events: auto;
}
.modalTitleBlue {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #0066FF;
  margin-bottom: 32px;
}
.modalTitleBlack {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}
.modalClose {
  position: absolute;
  top: 16px;
  right: 16px;
}
.modalClose svg path {
  fill: #1A1A1A;
  transition: fill 0.4s ease-in-out;
}
.modalClose:hover svg path {
  fill: #6B7280;
}
.modalContent {
  width: 100%;
  position: relative;
  margin: 0 40px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.modalContent::-webkit-scrollbar {
  width: 8px;
  background: transparent;
  border: 1px solid transparent;
}
.modalContent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.modalContent::-webkit-scrollbar-track {
  background: transparent;
}
.modalPlansContent {
  max-width: 688px;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 42px 32px;
  max-height: 85vh;
  height: auto;
  overflow-y: auto;
}
.modalPlansHeader {
  line-height: 32px;
  font-weight: 700;
  padding: 8px;
  font-size: 16px;
  border-radius: 24px;
  background-color: #F3F6FB;
  margin-bottom: 24px;
  text-align: center;
  border: 1px solid #E3E8EF;
}
.modalPlansItem {
  padding: 24px;
  background-color: #F3F6FB;
  border-radius: 24px;
  border: 1px solid #E3E8EF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.modalPlansItemHeader {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modalPlansItemComission {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #6B7280;
}
.modalPlansItemComission span {
  color: #1AD1A5;
}
.modalPlansItemPrice {
  font-weight: 600;
  color: #6B7280;
}
.modalPlansItemRenewal {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.modalPlansItemRenewal span {
  text-align: left;
  margin-left: 0;
  line-height: 28px;
  color: #1A1A1A;
}
.modalPlansItemRenewalInput {
  display: none;
}
.modalPlansItemRenewalInput:checked + .customCheckbox::after {
  left: calc(100% - 24px);
  background-color: #0066FF;
}
.modalPlansStandardButton {
  width: 100%;
}
.modalPlansPremium {
  background-color: #0066FF;
  color: #ffffff;
  margin-bottom: 0;
}
.modalPlansPremiumButton {
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 40px;
  background-color: #1A1A1A;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.modalPlansPremiumButton:hover {
  background-color: #F3F6FB;
  color: #1A1A1A;
}
.modalPlansPremium .modalPlansItemComission {
  color: #ffffff;
}
.modalPlansPremium .modalPlansItemPrice {
  color: #ffffff;
}
.modalPlansPremium .modalPlansItemFinished {
  color: #ffffff;
}
.modalPlansPremium .modalPlansItemRenewal span {
  color: #ffffff;
}
.modalFullscreenQrContent {
  max-width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 40px;
  overflow-y: auto;
}
.modalInviteContent {
  max-width: 688px;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 42px 32px;
  max-height: 85vh;
  height: auto;
  overflow-y: auto;
  margin: 0 40px;
}
.modalInviteHeader {
  line-height: 32px;
  font-weight: 700;
  padding: 10px;
  font-size: 16px;
  border-radius: 24px;
  background-color: #F3F6FB;
  margin-bottom: 24px;
  text-align: center;
  border: 1px solid #E3E8EF;
}
.modalInviteFormGroup {
  background-color: #F3F6FB;
  margin-bottom: 24px;
  border-radius: 24px;
  border: 1px solid #E3E8EF;
  padding: 24px;
}
.modalInviteFormLabel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.modalInviteFormLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.modalInviteFormLabel.error span {
  color: #EF4444;
}
.modalInviteFormLabel.error .modalInviteFormInput {
  color: #EF4444;
  border: 1px solid #EF4444;
}
.modalInviteFormInput {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.modalInviteFormInput::placeholder {
  color: #9CA3AF;
}
.modalInviteButton {
  width: 100%;
}
.modalSecurityContent {
  max-width: 1100px;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px;
  max-height: 806px;
  height: 100%;
  overflow-y: auto;
  margin: 0 40px;
  text-align: center;
}
.modalSecurityBlock {
  position: absolute;
  top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease-in-out;
}
.modalSecurityBlock.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  top: unset;
}
.modalSecurityQr {
  width: 360px;
  height: 360px;
  margin: 100px auto;
}
.modalSecurityCode,
.modalSecurityRecovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.modalSecurityBackupCode {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  color: #0066FF;
  display: block;
  margin: auto 0;
}
.modalSecurityTip {
  font-weight: 700;
  color: #000000;
  margin-top: 32px;
}
.modalSecurity img {
  margin: auto 0;
}
.modalDeleteContent {
  max-width: 320px;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  margin: 0 40px;
  text-align: center;
}
.modalDeleteTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 16px;
}
.modalDeleteActions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.modalDeleteButton {
  flex: 1;
}
.modalResetPasswordContent {
  max-width: 688px;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
  text-align: center;
}
.modalResetPasswordForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.modalResetPasswordFormLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.modalResetPasswordFormLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.modalResetPasswordFormField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 24px;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.modalResetPasswordFormField input {
  width: calc(100% - 40px);
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: transparent;
  transition: color 0.4s ease-in-out;
}
.modalResetPasswordFormField input::placeholder {
  color: #9CA3AF;
}
.modalResetPasswordFormFieldToggle svg path {
  fill: #9CA3AF;
  transition: fill 0.4s ease-in-out;
}
.modalResetPasswordFormFieldToggle.show svg path {
  fill: #0066FF;
}
.modalEmployerCardContent {
  max-width: 688px;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
}
.modalEmployerCardData {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 28px;
}
.modalEmployerCardDataLabel {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.modalEmployerCardDataLabel span {
  font-size: 16px;
  line-height: 32px;
  color: #6B7280;
  margin-left: 16px;
  transition: color 0.4s ease-in-out;
}
.modalEmployerCardDataInput {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #E3E8EF;
  border-radius: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #1A1A1A;
  background-color: #F8FAFC;
  transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}
.modalEmployerCardDataInput::placeholder {
  color: #9CA3AF;
}
.modalEmployerCardPlan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  line-height: 24px;
  padding: 10px;
  border-radius: 24px;
  color: #1A1A1A;
  background-color: #F3F6FB;
  margin-bottom: 28px;
}
.modalEmployerCardPlanPremium {
  color: #ffffff;
  background-color: #0066FF;
  box-shadow: 0 2px 4px rgba(0, 102, 255, 0.15);
}
.modalEmployerCardPlanStandard {
  background-color: #1AD1A5;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(26, 209, 165, 0.1);
}
.modalEmployerCardPlanBasic {
  color: #1A1A1A;
  border: 1px solid #E3E8EF;
}
.modalNoteContent {
  max-width: 320px;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  margin: 0 40px;
  text-align: center;
}
.modalNoteMessage {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 32px;
}
.modalNote img {
  margin-bottom: 32px;
}
.modalNoteClose {
  width: 100%;
}
@media (max-width: 1200px) {
  .modalFullscreenQr {
    display: flex;
  }
  .modalFullscreenQrContent {
    max-width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 40px;
    overflow-y: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .modalFullscreenQrClose {
    padding: 8px 16px 8px 8px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 400;
  }
  .modalFullscreenQrCloseIcon {
    border-radius: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0066FF;
  }
}
@media (max-width: 700px) {
  .modalTitleBlue {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 42px;
  }
  .modalTitleBlack {
    font-size: 20px;
    line-height: 28px;
  }
  .modalContent {
    margin: 0;
  }
  .modalPlansContent {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modalPlansHeader {
    padding: 24px;
    text-align: left;
  }
  .modalPlansItem {
    align-items: flex-start;
  }
  .modalPlansItemHeader {
    font-size: 20px;
    line-height: 32px;
  }
  .modalPlansItemComission {
    font-size: 16px;
    line-height: 28px;
  }
  .modalPlansItemRenewal {
    justify-content: flex-start;
  }
  .modalFullscreenQrContent {
    padding: 20px;
  }
  .modalInviteContent {
    padding: 42px 24px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }
  .modalSecurityContent {
    padding: 52px 24px;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modalSecurityQr {
    width: 160px;
    height: 160px;
    margin: 42px auto 0;
  }
  .modalResetPasswordContent {
    max-width: 100%;
    margin: 0 20px;
  }
  .modalResetPasswordForm {
    flex-wrap: wrap;
    gap: 16px;
  }
  .modalResetPasswordFormLabel {
    width: 100%;
  }
  .modalEmployerCardContent {
    max-width: 100%;
    margin: 0 20px;
    max-height: 90%;
    overflow-y: auto;
  }
  .modalEmployerCardData {
    gap: 16px;
  }
  .modalEmployerCardDataLabel {
    width: 100%;
  }
  .modalEmployerCardDelete {
    width: 100%;
  }
}
.errorPageContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.errorPageIcon {
  margin-bottom: 32px;
}
.errorPageText {
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #6B7280;
}
.errorPageTitle {
  margin-bottom: 8px;
}
@media (max-width: 1000px) {
  .errorPageContent {
    padding: 80px 0;
  }
}
.authBlockSecurity {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 678px;
}
.authBlockSecurityButtonRecovery {
  font-weight: 700;
  color: #1AD1A5;
}
/*# sourceMappingURL=style.css.map */