:root{
  color:  #CFCB61;
  color: #205027;
  color: #DEC7B8;
  color: #F8FBFC;
  color: #8CAC67;

}
 

*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
}
.banner{
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;


}
.banner video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;

}
.banner .tara{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
text-align: center;
text-transform: uppercase;
color: white;
line-height: 100vh;
font-size: 2vw;
font-weight: 900;
mix-blend-mode: multiply;
display: flex;
flex-direction: column;
animation:  loader 7s forwards;
opacity: .01;

}



@keyframes loader {
100% {
  
font-size: 30vw;
opacity: 1;

}
}


@keyframes growth {
0% {
font-size: 0;
}
10% {
font-size: 100px;
}
20% {
font-size: 200px;
}
30% {
font-size: 300px;
}
40% {
font-size: 400px;
}
50% {
font-size: 500px;
}
60% {
font-size: 600px;
}
70% {
font-size: 700px;
}
80% {
font-size: 800px;
}
90% {
font-size: 900px;
}
}
.col-8{
      font-size: 20px;
     color: rgb(45, 68, 49);
      text-align: center;
      z-index: 5;
      padding-top: 31%;
               font-weight: 100;
      -webkit-text-stroke: 0.1px rgb(17, 17, 16);
      font-family: Roboto, sans-serif;
  }
  #but1{
      width: 100px;
      height: 50px;
      background-color: rgb(15, 61, 30);
      border: none;
      color: rgb(255, 255, 255);
      align-items: center;
      font-size: 20px;
      z-index: 5;
      
      
  }
/*-----------------------------------------------Scroll down*/


section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;

}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(45, 68, 49);
font : normal 300 64px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}


.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #205027;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;

}


#section10 a {
padding-top: 60px;
}
#section10 a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #205027;
border-radius: 15px;
box-sizing: border-box;
}
#section10 a span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #205027;
border-radius: 100%;
-webkit-animation: sdb10 2s infinite;
animation: sdb10 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
0% {
-webkit-transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb10 {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}


/*          --------------------------------explore more*/


.container {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
margin-bottom: -200px;
}
ul li {
margin: 0 0 24px;
}
.the-arrow {
width: 1px;
transition: all 0.1s;
}
.the-arrow.-left {
position: absolute;
top: 60%;
left: 0;
}
.the-arrow.-left > .shaft {
width: 0;
background-color: rgb(45, 68, 49);
}
.the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
width: 0;
background-color: rgb(45, 68, 49);
}
.the-arrow.-left > .shaft:before {
transform: rotate(0);
}
.the-arrow.-left > .shaft:after {
transform: rotate(0);
}
.the-arrow.-right {
top: 3px;
}
.the-arrow.-right > .shaft {
width: 1px;
transition-delay: 0.1s;
}
.the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
width: 8px;
transition-delay: 0.2s;
transition: all 0.2s;
}
.the-arrow.-right > .shaft:before {
transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
transform: rotate(-40deg);
}
.the-arrow > .shaft {
background-color: rgb(45, 68, 49);
display: block;
height: 1px;
position: relative;
transition: all 0.1s;
transition-delay: 0;
will-change: transform;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
background-color: rgb(45, 68, 49);
content: '';
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.1s;
transition-delay: 0;
}
.the-arrow > .shaft:before {
transform-origin: top right;
}
.the-arrow > .shaft:after {
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
color: rgb(45, 68, 49);
font-size: 1.25em;
font-style: italic;
text-decoration: none;
position: relative;
transition: all 0.1s;
}
.animated-arrow:hover {
color: rgb(45, 68, 49);
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: rgb(45, 68, 49);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: rgb(45, 68, 49);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
transform: translateX(17px);
transform: translateX(80px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
width: 0;
transform: translateX(200%);
transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
width: 0;
transition-delay: 0;
transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
transform: rotate(0);
}
.animated-arrow > .main {
display: flex;
align-items: center;
transition: all 0.1s;
}
.animated-arrow > .main > .text {
margin: 0 16px 0 0;
line-height: 1;
}
.animated-arrow > .main > .the-arrow {
position: relative;
}

* {
  box-sizing: border-box;
}

.btn {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.btn svg {
  fill: none;
  width: 20px;
  height: 26px;
  margin: 14px 0 3px 0px;
  transform: translate3d(0, 0, 0);
}
.btn svg path {
  stroke: #3c550e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
  margin: auto;
  
}
.btn .circle {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 48px;
  width: 48px;
  border-radius: 24px;
  border: 3px solid #3c550e;
  transition: border 0.3s ease;
}
.btn .progress {
  position: absolute;
  display: block;
  bottom: -10px;
  left: 0;
  height: 3px;
  width: 48px;
  border-radius: 3px;
  background: rgba(253, 215, 210, 0.2);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.btn .progress:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 2s linear;
}
.btn .progress.active {
  opacity: 1;
}
.btn .progress.active::after {
  transform: scaleX(1);
}
.btn:hover .circle {
  border-color: #fff;
}
.btn:hover svg path {
  stroke: #fff;
}
.btn:active svg {
  transform: translateY(2px);
}
.btn.pending .circle {
  border-color: #fff;
  animation: animC 0.6s ease-out;
  animation-delay: 2.35s;
}
.btn.pending svg {
  animation: animS 0.6s ease-in;
  animation-delay: 2.15s;
}
.btn.pending svg path {
  stroke: #fff;
}

@keyframes animS {
  5% {
    transform: scale(0.9);
  }
  50% {
    transform: translateY(12px);
  }
  80% {
    transform: translateY(-4px);
  }
}
@keyframes animC {
  50% {
    transform: translateY(6px);
  }
  80% {
    transform: translateY(-4px);
  }
}