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

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



/*==================| Site Hero |=================*/
.site-hero{
    position: relative;
  
    width: 100%;
    height:100%;
    background: url('../image/bg_3.jpg');
    background-size: cover;    
} 


.site-hero::after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgb(0,0,0,0.6);
   opacity: 0.7;
}
.site-hero .hero-text{
   position: relative;
   top:-5em;
   color: #fff;
   padding: 10em 0;
   z-index: 10;
   animation: slideInFromLeft 3s ease-in;
}
.site-hero h1{
    font-size: 5rem;
    font-weight: bold;   
}
.site-hero p{
   font-size: 2rem;
   margin: .5em;
   padding: .5em 0;
}
.site-hero,
.bg-parallax{
    background-attachment:fixed;
}
/*---------------------------------------------------------------*/

 .showcase{
    margin-top:.2em;
    gap: .2em;
    animation: slideInFromBottom 1s ease-in;
 }
 .showcase .showcase-content{   
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:.5em;
 }


 /*================= 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;
   
}

.promotion  .promo-image img{ 
    animation: rotation 10s infinite linear;
   }
     
 /*================| 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;}
 
 
 @media only screen and (min-width:300px) {
.about{padding:0 5em;} 
.footer .footer-content{margin-top:10em;} 
 }
 @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 .about-content{
        display: grid;
        grid-template-columns:20% 60% 20%;
        gap: 5em;
       }  
     }