/*----------------------------------------------------
@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:#eadbf4;
    --secondary-color:#F2B0B0;
    --tertiary-color:#D2D2E8;
    --black:#111;
    --gray:#aaaaaa;
    --white:#fff;

/*==================== Font and Typography ====================*/

--body-font:'Poppins', sans-serif;
--bigger-font-size:2rem;
--h1-font-size:1.5rem;
--h2-font-size:1.25rem;
--h3-font-size:1rem;
--normal-font-size:.938rem;
--small-font-size:.813rem;
--smaller-font-size:.75rem;

/*==================== Font weight ====================*/
--font-small:400;
--font-meduim:500;
--font-semi-bold:600;

/*==================== 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;
    box-sizing: border-box;
}
html{scroll-behavior: smooth;}
body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
   
    height: 100%;
    color: #111;
    line-height: 1.5;
    overflow-x: hidden;
}
.nav-container{
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

.container{
    width:70%;
    max-width: 1100px;
    margin: auto;
}
h1{
    font-size: clamp(2rem, 1rem + 10vw, 3rem );
}
h2,h3,p{margin: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{
    max-width: 100%;
    height: auto;
}
/*====================| Buttons & background |====================*/
.btn-primary{
    position: relative;
    top: 5em;
    width: 100%;
    background:var(--primary-btn-color);
    border-radius: .5em;
    padding: .8em .8em;
    color: white;
    
}

.btn-primary:hover{
    cursor: pointer;
    opacity: var(--op-08);
}
.btn-secondary{
    background: var(--secondary-color);
    position: relative;
    top: 5em;
    width: 100%;
    border-radius: .5em;
    padding: .8em .8em;
    color: rgb(24, 23, 23);
    font-size:.8em;
}
.btn-dark{
    background: var(--bg-dark-color);
    position: relative;
    top: 5em;
    width: 100%;
    border-radius: .5em;
    padding: .8em .8em;
    color: white;
    font-weight: var(--font-semi-bold);
}
.btn-secondary:hover{
    cursor: pointer;
    opacity: var(--op-08);
}
.slide-btn{
    margin-bottom: 5em;
}
.gotopbtn{
    position: fixed;
    width: 50px;
    height: 50px;
    background:var(--text-color-light);
    bottom: 1em;
    right: 2em;
    text-align: center;
    line-height: 50px;
    color:white;
    font-size: 22px;
  }
/*----------------Backgrounds--------------------*/
.btn-primary,
.bg-primary{
    background:var(--primary-btn-color);
    color: var(--white-color);
}
.btn-secondary,
.bg-secondary{
    background: var(--secondary-color);
    color:#111;
}
.btn-white,
.bg-white{
    background: var(--bg-white-color);
    color:var(--primary-text-color);
}
.btn-dark,
.bg-dark{
background: var(--bg-dark-secondary-color);
color: var(--white-color);
}
.btn-dark,
.bg-dark-primary{
    background: var(--bg-dark-primary-color);
    color: #fff;
}

.bg-parallax{
    background-attachment:fixed;
}
/*------------------------------------------------*/
/*==================== Title ====================*/

.section-title{
     
    font-size: var(--bigger-font-size);
    font-weight: var(--font-semi-bold);
    color:var(--primary-text-color);
    margin-bottom: var(--mb-1);
}
.section-light-subtitle{
    font-size: var(--h3-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--white-color);
    margin-bottom: var(--mb-6);
}
.section-subtitle{
    font-size: var(--h1-font-size);
    font-weight: var(--font-semi-bold);
    color:var(--primary-text-color);
    margin-bottom: var(--mb-1);
}
 
.text-center{
    text-align: center;
}
 .section-hero-title{
    margin-top: 1em;
    font-size: var(--bigger-font-size);
    font-weight: var(--font-semi-bold);
    position: relative;
    color: var(--white-color);
    padding: 2em 0;
    z-index: var(--z-higher);
}
 
/*==================== Flex ====================*/
.flex{
    display: flex;
    justify-content:center;
    align-items: center;
    
}
/*==================== Grids  ====================*/
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
    gap: 4em;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-col-1{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}

 .grid-col-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* .grid-col-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}
 
.grid-col-4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid-col-5{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
} */

.pro-grid-col-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}



/*=================| 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 */
.padding-1{padding:1em;}
.padding-2{padding:1.5em;}
.padding-3{padding:2em;}
.padding-4{padding:2.5em;}
.padding-5{padding:3em;}
.padding-6{padding:3.5em;}
.padding-7{padding:4em;}
.padding-8{padding:4.5em;}
.padding-9{padding:5em;}
.padding-10{padding:5.5em;}
.padding-11{padding:6em;}
.padding-12{padding:6.5em;}
.padding-13{padding:7em;}
.padding-14{padding:7.5em;}
.padding-15{padding:8em;}
.padding-16{padding:8.5em;}
.padding-17{padding:9em;}
.padding-18{padding:9.5em;}
.padding-19{padding:10em;}
.padding-20{padding:10.5em;}
.padding-21{padding:11em;}
.padding-22{padding:11.5em;}
.padding-23{padding:12em;}
.padding-24{padding:12.5em;}
.padding-25{padding:13em;}


.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);
    }
    }