/*----------------------------------------------------
@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: Joel Santana
 

@Default Styles

Table of Content:
01/ Variables 
02/ Font and Typography
03/ Font Weights
04/ Font margin bottom 
05/ Z-index
06/ Opacity 
07/ base
08/ Buttons & background
09/ Title
10/ Flex
11/ Grids
12/ Margins
13/ Padding
14/ Animation
=====================================================================*/

/*=================| Variables |===============================*/

:root{
    --primary-color:#fac805;
    --gray-color:#f3f4f6;
    --white-color:#ffff;
    --red:#ca0a00;
    --black:black;
    --dark-gray:#686868;
    --dark-color:#1d242d;


    /*==================== Font and Typography ====================*/
    --body-font:'Poppins', sans-serif;
    --font-family-sans-serif: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
     --font-famiily-roboto:"Roboto", sans-serif;
    --bigger-font-size:clamp(1rem, .5rem + 10vw, 4rem );
    --h1-font-size:clamp(1rem, .5rem + 10vw, 4rem );
    --h2-font-size:2.6rem;
    --h3-font-size:1.5rem;
    --font-size-normal:1.2rem;
    --font-size-small:.938rem;
    --font-size-smaller:.75rem;
    
    /*==================== Font weight ====================*/
    --font-small:400;
    --font-meduim:500;
    --font-semi-bold:600;
    --font-extra-bold:800;
    --font-bolder: bolder;
    
    
    /*==================== Font margin bottom ====================*/
    --mb-1:.5rem;
    --mb-2:1rem;
    --mb-3:1.5rem;
    --mb-4:2rem;
    --mb-5:2.5rem;
    --mb-6:3rem;
    
    /*==================== Z-index ====================*/
    --z-low:1;
    --z-meduim:5;
    --z-higher:10;
    --z-highest:999;
    
    /*=================| Opacity |=====================n */
    --op-01:0.1;
    --op-02:0.2;
    --op-03:0.3;
    --op-04:0.4;
    --op-05:0.5;
    --op-06:0.6;
    --op-07:0.7;
    --op-08:0.8;
    --op-09:0.9;
    --op-10:1;
      
}

/*==================== base ====================*/
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;  
}

ul{list-style: none;}
a{text-decoration: none;
color: #111;
}
a:hover{
  text-decoration: none;
  color: #111;
   
  -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
html{scroll-behavior: smooth;}
body{
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-normal);
   max-height: 100vh;
   color: var(--black);
   line-height: 1.5;
   overflow-x: hidden;

}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; }
    @media (min-width: 576px) {
      .container {
        max-width: 540px;
     } 
    }
    @media (min-width: 768px) {
      .container {
        max-width: 720px;
     }
     }
    @media (min-width: 992px) {
      .container {
        max-width: 960px;
     }
     }
    @media (min-width: 1200px) {
      .container {
        max-width:1200px;
     }
     }
  
  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; }
    .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px; }
        .offset-1 {
            margin-left: 8.33333%; }      
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--mb-1)}
  
  p {
    margin-top: 0;
    margin-bottom: var(--mb-1);
    font-size: var(--font-size-normal)
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }
 
span{
  color: var(--primary-color);
}
.btn-primary{   
  position: relative;
  background-color: var(--white-color);
  padding: 1em;
  border-radius:.5em;
  border: none;
  color: black;
  z-index: 3;
}




.btn-primary:hover{
  background-color: var(--gray-color);
  cursor: pointer;
  
}
.active{
  color: var(--dark-gray);
}
 

/*=================| Inputs |=====================n */
select{ 
    padding:1em;
    width:100%;
    margin-top:1em;
    border:.1em var(--primary-color) solid;
    background:#fff;
    text-align: center;
    
}

input:focus,textarea:focus
{outline: none;}

/*==================== Title ====================*/

.section-title{
    margin-top: 1em;
    font-family: var(--font-famiily-roboto);
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    position: relative;
    color: var(--black);
     line-height: 1;
    z-index: var(--z-higher);
}
.section-paragraph{
    margin-top: 1em;
    font-size: var(--h2-font-size);
    font-weight: var(--font-extra-bold);
    position: relative;
    color: var(--black);
     line-height: 1;
    z-index: var(--z-higher);
}
.text-center{
    text-align: center;
}
 .hero-title{
    margin-top: 1em;
    font-size: var(--bigger-font-size);
    font-weight: var(--font-extra-bold);
    position: relative;
    color: var(--white-color);
     line-height: 1;
    z-index: var(--z-higher);
}
.section-heading{
  text-align:left;
}
.section-heading p{
  position: relative;
  top: 2em;
}
 
 
.offset-1 {
    margin-left: 8.33333%; }
  
  .offset-2 {
    margin-left: 16.66667%; }
  
  .offset-3 {
    margin-left: 25%; }
  
  .offset-4 {
    margin-left: 33.33333%; }
  
  .offset-5 {
    margin-left: 41.66667%; }
  
  .offset-6 {
    margin-left: 50%; }
  
  .offset-7 {
    margin-left: 58.33333%; }
  
  .offset-8 {
    margin-left: 66.66667%; }
  
  .offset-9 {
    margin-left: 75%; }
  
  .offset-10 {
    margin-left: 83.33333%; }
  
  .offset-11 {
    margin-left: 91.66667%; }


    
@media (min-width: 576px) {

    .offset-sm-0 {
        margin-left: 0; }
      .offset-sm-1 {
        margin-left: 8.33333%; }
      .offset-sm-2 {
        margin-left: 16.66667%; }
      .offset-sm-3 {
        margin-left: 25%; }
      .offset-sm-4 {
        margin-left: 33.33333%; }
      .offset-sm-5 {
        margin-left: 41.66667%; }
      .offset-sm-6 {
        margin-left: 50%; }
      .offset-sm-7 {
        margin-left: 58.33333%; }
      .offset-sm-8 {
        margin-left: 66.66667%; }
      .offset-sm-9 {
        margin-left: 75%; }
      .offset-sm-10 {
        margin-left: 83.33333%; }
      .offset-sm-11 {
        margin-left: 91.66667%; } 
    
        .col-md-2 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
            max-width: 16.66667%; }
}

 
/*==================== Flex ====================*/
.flex{
    display: flex;    
    
}
/*==================== Grids  ====================*/
.grid-uni, .grid-col-1, .grid-col-2, .grid-col-3, .grid-col-4, .grid-col-5 {
  display: grid;
  gap: 2em;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-uni{
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
    
}
.grid-col-1{
    
    grid-template-columns: repeat(1,1fr);
 
}

 .grid-col-2{
    grid-template-columns: repeat(2,1fr);
}

   .grid-col-3{
    grid-template-columns: repeat(3,1fr);
    
}
 
.grid-col-4{
    grid-template-columns: repeat(4,1fr);
}

.grid-col-5{
    grid-template-columns: repeat(5,1fr);
}  


/*=================| Margin |=====================n */
.mt-1{margin-top:1em;}
.mt-2{margin-top:1.5em;}
.mt-3{margin-top:2em;}
.mt-4{margin-top:2.5em;}
.mt-5{margin-top:3em;}
.mt-6{margin-top:3.5em;}
.mt-7{margin-top:4em;}
.mt-8{margin-top:4.5em;}
.mt-9{margin-top:5em;}
.mt-10{margin-top:5.5em;}
.mt-11{margin-top:6em;}
.mt-12{margin-top:6.5em;}
.mt-13{margin-top:7em;}
.mt-14{margin-top:7.5em;}
.mt-15{margin-top:8em;}
.mt-16{margin-top:8.5em;}
.mt-17{margin-top:9em;}
.mt-18{margin-top:9.5em;}
.mt-19{margin-top:10em;}
.mt-20{margin-top:10.5em;}
.mt-21{margin-top:11em;}
.mt-22{margin-top:11.5em;}
.mt-23{margin-top:12em;}
.mt-24{margin-top:12.5em;}
.mt-25{margin-top:13em;}
.mt-26{margin-top:13.5em;}
.mt-27{margin-top:14em;}
.mt-28{margin-top:14.5em;}
.mt-29{margin-top:15em;}
.mt-30{margin-top:15.5em;}
.mt-31{margin-top:16em;}
.mt-32{margin-top:16.5em;}
.mt-33{margin-top:17em;}
.mt-34{margin-top:17.5em;}
.mt-35{margin-top:18em;}
.mt-36{margin-top:18.5em;}
.mt-37{margin-top:19em;}
.mt-38{margin-top:19.5em;}
.mt-39{margin-top:20em;}
.mt-40{margin-top:20.5em;}
.mt-41{margin-top:21em;}
.mt-42{margin-top:21.5em;}
.mt-43{margin-top:22em;}
.mt-44{margin-top:22.5em;}
.mt-45{margin-top:23em;}
.mt-46{margin-top:23.5em;}
.mt-47{margin-top:24em;}
.mt-48{margin-top:24.5em;}
.mt-49{margin-top:25em;}
.mt-50{margin-top:25.5em;}
.mt-60{margin-top:35em;}




/*=================| Padding |=====================n */
.p-1 {
  padding: 1em;
}

.p-2 {
  padding: 2em;
}

.p-3 {
  padding: 3em;
}

.p-4 {
  padding: 4em;
}

.pt-1 {
  padding-top: 1em;
}

.pt-2 {
  padding-top: 2em;
}

.pt-3 {
  padding-top: 3em;
}

.pt-4 {
  padding-top: 4em;
}

.pt-5 {
  padding-top: 5em;
}



.fa:hover{
    opacity: var(--op-07)
}


/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }



  /*===============KeyFrames====================*/
  

@keyframes moveArrow{
    from { 
        transform: translateY(-30px)
    }
    to {
        transform: translateY(0)
    }
}


@keyframes introload{
    from {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    }
    
    
    @keyframes slideInFromLeft{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0);
    }
    }
    @keyframes slideInFromright{
        0%{
            transform: translateX(100%);
        }
        100%{
            transform: translateX(0);
        }
        }
    
    
    @keyframes slideInFromBottom {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateX(0);
    }
    }
    
    
    
    
    @keyframes moveDown{
    from { 
        transform: translateY(-100px)
    }
    to {
        transform: translateY(0);
        opacity: 1; 
    }
    }
    
    @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
    }

         /* Preloader Styles */
         #loader {
          position: fixed;
          left: 50%;
          top: 50%;
          z-index: 9999;
          width: 120px;
          height: 120px;
          margin: -60px 0 0 -60px;
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #fac805;
          animation: spin 2s linear infinite;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      .animate-bottom {
          position: relative;
          animation: animatebottom 1s;
      }

      @keyframes animatebottom { 
          from { bottom: -100px; opacity: 0; } 
          to { bottom: 0; opacity: 1; }
      }

      #content {
          display: none;
          text-align: center;
      }