@charset "utf-8";
/* CSS Document */

/* Geist */

html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;height: 100%}input,select,textarea{-webkit-appearance:none}
body{margin:0;font-family:"Plus Jakarta Sans";font-size:16px;line-height: 1.6; position:relative;height: 100%}
*,*:before,*:after{margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);box-sizing: border-box}
.c,hr{clear:both;font-size:0;overflow:hidden;display:block}
a{color:#1363df;outline:none}a:hover{text-decoration:none}a img{border:0}
.an,.trn,.logo .st2, .bf a, .ms a:after{transition:.3s}
.box{box-sizing:border-box}
img{display: block;}
 
.wrap,body>*>div{width:94%;margin:0 auto;}
.grid{font-size: 0;text-align:justify;text-justify: distribute}
.grid>div,.grid:after{display:inline-block;content: ""}

p{padding-bottom: 15px;}


header{position: fixed;top: 0;left: 0;right: 0;z-index: 10;transition: background .3s ease-in;background: rgba(0,0,0,0);}
header>*{height: 90px;display: flex;align-items: center;max-width: 1620px;position: relative;transition: .4s}
header.sm{background: rgba(0,0,0,.7);}
header .logo{
    display: flex;
}
header.sm:after{
    content: '';
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  transition: background .3s ease-in;
    position: absolute;
    z-index: -1;
    top: 0;left: 0;right: 0;bottom: 0;
}
header.sm>*{height: 60px}

header+*{padding-top: 120px;}

header .btn.go.gr{
    white-space: nowrap;

}
.mm>ul{display: flex}
header li{position: relative;list-style: none}
.mm>ul>li>a{padding: 36px;display: block;}
.sm .mm>ul>li>a{padding-top: 21px;padding-bottom: 21px;}
.book-read .mm>ul>li>a{padding: 16px 36px;}


.mm>ul ul{background: #000;}
.mm>ul ul>li:first-child{padding-top: 10px;}
.mm>ul ul>li:last-child{padding-bottom: 10px;}
.mm>ul ul a, footer .ms a{padding: 12px 26px;display: block;min-width: 200px;transition: .3s;background: #000;}
.mm>ul ul a:hover{background: #111;padding-left: 29px;padding-right: 23px;}
header li a{color: #fff;text-decoration: none;transition: .3s}
#m{
    display: none;
}

@media only screen and (min-width:768px) {
.mm>ul ul {position: absolute;top: 120%;left: 10px;opacity: 0;visibility: hidden;transition:.3s;


    box-shadow: 0 19px 19px rgb(25, 25, 25,.05);
    padding: 10px 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;

}

}
@media only screen and (min-width:1024px) {
    header li:hover>ul{opacity: 1;visibility: visible;top: 100%;}
}

header li.active>ul{opacity: 1;visibility: visible;top: 100%;}







.has-children:after, #lang:after,.go:after,.btn.b:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
    transform: rotate(-45deg);
    transform-origin: 34% 67%;
    transition: .3s;
  }
.has-children:after{margin-top: -5px;}
header li.act a,header a:hover,header li:hover>a,header li:hover:after{color:#fff;border-color:#fff;} /* color:#87e64b; */
#lang:after{top: 15px;right: 15px;}



.mm>ul>li:hover>a{
    color: #87e64b;
}
.mm>ul>li.has-children:hover:after{
    border-color: #87e64b;
}



.mm > ul ul > li {
    opacity:0;
    transform:translateY(10px);
    transition:.3s
  }
.mm > ul ul > li:first-child {
    transition-delay:220ms;
  }
.mm > ul ul > li:nth-child(3) {
    transition-delay:260ms
  }

  .mm > ul ul > li:nth-child(5) {
    transition-delay:0.3s
  }


 .mm > ul ul > li:nth-child(2) {
    transition-delay:0.34s
  }
  

  .mm > ul ul > li:nth-child(4) {
    transition-delay:0.38s
  }

  header li.active>ul>li {
    opacity:1;
    transform:translateY(0)
  }
@media only screen and (min-width:1024px) {
  header li:hover>ul>li {
    opacity:1;
    transform:translateY(0)
  }
}
.ms{
    max-width: 740px;
    width: 52vw;
    display: flex;
    flex-wrap: wrap;
}
.ms>li{
    max-width: 400px;
    width: 50%;
}

footer .ms>li{
    width: 20%;
    max-width: 100%;
}




.ms>* a:after{
    display: block;
    font-size: 12px;
    color: #999;
    padding-top: 2px;
}


.c_1 a:after{
    content: "Launch a professional online presence that helps your business grow.";
}

.c_2 a:after{
    content: "Sell products online with a fast, secure, and easy-to-manage store.";
}

.c_3 a:after{
    content: "Showcase your menu, take bookings, and connect with customers.";
}
.c_4 a:after{
    content: "Share your expertise, build authority, and attract new visitors.";
}
.c_5 a:after{
    content: "Need more than a template? Get a fully bespoke website built by professionals.";
}
.c_6 a:after{
    content: "Promote your services, showcase completed projects, and generate more local leads.";
}

.c_7 a:after{
    content: "Showcase services, accept bookings, and attract more clients.";
}

.c_8 a:after{
    content: "Promote memberships, classes, and fitness programs.";
}

.c_9 a:after{
    content: "Display listings, capture leads, and grow your business.";
}

.c_10 a:after{
    content: "Build trust and connect with potential clients.";
}

.c_11 a:after{
    content: "Present your services and financial expertise professionally.";
}

.c_12 a:after{
    content: "Showcase your work and grow your audience.";
}

.c_13 a:after{
    content: "Highlight your experience, skills, and achievements online.";
}

.c_14 a:after{
    content: "Showcase your expertise, generate leads, and grow your client base.";
}

footer .ms{
    max-width: 100%;
    width: 100%;
    padding-top: 30px;
}

.bf ul{display: flex}
.bf ul li{
    margin: 0 20px;
}

.btn{padding: 16px 24px 17px;border-radius: 25px;background: #1363df;color: #fff;text-transform: uppercase;text-decoration: none;font-weight: 700;line-height: 1;position: relative;display: inline-block;transition: .3s;font-size: 16px;cursor: pointer;}
.btn:hover{background: #082a5e;}
.btn.go{padding-right: 46px;}
.go,.btn.b:hover{position: relative;}
.go:after,.btn.b:after{border-color: #1363df;top:60%;right: -13px;transform: translateY(-50%)rotate(-135deg);transform-origin: 34% 54%;transition: .3s}
.go:hover:after{right: -16px;}
.btn.go:after,.btn.b:after{top: 50%;border-width: 2px;right: 20px;border-color:#fff}
.btn.go:hover:after{right: 17px;}
.btn.b:after{
    right: 15px;
    border-color:#fff;
    opacity: 0;
}
.btn.b{
    background: #000;
}
.btn.b:hover{
    background: #3bc54d;
    padding-right: 35px;
}
.btn.b:hover:after{
    opacity: 1;
}

 
header .btn{
    padding: 13px 24px 14px;
}

.btn.gr{
    background: #fff;
    color: #000;
}
.btn.gr:hover, .btn.bgr:hover{
    background: #87e64b;
    color: #000;
}
.btn.gr.go:after, .btn.bgr.go:hover:after{
    border-color: #000;
}



header .login.btn{
    background: rgba(255,255,255,.1);
    margin-right: 20px;
    color: #fff
}
header .login.btn:hover{
    background: rgba(255,255,255,.2);
}

.login svg{
    display: inline-block;
    width: 16px;
    display: none;
}



#video{
    position: absolute;
    top: 0;left: 0;right: 0;
    height: 85vh;
    background: #000;
}

#video:before,#video:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;bottom: 0;
top: 0;
    background: rgba(0,0,0,.4);
     z-index: 1;
}
#video:after{
    background: linear-gradient(#0000 0% 75%,#000 100%);
    z-index: 1;
} 
#video video{
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: saturate(120%) contrast(108%) brightness(97%);
}
.rm{
    margin-left: auto;
}
.rm ul{
    display: flex;
}


#inputBlock{
    border-radius: 36px;
    background: #fff;
    margin: 180px auto 0;
    position: relative;
    z-index: 1;
    max-width: 700px;
    padding: 20px 15px 15px;
    font-size: 60px;
    display: flex;
    flex-wrap: wrap;
}
#inputBlock>div{
    padding: 0 10px;
    line-height: 1.2;
    min-height: 150px;
    width: 100%;
}
#inputBlock .btn{
    margin-left: auto;
    margin-top: 12px;
}








.typing-text {
    position: relative;
    min-height: 1.2em;
}

.typing-text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    animation: blink 0.8s infinite;
    vertical-align: -0.1em;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}





#infoBlock{
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    margin: 50px 0 0;
    font-size: 18px;
}
#infoBlock h1{
    font-size: 20px;
    margin-bottom: 8px;
}

.addInfo{
    margin: 10px 0 0;
    opacity: .3;
    font-size: 16px;
}

#portfolio{
    background: #000;
    padding-top: 27vh;
    padding-bottom: 70px;
    text-align: center;

}
#portfolio>div{
    width: 100%;
    position: relative;
}

#portfolio>div:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 500px;
  

    background: linear-gradient(#0000 0% 75%,#000 100%);
    z-index: 1;
} 

#portfolio .btn{
    z-index: 2;
    position: relative;
    margin: 60px 0 0;
}










.slider-section{
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.my-carousel{
    width:100%;
    position:relative;
}

.my-carousel__swiper{
    width:100%;
    height:620px;
    overflow:visible;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
}

.swiper-wrapper{
    align-items:center;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:transform;
}

.swiper-slide{
    width:440px;
    height:560px;
    overflow:hidden;
    background:#000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    will-change:transform;
    transition:transform .9s ease, opacity .9s ease;
}

.swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
}

.my-carousel__control{
    position:absolute;
    top:auto;
    bottom: -152px;
    z-index:100;
    width:144px;
    height:144px;
    border:none;
    background:#000;
    color:#fff;
    font-size:36px;
    cursor:pointer;
    font-family: "Times New Roman";
    opacity: 0;
    transition: .3s;
}

.my-carousel__control--prev{
    left:0;
}

.my-carousel__control--next{
    right:0;
}
#portfolio:hover .my-carousel__control{
    opacity: 1;
}

@media(max-width:768px){

    .my-carousel__swiper{
        height:480px;
    }

    .swiper-slide{
        width:280px;
        height:400px;
        transform-style:flat;
        -webkit-transform-style:flat;
    }

    .my-carousel__control{
        display:none;
    }

}









#inputBlock:before {
    animation: ctaAnimation 4s linear infinite;
    animation-delay: .2s;
    background: linear-gradient(90deg, #87e64b00 25%, #87e64b 50%, #87e64b00 75%);
    background-position: 100% 0;
    background-size: 200% 100%;
    border-radius: 38px; 
    bottom: -5px;
    content: "";
    position: absolute;
    filter: blur(0);
    left: -5px;    
    right: -5px;
    top: -5px;
    transition: left .1s cubic-bezier(0, .62, .25, 1), right .1s cubic-bezier(0, .62, .25, 1), top .1s cubic-bezier(0, .62, .25, 1), bottom .1s cubic-bezier(0, .62, .25, 1), filter .1s cubic-bezier(0, .62, .25, 1), background-position .4s cubic-bezier(0, .62, .25, 1);
    z-index: -2;

}
@keyframes ctaAnimation {
    0% {
        background-position: 100% 0
    }
    to {
        background-position: -100% 0
    }
}


#inputBlock:after{
    content: "";
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 36px;
}

#steps{
    padding: 100px 0; 
}
.col-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
}
.col-3 img{
    width: 100%;
    border-radius: 8px;
}

#steps>div, #why-us>div{
    max-width: 1440px;
}


.infoTop{
    text-align: center;
    margin-bottom: 50px;
}
.infoTop span, .s-label{
    font-weight: 700;
    color: #999;
    font-size: 22px;
}

h2{
    font-size: 44px;
    margin: 20px 0;
    line-height: 1.3;
}
.infoTop h2+p{
    max-width: 600px;
    margin: 0 auto;
}

#steps h3{
    margin: 25px 0 10px;
}



.infoBottom{
    text-align: center;
}


.infoLine{
    color: #fff;padding: 40px 0 0;
    position: relative;
    z-index: 10;
    font-size: 16px;
}

#portfolio .infoLine{
    width: 94%;
    margin: 0 auto;
    line-height: 1.8
}





#why-us {
  background: #000;
  color: #fff;
  padding: 100px 0;
  overflow: visible;
}

.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.why-left {
  position: sticky;
  top: 29vh;
  padding-bottom: 20px;
}

.why-left .btn {
  margin-top: 20px;
}

.why-right {
  display: grid;
  gap: 50px;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.trust-row {
  padding: 34px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 24px;
  display: flex;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: rgba(0,0,0,.55);
}

.trust-row > *:first-child {
  width: 90px;
  min-width: 90px;
  display: flex;
  align-items: center;
}

.trust-row svg {
  width: 60px;
  height: auto;
}

.trust-row svg path {
  fill: #fff;
}

.trust-row h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #fff;
}

@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .why-left {
    position: relative;
    top: auto;
  }

  .why-right {
    perspective: none;
    transform-style: flat;
    gap: 18px;
  }

  .trust-row {
    transform: none !important;
    opacity: 1 !important;
  }
    

}










/* CTA */
#cta .btn{
    text-transform: capitalize;
}

#cta>div:before{
        content: "";
        inset:0;
        background: #000;
        position: absolute;
        z-index: -3;
        border-radius: 45px;
    }

    #cta{
        margin: 100px 0;
    }
 
    
    .important-info{
        background: #fff;
        color:#000;
        height: 100%;
        border-radius: 22.5px;
        padding: 16px 40px 12px;
        z-index: 1;
        position: relative;
        
    }
    .infoBlock{
        margin: 15px 0;
    }
    .infoBlock>h3{
        font-size: 42px;
        line-height: 1.2;
        margin: 5px 0;
    }
    .infoBlock>span{
        color: rgba(5,7,11,.55);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.3px;
 
    }
    .c-info{
        padding-left: 30px;
        z-index: 1;
        position: relative;
    }
    .c-info .btn{
        margin: 40px 0 0;
    }
    .c-info h2{
        margin: 20px 0 40px;
        font-size: 60px;
    }
    .c-info p{
        line-height: 2;
    }
    

       #cta>div{

            position: relative;
            transition: background .3s ease-in;background: rgba(0,0,0,.5);
            overflow: hidden; 

            padding: 45px;
            border-radius: 45px;
            max-width: 1440px;
            color: #fff;

            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 45px;
            align-items: center;
        }

    #cta>div:after{
        content: '';
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        transition: background .3s ease-in;
        position: absolute;
        z-index: -1;
        inset:0;
    }


    #bubble{
        position:absolute;


        border-radius:50%;
        filter:blur(120px);
        
        will-change:transform;
        pointer-events:none;
        z-index: -1;


      background:radial-gradient(circle, rgba(80,140,255,1), transparent 95%);
      transition: .2s;
      opacity: 0.72; bottom: 116px; left: 112px; height: 995px; width: 995px;
    }

/* END OF CTA */















footer{overflow: hidden;margin-top: 25px;position: sticky;top:100%;background: #000;color: #fff;padding: 50px 0 10px;}
footer>*{display: flex;justify-content: space-between;align-items:stretch;padding: 12px 0;}
footer a{text-decoration: none;color: #fff;}
footer li{list-style: none}
footer .ms a{
    padding: 15px 30px 15px 0;
    margin-right: 20px;
}
footer .ms a:hover{
    background: #111;
    padding-left: 15px;
    padding-right: 15px;
    color: #87e64b;
}

footer a:hover{
    color:#87e64b;
    transition: .3s;
}

footer .right{
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: space-between;
    padding-bottom: 17px;
    line-height: 2.2
}

footer>*:first-child{
    padding-bottom: 40px;
}


footer .right ul a{
    font-size: 19px;
}

footer .logo{
    margin: 0 0 0 auto;
}

footer b{
    display: block;
    font-style: 16px;
}

footer .mail{
    display: block;
    margin-bottom: 10px;
}

footer>*+*{
    border-top: 1px solid #333;
    padding-top: 25px;
}

.logo{display: inline-block;width: 190px;margin: 0 100px 0 0;order:-1;transition: .4s;min-width: 170px}
.logo:hover .trn, .logo:hover .st2{fill:#87e64b}




#intro{
    background: #000;
}


#faq{
        background: #faf9f7;
        padding: 100px 0;
    }
    #faq>div{
        max-width: 1440px;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    padding-top: 20px;
    }

    .faq-item {
      padding: 28px;
      border-radius: 24px;
      background: #fff;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px 0px;
    }

    .faq-item h3 {
      font-size: 21px;
      line-height: 1.25;
      margin: 0 0 12px;
    }

    .faq-item p {

      line-height: 1.65;
      margin: 0;
    }
    
    #faq .infoBottom{
        max-width: 415px;
        margin: 60px auto 0;
    }
    #faq .infoBottom .btn{
        margin-top: 20px;
    }

    @media (max-width: 900px) {
     

      .faq-grid {
        grid-template-columns: 1fr 1fr;
      }
    }





@media only screen and (max-width:1940px) {
    #inputBlock{
        margin-top: 100px;
    }
    #portfolio{
        padding-top: 15vh;
    }
    .my-carousel__swiper{
        height: 520px;
    }
}


@media only screen and (max-width:1500px){
.my-carousel__swiper{
        height: 420px;
    }
}
@media only screen and (max-width:1390px){
    footer .ms>li{
        width: 25%;
    }
    .logo{
        margin-right: 30px;
    }
    .mm > ul > li > a{
        padding: 26px;
    }
    .has-children:after{
        right: 4px;
    }
}
@media only screen and (max-width:1200px){
    .logo{
        margin-right: 20px;
    }
    .mm > ul > li > a{
        padding: 20px;
    }
    .my-carousel__swiper{
        height: 320px;
    }
    
    
    h2{
        font-size: 34px;
    }
    
    .c-info{
        padding-left: 10px;
    }
    .c-info .btn{
        margin-top: 10px;
    }
    .c-info h2 br{
        display: none;
    }
    
    .c-info h2{
        font-size: 38px;
        margin: 10px 0 10px;
    }
    #cta > div{
        padding: 25px;
        grid-template-columns: 1fr;
    }
    .important-info{
        display: flex;
        padding: 16px 16px 12px;
    }
    .important-info .infoBlock{
        padding: 0 10px;

    }
    .infoBlock > h3{
        font-size: 21px;
    }
    .infoBlock{
        margin: 0;
    }
    #cta{
        margin: 50px 0;
    }
    #why-us{
        padding: 50px 0 75px;
    }
    #faq, #steps{
        padding: 50px 0;
    }

    #portfolio .my-carousel__control{
        opacity: 1;
    }
    
    .ms{
        width: 62vw;
    }
}
@media only screen and (max-width:1024px){
    footer .ms a{min-width:0;padding-right: 15px;}
    footer .ms a:hover{padding-left:0;background: none;}
    footer .ms a:hover:after{color: #fff}
    
    header>*{height: 70px;padding: 10px 0;}
}
@media only screen and (max-width:1023px){
    footer .ms>li{
        width: 25%;
    }
    footer .c_11, footer .c_4, footer .c_14, footer .c_6, footer .c_13, footer .c_12{
        display: none;
    }
     .my-carousel__swiper{
        height: 240px;
    }
    
       .mm > ul ul{
            width: 75vw;
            left: -8vw;
        }


}


@media only screen and (max-width:999px){
    .bf{flex-wrap: wrap}
    .bf span{width: 100%;}
    
    header .logo{
        min-width: 120px;
        width: 120px;
        margin-right: 10px;
    }
      
     .has-children:after {
        right: 0;
      }
    .has-children>a{
        padding-right: 20px;
    }
    
    
    .login svg{
        width: 20px;
        display: block;
    }
    header .login.btn{
        font-size: 0;
        padding: 10px 11px 11px;
        margin: 0 10px;
    }
    header .btn.go.gr{
        font-size: 14px;
        padding: 13px 20px 14px 14px;
   
    }
    header .btn.go.gr:after{
        right: 7px;
    }
    
    
    .infoBlock > span{
        font-size: 9px;
    }
     .infoBlock > h3 {
    font-size: 16px;
  }
.c-info h2, h2 {
    font-size: 28px;
    }
    
    .mm > ul > li > a {
        padding: 18px 16px;
      }
    footer{
        padding-top: 30px;
    }
    
    #steps p{
        font-size: 14px;
    }
    
    #steps h3{
        line-height: 1.3;
    }
    
    
}
@media only screen and (max-width:768px){
    footer .ms>li{
        width: 50%;
    }
    

}

@media only screen and (max-width:767px){
    #inputBlock{
        font-size: 50px;
    }
    .mm > ul > li > a {
        padding: 18px 15px;
      }
    
    #steps .col-3{
        grid-template-columns: 1fr;
        gap:0;
    }
    
    #steps .col-3 div{
        max-width: 500px;
        margin: 0 auto 50px;
        
    }
    #steps .col-3 div:last-child{
        margin-bottom: 0;
    }
    
    .faq-grid{
        grid-template-columns: 1fr;
    }
    
    .important-info{
        flex-direction: column;
    }
    
    
}
@media only screen and (max-width:640px) {
    .bf{text-align: center;}
    .bf ul{width: 100%;justify-content: center;margin: 30px 0;}
    footer .mail{
        margin: 0 auto;
    }
}

@media only screen and (max-width:600px) {
#inputBlock{
        font-size: 40px; 
    }
    #inputBlock > div{
        min-height: 100px;
    }
    
    
    .trust-row{
        padding: 15px;
    }
    .trust-row p {
        font-size: 14px;
    }
    .trust-row h3{
        line-height: 1.3;
        font-size: 16px;
        margin-bottom: 7px;
        
    }
    
     #why-us {
        padding: 30px 0 45px;
      }
     #faq, #steps {
        padding: 30px 0;
      }
    h2{
        margin: 15px 0 12px;
    }
    .faq-grid{
        padding: 0;
    }
    #faq .infoBottom{
        margin-top: 40px;
    }
    .faq-item {
  padding: 22px 22px 8px;
    }
    
      .important-info {

    padding: 8px 8px 4px;
    }
    
}


@media only screen and (max-width:550px) {
 .my-carousel__swiper{
        height: 210px;
    }
    
 
    
    
}


@media only screen and (max-width:767px) {
.rm{
        margin-right: 30px;
    }
}

@media only screen and (max-width:479px) {
    footer .ms li{
        width: 100%;
    }
    footer .ms a{
        padding: 5px 0;
        margin: 0;
    }
    footer{
        padding-top: 30px;
    }
     .my-carousel__swiper{
        height: 290px;
    }
   
    
       #inputBlock{
        font-size: 30px;
           padding: 15px;
    }
    #inputBlock > div{
        min-height: 80px;
    }
    
    header .btn.go.gr{
        
        padding: 13px 10px 14px;
        
    }
    header .btn.go.gr:after{
        display: none;
    }
    
    .rm{
        margin-right: 20px;
    }
 
}


@media only screen and (max-width:400px) {
        #inputBlock{
        font-size: 25px;
    }
    #inputBlock > div{
        min-height: 60px;
    }
     header .btn.go.gr {
    font-size: 12px;
    }
    .trust-row > :first-child{
        width: 80px;
        min-width: 80px;
    }
}

@media only screen and (max-width:374px) {
    header .login.btn{
        margin: 0 5px;
        padding: 7px 8px 8px;
    }
     header .btn.go.gr {
        padding: 10px 7px 11px;
      } 
    .rm{
        margin-right: 15px;
        margin-left: 0;
    }
      header .logo {
    min-width: 90px;
    width: 90px;
    margin-right: 5px;
  }
    #m{
        margin-left: auto;
    }
    #cta > div{
        padding: 15px;
    }
}



@media only screen and (max-height:725px) {
    #video{
        height: 90vh;
    }
      #inputBlock {
        margin-top: 20px;
      }
     #portfolio {
    padding-top: 8vh;
  }
    .why-left{
        top: 22vh;
    }
}

@media (max-width: 900px) {
 
    .why-left{
        top: 0;
    }
}


 


header>*>*, header .logo{
    z-index: 20;
    position: relative;
}















@media only screen and (max-width:767px) {
    
    #m{
    display: block;
}
    .mm {
        display: block; 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background: #000;
        overflow: auto;
        height: 100vh;
        height: 100svh;

        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
        visibility: hidden;

        transition:
            transform .6s ease,
            opacity .4s ease,
            visibility .5s;
        
        
         
    }

    html.mob-menu-act .mm {
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }
    
/*
    .mm>*:before{
        content: "";
        position: absolute;
        top: -50vh;
        left: 0;right: 0;
        height: 50vh;
        background: #000;
    }

*/


    .mm>*{
        flex-direction: column;
    }
    
    
    
        

        
    
    
    .mm>ul>li, .mm > ul ul > li{
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    }
    .mm>ul>li:first-child   { transition-delay: .1s; }
    .mm>ul>li:nth-child(2)  { transition-delay: .15s; }
    .mm>ul>li:nth-child(3)  { transition-delay: .2s; }
    .mm>ul>li:nth-child(4)  { transition-delay: .25s; }
    .mm>ul>li:nth-child(5)  { transition-delay: .3s; }
    .mm>ul>li:nth-child(6)  { transition-delay: .35s; }
    .mm>ul>li:nth-child(7)  { transition-delay: .4s; }
    .mm>ul>li:nth-child(8)  { transition-delay: .45s; }
    .mm>ul>li:nth-child(9)  { transition-delay: .5s; }
    .mm>ul>li:nth-child(10) { transition-delay: .55s; }
    
    
    .mob-menu-act .mm>ul>li, .mob-menu-act .mm > ul ul > li{
        transform: translateY(0);
        opacity: 1;
    }
       .mm > ul ul > li{
        
        width: 100%;
        max-width: 100%;
       
        
    }
    
      .mm > ul ul{
        width: 100%;
        max-width: 100%;
        left: auto;
        position: relative;

    }
    
 
    
    
    
    .mm .has-children > span {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        aspect-ratio: 1;
        background: rgba(0, 0, 0, .3);
        cursor: pointer;
    }

    .mm .has-children > span:before,
    .mm .has-children > span:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #ccc;
        transform: translate(-50%, -50%);
    }

    .mm .has-children > span:before {
        width: 15px;
        height: 3px;
    }

    .mm .has-children > span:after {
        width: 3px;
        height: 15px;
    }
    
    .mm li li a { padding-left: 15px; }
    .mm li li li a { padding-left: 20px; }
    .mm li li li li a { padding-left: 25px; }
    
    .has-children:after{
        display: none;
    }
    
    


      .mm ul ul li {
        background: rgba(0, 0, 0, .15);
        border-top: 1px solid #3b3e46;
        border-bottom: 0;
      }

      .mm .has-children > span.act + ul {
        max-height: 100vh;
        transform: scaleY(1);
        opacity: 1;
        transition: opacity 1s, transform .3s, max-height .5s;
      }

      .mm .has-children > span.act:after {
        transform: translate(-50%, -50%) rotate(90deg);
      }
    
    
    
    
    
    
    
    
    
    .has-children {
        position: relative;
    }

    .has-children ul li {
        display: block;
    }

    .has-children ul li a {
        display: block;
        padding: 9px 10px 5px;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
    }

    .has-children ul li a:hover {
        background: darken($bg, 10%);
    }

    .has-children ul li:hover > a,
    .has-children ul li.current-menu-item > a {
        background: darken($bg, 10%);
    }




  
    

    .mm a:after{
        display: none;
    }
    
    .mm li {
        border-top: 1px solid #3b3e46;
        padding: 0;
    }
    
    .mm li a, .has-children ul li a, .mm > ul > li > a{
        padding: 18px;
    }
    .mm > ul > li > ul > li > a{
        padding-left: 27px;
    }
    
      
    
    .mm > ul ul > li:first-child, .mm > ul ul > li:last-child{
        padding: 0;
    }
    
/*
    .mm>ul>li{
        transform: translateY(10px);
    }
     .mob-menu-act .mm>ul>li{
        opacity: 1;
        transform: translateY(10px);
    }
*/
    
    
    
    
   .mm .has-children>ul {
    overflow: hidden;
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: opacity 0.3s, transform 1s, max-height .3s;
  }
    
    
    .mm .has-children > span.act + ul {
        max-height: 100vh;
        transform: scaleY(1);
        opacity: 1;
        transition: opacity 1s, transform .3s, max-height .5s;
      }
    

    
    
 
}





.mob-menu-act, .mob-menu-act body{
    overflow: hidden;
}


html.mob-menu-act #m:before {
    animation: m1 .5s ease forwards .1s;
}

html.mob-menu-act #m:after {
    animation: m2 .5s ease forwards .1s;
    opacity: 0;
}

html.back-anim #m:after {
    transition: 0;
    box-shadow: none;
    opacity: 0;
}

#m {
    position: relative;
/*
    position: absolute;
    top: 50%;
    right: 0;
*/
    z-index: 10;
    width: 40px;
    height: 40px;
    min-width: 40px;
    overflow: hidden;
/*    transform: translateY(-50%);*/
    cursor: pointer;
    
}

#m:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
}

#m:after {
    content: "";
    position: absolute;
    top: 18px;
    right: 6px;
    width: 30px;
    height: 4px;
    background: #fff;
    box-shadow:
        0 -10px 0 0 #fff,
        0 10px 0 0 #fff;
    transition: .3s ease;
    opacity: 1;
}

@keyframes m1 {
    0% {
        right: 0;
    }

    10% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    31%,100% {
        opacity: 0;
        width: 30px;
        height: 4px;
        transform: rotate(-45deg) translate(100%,0);
        transform-origin: 100% 100%;
        font-size: 0;
        right: 50%;
        top: 50%;
    }

    100% {
        opacity: 1;
        transform: rotate(-45deg) translate(17px,2px);
        margin: -2.5px 3px 0 0;
        background: #fff;
    }
}

@keyframes m2 {
    0% {
        right: 0;
    }

    10% {
        opacity: 0;
    }

    30% {
        right: 100px;
        opacity: 0;
        transform: none;
    }

    31%,100% {
        opacity: 0;
        width: 30px;
        height: 4px;
        transform: rotate(45deg) translate(100%,0);
        transform-origin: 100% 100%;
        font-size: 0;
        right: 50%;
        top: 50%;
        box-shadow: none;
    }

    100% {
        opacity: 1;
        transform: rotate(45deg) translate(50%,0);
        margin: -2.5px 3px 0 0;
        background: #fff;
    }
}