/*----------------------------------------------------
@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

=====================================================================*/

 
/*================= Popular Menu ===================*/
.popular-menu .popular-menu-title .section-title{font-size: 1.5em;}
/*================| Promotion |================ */
.promotion{
   position: relative;
   height: 100%;
   background: url('../image/bg_1.jpg');
   background-size: cover;
   color: #fff;   
}
.promotion .promo-details  h3.subtitle{
   position: relative;
   top: 5em;
}
.promotion .promo-details  h2.title{margin-top: 3em; }

 /*================| About |================ */

.about .about-content .side-image img {
   position: relative;
   top:0;
   right: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;}

.footer{margin-top: 15em;}
.footer .footer-content{ margin-top: 15em;}
}
@media only screen and (min-width:500px) {
   .about{
      position: relative;
      top: -10em;
  }
  .about .about-content .side-image img {
     position: relative;
     top:5em;
     right:3em;
      
 }
   .footer .footer-content{margin-top: 10em;}
    }
    @media only screen and (min-width:700px) {
       .promotion .promotion-content .promo-details,
       .promo-image img { margin-top:2em;}  
       .promotion .promotion-content,
       .popular-menu .popular-menu-content
       {
         display: grid;
         grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
         gap: 2em;
     }  
     .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;
   }  

    }