service box style : demo 81

                        

                            

                                

                                    

                                        

                                        
Web Design
                                        

                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.
                                        
                                    
                                
                                

                                    

                                        

                                        
Web Development
                                        

                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.
                                        
                                    
                                
                            
                        
                    

                        .serviceBox{
                            padding: 25px 30px;
                            text-align: center;
                            background: #0a2d43;
                            border-top: 3px solid #eed956;
                            border-bottom: 3px solid #eed956;
                            position: relative;
                        }
                        .serviceBox:before{
                            content: "";
                            border-top: 0 solid #eed956;
                            border-right: 0 solid transparent;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover:before{
                            border-top-width: 78px;
                            border-right-width: 78px;
                        }
                        .serviceBox:after{
                            content: "";
                            border-bottom: 0 solid #eed956;
                            border-left: 0 solid transparent;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            z-index: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover:after{
                            border-bottom-width: 78px;
                            border-left-width: 78px;
                        }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            border-radius: 20px;
                            border: 2px solid #eed956;
                            background: #0a2d43;
                            font-size: 40px;
                            color: #eed956;
                            margin-bottom: 20px;
                            position: relative;
                        }
                        .serviceBox .title{
                            font-size: 20px;
                            font-weight: 700;
                            color: #eed956;
                            letter-spacing: 1px;
                            margin: 0 0 12px 0;
                            text-transform: uppercase;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .title{ letter-spacing: 3px; }
                        .serviceBox .description{
                            font-size: 15px;
                            color: #fff;
                            letter-spacing: 1px;
                            line-height: 27px;
                            margin: 0;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }