@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300');
 body {
     margin:0;
     padding:0;
     font-family:'Roboto',sans-serif;
     font-weight:400 
}
 .clear{
     clear:both
}
 .header {
     background:#fff;
}
 .container {
     max-width:1200px;
     margin:0 auto 
}
 .pageContainer{
     margin-top:10px;
     padding:10px;
     min-height:300px;
}
 .rightContainer{
     margin-top:10px;
     float:right;
     width:300px;
}
 .pageHeading {
     background-color: #297dc3; 
     margin-bottom:20px; 
     padding:40px; 
     font-size: 24px; 
     color:#fff;
}
.clients{
    
     border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 50px 0;
}
 .date{
     font-size:10px;
     padding:0px 0px 5px;
     float:left;
     width:100%;
}
 .navigation{
     margin:0px;
    padding:0px;
     float:right
}
 .navigation li{
     list-style:none;
     float:left
}
 .navigation li a{
     background: #ffffff;
     background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
     background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%);
     background: linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 );
     padding:40px 30px;
     display:block;
     text-decoration:none;
     color:#262626;
     border-left:1px solid #fff;
     border-right:1px solid #ccc;
}
 .navigation li a:hover{
     background: #4e5152;
     background: -moz-linear-gradient(top, #4e5152 0%, #6b6b6b 100%);
     background: -webkit-linear-gradient(top, #4e5152 0%,#6b6b6b 100%);
     background: linear-gradient(to bottom, #4e5152 0%,#6b6b6b 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e5152', endColorstr='#6b6b6b',GradientType=0 );
     color:#fff 
}
 .logo {
     margin:22px 0 0;
     float:left;
}
 .logo img{
     width:240px;
}
 .banner{
     background:url("../../images/banner.jpg");
     background-position:center;
     background-size:cover;
     text-align:center;
     padding:60px 0px;
         margin:20px 0 ;
         color: #fff;
         text-align: center;
         min-height: 300px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         position: relative

}
.banner .container{ z-index: 99}
.banner:after{
        content: '';
    position: absolute;
    background: #0009;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
        
    
}
 .banner h5{
    color:#999;
     font-size:20px;
}
.banner h3{
        font-size: 30px;
    font-weight: bold;
   
}
.banner h5{
   font-size: 16px;
   color: #fff;
   width:70%;
   margin:30px auto;
   line-height: 1.5
}
 .banner h4{
    color:#fff;
     font-size:40px;
     font-weight:bold;
     max-width: 600px;
     margin: 20px auto
}


.banner svg path{
    fill:#fff
}
 .service_container h2{
     font-weight:normal;
     font-size:24px;
     text-align:center
}
 .green_button{
     text-decoration:none;
     padding:20px 50px;
     display:inline-block;
     color:#fff;
     background: #fc0008;
     margin:10px 0px;
     border-radius: 3px
     
}
.aboutusSection{
    text-align: center
}
.aboutusSection h2{
    font-size: 30px;
    text-transform: uppercase;
    margin: 35px 0 0;
}
.aboutusSection p{
margin: 30px auto 50px;
    font-size: 18px;
    line-height: 1.5;
    color: #868484;
    max-width: 80%;
}
.serviceSection .col-lg-6{
    float: left;
    width:50%;
    background:url("../../images/our-franchisee.jpg");
    text-align: center;
    min-height: 300px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-size:cover!important
}
.serviceSection .service-2{
    background:url("../../images/our-stores.jpg");

}
.serviceSection h2{
  font-size: 39px;
    text-transform: unset;
    margin: 10px 0;
    font-weight: 300;
}
.serviceSection p{
        font-size: 18px;
    text-transform: unset;
    opacity: .5;
}
.serviceSection .col-lg-6 a{
    position: absolute;
    background:#000;
    opacity: .5;
    color: #fff;
    font-size: 22px;
    padding: 20px;
    left: 0;
    bottom: 0;
        width:100%
}
.serviceSection .col-lg-6 a:hover{
   background: #fc0008;
   color: #fff;
   opacity: 1
}
 .service1{
    float:left;
     background: #ffffff;
     background: -moz-linear-gradient(left, #ffffff 0%, #f2f3f2 100%);
     background: -webkit-linear-gradient(left, #ffffff 0%,#f2f3f2 100%);
     background: linear-gradient(to right, #ffffff 0%,#f2f3f2 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f3f2',GradientType=1 );
     width:25%;
     text-align:center;
     padding:15px;
     box-sizing:border-box;
     border-bottom:1px solid #ccc 
}
 .service1 p{
     font-size:14px;
     font-weight:normal;
     color:#7f7a7a;
     min-height:50px
}
 .service1 img{
     width:100px;
}
 .wedget2{
     clear:both;
     text-align:center;
     margin:30px 0;
     padding:50px 0
}
 .wedget2 h2{
     color:#dc3b2d;
     font-size:30px;
     border-bottom:1px solid #ccc;
     font-weight:normal;
     padding-bottom:20px
}
 .wedget2 p{
     color:#858181;
     font-size:14px;
    font-weight:normal 
}
 .btn_newsletter{
     background: #e73c2d;
     background: -moz-linear-gradient(top, #e73c2d 0%, #d83b2d 100%);
     background: -webkit-linear-gradient(top, #e73c2d 0%,#d83b2d 100%);
     background: linear-gradient(to bottom, #e73c2d 0%,#d83b2d 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73c2d', endColorstr='#d83b2d',GradientType=0 );
     padding:10px 60px;
     color:#fff;
     font-size:18px;
     border-bottom:4px solid #ba0e08;
     border-radius:5px;
     margin:30px 0 0;
     display:inline-block;
     text-decoration:none 
}
 .span3{
     background-position: center;
     float:left;
    width:30%;
     border-radius:5px;
     margin:10px;
     position:relative;
     overflow:auto;
    min-height: 183px;
     border:1px solid #ddd
}
 .service_container h2{
     font-weight:normal;
     font-size:24px;
     text-align:center
}
 .read_more{
    display:none;
    background-color:rgba(0, 0, 0, 0.5);
     position:absolute;
     height:100%;
     width:100%;
     top:0;
     text-align:center
}
 .read_more a{
     background: #e73c2d;
     background: -moz-linear-gradient(top, #e73c2d 0%, #d83b2d 100%);
     background: -webkit-linear-gradient(top, #e73c2d 0%,#d83b2d 100%);
     background: linear-gradient(to bottom, #e73c2d 0%,#d83b2d 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73c2d', endColorstr='#d83b2d',GradientType=0 );
     padding:10px 30px;
     color:#fff;
     font-size:18px;
     border-bottom:4px solid #ba0e08;
     border-radius:5px;
     margin:60px 0 0;
     display:inline-block;
     text-decoration:none 
}
 .span3:hover .read_more{
    display:Block;
}
 .footer{
     background-position: center;
     background-size:auto 200px;
     margin-top:16px;
     border-top: dotted #ccc 1px;
     background: -moz-linear-gradient(top, #fff 0%, #ededed 100%);
     background: -webkit-linear-gradient(top, #fff 0%,#ededed 100%);
     background: linear-gradient(to bottom, #fff 0%,#ededed 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#ededed',GradientType=0 );
     text-align:center;
     color:#6e6e6e;
     padding:5px 0;
     line-height:26px;
}
 .copyright{
     color:#747474;
     font-size:14px;
     background:#373737;
     padding:10px 0;
     text-align:center
}
 .phoneMob {
     display:none;
}
 .topHeader{
     text-align:right;
     border-bottom: 1px solid #ededed;
     padding: 10px 0;
}
 .topHeader a{
     color: #000;
     font-size: 14px 
}
 .topHeader img{
     margin-right:8px;
     position: relative;
     top: 3px;
}
 .phone {
     margin:20px 10px 10px;
     font-size:16px;
     text-decoration: none;
     color:#666;
}
 .phone img{
     width:17px 
}
.productSection a{
   display: block;
    width: 50%;
    min-height: 150px;
    text-align: center;
    border: 1px solid #ededed;
    float: left;
    font-size: 20px;
    padding: 62px 0 0;
    text-transform: capitalize;
    color:#000
}

    .footerContact{
        background-color:#297dc3;
        padding:20px;
        margin-bottom:20px;
        color:#fff;
    }
    .footerLink ul{
        list-style-image: url('<?php echo $hpUrl; ?>images/fatDash.svg');
        padding-left:20px;
    }

    .footerLink ul li{
    }

.productSection a:hover{background: #1178b7; color: #fff; border-color: #1178b7}
@media only screen and (max-width: 768px) {
  .productSection a{width:100%;margin:5px;min-height: 94px;    padding: 33px 0 0; }
  .banner h5{ width:85%}
}