/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16 Sep, 2020, 11:34:17 PM
    Author     : PARAG PAITHANKAR
*/

.banner-area {
    background: rgba(0, 0, 0, 0) url(../img/about/mate-about.png) no-repeat scroll left center / cover;
    position: relative;
    width: 100%;
    z-index: 1;
}

.banner-content {
    padding: 112px 0 193px;

}

/*  Feature Section  */

.feature-title {
    padding-right: 30px;
}
.feature-title h3 {
    text-transform: uppercase;
    font-size: 25px;
}
.feature-title h3:after {
    content: '';
    display: block;
    width: 90px;
    border-top: 1px solid #5c8750;
    margin: 15px 0;
}
.feature-block {
    position: relative;
    border: 1px solid #ddd;
    height: 216px;
    text-align: center;
}
.feature-block .feature-block-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0;
    opacity: 0;
    background-color: black;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 15px 45px 0px;
    z-index: 1;
}
.feature-block:hover .feature-block-overlay {
    opacity: 1;
}
.feature-block-item {
    padding-top: 55px;
}
.feature-block-item .fa {
    font-size: 50px;
    color: #5c8750;
}
.feature-block-item h5 {
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 30px;
}
.feature-block-item p {
    position: absolute;
    opacity: 0;
    font-size: 12px;
}
.feature-block:hover .feature-block-item h5,
.feature-block:hover .feature-block-item p {
    position: absolute;
    z-index: 2222;
    opacity: 1;
    color: #333;
    color: #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.feature-block:hover .feature-block-item h5 {
    top: 40px;
}
.feature-block:hover .feature-block-item p {
    top: 70px;
    padding: 0 10px;
}

#feature{
    padding: 100px;
}
.section .row{
    margin-top: 7%;
    margin-bottom: 10%;
}
.section .row .col-md-6{
    background: #f5f5f5;
    margin-right: -2%;
    padding: 5%;
}
.section h3{
    color: #222;
}
.section p{
    margin-top: 10%;
    color: #545b62;
}
.section img
{
    width: 100%;
}
.ceo {
    padding: 15px;
    margin-bottom: 30px;
}


/* media query*/
@media screen and (max-width:450px) and (min-width:320px){
     
     .ceo {
        padding: 10px;
        width: 80%;
        height: auto;
        margin-bottom: 20px;
        position: relative;
        left: 10%;
     }
     .ceo h5,
     .ceo h4,
     .ceo p {
        text-align: center;
        text-shadow: 2px 2px 4px #000;
        font-style: italic;
     }
     

}