service box style : demo 164

                        
                        

                            

                                

                                    

                                        

                                            

                                                
                                            
                                            
Web Design
                                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
                                            Read More
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                
                                            
                                            
Web Development
                                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
                                            Read More
                                        
                                    
                                
                            
                        
                    

                        .serviceBox{
                            color: #999;
                            background: linear-gradient(transparent 65%, #3088E2 65%);
                            font-family: 'Kumbh Sans', sans-serif;
                            text-align: center;
                            padding: 0 15px 15px;
                            border-radius: 0 0 150px 150px;
                            box-shadow: 0 12px 7px -7px rgba(0, 0, 0, 0.2);
                        }
                        .serviceBox .service-icon{
                            color: #fff;
                            background-color: #3088E2;
                            font-size: 50px;
                            line-height: 80px;
                            height: 80px;
                            width: 85px;
                            margin: 0 auto 25px;
                            border-radius: 0 0 50px 50px;
                        }
                        .serviceBox .service-content{
                            background: #fff;
                            padding: 0 20px 20px;
                            border-radius: 15px 15px 150px 150px;
                            border-top: 15px solid #3088E2;
                            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                        }
                        .serviceBox .title{
                            color: #3088E2;
                            font-size: 17px;
                            font-weight: 600;
                            text-transform: uppercase;
                            margin: 0 0 7px;
                        }
                        .serviceBox .description{
                            font-size: 14px;
                            margin: 0 0 15px;
                        }
                        .serviceBox .read-more{
                            color: #3088E2;
                            font-size: 14px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox.orange{ background: linear-gradient(transparent 65%, #FFA005 65%); }
                        .serviceBox.orange .service-content{ border-top-color: #FFA005; }
                        .serviceBox.orange .service-icon{ background-color: #FFA005; }
                        .serviceBox.orange .title,
                        .serviceBox.orange .read-more{
                            color: #FFA005;
                        }
                        .serviceBox.pink{ background: linear-gradient(transparent 65%, #f22e52 65%); }
                        .serviceBox.pink .service-content{ border-top-color: #f22e52; }
                        .serviceBox.pink .service-icon{ background-color: #f22e52; }
                        .serviceBox.pink .title,
                        .serviceBox.pink .read-more{
                            color: #f22e52;
                        }
                        .serviceBox.green{ background: linear-gradient(transparent 65%, #00B59C 65%); }
                        .serviceBox.green .service-content{ border-top-color: #00B59C; }
                        .serviceBox.green .service-icon{ background-color: #00B59C; }
                        .serviceBox.green .title,
                        .serviceBox.green .read-more{
                            color: #00B59C;
                        }
                        .serviceBox .read-more:hover{
                            color: #999;
                            border-bottom: 1px dashed #999;
                        }
                        @media only screen and (max-width:990px) {
                            .serviceBox{ margin: 0 0 30px; }
                            .serviceBox .service-content{ padding: 0 35px 20px; }
                        }
                        @media only screen and (max-width:359px) {
                            .serviceBox .service-content{ padding: 0 20px 20px; }
                        }