/*----------------------------------------------------
@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:
01/ Site Hero 
02/ Popular Menu
03/ Promotion
04/ About
05/ contact 
06/ footer

=====================================================================*/
 
.about .about-content .side-image img {
  position: relative;
  top: 10em;
  right:5em;
  margin-bottom: 5em;
}
   
/*================| 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 |================ */
.footer{margin-top: 60em;}
.gotopbtn{
  position: fixed;
  width: 50px;
  height: 50px;
  background: #ffb03a;
  bottom: 1em;
  right: 2em;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 22px;
}
@media only screen and (min-width:300px) {
.about{padding: 5em 5em;}
.about{ margin-top:5em;} 
.footer{margin-top: 15em;}
.footer .footer-content{ margin-top: 15em;}
}
@media only screen and (min-width:500px) {
  .about{margin-top:20em;} 
  .footer .footer-content{margin-top: 10em;}
   }
   @media only screen and (min-width:700px) {
      
    .about{margin-top:10em;} 
    .about .about-content{
      display: grid;
      grid-template-columns:20% 60% 20%;
      gap: 5em;
  }  
  .footer .footer-content{
      margin-top: 10em;
      display: grid;
      grid-template-columns:40% 20% 20% 20%;
      gap: 2em;
  }  

   }