:root{
  --containerWidth:1240px; 
}

html, body{
  height:100%;
  margin:0;
  padding:0;
}

html{
  box-sizing: border-box;
  font-family: 'Regular', sans-serif;
  font-size: 18px; 
  color: #ffffff;
  scroll-behavior: smooth;
}


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

h1, h2, h3, h4, h5, h6, p, img, ul, li, input, select, button{
  margin:0;
  padding:0;
}

h1 {
  font-size: 48px;
  font-family: 'Light';
  line-height: 58px; /* Около 1.2 */
  font-weight: 300;
}

h2 {
  font-size: 36px;
  font-family: 'Light';
  line-height: 44px; /* Около 1.2 */
  font-weight: 300;
}

h3 {
  font-size: 32px;
  font-family: 'Light';
  line-height: 40px; /* Около 1.25 */
  font-weight: 300;
}

h4 {
  font-size: 28px;
  font-family: 'Light';
  line-height: 34px; /* Около 1.2 */
  font-weight: 300;
}

h5 {
  font-size: 24px;
  font-family: 'Light';
  line-height: 30px; /* Около 1.25 */
  font-weight: 300;
}

h6 {
  font-size: 20px;
  font-family: 'Light';
  line-height: 26px; /* Около 1.3 */
  font-weight: 300;
}

ul{
 list-style:none;
}

button{
 border:none;
 outline:none;
 cursor:pointer;
}

a{
  outline: none;
  text-decoration: none;
  cursor: pointer;
  color: #ffffff;
}

p{
  color: #dddddd;
  line-height: 1.4;
  letter-spacing: 0.5px;
  font-family: 'Light';
}

input, select, textarea{
  outline: none;
  border: none;
}

input, textarea{
  border-radius: 5px;
  border: 1px solid #727272;
  background: transparent;
  padding: 15px 12px;
}

input::placeholder, textarea::placeholder{
  color: grey;
}

input:focus, textarea:focus{
  border: 1px solid #ffffff;
  background: transparent;
}



.dvoiceOrange{
  color: #EA3200;
}
html[lang="en"] .dvoiceOrange{
  font-family: 'Medium';
}
html[lang="ua"] .dvoiceOrange{
  font-family: 'Bold';
}



.container{
  max-width:var(--containerWidth);
  margin: 0 auto;
  padding:0 10px;
}

.wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  margin:0 auto;
  width: 100%; 
  min-height:100%;  /* height: 100vh; */
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(28,26,26,1) 50%, rgb(32, 28, 28) 100%);
}

/*--------------------------------------------------------------------------------------------*/

.header-wrapper{
  width: 100%;
  background-color: #201B1BF5;
  backdrop-filter: blur(4px);
  position:fixed;
  top:0;
  width: 100%;
  z-index: 1000;
  font-size: 16px;
}

/*--------------------------------------------------------------------------------------------*/
.desktopHeader{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.desktopHeader > .logo-wrapper{
  width: 10%;
  display: flex;
  justify-content: flex-start;
}

.desktopHeader .logo-wrapper > img{
  cursor: pointer;
  width: 48px;
  height: 48px;
}


.desktopHeader .nav-wrapper{
  width: 80%;
}

.desktopHeader .nav{
  width: 100%;
  display: flex;
  justify-content: center;
}

.navLink{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 25px;
  padding: 0 6px;
  text-align: center;
}

.navLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2.5px;
  background-color: #EA3200;
  border-radius: 50px;
  transition: width 0.9s ease;
}


html[lang="en"] .activeNavLink{
  font-family:'Medium';
}
html[lang="ua"] .activeNavLink{
  font-family:'Bold';
}

.activeNavLink::after{
  width:100%;
}


.languageSwitcher-wrapper{
  width: 10%;
  display: flex;
  justify-content: flex-end;
}

.languageSwitcher{
  position: relative;
}

.languageSwitcherTitle{
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 5px;
  width: 35px;
  text-align: center;
}

.languageSwitcherMenu{
  position: absolute;
  background-color: rgb(15, 15, 15);
  border: 1.5px solid #646464;
  border-radius: 10px;
  cursor: pointer;
  padding:7px 0;
  top:30px;
}

html[lang="en"] .languageSwitcherMenu{
  width: 100px;
}
html[lang="ua"] .languageSwitcherMenu{
  width: 120px;
}


html[lang="en"] .languageSwitcher[data-type="desktop"] .languageSwitcherMenu{
  left: -34px;
}
html[lang="ua"] .languageSwitcher[data-type="desktop"] .languageSwitcherMenu{
  left: -43.5px; 
}
html[lang="en"] .languageSwitcher[data-type="mobile"] .languageSwitcherMenu{
  left: -65px;
}
html[lang="ua"] .languageSwitcher[data-type="mobile"] .languageSwitcherMenu{
  left: -85px;
}


.languageSwitcher[data-state="close"] .languageSwitcherMenu{
  display: none;
}
.languageSwitcher[data-state="open"] .languageSwitcherMenu{
  display: block;
}

.languageSwitcherMenuElement{
  display: block;
  text-align: center;
  width: 100%;
  padding: 6px 0;
}


.activeLanguageSwitcherMenuElement{
  color: #afafaf;
}

/*--------------------------------------------------------------------------------------------*/

.mobileHeader{
  width: 100%;
  height: 56px;
  display: none;
  justify-content: space-between;
  align-items: center;
}


.mobileHeader .nav-wrapper{
  display: flex;
  justify-content: flex-start;
  width: 15%;
}

.navOpenButtonMobile, .navCloseButtonMobile{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 28px;
  width: 28px;
  height: 28px;
}
.navOpenButtonMobile img, .navCloseButtonMobile img{
  width: 100%;
}

.mobileHeader > .nav-wrapper > .nav{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(17, 16, 16) 50%, rgb(43, 35, 35) 100%);
  z-index: 100;
  padding: 20px;
  font-size: 20px;
}

.mobileHeader .navLink{
  margin: 25px 0;
  padding: 0;
  justify-content: flex-start;
}


.mobileHeader .logo-wrapper{
  display: flex;
  justify-content: center;
  width: 70%;
}

.mobileHeader .logo-wrapper > a{
  color: #EA3200;
  font-size: 24px;
}
 
html[lang="en"] .mobileHeader .logo-wrapper > a {
  font-family:'Medium';
  font-weight: 500;
}
html[lang="ua"] .mobileHeader .logo-wrapper > a {
  font-family:'Bold';
}

.mobileHeader .languageSwitcher-wrapper{
  display: flex;
  justify-content: flex-end;
  width: 15%;
}


.mobileHeader .navTraceryMobile{
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  bottom: 0px; 
  left: 50%;
  transform: translate(-50%, 0%); /* Компенсация ширины и высоты */
}
.mobileHeader .navTraceryMobile > img{
  height: 100%;
}

.mobileHeader .navCompanyName{
  position: absolute; 
  bottom: 35px; 
  left: 50%;
  transform: translate(-50%, 0%); /* Компенсация ширины и высоты */
}

.mobileHeader .navCompanyName > h6{
  font-family: 'Regular';
}
/*--------------------------------------------------------------------------------------------*/

.content-wrapper{
  display: block;
  padding-bottom: 90px;
  height: auto;
  z-index: 1;
}

.home-wrapper:target,
.about-wrapper:target,
.mobile-wrapper:target,
.web-wrapper:target,
.adminPanel-wrapper:target,
.contactUs-wrapper:target{
  scroll-margin-top:80px;
}

.home-wrapper,
.about-wrapper,
.mobile-wrapper,
.web-wrapper,
.adminPanel-wrapper,
.contactUs-wrapper, 
.page404-wrapper{
  position: relative;
  height: auto;
  width: 100%;
}


.about-wrapper, 
.mobile-wrapper, 
.web-wrapper, 
.adminPanel-wrapper, 
.contactUs-wrapper{
  margin-top: 180px;
}
.about-wrapper,
.adminPanel-wrapper,
.contactUs-wrapper{
  padding-top: 25px;
}
.mobile-wrapper{
  padding-top: 20px;
}


.about{
  display: flex;
  justify-content: center;
}
html[lang="en"] .about{
  align-items: flex-start;
}
html[lang="ua"] .about{
  align-items: center;
}

.web, 
.adminPanel{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}



.home, 
.mobile{
  display: block;
  text-align: center;
}
/*-----------------------------------------------------*/


.home-wrapper{
  margin-top:80px; /* header compensation */
  padding-top: 90px;
}


.homeTracery1{
  width: 165px;
  top: 2%; 
  left: 0;
}
.homeTracery2{
  width: 1250px;
  top:0%; 
  left:50%;
  transform: translate(-50%, 0%); /* Компенсация ширины и высоты */
}
.homeTracery3{
  width: 190px;
  bottom: 28%; 
  right: 0;
}

.homeTracery1 img, .page404Tracery1 img, .authTracery1 img, .privacyPolicyTracery1 img,
.homeTracery2 img, .page404Tracery2 img, .authTracery2 img, .privacyPolicyTracery2 img,
.homeTracery3 img, .page404Tracery3 img, .authTracery3 img, .privacyPolicyTracery3 img{
  width: 100%;
}

.home{}


.homeImage-wrapper{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.homeImage-wrapper img{
  width: 90%;
}

.homeInfo-wrapper{
  margin-top: 10px;
  margin-right:auto;
  margin-left:auto;
}

html[lang="en"] .homeInfo-wrapper{
  width: 70%;
}
html[lang="ua"] .homeInfo-wrapper{
  width: 90%;
}

.homeInfo-wrapper h1{
  font-family:'Regular';
  font-weight:400;
}

.homeInfo-wrapper p{
  margin-top: 15px;
}

.homeMediaLinks-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 40px auto 0 auto;
}

.homeMediaLink{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #0C0C0C;
  border-radius: 8px;
  border: 1px solid #a6a6a6;
  padding: 8px 15px;
  min-width: 210px;
  font-family: Arial, sans-serif;
  margin: 15px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.homeMediaLinkImage-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 40px;
}
.homeMediaLinkImage-wrapper img{
  width: 100%;
}

.homeMediaLinkData-wrapper{
  margin-left: 10px;
  text-align: left;
}

.homeMediaLink p{
  color: #ffffff;
  line-height:1.1;
}


.homeMediaLink:hover{
  background-color: #000000;
}
.homeMediaLink:active{
/*  background-color: #EA3200; */
  background-color: #EA2300;
}

.cards-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 120px auto 0 auto;
}

.card{
  width: 33%;
  padding: 20px 40px;
}
.card img{
  width: 65px;
  height: 65px;
}
.card h5{
  margin-top: 10px;
}


html[lang="en"] .card h5{
  font-family: 'Light';
}
html[lang="ua"] .card h5{
  font-family: 'SemiBold';
}


html[lang="en"] .card p{
  margin-top: 10px;
  font-size: 18px;
}
html[lang="ua"] .card p{
  margin-top: 12px;
  font-size: 16px;
}
/*-----------------------------------------------------*/

.aboutTracery1{
/*  width: 12%; */
  width: 230px;
  position: absolute; 
  bottom: -200px; 
  left: 0;
  z-index:-1;
}
.aboutTracery1 img{
  width: 100%;
}

.aboutInfo-wrapper{
  display: block;
  width: 50%;
  padding-right: 45px;
}

html[lang="en"] .aboutInfo{
  margin-top: 5px;
}
html[lang="ua"] .aboutInfo{
  margin-top: 10px;
}

.aboutInfo p{
  margin-top: 10px;
}
.aboutInfo p:first-child{
  margin-top: 0px;
}

.aboutImage-wrapper{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutImage-wrapper img{
  width: 90%;
}

/*-----------------------------------------------------*/

.mobileTracery1{
/*  width: 12%; */
  width: 230px;
  position: absolute;
  bottom: -50px; 
  right: 0;
  z-index:-1;
}
.mobileTracery1 img{
  width: 100%;
}

.mobileImage-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
}
.mobileImage-wrapper img{
  width: 100%;
}

html[lang="en"] .mobileParagraph1{
  margin-top: 5px;
}
html[lang="ua"] .mobileParagraph1{
  margin-top: 10px;
}
html[lang="en"] .mobileParagraph2{
  margin-top: 25px;
}
html[lang="ua"] .mobileParagraph2{
  margin-top: 30px;
}
/*-----------------------------------------------------*/

.webInfo-wrapper{
  display: block;
  width: 49%;
  padding: 50px 0 0 35px;
}
.webImage-wrapper{
  width: 51%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.webImage-wrapper img{
  width: 100%;
}

html[lang="en"] .webInfo{
  margin-top: 5px;
}
html[lang="ua"] .webInfo{
  margin-top: 10px;
}

.webInfo p{
  margin-top: 10px;
}
.webInfo p:first-child{
  margin-top: 0px;
}
/*-----------------------------------------------------*/

.adminPanelTracery1{
/*  width: 12%; */
  width: 250px;
  position: absolute; 
  bottom: -100px; 
  left: 0;
  z-index:-1;
}
.adminPanelTracery1 img{
  width: 100%;
}

.adminPanelInfo-wrapper{
  display: block;
  width: 47%;
}

html[lang="en"] .adminPanelInfo{
  margin-top: 5px;
}
html[lang="ua"] .adminPanelInfo{
  margin-top: 10px;
}

.adminPanelInfo p{
  margin-top: 10px;
}
.adminPanelInfo p:first-child{
  margin-top: 0px;
}

.adminPanelImage-wrapper{
  width: 53%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.adminPanelImage-wrapper img{
  width: 90%;
}

/*-----------------------------------------------------*/

.contactUsTracery1{
  position: absolute; 
  width: 680px;
  left: calc(52% - 680px);
  z-index: -1;
}
.contactUsTracery2{
/*  width: 12%; */
  width: 230px;
  position: absolute; 
  top:50%;
  right: 0;
  transform: translate(0%, -35%); /* Компенсация ширины и высоты */
  z-index: -1;
}
.contactUsTracery1 img{
  width: 100%;
}
.contactUsTracery2 img{
  width: 100%;
}


.contactUs{
  display: flex;
  margin-top: 30px;
}
.contactUsInfoMedia-wrapper{
  margin-top: 45px;
}
.contactUsInfoMedia{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}
.contactUsInfoMedia:first-child{
  margin-top: 0px;
}
.contactUsInfoMedia img{
  width: 32px;
}
.contactUsInfoMedia p{
  margin-left: 10px;
}

.contactUsForm-wrapper{
  position: relative;
  display: block;
  width: 50%;
  padding-right: 40px;
}
.contactUsForm{
  padding: 55px 35px 20px 35px;
  background-color: #1b1a1acc;
  backdrop-filter: blur(6px);
  border-radius: 10px;
  border: 1px solid #727272;
  color: #ffffff;
}

.contactUsForm input, .contactUsForm textarea, .contactUsForm p{
  color: #ffffff;
}

.contactUsFormInput-wrapper span{
  display: block;
  color: red;
  font-size: 16px;
  margin-top: 5px;
}

.contactUsFormInput-wrapper input,.contactUsFormInput-wrapper textarea{
  width: 100%;
  margin-top: 10px;
}

.contactUsFormInput-wrapper[data-validator="true"]{
  margin-top: 25px;
}
.contactUsFormInput-wrapper[data-validator="false"]{
  margin-top: 15px;
}
.contactUsForm[data-validation="null"] .contactUsFormButton-wrapper,
.contactUsForm[data-validation="true"] .contactUsFormButton-wrapper{
  margin-top: 40px;
}
.contactUsForm[data-validation="false"] .contactUsFormButton-wrapper{
  margin-top: 30px;
}
.contactUsFormInput-wrapper[data-validator="true"]:first-child, 
.contactUsFormInput-wrapper[data-validator="false"]:first-child{
  margin-top:0;
}
.contactUsFormInput-wrapper[data-validator="true"] input{

}
.contactUsFormInput-wrapper[data-validator="false"] input{
  border: 2px solid red;
}
.contactUsFormInput-wrapper[data-validator="true"] span{
  display: none;
}
.contactUsFormInput-wrapper[data-validator="false"] span{
  display: block;
}




.contactUsFormButton-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contactUsFormButton{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EA3200;
  border-radius: 5px;
  color: #ffffff;
  width: 72%;
  height: 64px;
  font-size: 22px;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.4s ease, transform 0.3s ease;
}

html[lang="en"] .contactUsFormButton{
  font-family: 'Medium';
}
html[lang="ua"] .contactUsFormButton{
  font-family: 'Bold';
}

.contactUsForm[data-validation="null"] .contactUsFormButton{
  margin-bottom: 55px;
}

.contactUsForm[data-validation="true"] .contactUsFormButton,
.contactUsForm[data-validation="false"] .contactUsFormButton{
  margin-bottom: 15px;
}





.disableButton{
  background-color: rgb(99, 99, 99) !important;
  background-color: rgb(117, 117, 117) !important;
  cursor: auto;
}

.contactUsFormButton-wrapper button:hover{
  background-color: #4B4B4B;
  border: 1px solid #EEEEEE;
}

.contactUsFormButton-wrapper button:active{
  background-color: #A52300;
  border: 1px solid #A52300;
}

.contactUsFormButton-wrapper[data-validation="true"] span{
  display: none;
}
.contactUsFormButton-wrapper[data-validation="false"] span{
  display: block;
}

.contactUsFormNotification-wrapper{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.contactUsFormNotification{

}

.contactUsFormNotification-wrapper span{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  text-align: center;
  color: white;
  font-family: 'Regular';
  padding: 9.67px;
}

.contactUsForm[data-validation="null"] .contactUsFormNotification-wrapper span[data-type="success"], 
.contactUsForm[data-validation="null"] .contactUsFormNotification-wrapper span[data-type="failure"]{
  display: none;
}

.contactUsForm[data-validation="true"] .contactUsFormNotification-wrapper span[data-type="success"]{
  display: flex;
}
.contactUsForm[data-validation="true"] .contactUsFormNotification-wrapper span[data-type="failure"]{
  display: none;
}

.contactUsForm[data-validation="false"] .contactUsFormNotification-wrapper span[data-type="failure"]{
  display: flex;
}
.contactUsForm[data-validation="false"] .contactUsFormNotification-wrapper span[data-type="success"]{
  display: none;
}


.contactUsInfo-wrapper{
  width: 50%;
  padding-left: 40px;
}

.contactUsInfo-wrapper p{
  font-size: 26px;
  color:#ffffff;
}

.contactUsFormDisabler{
  position:absolute; 
  top:0; 
  display:flex;
  justify-content: center;
  align-items: center; 
  opacity: 0;
  border-radius: 10px;
  background-color: rgba(32, 32, 32, 0.5); 
  backdrop-filter: blur(5px);
  cursor: wait;
  z-index: -10;
  transition: opacity .5s ease-in-out;
}

.preloader{
  width: 200px;
  height: 200px;
  border: 10px solid white;
  border-top:10px solid #EA2300;
  border-radius: 100%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}

/*---------------------------------------------------------------------*/

.footer-wrapper{
  background: linear-gradient(0deg, rgba(20,20,20,1) 0%, rgba(45,45,45,1) 50%, rgba(70,70,70,1) 100%);
  width: 100%;
  font-size: 18px;
}

.footer{
  display:block;
}

.footerData-wrapper{
  position: relative;
  padding: 65px 0 45px 0;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.footerData-wrapper .logo-wrapper{
  width: 10%;
  display: flex;
  justify-content: flex-start;
}


.footerData-wrapper .logo-wrapper > a{
  color: #EA3200;
  font-size: 36px;
  font-family:'Medium';
  font-weight: 500;
}
html[lang="en"] .footerData-wrapper .logo-wrapper > a{
  font-family:'Medium';
}
html[lang="ua"] .footerData-wrapper .logo-wrapper > a{
  font-family:'Bold';
}

.footerData-wrapper .nav-wrapper{
  width: 80%;
}

.footerData-wrapper .nav{
  width: 100%;
  display: flex;
  justify-content: center;
}

.footerData-wrapper .navLink{
  padding:0;
}

.footerData-wrapper .socialNetwork-wrapper{
  width: 10%;
  display: flex;
  justify-content: space-between;
}
.footerData-wrapper .socialNetwork-wrapper a{
  min-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footerData-wrapper .socialNetwork-wrapper a img{
  width: 90%;
}

.footer .copyright-wrapper{
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family:'Light';
  padding: 20px 0;
}

.greyHorizontalLine{
  content: "";
  width: 100%;
  height: 2px;
  background-color: #646464;
}
/*---------------------------------------------------------------------*/

.upButtonDesktop-wrapper{
  display: block;
  position: fixed;
  bottom: 90px;
  right: 0;
  width: 200px; 
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.upButtonDesktop{
  float:right;
  transform: translateX(100%); /* hide */
  transition: background-color 0.4s ease, transform  0.7s ease-in-out;
}

.upButtonDesktopOffset{
  transform: translateX(-130px); /* show */
  /* transform: translateX(calc(-100% - 50px));  show */
}

/*--------------------------------------------------*/

.upButtonMobile-wrapper{
  display: none;
  position: absolute;
  top:-32px;
  right: 25px;
}

.upButtonMobile{
  transition: background-color 0.4s ease;
}

/*--------------------------------------------------*/
.upButtonDesktop-wrapper, .upButtonMobile-wrapper{
  z-index: 2;
}


.upButtonDesktop, .upButtonMobile{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  background-color: #EA3200;
  border: 2px solid white;
  border-radius: 16px;
  cursor: pointer;
}

.upButtonDesktop img, .upButtonMobile img{
  width: 40px;
}

.upButtonDesktop:hover, .upButtonMobile:hover{
  background-color: #4B4B4B;
}

.upButtonDesktop:active, .upButtonMobile:active{
  background-color: #A52300;
}
/*---------------------------------------------------------------------*/

.page404-wrapper, .auth-wrapper{
  height: 100vh;
}

.homeTracery1, .homeTracery2, .homeTracery3,
.page404Tracery1, .page404Tracery2, .page404Tracery3,
.authTracery1, .authTracery2, .authTracery3,
.privacyPolicyTracery1, .privacyPolicyTracery2, .privacyPolicyTracery3{
  position: absolute; 
  z-index:-1;
}

.page404Tracery1,
.authTracery1{
  width: 165px;
  width: 9%;
  top: 0; 
  left: 0;
}
.page404Tracery2,
.authTracery2{
  width: 65%; 
  top:25%; 
  left:50%;
  transform: translate(-50%, -25%); /* Компенсация ширины и высоты */
}
.page404Tracery3,
.authTracery3{
  width: 190px;
  width: 10%;
  bottom: 0; 
  right: 0;
}


.page404, .auth{
  position: absolute; 
  top:30%; 
  left:50%;
  transform: translate(-50%, -25%); /* Компенсация ширины и высоты */
}

.page404 h1{
  font-size: 56px;
  font-family: 'Bold';
  text-align: center;
}

.page404Image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 480px;
  margin: 5px auto 50px auto;
}
.page404Image-wrapper img{
  width: 100%;
}


.toMainPageButton, .authFormButton{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EA3200;
  border-radius: 5px;
  color: #ffffff;
  height: 64px;
  font-size: 22px;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.4s ease, transform 0.3s ease;
}
.toMainPageButton{
  width: 55%;
}
html[lang="en"] .toMainPageButton,
html[lang="en"] .authFormButton{
  font-family: 'Medium';
}
html[lang="ua"] .toMainPageButton,
html[lang="ua"] .authFormButton{
  font-family: 'Bold';
}

.toMainPageButton:hover,
.authFormButton:hover{
  background-color: #4B4B4B;
  border: 1px solid #EEEEEE;
}
.toMainPageButton:active,
.authFormButton:active{
  background-color: #A52300;
  border: 1px solid #A52300;
}

/*---------------------------------------------------------------------*/
.auth{
  width: 100%;
}

.authForm-wrapper{
  width: 57%;
  display: block;
  margin: 0 auto;
}

.authForm{
  background-color: #1b1a1acc;
  backdrop-filter: blur(6px);
  border-radius: 10px;
  border: 1px solid #727272;
  color: #ffffff;
  width: 100%;
}

.authForm[data-validation="null"]{
  padding: 35px 90px 80px 90px;
}
.authForm[data-validation="false"]{
  padding: 35px 90px 20px 90px;
}
.authForm[data-validation="false"] .authFormNotification-wrapper{
  display: flex;
}

.authForm .logo-wrapper{
  margin: 0 auto;
  width: 75px;
}
.authForm .logo-wrapper img{
  width: 100%;
}
.authForm h1{
  font-size: 40px;
  font-family: 'Medium';
  text-align: center;
  margin-top: 10px;
  margin-bottom: 25px;
}

.authForm input, .authForm p{
  color: #ffffff;
}
 

.authFormInput-wrapper{
  margin-top: 20px;
}

.authFormInput-wrapper input{
  width: 100%;
  margin-top: 10px;
}

.authFormButton-wrapper{
  margin-top: 60px;
  width: 100%;
}
.authFormButton{
  width: 83%;
}

.authFormNotification-wrapper{
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 15px;
}

.authFormNotification-wrapper p{
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  color: white;
  font-family: 'Regular';
  padding: 10px 17px;
}

.privacyPolicy-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
}

.privacyPolicyTracery1{
  width: 165px;
  top: 50px; 
  left: 0;
}
.privacyPolicyTracery2{
  top:50%; 
  left:50%;
  transform: translate(-50%, -50%); /* Компенсация ширины и высоты */
}
.privacyPolicyTracery3{
  width: 190px;
  bottom: 50px; 
  right: 0;
}

.privacyPolicy{
  padding-top: 70px;
  padding-bottom: 70px;
}


.privacyPolicyInfoUA, .privacyPolicyInfoEN{
  text-align: left;
}

.privacyPolicyInfoEN{
  margin-top: 120px;
}

.privacyPolicyInfoUA div, .privacyPolicyInfoEN div{
  margin-top: 30px;
}

.privacyPolicyInfoUA h2, .privacyPolicyInfoEN h2{
  font-family: 'Medium';
}

.privacyPolicyInfoUA > p, .privacyPolicyInfoEN > p{
  margin-top:10px;
}
.privacyPolicyInfoUA div > p, .privacyPolicyInfoEN div > p{
  margin-left:6px;
}
.privacyPolicyInfoUA div > p:first-of-type, .privacyPolicyInfoEN div > p:first-of-type{
  display: block;
  margin-top:20px;
}