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

a {
 text-decoration: none;
}

ul,
ol,
li {
 list-style: none;
}

img {
 vertical-align: top;
}

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

html,
body {
 height: 100%;
 scroll-behavior: smooth;
}

body {
 line-height: 1.2;
 font-family: "Play", serif;
 font-size: 18px;
 color: #333333;
 max-width: 1920px;
 margin: 0 auto;
}

.wrapper {
 min-height: 100%;
 display: flex;
 flex-direction: column;
}

.page {
 flex: 1 1 auto;
}

[class*="__container"] {
 max-width: 95%;
 margin: 0 auto;
}

@media (max-width: 767.98px) {
 [class*="__container"] {
  max-width: none;
  padding: 0px 15px;
 }
}

.header {
 position: sticky;
 top: 0;
 background-color: rgb(230 230 230 / 75%);
 backdrop-filter: blur(10px);
 z-index: 100;
}

.header__container {
 display: flex;
 justify-content: space-between;
 min-height: 55px;
 flex-wrap: wrap;
}

.logo {
 float: left;
 width: auto;
 height: 40px;
 margin-top: 8px;
}

.phone {
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
}

.viber {
 height: 29px;
 width: auto;
 margin-right: 4px;
 margin-bottom: 7px;
 opacity: 0.9;
 cursor: pointer;
}

@media (max-width: 504.98px) {
 .phone {
  max-height: 40px;
 }
 .header__container {
  justify-content: center;
 }
}

@media (max-width: 474.98px) {
 .viber {
  height: 0px;
 }
}

.header_text {
 float: right;
 font-size: 1.4em;
 font-weight: bold;
 margin-top: 0px;
 /* margin-right: 18px; */
 margin-bottom: 7px;
 vertical-align: bottom;
}

@media (max-width: 474.98px) {
 .header_text {
  font-size: 1em;
  margin-right: 18px;
 }
}

.slideshow-container {
 position: relative;
 margin: auto;
}

.slide {
 position: absolute;
 width: 100%;
 transition: opacity 4s ease;
}

.slide-text h2 {
 text-transform: uppercase;
 font-size: 1.5em;
 font-weight: 600;
 margin: 14px 0px;
}

.slide-text {
 position: absolute;
 top: 17%;
 left: 2%;
 color: #fff;
 background-color: rgba(0, 0, 0, 0.4);
 padding: 10px 20px;
 line-height: 1.5;
 width: 48%;
 font-size: 1.7em;
 text-align: justify;
 margin-top: 20px;
}

.slide-button {
 position: absolute;
 top: 75%;
 left: 2%;
 margin-top: 20px;
}

[class*="__adapt"] {
 min-height: 815px;
}

@media (max-width: 1680.98px) {
 .slide-text {
  font-size: 1.5em;
  top: 10%;
 }
 .slide-button {
  top: 73%;
 }
 [class*="__adapt"] {
  min-height: 710px;
 }
}

@media (max-width: 1485.98px) {
 .slide-text {
  font-size: 1.4em;
  top: 10%;
 }
 .slide-button {
  top: 77%;
 }
 [class*="__adapt"] {
  min-height: 615px;
 }
}

@media (max-width: 1407.98px) {
 .slide-text {
  font-size: 1.2em;
  top: 10%;
 }
 .slide-button {
  top: 77%;
 }
 [class*="__adapt"] {
  min-height: 570px;
 }
}

@media (max-width: 1270.98px) {
 .slide-text {
  font-size: 1.1em;
  top: 10%;
 }
 .slide-button {
  top: 72%;
 }
 [class*="__adapt"] {
  min-height: 520px;
 }
}

@media (max-width: 1110.98px) {
 .slide-text {
  font-size: 0.9em;
  top: 3%;
 }
 .slide-button {
  top: 65%;
 }
 [class*="__adapt"] {
  min-height: 440px;
 }
}

@media (max-width: 850.98px) {
 .slideshow-container {
  display: none;
 }
}

.slideshow_m {
 display: none;
}

@media (max-width: 850.98px) {
 .slideshow_m {
  display: block;
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust this value as needed */
  margin: 0 auto;
 }

 .slide_m {
  position: relative;
 }

 #main_img_m {
  width: 100%;
  height: auto;
  display: block;
 }

 .slide-text_m {
  position: absolute;
  bottom: 13%; /* Position the text in the lower half */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  padding: 5px 10px;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  height: 47%;
  font-size: 3.5vw;
  text-align: justify;
  padding: 20px;
 }

 .slide-text_m h2 {
  margin: -14px 0px 10px 0px;
  font-size: 2em;
  line-height: 1.2em;
 }

 .slide-text_m p {
  margin: 10px 0 0;
  font-size: 1.2em;
  line-height: 1.4em;
 }

 .slide-button_m {
  position: absolute;
  bottom: 2%;
  left: 43%;
  width: 250px;
  transform: translateX(-50%);
  text-align: center;
 }

 .animated-object_m:hover {
  background-color: #ff4500;
 }
}

/* Adaptive styles */
@media (max-width: 693px) {
 .animated-object_m {
  font-size: 0.9em;
  margin-bottom: 3px;
 }
 .slide-button_m {
  left: 42%;
 }
}

@media (max-width: 490px) {
 .slide-text_m {
  font-size: 3.5vw;
 }
}

@media (max-width: 373px) {
 .slide-button_m {
  bottom: 1px;
  left: 39%;
 }
 .slide-text_m {
  font-size: 3.4vw;
 }
}

#main_img {
 width: 100%;
 height: auto;
}

.uslugi-head {
 text-align: center;
 margin: 60px 0 25px 0;
 font-size: 1.6em;
 font-weight: 600;
 overflow: hidden;
 overflow-x: hidden;
 /* <body style='overflow-x:hidden;'> */
}

.uslugi-title {
 transform: translate(0px, 120%);
 opacity: 0;
 transition: all 0.8s ease 0s;
}

.uslugi-title._active {
 transform: translate(0px, 0px);
 opacity: 1;
}

#Usl-title a {
 color: #1e1300;
}

.uslugi-title a {
 color: #12014f;
}

.block-container {
 display: flex;
 justify-content: space-between;
 /*max-width: 1124px; */
 width: 72%;
 margin: 0 auto;
}

@media (max-width: 1460.98px) {
 .block-container {
  width: 90%;
 }
}

@media (max-width: 1100.98px) {
 .block-container {
  width: 100%;
 }
}

@media (max-width: 999.98px) {
 .block-container {
  display: block;
  width: 100%;
 }
}

.block {
 flex-basis: calc(50% - 20px);
 text-align: center;
 margin: 10px;
 background-color: #f6f5f5;
 font-size: 1.1em;
 box-shadow: 2px 2px 0px 3px rgba(0, 0, 0, 0.1);
 display: flex;
 align-items: center;
 flex-direction: column;
 justify-content: space-between;
 padding-bottom: 10px;
}

.block1 {
 flex-basis: calc(50% - 20px);
 text-align: center;
 margin: 10px;
 background-color: #f6f5f5;
 font-size: 1.1em;
 box-shadow: 2px 2px 0px 3px rgba(0, 0, 0, 0.1);
 display: flex;
 align-items: center;
 flex-direction: column;
 justify-content: space-between;
 padding-bottom: 10px;
}

.blocks-left {
 display: flex;
 max-width: 50%;
}

@media (max-width: 999.98px) {
 .blocks-left {
  max-width: 100%;
  overflow-x: hidden;
 }
}

@media (max-width: 479.98px) {
 .blocks-left {
  display: block;
  max-width: 100%;
 }
}

.blocks-left .block {
 transform: translateX(100%);
 opacity: 0;
 transition: all 0.8s ease 0s;
}

.block-left._active,
._active .block {
 transform: translate(0px, 0px);
 opacity: 1;
}

.blocks-left .block1 {
 transform: translateX(100%);
 opacity: 0;
 transition: all 0.8s ease 0.5s;
}

.block-left._active,
._active .block1 {
 transform: translate(0px, 0px);
 opacity: 1;
}

.blocks-right {
 display: flex;
 max-width: 50%;
}

@media (max-width: 999.98px) {
 .blocks-right {
  max-width: 100%;
  overflow-x: hidden;
 }
}

@media (max-width: 479.98px) {
 .blocks-right {
  display: block;
  max-width: 100%;
 }
}

.blocks-right .block {
 transform: translateX(-100%);
 opacity: 0;
 transition: all 0.8s ease 0s;
}

.block-right._active,
._active .block {
 transform: translate(0px, 0px);
 opacity: 1;
}

.blocks-right .block1 {
 transform: translateX(-100%);
 opacity: 0;
 transition: all 0.8s ease 0.5s;
}

.block-right._active,
._active .block1 {
 transform: translate(0px, 0px);
 opacity: 1;
}

.block-text {
 padding: 12px 0px;
 /* border: 2px solid; */
 border-color: #e1e1e1;
 display: flex;
 height: 185px;
 width: 90%;
 flex-direction: column;
 justify-content: space-between;
}

.block h3 {
 height: 60px;
 display: flex;
 align-items: center;
 margin: 14px 34px 6px 34px;
 font-size: 0.9em;
 font-weight: 600;
 text-transform: uppercase;
}

.block1 h3 {
 height: 60px;
 display: flex;
 align-items: center;
 margin: 14px 34px 6px 34px;
 font-size: 0.9em;
 font-weight: 600;
 text-transform: uppercase;
}

.block img {
 margin-top: 23px;
 width: 173px;
 height: 180px;
 object-fit: cover;
 border-radius: 0%;
}

.block1 img {
 margin-top: 23px;
 width: 173px;
 height: 180px;
 object-fit: cover;
 border-radius: 0%;
}

.block p {
 margin: 1% 6%;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 border-radius: 0px;
}

.block1 p {
 margin: 1% 6%;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 border-radius: 0px;
}

.block a {
 color: inherit;
}

.block1 a {
 color: inherit;
}

#anim {
 font-size: 2em;
 color: #333;
 transition: transform 2s ease;
}
#anim:hover {
 transform: rotateY(360deg) scale(0.8);
}

.animated-object {
 transition: transform 0.3s ease;
}

#andOther {
 width: 200px;
}

button {
 width: 300px;
 padding: 15px 5px;
 margin: 14px;
 font-size: 16px;
 background-color: #ffae00;
 color: #ffffff;
 border-radius: 5px;
 cursor: pointer;
 font-style: italic;
}

button:hover {
 background-color: #00ff33;
 color: #000000;
}

@media (max-width: 862.98px) {
 button {
  width: 300px;
 }
}

@media (max-width: 324.98px) {
 button {
  width: 292px;
 }
}

.pro_wrap {
 display: flex;
 background-color: #ffffff;
 height: auto;
 justify-content: space-evenly;
 padding: 0 2%;
 margin-top: 30px;
 flex-direction: column;
 align-items: center;
}

@media (max-width: 933.98px) {
 .pro_wrap {
  flex-direction: column;
  align-items: center;
 }
}

.pro_nas h2 {
 color: white;
 text-align: center;
 font-size: 2em;
 font-weight: 400;
 margin-bottom: 8px;
 /* text-transform: uppercase;  */
}

.mistectvo_text {
 color: white;
 border: 3mm ridge rgb(110 110 104 / 60%);
 padding-bottom: 1%;
 background-color: #443124;
 font-size: 1.6em;
 font-family: "Great Vibes";
 font-weight: 300;
 margin: 1% 9%;
 padding: 2% 3%;
 line-height: 1.3;
 /* width: 1050px; */
 height: auto;
 box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.4);
 cursor: url("img/icons/pointer.png") 10 10, auto;
}

.mistectvo_text p {
 font-size: 1.7em;
 text-align: justify;
}

@media (max-width: 1405.98px) {
 .mistectvo_text {
  font-size: 1.3em;
 }
}

@media (max-width: 1205.98px) {
 .mistectvo_text {
  font-size: 1.2em;
 }
}

@media (max-width: 983.98px) {
 .mistectvo_text {
  margin: 35px;
  font-size: 1.1em;
 }
}

@media (max-width: 777.98px) {
 .mistectvo_text {
  margin: 15px;
  font-size: 1em;
 }
}

@media (max-width: 560.98px) {
 .mistectvo_text {
  width: auto;
  height: auto;
  margin: 30px 15px;
 }
}

@media (max-width: 457.98px) {
 .mistectvo_text {
  width: auto;
  height: auto;
  margin: 0px 0px;
  font-size: 0.7em;
 }
}

.price-block {
 text-align: center;
 margin-top: 15px;
 font-size: 1.2em;
 font-weight: 600;
 line-height: 1.4;
 align-items: center;
 overflow: hidden;
 overflow-x: hidden;
 /* <body style='overflow-x:hidden;'> */
}

#price_box {
 display: flex;
 align-items: center;
}

#price_box_up {
 display: flex;
 align-items: center;
}

@media (max-width: 665.98px) {
 #price_box {
  flex-direction: column;
 }
 #price_box_up {
  flex-direction: column-reverse;
 }
}

.price_img {
 flex: 2;
 width: 222px;
 margin: 0px 22px;
 /* transform: translateX(200%); */
 opacity: 0;
 transition: all 4s ease 0s;
}

.price_img._active {
 flex: 2;
 width: 222px;
 margin: 0px 22px;
 /* transform: translate(0px, 0px); */
 opacity: 1;
}

#price_text {
 flex: 3;
}

#price_text p {
    margin: 10px 5%;
    text-align: justify;
}

#faq_box {
 /* display: flex; */
 align-items: center;
}

#faq_text p {
 margin: 10px;
 text-align: justify;
 padding-left: 10%;
}

@media (max-width: 665.98px) {
 #faq_text p {
  padding-left: 1%;
 }
 #faq_title {
  font-size: 0.9em;
  padding: 10px 5px;
  margin: 20px 15px;
 }
}

.linkText {
 a {
  text-decoration: underline !important;
  color: blue !important;
 }

 /* a:visited {
    color: purple;
} */
}

.price-blank {
 background-color: #f6f5f5;
 margin-top: 40px;
 align-items: center;
 height: 30px;
}

.price-wrap {
 background-color: #f6f5f5;
 padding: 2%;
 margin-top: 15px;
 align-items: center;
}

.price-innerwrap {
 background-color: #ffffff;
 align-items: center;
 width: 90%;
 margin: 0 6%;
 padding-top: 10px;
 border-radius: 40px;
}

@media (max-width: 1005.98px) {
 .price-innerwrap {
  width: 100%;
  margin: 20px 0px;
  padding: 15px 0px;
 }
}

.expandable-text h2 {
 background-color: #f6f5f5;
 border-radius: 30px;
 margin: 20px 8%;
}

@media (max-width: 399.98px) {
 .expandable-text h2 {
  margin: 20px 30px;
 }
}

.price-innerwrap p {
 list-style: none;
 position: relative;
 text-align: left;
 margin-bottom: 7px;
 font-weight: 200;
}

@media (max-width: 815.98px) {
 .price-innerwrap p {
  margin-left: 1%;
  margin-top: 3%;
  font-weight: 300;
  font-size: 0.8em;
 }
}

.text-move p {
 transform: translate(0px, 150%);
 transition: all 0.3s ease 0s;
 opacity: 0;
}

.text-move._active p:nth-child(1) {
 transition: all 0.8s ease 0s;
}

.text-move._active p:nth-child(2) {
 transition: all 0.8s ease 0.2s;
}

.text-move._active p:nth-child(3) {
 transition: all 0.8s ease 0.4s;
}

.text-move._active p:nth-child(4) {
 transition: all 0.8s ease 0.6s;
}

.text-move._active p:nth-child(5) {
 transition: all 0.8s ease 0.8s;
}

.text-move._active p:nth-child(6) {
 transition: all 0.8s ease 1s;
}

.text-move._active p:nth-child(7) {
 transition: all 0.8s ease 1.2s;
}

.text-move._active p {
 transform: translate(0px, 0px);
 opacity: 1;
}

.price-block h1 {
 text-align: center;
 font-size: 1.4em;
 font-weight: 600;
 text-transform: uppercase;
}

.price-innerwrap h2 {
 /* text-align: left; */
 padding: 10px 21px;
 font-size: 1.2em;
 font-weight: 600;
}

.contact {
 display: flex;
 justify-content: space-evenly;
 flex-direction: row;
 margin: 0 18px;
 background-color: #f9f9f9;
 border: solid 1px #ccc;
}

@media (max-width: 870.98px) {
 .contact {
  flex-direction: column-reverse;
  align-items: center;
 }
}

.qr-grafik {
 display: flex;
 flex: 1;
 width: 210px;
 justify-content: center;
 flex-wrap: wrap;
 padding-top: 20px;
 align-items: center;
 flex-direction: column;
}

.qr-img {
 height: 180px;
}

.qr-code {
 width: 207px;
 margin-bottom: 30px;
}

@media (max-width: 870.98px) {
 .qr-code {
  display: none;
 }
}

.qr-code h3 {
 margin-bottom: 1px;
 line-height: 1;
}

.grafik {
 line-height: 1.5;
 text-align: justify;
 width: 207px;
}

.grafik p {
 margin: 2%;
 text-align: justify;
 text-align-last: justify;
}

.grafik h3 {
 text-align: left;
}

.contact-map {
 flex: 1;
 margin: 2%;
 padding-top: 0%;
 border: 3mm ridge rgb(110 110 104 / 60%);
 box-shadow: 3px 2px 7px 2px rgba(0, 0, 0, 0.4);
}

/* @media (max-width:1305.98px) {
  .contact-map iframe {
    width: auto;
    min-width: 470px;
  }
}

*/
@media (max-width: 1091.98px) {
 .contact-map iframe {
  width: auto;
  min-width: 320px;
 }
}

@media (max-width: 350.98px) {
 .contact-map iframe {
  width: auto;
  min-width: 300px;
 }
}

.contact-text {
 flex: 1;
 line-height: 2;
 margin: 20px 0px 20px 40px;
}

@media (max-width: 1579.98px) {
 .contact-text {
  margin: 20px;
 }
}

.contact-text h3 {
 font-size: 1em;
 font-weight: 600;
 text-transform: uppercase;
 margin-top: 30px;
}

.footer {
 margin-top: 25px;
 width: 100%;
 padding: 10px 35px;
 font-weight: 600;
 background-color: #000000;
 color: #fff;
}

@keyframes fadeIn {
 from {
  opacity: 0;
  transform: translateY(-20px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes slideIn {
 from {
  margin-left: 50%;
  width: 200%;
 }

 to {
  margin-left: 0%;
  width: 100%;
 }
}

.contact-title {
 overflow: hidden;
 overflow-x: hidden;
 /* <body style='overflow-x:hidden;'> */
}

#title_form {
 text-align: center;
 font-size: 1.4em;
 font-weight: 600;
 text-transform: uppercase;
 margin: 20px;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap");
.card {
 margin: 10px;
 position: relative;
 height: auto;
 width: 20rem;
 aspect-ratio: 5 / 7;
 color: #ffffff;
 perspective: 50rem;
 .shadow {
  position: absolute;
  inset: 0;
  background: var(--url);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  filter: blur(2rem) saturate(0.9);
  box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7);
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
   translate3d(0, 2rem, -2rem);
 }

 .image {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 40%),
   var(--url);
  background-size: cover;
  background-position: center;
  mask-image: var(--url);
  mask-size: cover;
  mask-position: center;

  &.background {
   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
    translate3d(0, 0, 0rem);
  }

  &.cutout {
   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
    translate3d(0, 0, 4rem) scale(0.92);
   z-index: 3;
  }
 }

 .content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset: 0;
  padding: 3rem;

  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
   translate3d(0, 0, 6rem);
  z-index: 4;
 }

 &::after,
 &::before {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: #e2c044 0.5rem solid;
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
   translate3d(0, 0, 2rem);
 }

 &::before {
  z-index: 4;
 }

 &.border-left-behind::before {
  border-right: transparent;
 }

 &.border-right-behind::before {
  border-left: transparent;
  border-top: transparent;
 }

 &.border-bottom-behind::before {
  border-bottom: transparent;
 }
}

.content h2 {
 font-size: 1.25rem;
 font-weight: 700;
 margin: 0 0.4rem;
 text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5), 1px 1px 0.1rem rgb(0 0 0);
}

.content p {
 font-size: 0.79rem;
 font-weight: 300;
 text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5), 1px 1px 0.1rem rgb(0 0 0);
}

@media (max-width: 1241.98px) {
 .card .content {
  padding: 2.8rem;
 }

 .content h2 {
  font-size: 1rem;
 }
 .content p {
  font-size: 0.92vw;
 }
}

#mooved_img {
 display: flex;
 justify-content: space-evenly;
 padding: 60px 0px;
 width: 100%;
 height: 100%;
 background: #393e41; 
 font-family: "Montserrat", sans-serif;
 margin: 30px 0;
  /*border-radius: 37px;*/
}

@media (max-width: 979.98px) {
 #mooved_img {
flex-direction: column;
        align-items: center;
        background: #fff;
        padding-bottom: 0px;
		margin: 0px;
 }
 
 .card .shadow{
	 box-shadow: none;
 }
 
 .card {
  margin-bottom: 55px;
 }

 .content p {
  font-size: 0.79rem;
 }
}

#contactForm {
 display: flex;
 width: auto;
 height: 250px;
 margin: 0 18px;
 padding: 10px 40px;
 border: 1px solid #ccc;
 border-radius: 5px;
 background-color: #f9f9f9;
 justify-content: space-evenly;
 align-items: center;
}

@media (max-width: 725.98px) {
 #contactForm {
  flex-direction: column;
  height: 370px;
  padding: 10px 10px;
 }
}

#userForm {
 flex: 4;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

#capchaForm {
 flex: 2;
 margin: 10px;
}

#userForm_label {
 margin-bottom: 4px;
}

#mathAnswer {
}

#supp_box {
 flex: 1;
}

@media (max-width: 999.98px) {
 #supp_box {
  display: none;
 }
}

#supp_img {
 height: 190px;
}

input[type="text"],
input[type="tel"] {
 width: 95%;
 padding: 5px;
 font-size: 16px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-sizing: border-box;
}

textarea {
 width: 95%;
 height: 70px;
 padding: 5px;
 font-size: 16px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-sizing: border-box;
 resize: vertical;
}

@media (max-width: 725.98px) {
 textarea {
  font-size: 14px;
 }
}

/* Variables */
:root {
 --background-purple: #eeeeee;
 --subtle-white: #f9f9f9;
 --subtle-grey: #f2f2f2;
 --masked-grey: #333;
 --blue: #f03861;
 --open-sans: "Open Sans", sans-serif;
}

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

/* Page container */
.container {
 margin-top: 8px;
}

/* Tutorial section */
.tutorial {
}

.tutorial ul {
 font-size: 0;
 list-style-type: none;
}

.tutorial ul li {
 /* font-family: var(--open-sans); */
 font-size: 1.4rem;
 font-weight: 400;
 color: var(--masked-grey);
 display: inline-block;
 padding: 10px 20px;
 position: relative;
}

@media (max-width: 1160.98px) {
 .tutorial ul li {
  font-size: 1.9vw;
  padding: 10px 10px;
 }
}

@media (max-width: 971px) {
 .tutorial ul li {
  font-size: 1.4rem;
  padding: 10px 10px;
 }
}

/* Secondary ul */
.tutorial ul li ul {
 /* display: none; */
 position: absolute;
 top: 100%;
 left: 0;
width: max-content;
 /* margin-top: 15px; */
 opacity: 0;
 transform: scale(0.8) translateY(-30px); /* Початкова позиція зменшена */
 transition: opacity 0.8s ease, transform 0.8s ease; /* Плавність зміни прозорості та позиції */
 pointer-events: none; /* Заборона взаємодії з елементами меню, поки воно невидиме */
}

.tutorial ul li:hover {
 cursor: pointer;
 background-color: var(--subtle-grey);
}

.tutorial ul li:hover ul {
 display: block;
 box-shadow: 0 5px 15px #2a2a2aba;
 opacity: 1; /* Повна видимість при наведенні */
 transform: scale(1); /* Елемент збільшується на своє місце */
 pointer-events: auto; /* Дозволити взаємодію з елементами меню, коли воно видиме */
 z-index: 1;
}

.tutorial ul li a {
 display: block; /* Робить <a> блоковим елементом */
 width: 100%; /* Займає всю ширину батьківського <li> */
 height: 100%; /* Займає всю висоту батьківського <li> */
 box-sizing: border-box; /* Зберігає коректний підрахунок розмірів */
}

.tutorial ul li ul li {
 display: block;
 background-color: #e5e5e5; /* Adjusted darken value */
 z-index: 10;
 padding: 10px 12px;
}

.tutorial ul li ul li span {
 float: right;
 color: var(--subtle-white);
 background-color: var(--blue);
 padding: 2px 5px;
 text-align: center;
 font-size: 0.8rem;
 border-radius: 3px;
}

.tutorial ul li ul li:hover {
 background-color: #d1d1d1; /* Adjusted darken value */
}

.tutorial ul li ul li:hover span {
 background-color: #d02b56; /* Adjusted darken value */
}

.tutorial button {
 width: 11px;
 color: #000;
 padding: 0px;
 margin: 35px 0px;
}

.tutorial button:hover {
 background-color: #fff0;
}

/* Mobile Menu Styles */
.menu {
 /* display: flex; */
}

a {
 text-decoration: none; /* Видаляє підкреслення */
 color: inherit; /* Наслідує колір тексту батьківського елемента */
 background: none; /* Видаляє фон */
 border: none; /* Видаляє рамку */
}

.hamburger {
 display: none;
 position: absolute;
 top: 20px; /* Adjust as needed to align with your design */
 right: 20px; /* Adjust as needed to align with your design */
 font-size: 1.5rem;
 background: none;
 border: none;
 cursor: pointer;
}

@media (max-width: 971px) {
 .hamburger {
  display: block;
 }

 .header__container {
  flex-direction: column;
  position: relative; /* Ensures that the hamburger icon is positioned relative to the container */
  align-content: center;
 }

 .logo {
  margin-left: 25px;
 }

 .menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  background-color: var(--subtle-white);
 }

 .menu.active {
  display: flex;
 }

 .menu li {
  padding: 15px;
  text-align: center;
 }

 .menu li ul {
  position: static;
 }
}

@media (max-width: 474.98px) {
 .logo {
  margin-left: -14px;
 }
}

//menu glow

.glows {
 display: flex;
 justify-content: space-around;
 align-items: center;
 flex-wrap: wrap;
 width: 100%;
 min-height: 100vh;
 background: #0e1538;
}

.glows .glowbutton a {
 position: relative;
 padding: 15px 53px;
 display: flex;
 justify-content: center;
 align-items: center;
 background: rgba(0, 0, 0, 0.5);
 margin-bottom: 20px;
 margin-top: 12px;
 transition: 1s;
 overflow: hidden;
 text-decoration: none;
 border-radius: 5px;
}

.glows .glowbutton a:hover {
 background: var(--clr);
 box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr), 0 0 60px var(--clr),
  0 0 100px var(--clr);
}

.glows .glowbutton a::before {
 content: "";
 position: absolute;
 width: 40px;
 height: 400%;
 background: var(--clr);
 transition: 1s;
 animation: animate 10s linear infinite;
 animation-delay: calc(0.33s * var(--i));
}

.glows .glowbutton a:hover::before {
 width: 120%;
}

@keyframes animate {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}

.glows .glowbutton a::after {
 content: "";
 position: absolute;
 background: #202020;
 inset: 4px;
 border-radius: 5px;
 transition: 1s;
}

.glows .glowbutton a:hover::after {
 background: var(--clr);
}

.glows .glowbutton a span {
 position: relative;
 z-index: 1;
 font-size: 1em;
 color: #fff;
 opacity: 0.8;
 font-style: italic;
 letter-spacing: 2px;
 transition: 0.5s;
}

.glows .glowbutton a:hover span {
 opacity: 1;
 color: #0e1538;
}