.toggleBg{
    font-family: 'Work Sans', sans-serif;
}
.header{
    background-color: #F3C6BD;
    padding: 30px 0;

}
.container{
    max-width: 1140px;
    margin: 0 auto;

}
.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.logo{
    display: flex;
    align-items: center;

}
.logo>div:first-child{
    margin-right: 15px;
}

.logo-bold{
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    color: black;
    
    
    
}
.logo-regular{
    font-weight: normal;
    font-size: 18px;
    line-height: 25px;
    color: rgb(43, 41, 45, 0, 6);

}

.header-nav{
    display: flex;
    align-items: center;
    
}
.header-li{
    display: inline-block;

}
.header-li:not(:last-child){
    margin-right: 20px;
}
.header-li>a{
    font-size: 18px;
    line-height: 25px;
    color: #2B292D;
    text-decoration: none;


}
.header-li>a:hover{
    font-weight: bold;

}
.header-nav>div{
    margin-left: 75px;
}
.button{
    border: none;
    font-weight: bold;
    font-size: 18px;
    line-height: 13px;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #3040C4;
    padding: 17px 28px;
    border-radius: 2px;
    cursor: pointer;

}
.button:hover{
    background: white;
    color: #3040C4 ;
    transition: 1s;
}
.check{
    width: 30px;
    height: 2px;
    background: black;
    transition: 500ms linear;

}

.check:not(:last-of-type){
    margin-bottom: 4px;
}

.menu{
    display: flex;
    align-items: center;
}

.checkbox, .checkbox-wrapper{
    display: none;
}

/* блок Build stunning */
.header-wrapper{
    display: flex;
    position: relative;
    padding-bottom: 100px;
    
}
.header-wrapper >div:first-of-type{
    max-width: 750px;
    z-index: 1;
}
.header-wrapper >div:last-of-type{
    position: absolute;
    top:0;
    right: -70px;
    z-index: 0;
}


.title{
    font-weight: bold;
    font-size: 80px;
    line-height: 78px;
    letter-spacing: -0.5px;
    margin-bottom: 35px;
    color: #2B292D;
}
.header-text{
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    color: #2B292D;
    max-width: 450px;
    margin-bottom: 60px;
}
.button-white{
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 13px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #FFFFFF;
    background-blend-mode: overlay, normal;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    border: none;
    padding: 17px 28px;
    cursor: pointer;
    color: #3040C4;
}

 /* .button-white{
      background: white;
     color: #3040C4;  
    
}  */
    






/* блок с двумя текстами */
.section{
    background: #F4F5F7;
    padding: 70px 0;
       
}
.container-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    
    
    
}
.main-title{
    display: flex;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 32px;
    padding-bottom: 30px;
    color: #2B292D;   
}



.text1{
    text-align:start;
    font-style: normal;
    font-size: 22px;
    line-height: 32px;
    color: #2B292D;
    
    
       
     
}
.text1:last-of-type{
    padding-left: 50px;
}

/* блок Easily find leads*/
.Easily-find{
    position: relative;
}
.container-Easily-find{
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
}
.green-text{
    font-weight: bold;
    font-size: 22px;
    line-height: 34px;
    color: #009B4D;
    padding-bottom: 25px;
}



.img-inspace{
    max-width: 685px;
    position: absolute;
    right: 30px;
    top:0;
    
    
}
 .img-eyeface{
     max-width: 165px;
     position: absolute;
     left: 0px;
     bottom: 20%;
 }

 .about-text__container{
    max-width: 420px;
    
   
}
.about-text > div{
    max-width: 420px;
    display: flex;
    justify-content: space-between;
    
}

.about-textposition{
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 26px;
    color: #2B292D;

}
.about-textposition:hover{
cursor: pointer;
color: #3142C6;
}

.text-above{
    font-weight: normal;
    font-size: 18px;
    line-height: 26px;
    color: #2B292D;
}
.text-engage-develop{
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 26px;
    margin-top: 20px;
    color: #2B292D;

}
.text-engage-develop:hover{
    cursor: pointer;
    color: #3142C6;
}

.about-text >p{
    margin-top: 20px;
    display: none;
}
.active{
    transform: rotate(90deg);
    transition: 1s;
}
.toggleBg{
    background-color: #3141C5;
}
.toggleColor{
    color: white;
}

  /* блок Manage conversation */

  .manage{
      padding: 100px 0;
  }
  .manage-flex{
    display: flex;
    align-items: center;
    justify-content: space-between; 
  }
  .orange-text{
    font-weight: bold;
    font-size: 22px;
    line-height: 34px;
    color: #F1592B;
    padding-bottom: 25px;
  }
  .citata{
      max-width: 460px;
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    color: #2B292D;
    padding-bottom: 25px;
    padding-top: 75px;
  }
  .citata-black{
      font-weight: bold;
  }
  .profileimg-flex{
      display: flex;
      align-items: center;
      justify-content:end;
  }

/* блок built for busy */
.busy{
    padding: 100px 0 ; 
    
}
 .busy-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;

} 
.text-mini{
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 34px;
    margin-bottom: 25px;
}
.text-mini__blue{
    color: #0189D1;
}
.title-built{
    
    font-weight: bold;
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -0.5px;
    max-width: 462px;
    margin-bottom: 30px;
    color: #2B292D;
}
.little-text{
    font-size: 24px;
    line-height: 34px;
    color: #2B292D;
    max-width: 461px;
    margin-bottom: 40px;
}
.info{
    padding: 40px 0 100px;


}
.info-flex{
    display:flex;
    justify-content: space-between;
}
.info-p{
    max-width: 360px;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;

}
.info-p>span{
    font-weight: bold;
}
.info-link{
    font-size: 18px;
    line-height: 24px;
    text-decoration: underline;
    color: #3040C4;
}





/* блок Engage Visitors  */
.section-Engage{
    background: #a8dde9;
    padding: 100px, 0;
}


.text-posit{
    text-align: center;
    
}
.engage{
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 34px;
    padding-top: 110px;
     color: #2B292D;

}
.understand{
    font-style: normal;
    font-weight: bold;
    font-size: 56px;
    line-height: 56px;
    color: #2B292D;

}
.early{
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    color: #2B292D;
}
.button2{
    text-align: center;
    padding-top: 35px;

}
.button-get{
    border: none;
    font-weight: bold;
    font-size: 18px;
    line-height: 13px;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #3040C4;
    padding: 17px 28px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 50px;
    
}
.button-get:hover{
    background: white;
    color: #3040C4 ;
    transition: 1s;
}
.button-learn{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #FFFFFF;
    border-radius: 2px;
    border: none;
    font-weight: bold;
    font-size: 18px;
    line-height: 13px;
    padding: 17px 28px;
    cursor: pointer;
    margin-bottom: 50px;
}
.button-learn:hover{
    background-color: black;
    color: #FFFFFF;
    transition: 1s;
}
.position{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
    

}
.bg{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #FFFFFF;
    color: #3141C5;
    transition: 1s;
    text-align: center;
    margin-bottom: 100px;
    padding: 22px 62px;
    
       
}
.bg:hover{
    background: #3141C5 ;    
}
.bg:hover>p{
    color: #000000;
}

/* блок Trusted by the world’s */

.container-carusel{
    position: relative;
    margin-bottom: 170px;
}
.carusel{
    margin: 0 auto;
    margin-top: 100px;
    text-align: center;
    
    
}
 .carusel-title{
    
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    color: #3142C6;
    padding-bottom: 30px;
   
} 

 .carusel-text{
    max-width: 750px;
    margin: 0 auto;
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    color: #2B292D;
    padding-bottom: 35px;
    

} 
 .carusel-littletext{
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #2B292D;
    padding-bottom: 10px;
    
} 
 .carusel-second-text{
    font-size: 12px;
    opacity: .35;
    padding-bottom: 110px;
} 


.flyball{
    position: absolute;
    top: 140px;
    right: -120px;
    

}
.slick-dots li button:before {
    font-size: 20px;
    
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #3142C5;
}





/*  блок We're hiring*/
.section-hiring{
    margin-bottom: 110px;
}

.text-position{
    max-width: 555px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}
.title-hiring{
    font-weight: bold;
    font-size: 56px;
    line-height: 56px;
    text-align: center;
    letter-spacing: -0.5px;
    padding-bottom: 20px;
    padding-top: 110px;
    color: #2B292D;
}
.text-under-title{
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    padding-bottom: 30px;
    color: #2B292D;
}
.button-position{
    margin: 0 auto;
    align-items: center;
    justify-content: space-between; 
    max-width: 250px;
    
}
.button{
    border: none;
    font-weight: bold;
    font-size: 18px;
    line-height: 13px;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 1e-05) 100%), #3040C4;
    
    border-radius: 2px;
    cursor: pointer;
    

}
.button:hover{
    background: white;
    color: #3040C4 ;
    transition: 1s;
}




.about-item__container{
    max-width: 750px;
    margin: 0 auto;
   
}
.about-items > div{
    display: flex;
    justify-content: space-between;
    
}
.about-items{
    border: 1px solid gray;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 20px;
    

}
.about-items >p{
    margin-top: 20px;
    display: none;
}
.active{
    transform: rotate(90deg);
    transition: 1s;
}
.toggleBg{
    background-color: #3141C5;
}
.toggleColor{
    color: white;
}

/* блок All Surfaces Covered */

.content-texts{
    text-align: center;
    margin-top: 90px; 
    
}
.main-text{
    font-style: normal;
    font-weight: bold;
    font-size: 56px;
    line-height: 66px;
    color: #000000;
}
.sec-text{
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    color: #172342;
    margin-bottom: 100px;
    max-width: 550px;
    margin: 10px auto;


}
.wrapper3{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.pic:nth-child(3), .pic:nth-child(4){
    grid-row: span 2;
}
.pic> img{
    width: 100%;
}

 /* блок Start your free trial */
 .section-free{
    background: #F4F5F7;
    padding: 73px 0;
 }
 .free-flex{
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .free-title{
    font-weight: bold;
    font-size: 40px;
    line-height: 40px;
   letter-spacing: -0.25px;
    color: #2B292D;
    margin-bottom: 10px;
 }
 .free-text{
    font-weight: normal;
    font-size: 22px;
    line-height: 32px;
    color: #2B292D;
    max-width: 550px;
    margin-bottom: 25px;
    
 }
 .free-input{
     width: 385px;
     padding: 13px 0 15px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(43, 41, 45, 0.2);
    box-sizing: border-box;
    border-radius: 2px;
    margin-right: 10px;
    font-size: 18px;
 }
 .free-input:focus{
     outline: none;
 }
 .free-input::placeholder{
    font-size: 18px;
    line-height: 13px;
    color: #2B292D;
    
 }
 .free-little-text{
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: rgba(43, 41, 45, 0.6);
    margin-top: 10px;
 }
 .animation-wwindow{
    animation-name: img-window;
    animation-duration: 3s;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 }

 /* подвал,footer */

 .footer{
     padding: 140px;
 }
 .footer-container{
     
     position: relative;
 }
 .footer-text{
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 .logofoot-container{
    display: flex;
    align-items: center;  
 }

 .footer-logo-regular{
     max-width: 360px;
    font-weight: normal;
    font-size: 18px;
    line-height: 26px;
    padding-top: 30px;
    
    color: rgba(43, 41, 45, 0.6);
 }
 .footer-logo-bold{ 
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
    color: #2B292D;
    padding-bottom: 20px;
 }
  .appstore{
     position: absolute;
     top:90%;
     left:0;
     padding-bottom: 60px;
 }
 .googleplay{
        position: absolute;
        top:90%;
        left:15%;
}
.down-part{
     margin-top: 60px;
        
     
}
 .down-footer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 40px;

 }
 .footer-little-text{
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    padding-top: 15px;
    padding-right: 750px;
    color: rgba(43, 41, 45, 0.6);
}

.fa-twitter{
    bottom: 40px;
    right: 150px;
    mix-blend-mode: normal;
    opacity: 0.6;
 }
.fa-facebook-square{
    bottom: 40px;
    right: 120px;
    mix-blend-mode: normal;
    opacity: 0.6;
 }
.fa-linkedin-in{
    bottom: 40px;
    right: 90px;
    mix-blend-mode: normal;
    opacity: 0.6;
}
    



 @keyframes img-window{
     0%{
         top:0;
     }
     25%{
         top:-25px;
     }
     50%{
         top:-50px;
     }
     75%{
         top:-25px;
     }
     100%{
         top:0;
     }
 }

/* бургерное меню */

@media (max-width: 1090px){
    .checkbox, .checkbox-wrapper{
        display: block;
    }

    .header-nav{
        display:none;
    }

    .menu{
        position: relative
    }

    .checkbox-wrapper{
        z-index: 2;
    }

    .checkbox{
        position: absolute;
        z-index: 3;
        display: block;
        width: 30px;
        height: 30px;
        opacity: 0;
    }

    .checkbox:checked ~ .checkbox-wrapper>.check:first-of-type{
       transform: rotate(45deg) translate(3px, 3px)
    }

    .checkbox:checked ~ .checkbox-wrapper>.check:last-of-type{
        transform: rotate(-45deg) translate(5px, -6px)
    }

    .checkbox:checked ~ .checkbox-wrapper>.check:nth-child(2){
        opacity: 0;
    }

    .checkbox:checked ~ .header-nav{
        display: block;
        position: fixed;
        background: beige;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .header-nav{
        text-align: center;
    }

    .header-li{
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
        
    }

    ul{
        margin-top: 10%;
    }
}










@media (max-width: 1140px){
    .container{
        max-width: 950px;
    }

    .header{
        padding: 15px 0;
        
    }
    .busy{
        padding: 80px 0;
    }
    .info-p{
        max-width: 320px;
    }
}

/* для планшетов */
@media (max-width: 1000px){
    .container{
        max-width: 850px;
    }
    .busy-flex{
        flex-direction: column;
        text-align: center;
    }
    .busy-flex > div:first-of-type{
        margin-bottom: 30px;
    }
    .info-flex{
        flex-direction: column-reverse;
        align-items: center;

    }
    .info-flex > div:not(:first-of-type){
        margin-bottom: 30px;
    }
    .header-wrapper{
        display: block;
        position: static;
        padding-bottom: 0;
    }
    .header-wrapper >div:last-of-type{
        position: static;
        margin-top: 40px;
    }
    .header-wrapper >div:last-of-type img{
        width: 100%;
    }

    /* footer */
    .footer-logo-regular{
        font-size: 24px;
        padding-bottom: 40px
    }
    .footer-little-text{
        font-size: 25px;
    }
    .fa{
        font-size: 25px;
    }
    .img-inspace{
        position: relative;
        margin-left: 150px;
    }
    .about-text__container {
        margin-left: 200px;
    }
    .position {
        grid-template-columns: repeat(2, 1fr);
    }
    .flyball{
    position: relative;
    margin-left: 200px;
        
    }
    .manage-flex{
        flex-direction: column;
    }

    
}

/* для мобильных */
    @media(max-width:550px){
        .container{
            max-width: 450px;
            
        }
        .busy{
            padding: 50px 0;
        }
        .title-built{
            font-size: 48px;
            margin-bottom: 20px;
        }
        .busy img{
            width: 100%;
        }
        .info-p{
            max-width: 100%;
        }
        .title{
            line-height: 1;
        }
        .header-text{
            font-size: 40px;
        }
        .button-container{
            margin-left: 70px;
        }

        .manage-flex{
            flex-direction: column;
        }

        .title-hiring{
            padding-top: 150px;
        }
        .little-text{
            font-size: 30px;
        }
        .citata{
            font-size: 30px;
            padding-bottom: 45px;
        }
        .carusel-littletext{
            font-size: 36px;
        }
        .carusel-second-text{
            font-size: 30px;
        }

        .slick-dots li.slick-active button:before {
            font-size: 15px;
        }
        .slick-dots li button:before {
            font-size: 15px;
            
        }
        .flyball{
            position: relative;
        }
        .line-hr{
            margin: 0;
        }

        .position{
            flex-direction: column;
            padding-bottom: 20px;
            grid-template-columns: repeat(1, 1fr);
        }
        .wrapper3 {
            
            grid-template-rows: repeat(1, 1fr);
            grid-template-columns: repeat(1, 1fr);
            
        }
        .about-text__container {
            margin-left: 50px;
        }

        .free-flex{
            flex-direction: column;
        }
        .free-little-text{
            font-size: 24px;
            margin-top: 20px;
        }

        .footer-logo-regular{
            margin-bottom: 120px;
            line-height: 50px;
            padding-right: 50px;
        }
        .footer-logo-bold{
            font-size: 50px;
            padding-bottom: 50px;

        }
        .footer-text {
            flex-direction: column;
        }
            .appstore{
            margin-top: 120px;
        }
        .googleplay{
            margin-top: 190px;
            left: 5px;
        }
        .modal-text{
            font-size: 25px;
        }
        .img-inspace{
            position: relative;
            z-index: 3;
            display: none;
        }
        


    }
    /* для 480 */
    @media(max-width:480px){
        .container{
            max-width: 430px;
            
        }
        .busy{
            padding: 70px;
            width: 430px;
        }
        .text-mini__blue{
            font-size: 50px; 
            padding-bottom: 15px;
        }
        .little-text{
            font-size: 40px;
            
        }
        .button{
            font-size: 30px;
            line-height: 25px;
            margin-bottom: 30px;
        }
        .info-p{
            width: 300px;
            font-size: 35px;
        }
        .info-link{
            font-size: 20px;
            line-height: 45px;
        }
        .title{
            font-size: 50px;
            line-height: 1;
            
        }
        .button-white{
            font-size: 30px;
            line-height: 25px;
            
        }
        .header-wrapper{
            margin-left: 30px;
        }

        .img-eyeface {
            position: relative;
            
            bottom: 120px;
        }
        
        
    
    }
    /* для 360 */
    @media(max-width:360px){
        .container{
            max-width: 290px;
            
        }
        .busy{
            padding: 180px;
            width: 350px;
        }
        .busy img{
            width:120%
        }
        .text-mini{
            line-height: 70px;
        }
        .info-flex{
            margin-left: 350px; 
        }
        .title{
            font-size: 40px;
            line-height: 1;
        }
        .button{
            font-size: 30px;
        }
        .header-wrapper{
            margin-left: 50px;
        }
        .button-container{
            margin-left: 20px;
        }
        
    }
    /* для 320 */
    @media(max-width:320px){
        .container{
            max-width: 250px;
            
        }
        .text-mini__blue{
            font-size: 60px;
        }
        .title-built{
            font-size: 70px;
            margin-bottom: 60px;
        }
        .little-text{
            font-size: 60px;
            line-height: 80px;
        }
        .button{
            font-size: 30px;
            line-height: 60px;
            margin-bottom: 30px;
        }
        .busy img{
            width: 140%;
        }
        .info-p{
            width: 370px;
            font-size: 55px;
            line-height: 60px;
        }
        .info-link{
            font-size: 50px;
            line-height: 65px;
        }
        .header-wrapper{
            margin-left: 20px;
        }
        .button-white{
            font-size: 30px;
            line-height: 60px;
        }
        .button-container{
            margin-left: 0px;
        }
           
        
        
        
    }