@font-face {
    font-family: 'Actay';
    src: url('/fonts/Actay-Regular.woff') format('woff'),
         url('/fonts/Actay-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Actay Wide';
    src: url('/fonts/ActayWide-Bold.woff') format('woff'),
         url('/fonts/ActayWide-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Starts 20px below its final position */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Ends at its final position */
    }
}
body {
    font-family: 'Unbounded', sans-serif;
    margin: 0;
    color: white;
    background-color: #0a0d0e;
} 
.fade-in-element {
    animation-name: fade-up; /* The name of the keyframe animation */
    animation-duration: 1s; /* How long the animation takes */
    animation-timing-function: ease-out; /* The speed curve of the animation */
    animation-fill-mode: both; /* Keeps the element in its final state after the animation */
    /* You might want to add a small delay to each element for a staggered effect */
    /* animation-delay: 0.2s; */
}
.textbut {
    /* Основні стилі для кнопки */
    display: inline-block; /* Щоб можна було застосовувати відступи (padding) та ширину */
    padding: 15px 30px; /* Внутрішні відступи: 15px зверху/знизу, 30px ліворуч/праворуч */
    background-color: #FFA500; /* Помаранчевий колір фону (можете підібрати точніший відтінок) */
    color: #FFFFFF; /* Білий колір тексту */
    text-decoration: none; /* Прибрати підкреслення з посилання */
    font-family: Arial, sans-serif; /* Шрифт, схожий на зображення */
    font-size: 18px; /* Розмір шрифту */
    font-weight: bold; /* Жирний шрифт */
    border-radius: 5px; /* Невелике заокруглення кутів */
    cursor: pointer; /* Зробити курсор покажчиком при наведенні */


}
.textbut:hover {
    background-color: #E69500; /* Трохи темніший помаранчевий при наведенні */
}
/* Example of staggered delays */
.textbaner.fade-in-element {
    animation-delay: 0.2s;
}

.subtitle.fade-in-element {
    animation-delay: 0.4s;
}
 .minymovy{
    text-align:left;
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #B3BDBE;
  }
  .sdfgfsfd{
    margin-bottom: 5px;
text-align:left;
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 112.5%;
color: #EEFCFD;

  }
  .gridsthree{
    
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
  }
  .gridsthrees{
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 25px;
    justify-content: center;
    margin-top: 20px;
  }
   .gridsthree div{
    width:440px;
    
   }
  .gridsthree div h2{
    text-align:left;
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;
  }
   .gridsthree div p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
margin:0px;
padding:0px;
color: #B3BDBE;

   }
   .gridsthree div p strong{
    color:white;
   }
   
p.textsubtitle.fade-in-element:nth-of-type(1) {
    animation-delay: 0.6s;
}

p.textsubtitle.fade-in-element:nth-of-type(2) {
    animation-delay: 0.8s;
}

p.textsubtitle.fade-in-element:nth-of-type(3) {
    animation-delay: 1s;
}

#butnssblock.fade-in-element {
    animation-delay: 1.2s;
}
#butnssblock{
  padding-top:25px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
#mobilemenu{
  display:none;
}
#mobilemenuclose{
  display:none;
}

header {
    background-color: #222;
    padding: 20px;
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
   
}
.actay{
    font-family: 'Actay';
    font-size: 16px;
    font-weight: 400;
    color:#B3BDBE;
}
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    cursor: pointer;
}
nav a:hover {
color:#56f1fd;

}
nav img {
    height: 30px;
}

.backgrounddva{
    max-width: 1440px;
    margin-left:auto;
    margin-right: auto;
}
.sectionbanner{
    width:73%;
    margin-left:auto;
    margin-right: auto;
}
.stats {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 83px;
    left: 13%;
    right: 15%;
}
.stats p {
    border: 1px solid #292b2c;
    background-color: #16191ab5;
    backdrop-filter: blur(5px);
    color: #B3BDBE;
    width: max-content;
    padding: 10px 15px 8px; 
    margin-top: 28px; 
}
.hero{
       background-image: url(/images/firstback.png);
    background-repeat: no-repeat;
    background-size: cover;
}
    p span{
    color:#56f1fd;
    }
    .firstplach{
   
    }
    .twoplach{
        align-self: flex-end; 
    }
    .threeplach{
    }
    .fourplach{
        align-self: flex-end;
    }
    .sec h2{
      font-family: 'Unbounded';
      font-style: normal;
      font-weight: 700;
      font-size: 48px;
      line-height: 112.5%;
      text-align: center;
      color: #EEFCFD;
      
      }
.textbaner{ display: flex;
    justify-content: center; 
    align-items: center; 

}
.subtitle{
    font-size: 26px;
    line-height: 125%;
    font-weight: 400;
   
}
.uppnull{
  margin-left:auto;
  margin-right: auto;
}
.textsubtitle{
    color:#B3BDBE;
    width:480px;
    max-width:480px;
    font-family:'Actay';
    margin-left:auto;
    margin-right: auto;
  font-size:16px;
}
.textsubtitles{
  font-weight:600;
  font-size:16px;
    color:#B3BDBE;

    font-family:'Actay';
    margin-top:0px;

}
.your-dark-zagpad p { 
   overflow-wrap: break-word;
}
.zagpad{

  text-align:center;
}
.nonbotm{
  margin-bottom: 0px;
}
.textbaner h1 {
    position: static; 
    font-weight: 700;
    font-size: 79px;
    text-align: center;
}
.plachka {
    width: 515px;
    margin-left: auto;
    margin-right: auto;
    padding-left:30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #292b2c;
background-color: #16191a;
color: #B3BDBE;
transform: skewX(-2deg);

}
.plachka p{
    max-width: 515px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left:30px;
    padding-right: 30px;
}
.contentst{
  width:690px;
  margin-left:auto;
  margin-right: auto;
}
.content{
    margin-left:30px;
    margin-right: 30px;
}
.minicontent{
    max-width:690px;
    margin-left:auto;
    margin-right: auto;
}
h1, h2, h3{
    text-align: center;
}
h5{
    font-family:'Actay';
    font-weight: 400;
    font-size: 20px;
    margin-top:15px;
    margin-bottom: 15px;
    color:#B3BDBE;
}
body > div.sec.sectionthree > div > div > div > h4 > strong{
    font-size:20px;
    color:#B3BDBE;
    
    line-height: 125%;
}
body > div.sec.sectionthree > div > div > div > h4 > strong > span{
  font-size:24px;
     line-height: 125%;
     color:white;
     font-family: 'Unbounded';
}

.sectionthree{
    padding-top:60px;
}
.upplashka{
  
width:615px;
padding:45px;
}
.upplashka p{
    font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
padding-top: 30px;
margin:0px;
}

.backgr{
    height: 540px;
    background-image: url('/images/back.png'); 
    background-repeat: no-repeat;
    background-size: cover;
}
.sectionfour{
    padding-bottom: 60px;
}
.sectionfour div h2{
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 112.5%;
text-align: center;

}

.gr{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    padding: 20px;
   
  }
  .firstgrs h2{
   font-family: 'Unbounded';
font-weight: 700;
font-size: 48px;
line-height: 112.99999999999999%;


  }
  .firstgrs p{
    font-family: "Actay";
font-weight: 400;
font-size: 16px;
line-height: 150%;
letter-spacing: 0%;
color: #B3BDBE;
  }
  hr{
    height: 0.5px;
    color:#292B2C;
  }
  .btnshowall{
    padding-top:45px;
    cursor: pointer;
    color:#ff9000;
    font-family: 'Actay Wide';
 
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 100%;

  }
  .mens{
    max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
  }
  .right-section h3{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 125%;
color: #EEFCFD;
text-align: left;
padding: 0px;
    margin: 0px;
  }
  .zagolovok{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 100%;
color: #56F1FD;
  }
.ct{
    height: fit-content;
}
  .ct h4{
    margin-bottom: 0px;
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
text-align: center;
color: #56F1FD;
  }
  .btntarif svg{
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 45px;
    width:100%;
    cursor: pointer;
  }
  .five h4{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;
  }
  .five p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #B3BDBE;
margin-top: 0;
    margin-bottom: 0px;
  }
  .subprice{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 150%;
text-align: center;
color: #777E7F;
margin-top:0px;
  }
  .price{
    margin-top: 25px;
    margin-bottom: 0px;
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 125%;
text-align: center;
color: #EEFCFD;

  }
  .subt{
    margin-top:5px;
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-align: center;
color: #B3BDBE;

  }
  .lishki{
    margin-left:45px;
    margin-right:45px;
  }
 .lish{
    display:flex;
    margin-top:0px;
 
    margin-bottom: 5px;
 }
 .lishtext{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #B3BDBE;

 }
  .lish a{
    padding-left: 10px;
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;

color: #B3BDBE;

  }

  .readmores.hidden {
    display: none;
  }
  .readmore.hidden {
    display: none;
  }
  .right-section h5{

font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;

color: #B3BDBE;

  }
  .right-section h4{
text-align: left;
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;
padding: 0px;
    margin: 0px;
  }
  .left-section {
   position: relative;
    padding: 20px;
  }
  .nopp{
    position: sticky;
    top: 50px;
  }
  .nopp p{
    margin-top:0px;
    margin-bottom: 0px;
  }
  .nopp h5{
    margin-bottom: 0px !important;
  }
  .showcomment{
    font-family: 'Actay Wide' !important;
    color: #ff9000 !important;
    font-size: 16px !important;
    cursor: pointer;
   
  }
  .nopp h2{
font-family: 'Unbounded';
    font-weight: 700;
    font-size: 48px;
    line-height: 112.99999999999999%;

  }
  .right-section {
    padding: 20px;
  }
  #textBlocks{
    height: 1200px;
    overflow: hidden;
  }
  .plachkas{
    border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
  }
  .contents{
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
  }
  .five{
    max-width: 525px;
  }
  .sectionfive div div img{
    width:525px;
  }


.plachkas h2{
    color:#EEFCFD;

}
.plachkas p{
    color:#B3BDBE;

}
.plachkas h5{
    
    color:#56f1fd;

}
.plachkas{
    padding-left:45px;
    padding-right: 45px;
}
.sectionsix{
    background-image: url('/images/backdvanul.svg');
    background-repeat: no-repeat;
    background-size: cover;
}
.conteiner{
    width:990px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 68px;
   
}
.plashkacer{
  padding:30px;
  background-color: #16191a;
    color: #B3BDBE;
    margin-top: 4px;
}
.rrt{
font-family: 'Actay';
font-weight: 700;
font-size: 20px;
line-height: 125%;
color:white;

}
.oneplash{
  width:960px;
  margin-left:auto;
  margin-right: auto;

}
.oneplash h3{
 text-align: left; 
 color:white;
}
.plashkacer p{
font-family: 'Actay';
font-weight: 400;
font-style: italic;
font-size: 20px;
line-height: 125%;
}
.slider-controls {
  display: flex;
  align-items: center;
  
  gap: 15px; /* Відступ між елементами */
}
.work-step-title{
  font-family: 'Unbounded';
font-weight: 400;
font-size: 24px;
line-height: 125%;

}
.arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.arrow:hover {
  opacity: 1;
}

.prev-arrow svg path {
  stroke: #ff9000; /* Колір лівої стрілки */
}

.next-arrow svg path {
  stroke: #ff9000; /* Колір правої стрілки */
}

.dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #444;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.dot:hover {
  opacity: 1;
}

.dot.active {
  background-color: #ff9000; /* Колір активної крапки */
  width: 16px;
  height: 16px;
}
.rrt span{
  color: #56F1FD;
}
.grw{
   width:1019px;
   display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-left: auto;
    margin-right: auto;
}
thead{
  width:960px;
  margin-left: auto;
    margin-right: auto;
}
.rdc{
  text-align:center;
color:red;
font-weight: 900;
background-color: #292B2C;
}
.fdgdsg{
  text-align: left;
  font-family: 'Unbounded';
font-weight: 400;
font-size: 24px;
line-height: 125%;
letter-spacing: 0%;

  width:556px;
}
tbody .ffrf{
  color:#B3BDBE;
}
.ttyg{
   background-color: #16191A;  
   color:#56F1FD;
   font-family: "Actay";
font-weight: 700;
font-size: 20px;
line-height: 125%;
letter-spacing: 0%;
width:200px;
text-align: center;

}
.ffrf{
  width:200px;
  background-color: #16191A;  
  color:#B3BDBE;
}
.rdg{
  text-align:center;
  color: green;
  font-weight: 900;
  background-color: #292B2C;
  
}
.rdg img{
clip: initial;
}
.contents table{
  margin-left:auto;
  margin-right: auto;
}
.plashkac{
    border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    margin-top:4px;
}
.ttz{
  padding:45px;
  max-width:480px;
  margin-left:auto;
  margin-right: auto;
  padding-bottom:0px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #36373a;
}
.rrrr{
    height:182px;
}
.firstgrs{
  width:690px;
}
.gride{
    width:690px;
    display:grid;
    grid-template-columns: 1fr; 
    gap: 2px;
    padding: 0px;
}
.lt{
    margin-right: 2px;
}
.plashkacs{
    border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    width:988px;
}
.plashkacs h2{
  text-align: left !important;
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 112.5%;
  color: #EEFCFD;
  margin:0px;
}
.plpad p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #B3BDBE;
margin:0px;
}
.plpad{
  padding:45px;
}
.plpads{
  padding:25px;
}
.footermunus a{
  font-family: 'Actay';
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #B3BDBE;

}
.footermunus a:hover{
  color: #56F1FD;
}
.plpads  h5{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;

color: #EEFCFD;

}
.plpads p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #B3BDBE;
}
.plashkacq{
    border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    margin-top:4px;
    
}
.gride .plashkac{
width:491px;
border: 1px solid #292b2c;
background-color: #16191a;
color: #B3BDBE;
}

.plashkac h4{
    
}
.sectionseven h2{
    padding-top:60px;
}
.gr{
    display:grid;
}
.gridthree{
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 10px;
    grid-template-rows: repeat(auto-fill, auto);
}
.gridfour{
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 10px;
    padding-bottom: 30px;
}
.plash{
  border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    padding:30px;
}
 #commentBlocks123 {
    white-space: normal;
}
.comname{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;
margin-top:0px;
margin-bottom: 5px;
}
.comprof{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #EEFCFD;
margin-top:0px;
margin-bottom: 5px;
}
.datetime{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #777E7F;
margin-top:0px;
margin-bottom: 5px;
}
.coments{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #B3BDBE;
margin-bottom: 5px;
margin-top:0px;
}
 #commentBlocks321 {
    white-space: normal;
   
}
#commentBlocks1{
  white-space: normal;
}
#commentBlocks2{
  white-space: normal;
}
#commentBlocks3{
  white-space: normal;
}
#commentBlocks4{
  white-space: normal;
}
.rt h4{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;
}
.plashkacq.rt {
  display: flex;
  align-items: center; /* Вирівнювання по вертикалі */
  justify-content: center; /* Вирівнювання по горизонталі (якщо потрібно) */
  /* Додаткові стилі, якщо потрібно */
}
.readmore{
    font-family: 'Actay Wide' !important;
    color:#ff9000 !important;
    font-size: 16px !important;
    cursor: pointer;
    margin-top:15px !important;
    margin-bottom: 15px !important;
  }
  .readmores{
    font-family: 'Actay Wide' !important;
    color:#ff9000 !important;
    font-size: 16px !important;
    cursor: pointer;
    margin-top:15px !important;
    margin-bottom: 15px !important;
  }
  .plus{
    width:40px;
    height:40px;
    background-image: url('/images/plus.svg');
    background-size: contain; 
  transition: transform 0.3s ease;
  }
  .plus:hover {
    transform: rotate(90deg); 
  }
  .minus{
    width:40px;
    height:40px;
    background-image: url('/images/minus.svg');
  }
  .leftsize {
    padding-top:60px;
  }
  .leftsize h1{
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 72px;
line-height: 100%;
color: #EEFCFD;
text-align: left;
  }
  .leftsize h5{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #B3BDBE;
  }
  .rightsize div {
    border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    margin-bottom: 10px;
    display: grid; /* Используем Grid Layout */
    grid-template-columns: 1fr auto; /* Два столбца: один для h5, другой для p.plus */
    grid-template-rows: auto 1fr; /* Два ряда: один для h5 и p.plus, другой для questtext */
    align-items: center; /* Выравнивание элементов по вертикали */
  }
  a{
    text-decoration: none;
  }
  .rightsize div h5 {
    grid-column: 1 / 2; /* h5 в первом столбце */
    grid-row: 1 / 2; /* h5 в первом ряду */
    text-align: left;
    margin-left: 30px;
    font-family: 'Actay';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 125%;
    color: #B3BDBE;
  }
  
  .rightsize div p.plus {
    grid-column: 2 / 3; /* p.plus во втором столбце */
    grid-row: 1 / 2; /* p.plus в первом ряду */
    margin-right: 30px;
    cursor: pointer;
  }
  
  .rightsize {
    padding-top: 60px;
  }
  
  .sleep {
    display: none;
  }
  
  .questtext {
    grid-column: 1 / 3; 
    grid-row: 2 / 3; 
    font-family: 'Actay';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #B3BDBE;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 15px;
  }

  #form {

padding: 45px 60px;
gap: 30px;

background: #16191A;
border: 1px solid #292B2C;
backdrop-filter: blur(15px);

}

.form-group {
    margin-bottom: 20px;
}


input[type="text"],
input[type="tel"] {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #303030;
    border-radius: 4px;
    background-color: #282828;
    color: #E0E0E0;
}

.phone-input {
    display: flex;
    align-items: center;
}

.country-code {display: flex;

    background-color: #282828;
    color: #E0E0E0;
    padding: 8px;
    border-right: none;
}
.footer{
  background-color: #2e2e2e;
}
input[type="tel"] {
    border-radius: 0 4px 4px 0;
    border-left: none;
    flex-grow: 1;
}

.submit-button {
    background-color: #7fffd400;
    border: none;
}
.contacts{
  
position:absolute;
width:100%;
gap: 20px;
margin-top: 193px;
background: rgba(22, 25, 26, 0.5);

}
.contactss{

  z-index: 8;
}
.contactss p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #777E7F;
margin:0px;
}
.contactss h4{
  margin-top:0px;
  margin-bottom: 20px;
}
.contactss h4 a{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #EEFCFD;

}
.politics{

font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 100%;
text-align: center;

color: #B3BDBE;
padding-left:15px;
}
.downmenu{
  width:100%;
}
.gridfooter{
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; 
    padding: 20px;
}
.footerend{
  padding-top:15px;
}
.plachkaqq{
  border: 1px solid #292b2c;
    background-color: #16191a;
    color: #B3BDBE;
    padding-top: 15px;
    padding-bottom: 10px;
}
.menufooter a{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #B3BDBE;
}
.country-code svg{
  padding-top:3px;
}
.imgcom img{
  width:100%;
}
.five h4{
  margin:30px;
}
.five p{
  margin:30px;
}
.politics:hover{
color:#56f1fd;
}
.submit-button{
  cursor: pointer;
}
.textbut{
font-family: 'Actay Wide';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 100%;
text-align: center;
color: #EEFCFD;

}
.yebut {
  position: relative; /* Робимо контейнер відносним */
  margin-left: auto;
  text-align: center;
  margin-right: auto;
  align-items: center;
  width: 142px;
  align-items: center; /* Центруємо по вертикалі */
  justify-content: center; /* Центруємо по горизонталі */
  cursor: pointer;
  padding-top:25px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.advantages-list {
    list-style: none; /* Приховуємо стандартні маркери списку (кола або диски) */
    padding: 0;      /* Обнуляємо внутрішній відступ списку */
    margin: 0;       /* Обнуляємо зовнішній відступ списку */
   margin-left:auto;
   margin-right: auto;
   width: 250px;
}
@keyframes pulse-animation {
    0% {
        transform: scale(1); /* Початковий розмір */
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); /* Початкова тінь, прозора */
    }
    70% {
        transform: scale(1.05); /* Збільшення на 5% */
        box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); /* Тінь розширюється і стає прозорою */
    }
    100% {
        transform: scale(1); /* Повернення до початкового розміру */
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); /* Тінь зникає */
    }
}
.advantages-list li {
    position: relative; /* Необхідно для позиціонування псевдоелемента */
    padding-left: 30px; /* Збільшуємо лівий відступ, щоб звільнити місце для іконки */
    margin-bottom: 10px; /* Відступ між пунктами списку */
    line-height: 1.5; /* Висота рядка для кращої читабельності */
    color: #333; /* Колір тексту (можна змінити) */
    font-family: Arial, sans-serif; /* Шрифт, схожий на зображення */
    font-size: 16px; /* Розмір шрифту */
    text-align: left;
    color:white;
}

.advantages-list li::before {
    content: '✔'; /* Символ галочки. Можна замінити на інший Unicode символ або порожній рядок, якщо використовуєте SVG/зображення. */
    display: inline-block;
    width: 20px; /* Ширина іконки (може знадобитися коригування) */
    height: 20px; /* Висота іконки (може знадобитися коригування) */
    background-color: #7CCD7C; /* Зелений колір фону квадрата (приблизний колір з вашого зображення) */
    color: #FFFFFF; /* Колір галочки */
    border-radius: 4px; /* Невелике заокруглення кутів квадрата */
    text-align: center; /* Центрування галочки всередині квадрата */
    line-height: 20px; /* Вирівнювання галочки по вертикалі */
    position: absolute; /* Позиціонування відносно li */
    left: 0; /* Притискаємо до лівого краю */
    top: 50%; /* Центруємо по вертикалі */
    transform: translateY(-50%); /* Точне вертикальне центрування */
    font-weight: bold; /* Жирний шрифт для галочки */
    font-size: 14px; /* Розмір галочки */
}
.textbut {
 
  color: white; /* Колір тексту (можна змінити) */
  z-index: 1; /* Забезпечуємо, що текст знаходиться поверх SVG */
  margin: 0; /* Видаляємо стандартні відступи параграфа */
  width:220px;
   animation: pulse-animation 2s infinite;
}
.button-wrappers {
    /* Стилі позиціонування та розміщення кнопки */
    /* ЦІ СТИЛІ БУДУТЬ ПЕРЕНЕСЕНІ З ELEMENT.STYLE АБО ІНШИХ МІСЦЬ */
    position: absolute; /* Використовуйте тільки, якщо це необхідно для вашого макету */
    top: 50%; /* Це центрування, яке було у вас */
    left: 50%; /* Це центрування, яке було у вас */
    transform: translate(-50%, -50%); /* Це центрування, яке було у вас */
    width: 291px; /* Ширина, яку я бачу на скріншоті в DevTools (291.98 x 64.65) */
    height: 64px; /* Висота */
    /* Переконайтеся, що pointer-events тут НЕ "none" */
    pointer-events: auto; /* Дозволяє кліки на обгортці, якщо потрібно */
    z-index: 1; /* Забезпечення видимості, якщо потрібно */
}
.yebut svg {
  display: block; /* Забезпечуємо, що SVG займає всю доступну площу */
}
  .conteinerqqw{
width:1440px;
margin-left:auto;
margin-right: auto;
   }
body > div.sec.sectionsix > div.conteinerqqw > div > div:nth-child(2) > div.plashkac > div > h5{
    color:#56F1FD;
   }
   .sectionnine{
    padding-top:60px;
   }
    th{
      border:1px solid #0a0d0e;
     
    }
    td{
     border:1px solid #0a0d0e;
      
    }
    tr{
     border:1px solid #0a0d0e;
    }

   .work-step-content{
width:480px;
height:119px;
padding-left:30px;
background-color: #292B2C;
   }
   .work-step-number{
    position: absolute;
margin-top: -69px;
    margin-left: 58px;
font-family: 'Unbounded';
font-weight: 700;
font-size: 72px;
line-height: 100%;
letter-spacing: 0%;

   }
   .work-step-number span{
    color:#56F1FD;
font-weight: 700;
font-size: 128px;
line-height: 100%;
letter-spacing: 0%;

   }
.work-step-subtitle{
  font-family: 'Actay';
font-weight: 400;
font-size: 16px;
line-height: 150%;
padding-top: 66px;

}
 .how-we-work-block {
    padding: 60px 20px; /* Внутрішні відступи зверху та знизу */
    
    font-family: sans-serif; /* Приклад шрифту */
   
}

.how-we-work-block .container {
    max-width: 1200px; /* Максимальна ширина контенту */
    margin: 0 auto; /* Центрування контейнера */
    padding: 0 15px; /* Внутрішні відступи по боках */
}

.block-title {
    text-align: center; /* Центрування заголовка */
    margin-bottom: 50px; /* Відступ знизу */
  
    font-size: 2.5em; /* Розмір заголовка */
}
.block-titlere{
  text-align:left;
  font-family: 'Actay';
font-weight: 700;
font-size: 20px;
line-height: 125%;
letter-spacing: 0%;

}

.workflow-container {
    display: flex; /* Використовуємо Flexbox для горизонтального розташування */
    justify-content: space-between; /* Розподіл простору між елементами */
    flex-wrap: wrap; /* Дозволяє елементам переноситись на новий рядок на вузьких екранах */
    gap: 30px; /* Простір між елетапами */
    position: relative; /* Потрібно для позиціонування псевдоелементів (стрілок) */
    padding-bottom: 40px; /* Відступ для стрілок знизу, якщо вони там будуть */
}

.workflow-step {
    flex: 1; /* Кожен елемент займає рівний простір */
    min-width: 200px; /* Мінімальна ширина елемента, щоб він не був надто вузьким до переносу */
    background-color: #16191a; /* Білий фон етапу */
    border: 1px solid #ddd; /* Тонка світла рамка */
    border-radius: 8px; /* Закруглені кути */
    padding: 30px 20px 20px; /* Внутрішні відступи */
    text-align: center; /* Центрування вмісту етапу */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Легка тінь */
    position: relative; /* Потрібно для позиціонування step-visual */
}

.step-visual {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px; /* Центрування та відступ знизу */
    background-color: #0a0d0e; /* Колір фону візуального елемента */
    color: white; /* Колір тексту/іконки */
    border-radius: 50%; /* Робимо коло */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em; /* Розмір номера */
    font-weight: bold;
    border: 3px solid #fff; /* Біла рамка поверх фону */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тінь для візуального елемента */
}

/* Optional: Add arrows or lines between steps using pseudo-elements */
.workflow-step:not(:last-child)::after {
    content: '→'; /* Символ стрілки */
    position: absolute;
    top: 50%; /* Вирівнювання по вертикалі */
    right: -25px; /* Розташування між елементами (коригуйте залежно від gap) */
    transform: translateY(-50%);
    font-size: 2em;
    color:  #56F1FD; /* Колір стрілки */
    font-weight: bold;
    z-index: 1; /* Щоб стрілка була поверх інших елементів */
}

/* Прибираємо стрілку після останнього елемента на великих екранах */
.workflow-step:last-child::after {
    content: none;
}


.step-title {
    margin-top: 0; /* Прибираємо стандартний верхній відступ */
    margin-bottom: 10px;
    color: #ffffff; /* Колір заголовка етапу */
    font-size: 1.3em;
}

.step-description {
    font-size: 1em;
    color: #555;
    line-height: 1.6; /* Міжрядковий інтервал */
}

.workflow-explanation {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 40px; /* Відступ зверху */
    font-size: 1em;
}

/* Медіа-запит для адаптивності (наприклад, для мобільних пристроїв) */
@media (max-width: 768px) {
    .workflow-container {
        flex-direction: column; /* Елементи стають вертикально */
        align-items: center; /* Центрування елементів по горизонталі */
        gap: 40px; /* Більший простір між вертикальними елементами */
        padding-bottom: 0; /* Прибираємо нижній відступ, якщо стрілки будуть між елементами */
    }

     .workflow-step {
        width: 90%; /* Ширина елемента на мобільних */
        min-width: auto; /* Скидаємо мінімальну ширину */
        padding: 25px 15px; /* Коригуємо відступи */
     }

    /* Змінюємо стрілку на вертикальну та позиціонуємо між елементами */
    .workflow-step:not(:last-child)::after {
        content: '↓'; /* Символ стрілки вниз */
        top: auto; /* Скидаємо верхню позицію */
        bottom: -30px; /* Розташовуємо знизу між елементами */
        left: 50%; /* Центруємо по горизонталі */
        right: auto; /* Скидаємо праву позицію */
        transform: translateX(-50%); /* Центруємо */
    }
     /* На мобільних остання стрілка також має бути прихована */
    .workflow-step:last-child::after {
       content: none;
    }

    .block-title {
        font-size: 2em; /* Зменшуємо розмір заголовка */
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 1919px) {
  .contents{
    max-width: 1180px;
  }
  .conteinerqqw{
    max-width: 1180px;
  }
  .plashkacs{
    width: 992px;
  }
  .gride{
    width: 492px;
  }
  .firstgrs{
    width:557px;
  }
  .rrrr{
    height: 448px;
  }
  .grid-container{
    gap: 30px;
  }
 
  .conteiner{
width:1000px;
margin-left:auto;
margin-right: auto;
  }
  .textbaner h1{

font-weight: 700;
font-size: 96px;
line-height: 100%;
  }
}
.com{
  
  height: 96px;
  overflow: hidden;

}
@media screen and (max-width: 1619px) and (min-width: 1239px) {
  .gridsthree{
    
    grid-template-columns: 1fr 1fr;
 
  }
  .gridsthree div{
width:365px;
  }
  .stats {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 83px;
    left: 7%;
    right: 7%;
}

.stats p {
  border: 1px solid #292b2c;
  background-color: #16191ab5;
  backdrop-filter: blur(5px);
  color: #B3BDBE;
  width: max-content;
  padding: 10px 15px 8px;
  margin-top: 38px;
}
}
  @media screen and (max-width: 1239px) {
     .gridsthree{
    
    grid-template-columns: 1fr 1fr;
 
  }
  .gridsthree div{
width:365px;
  }
    .gr{
      grid-template-columns: 1fr;
    }
    .conteinerqqw{
  width: 760px;
    }
    .grw{
 width: 760px;
    }
    .plashkacer{
      width:319px;
    }
    .plashkacer{
      width:319px;
    }
    .oneplash{
      width:700px;
    }
    .work-step-number{
font-size:36px;
    }
    .firstgrs{
      width:100%;
    }
    .thead{
      width:100%;
    }
 .mens{
  width: 760px;
 }
 body > div.sec.sectionsix > div.conteiner > div:nth-child(4) > div.plashkac.rt{
  width: 100%;
 }
 .five{
  text-align:center;
 }

.five h4 {
  text-align: left;
}
.five p {
  text-align: left;
}
.conteiner{
width:760px;
}
.plashkacs{
  width:760px;
}
 .work-step-block img{
 width:760px;
  } 
.gride .plashkac{
width:100%;
}
.gride{
  width:760px;
}
body > div.sec.sectionsix > div.conteiner > div:nth-child(4){
  display:block;
}
body > div.sec.sectionsix > div.conteiner > div:nth-child(4) > div.plashkac.lt{
  width:100%;
}

.lishki {
  margin-left: 30px;
  margin-right: 30px;
}
.contents{
width: 760px;
}
.gridfour{
  grid-template-columns: 1fr 1fr;
}
    .sectionfive div div img {
      width: 365px;
  }
  .grid-container{
    gap:30px;
  }
    .textbaner h1 {
        font-weight: 600;
        font-size: 59px;
    }
    .textsubtitle{
        text-align:center;
    }
    .stats{
width:760px;

    }
    .subtitle{
font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
font-size: 23px;
line-height: 115%;
text-align: center;
color: #EEFCFD;

    }
    .grid-container {
      gap: 10px;
  }
  .left-section{
    padding:0px;
  }
  .plachkas {
    padding-left:9px;
    padding-right: 9px;
    padding-bottom: 45px;
  }
  .five{
    width:365px;
  }
  body > div.sec.sectioneight > div > div:nth-child(2){
    display:none;
  }
  body > div.sec.sectioneight > div > div:nth-child(4) > div:nth-child(3){
    display:none;
  }
  body > div.sec.sectioneight > div > div:nth-child(4) > div:nth-child(4){
    display:none;
  }
    }
#modalmenu{
  position: absolute;
  top:45px;
  width: 100%;
 z-index:999;
  border: 1px solid #292b2c; 
  background-color: #16191a; 
  color: #B3BDBE;
}
#modalmenu p{    
  padding-left: 10%;
}
#modalmenu p a{    
  text-decoration: none;
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #B3BDBE;
}
    @media screen and (max-width: 819px) {
         .gridsthree{
    
    grid-template-columns: 1fr;
 
  }
  .gridsthree div{
width:330px;
  }
      .mens{
        width:330px;
      }
      .backgrounddva{
        max-width: 330px;
      }
      #mobilemenu{
        display:block;
      }
          .rrrr {
        height: 28px;
    }
    .mobn{
      width:100% !important;
      max-width: 100% !important;
    }
    th{
      border:none;
      font-size: 14px;
    }
    td{
      border:none;
      font-size: 13px;
    }
    tr{
      border:none;
    }
      .stats {
      width:330px;
      padding-top:5px;
      }
      .contents{
        width:330px;
        }
        .sec h2{
          font-size: 28px;
        }
        .plachka{
          width:300px;
          transform: skewX(0deg);
        }
        .textsubtitles{
    width: 290px !important; 
    max-width: 290px !important;
        }
        .conteiner {
          width:300px;
        }
        .plashkacs{
          width:300px;
        }
         .work-step-block img{
width:330px;
  }
        .gride .plashkac{
          width:300px;
        }
        .textbaner h1{
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 42px;
line-height: 100%;


        }
        header{
          padding:0px;
max-width: 100%;
        }
        .five{
          width:330px;
          margin-left: auto;
        margin-right: auto;
        }
        .sectionfive div div img {
          width: 330px;
      }
        .gridthree{
          display:block;
          width:330px;

        }
        .gride{
          display:block;
          width:300px;
        }
        .textsubtitle{
          width:100%;
          max-width:100%;
        }
        .plachka{
          padding-left:15px;
          padding-right: 15px;
        }
        .grid-container{
          display:block;
          padding:0px;
        }
        .sectionfour div h2{
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 112.5%;

        }
        .plachkas p{
font-family: 'Actay';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #B3BDBE;
        }
        
    body > div.hero > header > nav > a:nth-child(2){
      display:none;
    }
    body > div.hero > header > nav > a:nth-child(3){
      display:none;
    }
    body > div.hero > header > nav > a:nth-child(4){
      display:none;
    }

    body > div.sec.sectioneight > div > div:nth-child(4) > div:nth-child(2){
      display:none;
    }
    body > div.sec.sectioneight > div > div:nth-child(1) > div:nth-child(3){
      display:none;
    }
    body > div.sec.sectioneight > div > div:nth-child(1) > div:nth-child(4){
      display:none;
    }
    .gridfour {
      grid-template-columns: 1fr;
  }
  .leftsize h1 {
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 112.5%;
color: #EEFCFD;

  }
  .textbaner h1{
    margin-top:180px;
font-family: 'Unbounded';
font-style: normal;
font-weight: 700;
font-size: 42px;
line-height: 100%;

  }
  .contents{
    max-width:330px;
  }
  .gridfooter{
    display:block;
    width:330px;
  }
  .contacts{
    display:none;
  }
  body > div.footerend > div > div.downmenu.plachkaqq > nav > a:nth-child(2){
    display:none;
  }
  body > div.footerend > div > div.downmenu.plachkaqq > nav > a:nth-child(3){
    display:none;
  }
  body > div.footerend > div > div.downmenu.plachkaqq > nav > a:nth-child(4){
    display:none;
  }
  .rt h4{
    font-size: 22px;
  }
  .stats p{
font-style: normal;
font-weight: 400;
font-size: 8px;
line-height: 125%;
margin-top: 10px;
  }
 
  .stats{
    left: 9%;
    right: 15%;
  }
    }
@media screen and (max-width: 419px) {
  
  .work-step-block img{
width:330px;
  }
  thead{
    width: 330px;
  }
  .fdgdsg{
    width: 100px;
    font-size: 12px;
  }
  .ffrf{
    width: 70px;
    font-size: 12px;
  }
  .ttyg{
 width: 70px;
     font-size: 13px;
  }
  .work-step-content{
    width:300px;
  }
.conteinerqqw{
          width: 330px;
      }
      .gr{
  width: 330px;
      }
      .plashkac{
         width: 330px;
      }
         .mobn{
          width: 330px;
         }
      .grw{
        grid-template-columns: 1fr !important;
         width: 330px;
      }
.oneplash{
  width:300px;
}
.work-step-number{
margin-top: -79px;
    margin-left: 2px;
}
.contentst{
         width: 300px;
      }
      .ttz {
    padding: 15px;
}
.plashkacer{
  padding: 15px;
}
}
    @media screen and (max-width: 430px)  {
      .sectionbanner{
        width:330px;
      }
      .textsubtitles {
        width: 230px !important;
        max-width: 230px !important;
      }
         .plashkac {
        width: 250px;
    }
      .contentst{
         width: 330px;
      }
      .conteinerqqw{
          width: 330px;
      }
      .gr{
  width: 330px;
      }
      
         .mobn{
          width: 330px;
         }
      .grw{
        grid-template-columns: 1fr !important;
         width: 330px;
      }
.oneplash{
  width:330px;
}
          .work-step-number {
        font-size: 24px;
    }
    .textbaner h1{
      margin-top:85px;
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-size: 42px;
  line-height: 100%;
  margin-bottom: 51px;
    }
    body > div.hero > div.content > div > p.threeplach{
      margin-top: 162px;
    }
    .stats p{
      font-style: normal;
      font-weight: 400;
      font-size: 8px;
      line-height: 125%;
      margin-top: 7px;
        }
      }