/*
Theme Name: numerology-theme
Theme URI: http://natacoach.com.ua/
Author: Artem
Author URI: http://natacoach.com.ua/
Description: Description
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: artbt
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Business is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/

body.noscroll,
html.noscroll{ 
   overflow-y:hidden !important;  
} 
img{
  max-width: 100%;  
}
textarea{
   resize: none;
}
.none {
   display: none !important;
}


input:focus::-webkit-input-placeholder {
   color: #000000;

}
input:focus:-moz-placeholder {
       color: #000000;

}

input:focus::-moz-placeholder {
     color: #000000;

}
input:focus:-ms-input-placeholder {
    color: #000000;

}

figure{
  margin: 0;  
}
h1,h2,h3,h4,h5,h6{
   margin: 0;
   padding: 0;
}
ul, ol{list-style: none;}
*{
   -webkit-transition: .2s;
    -moz-transition: .2s;
     -ms-transition: .2s;
      -o-transition: .2s;
         transition: .2s;
  margin: 0;padding: 0;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
}
*:hover{
    -webkit-transition: .2s;
    -moz-transition: .2s;
     -ms-transition: .2s;
      -o-transition: .2s;
         transition: .2s;
}
a{
   text-decoration: none;  
}
body{
  margin: 0;  
  padding: 0; 
 -webkit-transition: .2s;
    -moz-transition: .2s;
     -ms-transition: .2s;
      -o-transition: .2s;
         transition: .2s;
  background:  #F5FFF6;
  font-weight: 400;
font-size: 16px;
line-height: 20px;
  font-family: 'Montserrat', sans-serif;
}
.size-20{
   font-weight: 400;
font-size: 20px;
}
h1{
   font-family: 'Gabriela';
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 51px;
text-transform: uppercase;
color: #003D06;
max-width: 585px;
margin-bottom: 30px;
}
h2{
   font-family: 'Gabriela';
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 45px;
text-transform: uppercase;
color: #003D06;
margin-bottom: 50px;
}
h3{
   font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 27px;
color: #1C1C1C;
margin-bottom: 30px; 
}
.thanks-popup{
   max-width: 570px;
   position: relative;
   margin: auto;
background: #F5FFF6 url(images/form.svg) no-repeat center center;
border: 2px solid #309600;
border-radius: 30px 0px;
padding: 30px 20px;
text-align: center;

}
.thanks-popup h2{
   margin-bottom: 20px;
}
.thanks-popup h3{
   margin-bottom: 10px;
   color: #003D06;
}
#sandwich {align-self: center; position: relative;  width: 30px; height: 23px;cursor: pointer;display: none; margin-bottom: 5px;  -webkit-border-radius: 5px;border-radius: 5px;}
.sw-topper {position: relative; top: 0px; width: 30px; height: 2px; background: #FFFFFF; border: none;border-radius: 4px 4px 4px 4px;transition: transform 0.5s, top 0.2s;}
.sw-bottom { position: relative;   width: 30px;  height: 2px;  top: 7px;  margin: auto;  background: #FFFFFF;  border: none;  border-radius: 4px 4px 4px 4px;  transition: transform 0.5s, top 0.2s;  transition-delay: 0.2s, 0s;}
.sw-footer { position: relative; width: 30px;height: 2px;top: 15px;margin: auto; background: #FFFFFF;border: none; border-radius: 4px 4px 4px 4px;transition: all 0.5s;transition-delay: 0.1s;}
#sandwich.active .sw-topper {position: absolute; right: 0;}
#sandwich.active .sw-bottom {width: 16px; position: absolute; right: 0;}
#sandwich.active .sw-footer {width: 9px; position: absolute; right: 0;}
.wrapper{
   max-width: 1170px;
   margin: auto;
}
.navigation-close{
   display: none;
}
header{
   width: 100%;   
   top: 0;
   z-index: 99;   
   position: fixed;  
padding-top: 18px;   
padding-bottom: 22px;   
background: #309600;
backdrop-filter: blur(100px);
}
.navigation ul{
   display: flex; 
   -webkit-align-items: center;
           align-items: center;  
}
.navigation ul li{
   margin-right: 30px;  
}
.navigation ul li:last-child{
   margin-right: 0;  
}
.navigation ul li a{
   font-style: normal;
font-weight: 400;
font-size: 20px;
text-decoration: none;    
line-height: 24px;
color: #FFFFFF;
}
.navigation ul li a:hover,
.navigation ul li a:active{
   color: #003D06;
}
.padding{
   padding: 80px 0;
}
.head{
   display: flex; 
   -webkit-justify-content: space-between;
           justify-content: space-between;   
       -webkit-align-items: center;
               align-items: center; 
}
.logo a{
   display: flex; 
   -webkit-align-items: center;
           align-items: center;  
}
.logo a img{
   height: 40px;  
}
.logo a p{
   font-family: 'Gabriela';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 20px;
letter-spacing: 0.11em;
color: #FFFFFF;
margin-left: 9px; 
width: 114px;  
}
.phone{
   font-style: normal;
line-height: 24px;
color: #FFFFFF; 
 position: relative;  
 padding: 0 0 0 30px;
}
.phone:before{
content:  url(images/svg-phone.svg);
position: absolute;  
top: -4px;  
left: 0;   
}
.contact-data,
.social-data{
   display: flex; 
   -webkit-align-items: center;
           align-items: center;  
}
.contact-data a{
   margin-right: 40px;  
}

.home{
   background:url(images/home-bg.jpg) no-repeat 100% / cover;
}
.home__container{
   display: flex; 
   -webkit-justify-content: space-between;
           justify-content: space-between;   
       position: relative; 
       z-index: 1;   
       margin-top: 80px;   
}
.home__text{
   max-width: 858px; 
}
.home__image picture{
   max-width: 437px;  

 
}
.home__image picture img{
   width: 100%;   
   height: 100%;  
   object-fit:cover;
   display: block;
}
.home__text h3{
   max-width: 549px; 
}
.home__left{
   position: relative;
   margin-top: 100px;
}
.scroll{
   position: absolute;
   bottom: 0;
   display: flex;
   -webkit-align-items: center;
           align-items: center;
}
.scroll p{
   font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #309600;
margin-right: 32px;
}
.arrow-bottom{
   width: 45px;
   position: relative;
   height:50px;
   margin-left: 0;
}
.arrow {
  width: 50px;
  position: absolute;
  bottom: 30px;
  left: calc(50% - 25px);
  animation: arrowDown 2s infinite;
}

.arrow.two {
  opacity: 0;
  animation-delay: 1.5s;
}
.arrow.three {
  opacity: 0.1;
  animation-delay: 1s;
}

@keyframes arrowDown {
  0% {
    bottom: 45px;
     opacity: 0;
  }
  100% {
    bottom: -5px;
   opacity: 1;
  }
}
.help{

   background: url("images/bg-help.svg") no-repeat 100% / cover;
}
.help__head,
.help__dies,
.help__form-container,
.about-me__wrapp,
.services__header,
.step-form__header,
.foot{
   display: flex;
   -webkit-justify-content: space-between;
           justify-content: space-between;
}
.help__head h2{
   max-width: 470px;
}
.help__head p{
  color: #309600;
  max-width: 570px;
}
.dies-form{
   width: 270px;
height: 148px;
background: #003D06;
border: 2px solid #309600;
border-radius: 30px 0px;
padding: 18px;
cursor: pointer;  
position: relative;  
}
.dies-form:before{
 content: "";
   position: absolute;
width: 100%;
height: 100%;
left: 10px;
top: -10px;
border: 1px solid #309600;
border-radius: 30px 0px;
}
.dies-form:hover{
   background: #309600;
}
.dies-form:hover:before{
 opacity: 0;   
}
.dies-form h3{
   color: #FFF;
}
.form-help{
width: 49%;
   
}
.help__form-container{
   margin-top: 70px;
}
.help__image{
   margin-left: 22px;
   position: relative;
   z-index: 1;
    -webkit-align-self: flex-start;
           align-self: flex-start; 
}
.help__image:before{
   content: "";
      width: 100%;
   height: 100%;
   position: absolute;
   top: -22px;
   left: -22px;
   z-index: -1;
   border: 2px solid #309600;
 border-radius: 350px 350px 0px 0px;
}
.help__image picture{
   width: 552px;
   height: 540px;
   border: 2px solid #309600;
   display: block;
   overflow: hidden;
     border-radius: 350px 350px 0px 0px;
}
.help__image picture img{
   width: 100%;
   height: 100%;
   object-fit:cover;

}
.field-form{
   margin-bottom: 10px;
}
.name-field input{
   border-radius: 20px 0px 0px 0px;
}
.field-form input,
.field-form textarea{
   width: 100%;
   height: 50px;
background: #F5FFF6;
border: 1px solid #309600;
color: rgba(28, 28, 28, .3);
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
text-indent: 20px;
outline: none;
   color: #000000;

}
.field-form textarea{
   padding-top: 12px;
   height: 133px;
   margin-bottom: 20px;
   border-radius: 0px 0px 30px 0px;
}
.button-form{
   position: relative;
   width: 174px;
   z-index: 1;
   
}
.button-form button,
.thanks-popup a{
   width: 170px;
height: 50px;
background: #309600;
border: 1px solid #309600;
border-radius: 20px 0px;
color: #FFF;
cursor: pointer;
}

.thanks-popup a{
   display: block;
   line-height: 50px;
   margin-top: 20px;
   z-index: 1;
}
.button-form button:hover,
.thanks-popup a:hover{
   background: #3DBE00;
   border-color:#3DBE00;
}
.button-form button:active,
.thanks-popup a:active{
   border-color:#003D06;
   background: #003D06;
}
.button-form:before{
   content: "";
      width: 170px;
height: 50px;
position: absolute;
   border: 1px solid #309600;
border-radius: 20px 0px;
top: -6px;
right: -3px;
z-index: -1;
}
.about-me{
   background: url("images/bg-about.png") no-repeat center center;
}
.about-me__image{
   position: relative;
z-index: 1;
   width: max-content;
   margin-top: 22px;
      max-width: 552px;
      -webkit-align-self: flex-start;
              align-self: flex-start;
}
.about-me__image:before{
   content: "";
   width: 100%;
   height: 100%;
   border: 2px solid #309600;
   position: absolute;
   bottom: 22px;
   right:22px;
   z-index: -1;
   border-radius: 350px 350px 0px 0px;
}
.about-me__image picture{
   max-width: 552px;
   height: 540px;
   display: block;
   overflow: hidden;
   border-radius: 350px 350px 0px 0px;
   overflow: hidden;
}
.about-me__image picture img{
   width: 100%;
   height: 100%;
   object-fit:cover;
}
.about-me__text{
   max-width: 570px;
}
.about-me__text p{
   margin-bottom: 20px;
}
.benefits__inner{
   margin-top: 90px;
   display: flex;
   text-align: center;
   -webkit-justify-content: space-between;
           justify-content: space-between;
}
.benefits__number{
font-family: 'Roboto', sans-serif;
   font-style: normal;
font-weight: 900;
font-size: 70px;
line-height: 62px;
text-transform: uppercase;
color: #309600;
position: relative;
   width: max-content;
   margin: auto;
}
.benefits__number:before{
   content: "";
   font-family: 'Roboto';
font-style: normal;
font-weight:700 !important;
font-size: 70px;
text-align: center;
text-transform: uppercase;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #309600; 
position: absolute;
    top: -9px;
    right: -6px;
    opacity: 0.34;
}
.about-me__title h2{
   max-width: 380px;
}
.about-me__title {
background: url("images/line-title.svg") no-repeat right center ;   
}
.services{
   background: url("images/bg-services.png") no-repeat center  80px;
}
.services__container{
   max-width: 1200px;
   margin: auto;
}
.services__header div{
   max-width: 570px;
   margin-bottom: 20px; 
}
.services__header div p{
color: #309600;
margin-bottom: 10px;
}
.service-block{
   width: 270px;
height: 324px;
background: #003D06;
border: 2px solid #309600;
border-radius: 30px 0px;
margin:15px;
padding: 20px 17px;
position: relative;
}
.services__container{
   display: flex;
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   -webkit-justify-content: center;
           justify-content: center;
}
.service-block h3,
.service-block p{
color: #FFF;
position: relative;z-index: 2;
}

.service-block a{
position: relative;
   z-index: 2;
   position: absolute;
   bottom: 15px;
   left: 20px;
   font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 27px;
color: #309600;
opacity: 0;
}
.service-block:hover{
   background: linear-gradient(180deg, #309501 0%, #003C06 80.56%);

}
.service-block:hover a{
   opacity: 1;
}
.service-block:before{
   content: "";
   position: absolute;
width: 100%;
height: 100%;
    left: calc(50% - 100%/2 + 10px);
    top: calc(50% - 100%/2 + 10px);

border: 1px solid #309600;
border-radius: 30px 0px;
}
input:focus,
textarea:focus
{
 background: #FFFFFF;
 caret-color: #309600;
}
.step-form__header{
   margin-bottom: 50px;
}
.step-form__header p{
   max-width: 570px;
   color: #309600;
}
.step-form{
   background: url("images/bg-step.jpg") no-repeat 100% / cover;
}
.soc-data{
   display: flex;
   -webkit-justify-content: center;
           justify-content: center;
      margin-bottom: 40px;
}
.step-form__social a{
   margin: 0 40px;
}
.step-form__data{
   text-align: center;
}
.email-field input{
   border-radius: 0px 0px 20px 0px;
}
.my-form {
   max-width: 370px;
   margin: auto;
   margin-bottom: 40px;
}
.my-form .button-form{
   width: 370px;
}
.my-form .button-form button,
.thanks-popup a{
   width: 370px;
   display: block;
   position: relative;
    margin: auto;   margin-top: 20px;
   
}
.title-form{
   text-align: center;
}
.my-form .button-form:before,
.thanks-popup a:before {
 content: "";
    width:370px;
    height: 50px;
    position: absolute;
    border: 1px solid #309600;
    border-radius: 20px 0px;
    top: -7px;
    right: -7px;
    z-index: -1;
    color: #FFF;
}
footer{
   background: #003D06 url(images/bg_footer.svg) no-repeat center bottom ;
border: 2px solid #309600;
border-radius: 50px 50px 0px 0px;
padding: 50px 0;

position: relative;
}
footer:before{
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: -17px;
   left: -30px;
   border: 2px solid #309600;
border-radius: 50px 50px 0px 0px;
}
.foot{
   -webkit-align-items: center;
           align-items: center;
}
.copy{
   color: #FFF;
}
.wpcf7 form.sent .wpcf7-response-output{
   display: none !important;
}
.mfp-close-btn-in .mfp-close{
   font-size: 25px;
   color: #003D06;
}