@font-face {
  font-family: 'Roboto';
  src: url('/sys/fonts/Roboto-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/sys/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

html,body{
    font-family: "Roboto",sans-serif; 
    color: #101010;
    font-size: 16px;
    background-color:#FFF; 
    font-weight: 500;
}  


#nav{
  position: fixed;
  text-align: center;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 99999;
}
#nav nav{
  width: 50%;
  height: 55px;
  margin: 40px auto auto auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #101010;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0px 0px 10px 0px rgba(110, 110, 110, 0.6);
}
#nav .logo{
  font-family: 'Poppins';
  font-size: 25px;
  display: flex;
  align-items: center;
  color: #95fc05;
}
#nav .logo span{
  display: inline-block;
  font-family: "Roboto",sans-serif; 
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  transform: rotate(90deg);
  transform-origin: center center;
  margin-left: -2px;
}

#nav ul{
  display: flex;
  grid-gap: 15px;
  font-size: 14px;
}
#nav ul li a{
  position: relative;
  color: #fff;
}
#nav ul li a:hover{color: #95fc05;}
#nav ul li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #95fc05;
  transition: width 0.5s ease;
}
#nav ul li a:hover::after{width: 100%;}

@keyframes shake {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-3px); }
  50%  { transform: translateY(3px); }
  75%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
#nav .cta-btn{
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  background-color: #95fc05;
  color: #101010;
  box-shadow: rgba(71, 71, 71, 0.5) 0px -3px 1px 0px inset, rgba(38, 69, 109, 0) 0px 4px 1px 0px, rgba(38, 69, 109, 0.01) 0px 2px 1px 0px, rgba(38, 69, 109, 0.02) 0px 1px 1px 0px, rgba(38, 69, 109, 0.03) 0px 1px 1px 0px;
  transition: all 0.3s ease;
}
#nav .cta-btn:hover{animation: shake 0.4s ease;}
#nav .cta-btn img{
  width: 16px;
  margin-right: 10px;
}
#nav .menu-btn{padding: 10px 0 10px 10px;}
#nav .menu-btn img{
  width: 20px;
}

#menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  display: none;
  z-index: 9999;
}
#menu aside{
  position: relative;
  margin-top: 110px;
  width: 95%;
  background-color: #101010;
  border-radius: 15px;
  padding: 30px;
}
#menu aside button{
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 10px 0 10px 10px;
}
#menu aside button img{width: 20px;}
#menu aside ul li{
  display: flex;
  align-items: center;
}
#menu aside ul li span{
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #95fc05;
}
#menu aside ul li a{
  position: relative;
  display: block;
  color: #fff;
  font-size: 18px;
  padding: 15px 15px 15px 10px;
}
#menu ul li a:hover{color: #95fc05;}
#menu ul li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #95fc05;
  transition: width 0.5s ease;
}
#menu ul li a:hover::after{width: 100%;}

#hero{
  width: 80%;
  margin: 120px auto auto auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 30px;
}
#hero .hero-text h1{
  font-family: "Poppins",sans-serif;
  font-size: 42px; 
  padding-bottom: 1rem;
}
#hero .hero-text p{
  font-size: 20px;
  padding-bottom: 2rem;
}
#hero .hero-image{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 340px;
  min-width: 440px;
  height: 440px;
}
#hero .hero-image img{
  width: 165px;
  border-radius: 23px;
  border:solid #101010 3px;
}
#hero .hero-image-1{
  top: 0;
  left: 0;
  margin-top: -120px;
  margin-right: 30px;
  transform: rotate(5deg);
}
#hero .hero-image-2{
  bottom: 0;
  right: 0;
  margin-bottom: -120px;
  transform: rotate(-5deg);
}
#hero .cta-btn-group{
  display: inline-flex;
  align-items: center;
  column-gap: 30px;
}
#hero .cta-btn-group a{
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  background-color: #95fc05;
  color: #101010;
  box-shadow: rgba(71, 71, 71, 0.5) 0px -3px 1px 0px inset, rgba(38, 69, 109, 0) 0px 4px 1px 0px, rgba(38, 69, 109, 0.01) 0px 2px 1px 0px, rgba(38, 69, 109, 0.02) 0px 1px 1px 0px, rgba(38, 69, 109, 0.03) 0px 1px 1px 0px;
  transition: all 0.3s ease;
}
#hero  .cta-btn-group a:hover{animation: shake 0.4s ease;}
#hero .cta-btn-group a img{
  width: 18px;
  margin-right: 5px;
}

#how-does-it-work{
  width: 80%;
  margin: 120px auto;
  text-align: center;
  scroll-margin-top:125px;
}
.section-title{
  display: block;
  font-family: "Poppins",sans-serif;
  font-size: 40px; 
  padding-bottom: 1rem;
}
.section-description{padding-bottom: 2rem;}
.section-description a{
  text-decoration: underline;
}

#how-does-it-work .items{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
#how-does-it-work .case{
  width: calc(33.333% - 13.333px);
  box-sizing: border-box;
}
#how-does-it-work .item{
  border:solid #101010 4px;
  border-radius: 15px;
  overflow: hidden;
  font-size: 25px;
  color: #fff;
  padding: 15px;
  text-align: left;
  box-shadow: rgba(110, 113, 117, 0.5) 0px 4px 20px;
}
#how-does-it-work .item h3{
  font-family: "Poppins",sans-serif;
  font-size: 24px;
  padding-top: 15px;
  color: #101010;
}
#how-does-it-work .item h3 span{
  font-size: 30px;
  color: #95fc05;
  -webkit-text-stroke: 1px black;
}
#how-does-it-work .item p{
  color: #101010;
  padding-top: 15px;
  font-size: 16px;
}

#why{
  width: 80%;
  margin: 120px auto;
  text-align: center;
  scroll-margin-top:125px;
}
#why .swiper-slide{
  width: 33%;
  height: 100%;
  object-fit: cover;
  position: relative;
  margin-bottom: 30px;
}
#why .swiper-slide .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0px;
  z-index: 10;
}
#why .swiper-slide .pause-btn {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0px;
  z-index: 10;
  display: none;
}
#why .swiper-slide .pause-btn img{width: 30px;}
#why .swiper-slide video {
  display: block;
  width: 60%;
  margin: auto;
  border-radius: 15px;
  border:solid #101010 4px;
  box-shadow: 0px 0px 10px 0px rgba(110, 110, 110, 0.6);
}
#why .swiper-button-next,.swiper-button-prev{
  color: #95fc05 !important;
}

#interesting{
  position: relative;
  width: 100%;
  margin: 120px auto;
  overflow: hidden;
}
#interesting .items{
  display: flex;
  align-items: center;
  gap:30px;
  margin:0 -10px;
}
#interesting .item{
  display: inline-flex;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background-color: #202020;
  color: #ddd;
  font-size: 13px;
  font-weight: 400;
  box-shadow: rgba(110, 113, 117, 0.5) 0px 4px 20px;
  margin-bottom: 30px;
}
#interesting .item img{
  width: 25px;
  margin-right: 10px;
}

#packages{
  position: relative;
  width: 80%;
  margin: 120px auto;
  text-align: center;
  scroll-margin-top:125px;
}
#packages .items{
  display: flex;
  gap: 45px;
  margin-bottom: 30px;
}
#packages .case{width: 100%;}
#packages .item{
  position: relative;
  width: 100%;
  border-radius: 30px;
  background-color: #f2f2f2;
  text-align: center;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0.2);
}
#packages .item .name{
  font-family: "Poppins",sans-serif;
  font-size: 24px;
  padding-top: 30px;
}
#packages .item .about{
  font-family: "Roboto",sans-serif;
  font-weight: 500;
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
}
#packages .item .price{
  width: 100%;
  padding: 10px;
  background-color: #e6e6e6;
  color: #101010;
}
#packages .item .price h4{
  font-family: "Poppins",sans-serif;
  font-size: 26px;
}
#packages .item .price p{font-size: 14px;}
#packages .item ul{
  padding-top: 10px;
}
#packages .info-hover{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
#packages .info-hover label{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 998;
  vertical-align: middle;
}
#packages .info-hover img{width: 15px;vertical-align: middle;}
#packages .info-hover div{
  position: absolute;
  left: -180px;
  top: 20px;
  display: none;
  text-align: left;
  width: 200px;
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
  font-weight: 400;
  background-color: #101010;
  color: #ddd;
  line-height: 20px;
  z-index: 999;
}
#packages .info-hover:hover div{display: block;}          
#packages .item ul li{
  padding: 8px 0;
  font-size: 14px;
}
#packages .item .cta-btn{
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  background-color: #e6e6e6;
  color: #101010;
  box-shadow: rgba(71, 71, 71, 0.5) 0px -3px 1px 0px inset, rgba(38, 69, 109, 0) 0px 4px 1px 0px, rgba(38, 69, 109, 0.01) 0px 2px 1px 0px, rgba(38, 69, 109, 0.02) 0px 1px 1px 0px, rgba(38, 69, 109, 0.03) 0px 1px 1px 0px;
  transition: all 0.3s ease;
  margin: 15px auto 30px auto;
}
#packages .item .cta-btn:hover{animation: shake 0.4s ease;}
#packages .item .cta-btn img{
  width: 18px;
  margin-right: 5px;
}
#packages .active{
  background-color: #191919;
  color: #fff;
}
#packages .active .about{color: #ddd;}
#packages .active .price{background-color: #474747;color: #fff;}
#packages .active .cta-btn{background-color: #95fc05;}

#comments{
  position: relative;
  width: 80%;
  margin: 120px auto;
  text-align: center;
}
#comments .items{
  display: flex;
  gap: 45px;
  margin-bottom: 30px;
}
#comments .case{width: 50%;}
#comments .case-long{width: 100%;}
#comments .item{
  position: relative;
  width: 100%;
  border-radius: 15px;
  text-align: left;
  padding: 30px;
  border:solid #101010 4px;
  color: #101010;
  background-color: #fff;
  box-shadow: rgba(110, 113, 117, 0.5) 0px 4px 20px;
}
#comments .item .header{
  display: flex;
  align-items: center;
}
#comments .item label{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #101010;
  margin-right: 10px;
}
#comments label img{width: 20px;}
#comments .item h3{
  font-family: "Roboto",sans-serif;
  font-size: 15px;
}
#comments .item p{
  font-weight: 400;
  font-size: 13px;
  color: #101010;
  line-height: 20px;
  padding-top: 10px;
}

#sss{
  position: relative;
  width: 80%;
  margin: 120px auto;
  text-align: center;
}
#sss .items-group{
  display: flex;
  column-gap: 30px;
}
#sss .item-group{width: 100%;}
#sss .items{
  display: block;
  width: 50%;
  justify-content: space-between;
}
#sss .item{
  position: relative;
  width: 100%;
  border-radius: 10px;
  background-color: #f2f2f2;
  text-align: left;
  margin-bottom: 30px;
  border:solid #dedede 1px;
}
#sss .item h3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-size: 14px;
}
#sss .item img{
  width: 25px;
  transition: transform 0.3s ease;
}
#sss .item p{
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding: 0 20px 15px 20px;
  display: none;
  transition: max-height 0.3s ease;
}
#cta{
  display: flex;
  align-items: center;
  position: relative;
  width: 80%;
  text-align: left;
  padding: 30px 45px;
  color: #fff;
  margin: 0 auto 75px auto;
  background: linear-gradient(180deg, #101010, #101010);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  column-gap: 60px;
}
#cta h3{
  font-family: "Poppins",sans-serif;
  font-size: 32px;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #95fc05;
}
#cta p{
  line-height: 30px;
  font-weight: 400;
  font-size: 18px;
  padding-bottom: 15px;
}
#cta .btn{
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  background-color: #95fc05;
  color: #101010;
  box-shadow: rgba(71, 71, 71, 0.5) 0px -3px 1px 0px inset, rgba(38, 69, 109, 0) 0px 4px 1px 0px, rgba(38, 69, 109, 0.01) 0px 2px 1px 0px, rgba(38, 69, 109, 0.02) 0px 1px 1px 0px, rgba(38, 69, 109, 0.03) 0px 1px 1px 0px;
  transition: all 0.3s ease;
  margin: 15px auto 30px auto;
}
#cta .btn:hover{animation: shake 0.4s ease;}
#cta .btn img{
  width: 18px;
  margin-right: 5px;
}
#cta .cta-image{width: 30%;}
#cta .cta-image img{width: 100%;}

#contact{
  width: 80%;
  margin: 120px auto;
  text-align: center;
}
#contact form input,#contact form textarea{
  display: block;
  width: 50%;
  padding: 15px;
  border:solid #101010 2px;
  border-radius: 5px;
  margin:0 auto 30px auto;
}
#contact form .return{
  display: flex;
  align-items: center;
  background-color: #101010;
  color: #ddd;
  border-radius: 5px;
  padding: 12px;
  font-size: 14px;
  width: 50%;
  margin:0 auto 30px auto;
}
#contact form .return div{text-align: left;}
#contact form .return a{display: inline-block;color: #95fc05;}
#contact form .return img{
  width: 20px;
  margin-right: 10px;
}
#contact form button{
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 20px 30px;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  background-color: #95fc05;
  color: #101010;
  box-shadow: rgba(71, 71, 71, 0.5) 0px -3px 3px 0px inset, rgba(38, 69, 109, 0) 0px 4px 3px 0px, rgba(38, 69, 109, 0.01) 0px 2px 3px 0px, rgba(38, 69, 109, 0.02) 0px 1px 3px 0px, rgba(38, 69, 109, 0.03) 0px 1px 3px 0px;
  transition: all 0.3s ease;
  margin: 15px auto 30px auto;
}
#contact form button:hover{animation: shake 0.4s ease;}
#contact form button span{
  display: flex;
  align-items: center;
}
#contact form button img{
  width: 18px;
  margin-right: 5px;
}
#contact form button .load{display: none;}

#article{
  width: 80%;
  margin: 120px auto;
}
#article .info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 5px;
  font-size: 13px;
  border:solid #dedede 1px;
  margin-bottom: 15px;
}
#article .info div{display: flex;align-items: center;}
#article .info img{width: 18px;margin-right: 5px;}
#article h1{
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 36px;
  padding-bottom: 15px;
}
#article h2{
  display: block;
  font-weight: 800;
  font-size: 22px;
  padding-top: 15px;
  padding-bottom: 10px;
}
#article h3{
  display: block;
  font-weight: 800;
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
}
#article h4{
  display: block;
  font-weight: 800;
  font-size: 18px;
  padding-top: 15px;
  padding-bottom: 10px;
}
#article p{
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  padding-bottom: 15px;
}
#article li{
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  padding-bottom: 15px;
}
#article a{
  color: #101010;
  position: relative;
}
#article a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #95fc05;
  transition: width 0.5s ease;
}

#footer{
  display: flex;
  justify-content: space-between;
  background-color: #101010;
  padding: 30px;
  gap:30px;
}
#footer .item{
  width: 33%;
}
#footer .item h3{
  font-weight: 600;
  padding-bottom: 15px;
  font-size: 24px;
  color: #fff;
}
#footer .item  .logo{
  font-family: 'Poppins';
  font-size: 25px !important;
  display: flex;
  align-items: center;
  color: #95fc05;
}
#footer .item  .logo span{
  display: inline-block;
  font-family: "Roboto",sans-serif; 
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  transform: rotate(90deg);
  transform-origin: center center;
  margin-left: -2px;
}
#footer .item p{
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #ddd;
}
#footer .item ul li a{
  position: relative;
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  color: #ddd;
  padding-top: 12px;
  padding-bottom: 2px;
}
#footer .item ul li a:hover{
  color: #95fc05;  
}
#footer .item ul li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #95fc05;
  transition: width 0.5s ease;
}
#footer .item ul li a:hover::after{width: 100%;}

.footer-copyright{
  background-color: #101010;
  font-weight: 400;
  text-align: right;
  color: #ddd;
  padding: 15px;
  font-size: 13px;
}
/*TELEFON*/
@media (min-width:0px) and (max-width:867px)
{
  #nav nav{
    width: 95%;
    height: 60px;
    margin-top: 30px;
  }
  #nav nav ul{display: none;}
  #nav .cta-btn{display: none;}

  #hero{
    width: 95%;
    column-gap: 0px;
    margin-top: 180px;
    text-align: center;
  }
  #hero .hero-text h1{font-size: 36px;}
  #hero .hero-image{display: none;}

  .section-title{font-size: 32px;}
  #how-does-it-work{width: 95%;}
  #how-does-it-work .case{flex: 0 0 100%;}

  #why{width: 95%;}
  #why .swiper-slide video {
    width: 70%;
  }

  #interesting{width: 95%;}
  #interesting .items{
    display: block;
    margin:0;
  }
  #interesting .item{
    padding: 12px;
    font-size: 12px;
    font-weight: 400;
  }

  #packages{width: 85%;}
  #packages .items{display: block;}
  #packages .case{width: 100%;margin-bottom: 45px;}

  #comments{width: 95%;}
  #comments .items{display: block;}
  #comments .case-long{width: 100%;}
  #comments .case{width: 100%;margin-bottom: 30px;}

  #sss{width: 95%;}
  #sss .items-group{
    display: block;
    width: 100%;
  }
  #sss .items{display: block;width: 100%;}

  #cta{
    display: block;
    width: 95%;
    padding: 30px;
    column-gap: 0px;
  }
  #cta .cta-image{display: none;}

  #contact{width: 95%;}
  #contact form input,#contact form textarea{width: 100%;}
  #contact form button{width: 100%;}

  #article{width: 95%;}
  #article h1{font-size: 32px;}
  #footer{
    display: block;
    padding: 30px 20px 1px 20px;
    gap:0px;
  }
  #footer .item{
    width: 95%;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
  }
  #footer .item h3{padding-bottom: 5px;}
}

 
/*TABLET*/
@media (min-width:868px) and (max-width:1170px)
{ 
  #nav nav ul{display: none;}
  #nav .cta-btn{display: none;}
  #hero{
    width: 95%;
    column-gap: 0px;
    margin-top: 180px;
    text-align: center;
  }
  #hero .hero-image{display: none;}

  #how-does-it-work{width: 90%;}

  #packages{width: 90%;}
  #packages .items{gap: 30px;}
}

/*LAPTOP*/
@media (min-width:1170px)
{  
  #nav .menu-btn{display: none;}
}