/*----------------------------------------------------
@File: Default Styles
@Author: Vuyani Joshua Matumbu
Author E-mail: da_vuks@yahoo.com / vj@mkholoempire.co.za

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
---------------------------------------------------- */
/*=====================================================================
@Template Name: Ranseck
 

@Default Styles

Table of Content:
04/ About
05/ contact 
06/ footer

=====================================================================*/
 .about{
    margin-top: 5em;
 }
.about .about-content .side-image img {
   position: relative;
   top: 0em;
   right:5em;
   margin-bottom: 1em;
}
    
/*================| Contact |================ */
.contact{position: relative;  }
.contact .container{
   position: absolute;
   top: -2em;
   left: 0;
   right: 0;
}
.contact .contact-card{
   background: #fff;   
   padding: 5em 2em;
   z-index: 100;
}
.contact .contact-card .contact-details .section-title{
   margin-top: -1.5em;
   font-size: 1.5rem;
   padding: 1em 0;
}
.contact .contact-card .contact-form{ margin-top:-2em;}
.contact .contact-card .contact-form .form-control{margin:2em 0;}

/*================| Footer |================ */
 @media only screen and (min-width:300px) {
.about{padding: 5em 5em;}
 
}
@media only screen and (min-width:500px) {
   .about{
      position: relative;
      top: -15em;
  }
  .about .about-content .side-image img {
     position: relative;
     top:5em;
     right:3em;
      
 }
    }
    @media only screen and (min-width:700px) {
     .about .about-content{
       display: grid;
       grid-template-columns:20% 60% 20%;
       gap: 5em;
   }  
   .contact{
      position: relative;
      bottom: 10em;
   }
   .footer{
     
       right: 0;
       left: 0;
      bottom: 100;
      z-index: -1;
      height: 100%;
   }
}