body{
    text-align: center;
    margin:0;
    padding:0;
    box-sizing:border-box;
}
header {
    
    background-image: url('images/bg-header-desktop.png');
    background-size: cover; 
    display: flex;
        justify-content: center;
    flex-direction: column;
    width: 100%;
}  
header img{
    margin:0 auto;
    margin-top:125px;
    width: 100px;
    
}  
header h1{
    color:#50575D;
    padding-top:15px;
    font-size: 45px;

}
header p{
    width:43%;
    line-height:1.6;
    margin:0 auto;
    padding:20px 10px;
    font-size:20px;
    color:#A8ACAF;
}
 .buttons{
    display:flex;
    justify-content: center;
    gap:20px;
}
 .buttons button{
    color:#fff;
    padding:10px 15px;
    border-radius:50px;
    border:none;
    font-weight:bold;
    box-shadow: 4px 4px 15px rgba(151, 43, 43, 0.2);
    cursor: pointer;
    transition: transform 0.5s ease ;

}  
.buttons button:first-child{
    background-color: #24BCA5;
}
 .buttons button:last-child{
    background-color:#6174FF;
}
 .buttons button:hover{
    transform: translateY(-3px);
}
.features{
    margin-top:60px;

}

  h2{
   font-size:30px; 
   color:#50575D;
   padding-top:10px;
}

 p{
    font-size: 18px;
    line-height:1.5;
    color:#A8ACAF;
    margin:0 auto;
    width:40%;
}
.features .feature-content{
    display:flex;
    justify-content: space-between;
    gap:60px;
    margin-top:60px;

}
.features .feature-content .img{
    flex:1;
    margin-left: -50px;
}
.features .feature-content .img img{
   display:block;
   width: 100%;
}
.features .feature-content .text{
    text-align: left;
    direction: ltr;
    margin-top: 30px;
    flex:2;
    
}
.features .feature-content .text .feature{
   width:50%;
   margin-top:50px;
}
.features .feature-content .text .feature h3{
  color:#50575D;
  line-height: 1.3;
  margin-bottom: 0;
}
.features .feature-content .text .feature p {
    width:100%;
    color: #A8ACAF;
    
}
.access{
    margin-top:90px;
}
.access .devices{
    margin-top:60px;
}
.access .devices img{
    width:50%;
    height:50%;
}
.workflow .tools{
    display:flex;
    justify-content:space-between;
    margin-top:50px;
}
.workflow .tools .tool {
    width:33%;
     flex-wrap: wrap;
}
.workflow .tools .tool p{
    width:100%;
}
.companies{
    margin:100px auto;
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
   width:80%;
}
.companies img{
    width:9%;
}
.download p {
  padding-bottom:20px;
}
footer{
    display: flex;
    justify-content: space-between;
     align-items: center;
    width:100%;
    background-color: #F5F6F8;
    margin-top: 60px;;
  
}
footer .logo{
    width: 10%;
    padding:15px 30px;
}
footer img{
    width:50px;
    
}
footer .footer-links{
    display: flex;
    gap:30px; 
    padding:15px 30px;
    
}
footer .footer-links a{
    text-decoration: none;
    color:#50575D;
    font-size: 20px;
}
footer .social {
    width:30%;
}
footer .social img{
    width:20px;
    margin-left:10px ;
}
@media (max-width:767px){
  
    
    header {
        background-image: url(/images/bg-header-mobile.png);
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .features{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
   .features  .feature-content{
    display: flex;
    flex-direction: column;
    padding: 10px;;
    }
    p,h1,h2,h3{
        width:100%;
        text-align: center;

    }
    .features .feature-content .text{
        margin:0 auto;
        width: 100%;
    }
    .workflow .tools {
        display: flex;
        flex-direction: column;
        justify-content: center;
       
    }
    .workflow .tools .tool{
        width:100%;
    }
    .companies{
        display: flex;
        flex-direction: column;
        gap:20px;
    }
    .companies img{
       width:20%;
         margin:0 auto;
        
    footer{
        flex-direction: column;
       
    }
    footer .footer-links{
    flex-direction: column;
    gap:5px;
    }
   
}