*
{
    font-family: 'Roboto';
    margin:0;
    padding:0;
}
header
{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    padding-left:10%;
    padding-right: 10%;
    margin-top:auto;
    margin-bottom:auto;
}
.heading 
{
    padding-top:3.5%;
    
    padding-left:10%;
    padding-right: 10%;
}
 h2 
{
    margin-bottom:0px;

}
h4
{
    color:darkgrey;
    font-weight: 200!important;
}
.headerDescription p
{
text-align:right;
color:#8a1d03;
font-size:25px;
font-weight: 600;
padding-top:20px;

}

.heading 
{
    text-align: center;
    background-color:#f2f2f2;
}

.grid-wrapper
{
padding-left:10%;
padding-right:10%;
padding-top:5%;
padding-bottom:5%;

background-color:#f2f2f2;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 50px 50px;

}
.image-wrapper
{
    width: 100%;
    position: relative;
    z-index:3;
    
  
   
}

.image-overlay
{
    position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  transition: .5s ease;
  background-color: #8a1d03;
   display: none;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
    
}
.hidden-elements i
{
    
    font-size:60px;
    color:white;
    border:2px solid white;
    padding:10px 25px 10px 25px;
    border-radius: 50%;  
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;

}
.hidden-text-description
{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 65%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.main-banner-image
{
width: 100%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;

}



.banner-content
{
   
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color:#fff;
    height: 210px;
    
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
   
}

.banner-description
{
    
    margin: auto;
    padding-left:40px;
    
}
.banner-logo 
{
    
    margin:auto;
    
}

.firstDescription
{
    color:#000;
    font-size:20px;
}


.foot
{
    padding-left:10%;
    padding-right: 10%;
    padding-bottom:3.5%;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    background-color:#f2f2f2;
}

.footThree
{
    text-align: right;
}
.footTwo
{
    text-align: center;
}



@media(max-width: 1300px) 
{
    .grid-wrapper 
    {
        grid-template-columns: repeat(1,1fr);
    }
   
}

@media(max-width: 600px) 
{
    header 
    {
        grid-template-columns: repeat(1,1fr);
        padding-left:5%;
        padding-right:5%;
        padding-bottom:20px;
    }
    .grid-wrapper
    {
        padding-left:5%;
        padding-right:5%;
    }
    .heading 
    {
        padding-left:5%;
        padding-right:5%;
       
    }
    .logo
{
    text-align: center;
}
.headerDescription p
{
    text-align: center;
}
h2
{
    padding-top:25px;
    padding-bottom:25px;
}
span
{
    font-size:15px!important;
}
.foot 
{
    grid-template-columns: repeat(1,1fr);
}
.footOne 
{
    text-align: center;
    padding-bottom:15px;
}
.footTwo
{
    text-align: center;
    padding-bottom:15px;
}
.footThree
{
    text-align: center;
    padding-bottom:15px;
}
#unique 
{
    width:150px;
}
.hidden-text-description
{
top:70%;
}
}

@media (max-width:450px)
{
    .banner-content 
    {
        padding-top:20px;
        padding-bottom :40px;
    }
    #unique2 
    {
        width:150px;
    }
}