:root{
    --primary-color:#ECAA74;
    --secondary-color:#f6f6f6;


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

--body-font:'Poppins', sans-serif;
--bigger-font-size: clamp(3rem, 1rem + 10vw, 4rem);
--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;

}

/*//////////////////////////////////////////////////////////////////
[ REBOOT ]*/
* {
	margin: 0px; 
	padding: 0px; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Poppins', sans-serif 'Dancing Script', cursive;
 background: var(--secondary-color);
 color: #333;
 overflow-x: hidden;
 line-height: 1.3;
}
/*---------------------------------------------*/

/*=================| Base |--------------------*/
.container{
    
    width: 70%;
    max-width: 1100px;
    margin: auto;
}
ul{list-style: none;}
a{text-decoration: none;}

img{width: 100%;}

h1{
    font-size: clamp(2rem, 1rem + 10vw, 3rem);
}
  
h1,h2,h3,h4,h5,h6,p {margin: 0px;}

h2{
    font-size: 2.5em;
    padding: .2em 0;
}
p span{
    color: var(--primary-color);
    font-weight: bolder;
    font-size: 1.5rem;
}
/*---------------------------------------------*/

/*=====================| Text  |==================*/
.text-center{text-align: center;}
.txt-left {text-align: left;}
.txt-right {text-align: right;}

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

/*---------------------------------------------*/

 
/*==================| Site Hero |=================*/
.site-hero{
    width: 100%;
    height:70vh;
    background: url('../image/bg_3.jpg');
    background-size: cover;
   } 
   .site-hero,
   .bg-parallax{
   background-attachment:fixed;
   }
   .site-hero::after{
    content:'';
    position: absolute;
    top: 2em;
    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:-6em;
   color: #fff;
   padding: 10em 0;
   z-index: 10;
   animation: slideInFromLeft 3s ease-in;
   }
   .site-hero h1{
    font-size: 4rem;
    font-weight: bold;   
   }
 /*------------------------------------------------------*/

.btn-primary  {
    display: inline-block;
     background: #fff;
     padding: .8em 1.5em;
     border: .2em solid var(--primary-color);
     color: #333;
     
    }
    .btn-primary:hover{
     background: var(--primary-color);
     color: #fff;
    }
/*====================| Input |====================*/
    input[type='text'],
    .contact .contact-card .contact-form .form-control  input[type='email']{
    border: 0;
    border-bottom: 1px solid #b4becb; 
    width: 100%;
    padding: .5em;
    }
    input:focus{outline: none;}
    /*--------------------------------------------------*/
.flex{display: flex;}
/*==============| Grids |================*/
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
    gap: 4em;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-1{
    display: grid;
    grid-template-columns: repeat(auto-fit 1,1fr);
    gap: 2em;
    
}
.grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1em;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/*------------------------------------------------*/

.introload{animation: introload 2s forwards;}


/*================| Margin Top |===============*/


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




@media (max-width:620px){
    .site-hero .hero-text{
    margin-top: 5em;
    }
    .site-hero .hero-text h1{
     font-size: 4rem;
    }       
}
 
@media (max-width:430px){
    .site-hero .hero-text{
        margin-top: -1em;
        }
    .site-hero .hero-text h1{
     font-size: 3rem;
    }       
}    
@media (max-width:320px){
    
    .site-hero .hero-text h1{
     font-size: 2rem;
    }       
}    


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

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