:root{
    --white:#111;

}
body{
    background-color: #f1f1f1;
    color:#111;
}

.call-to-action{
    padding:50px 0px 50px 0px;
    background-color: #fff;
     border:1px solid #eee;
   height: 500px;
     margin-top:100px;
     text-align: center;
     display: flex;
     align-items: center;
     background-position:  left middle;
     background-size: cover;
    
    
}
.botton-sub{
    text-align: center;
}
.call-to-action p{
    margin:5px 0px 30px 0px;
}
.call-to-action h1{
      font-weight: 900;
      margin-bottom:20px;
}

.section-block{
    padding:80px 0px 50px 0px;
}
.section-title{
    text-align: center;
    margin-bottom: 50px;
}
.section-title h3{
    color:var(--white);
    margin-bottom: 10px;
}
.section-block{
    border-bottom:1px solid #eee;
}
.section-block-white{
   /* background-color: #ffffff;*/
    padding:50px 0px;
}
.demos .preview-box{
    text-align: center;
    margin-bottom:50px;
    border-radius: 0px;
   
   
}
.demos .preview-box .image{
      padding: 0px;
    background-color: #fff;
    border-radius: 0px;
}
.demos .preview-box img{
    box-shadow: 0 7px 24px 0 rgba(0, 0, 0, 0.08);
     
}

.demos .preview-box .info{
    padding:20px 0px 0px 0px;
}

.demos .preview-box .info h5{
     text-transform: capitalize;
     color:var(--white);
    margin-bottom:5px;
    font-size:18px;
    
 
}
.demos .demo-box .desc h6{
    text-transform: capitalize;
    color:var(--white);
}
.demos .demo-box .desc ul li{
    color:#506172;
    font-size:14px;
}
.demos .demo-box h6 ul li:hover{
    color:#506172;
}
.btn-custom i{
    margin-right:5px;
}
.footer{
   background-color:#f1f1f1; 
    padding:30px 0px;
}

.container-wp{
    max-width: 1320px;
    margin: auto;
    padding:20px 15px;
}




@media screen and (max-width:768px){

}
@media screen and (max-width:321px){
    .call-to-action h1 {
        font-size:30px;
    }
}