@charset "utf-8";
/* CSS Document */

.home-intro-wrapp {
  position: relative;
  top: -250px;
  left: 0;
  width: 100%;
  height: 800px;
  background-image: url("../images/main1.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  overflow: hidden
}

/* ------------------------------ start Fog animation ------------------------------
-----------------------------------------------------------------------------------*/
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02, #foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}
/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url(../images/mist.png);
  background-repeat: no-repeat;
}
#foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02 {
  background: url("../images/mist.png");
  background-repeat: no-repeat;
}
/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}
@-moz-keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}
@-o-keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}
@keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}
@-moz-keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}
@-o-keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}
@keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% {
    opacity: .8
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}
@-moz-keyframes foglayer_03_opacity {
  0% {
    opacity: .8
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}
@-o-keyframes foglayer_03_opacity {
  0% {
    opacity: .8
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}
@keyframes foglayer_03_opacity {
  0% {
    opacity: .8;
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
@-moz-keyframes foglayer_moveme {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
@-o-keyframes foglayer_moveme {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
@keyframes foglayer_moveme {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
@media only screen and (min-width: 280px) and (max-width: 767px) {
  #foglayer_01 .image01, #foglayer_01 .image02, #foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02 {
    width: 100%;
  }
}
/* ------------------------------ end Fog animation ------------------------------*/


.intro-top {
  padding: 45px 35px 0
}

.intro-cap {
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  position: absolute;
  top: 70%;
  left: 0;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  text-align: left;
  letter-spacing: 15px
}
.intro-cap h3 {
  font-size: 22pt;
  padding-bottom: 15px;
    font-weight: 600;
}
.intro-cap h4 {
  font-size: 16pt;
  font-weight: 600;
}

/*-------- caption transition --------*/
.intro-cap h3, .intro-cap h4 {
  text-align: left;
  transform: scale(0.80);
  animation: scale 8s forwards cubic-bezier(0.5, 1, 0.89, 1);
  padding-left: 100px;
}
.intro-cap a {
 text-align: left;
 color: #fff;
 background: var(--clr-orange);
   text-align: left;
  transform: scale(0.80);
  animation: scale 8s forwards cubic-bezier(0.5, 1, 0.89, 1);
  margin-left: 90px;
  padding: 10px 30px;
  border-radius: 500px;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 22px;
  margin-top: 10px;
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
.intro-cap h3 span, .intro-cap h4 span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
.intro-cap a{
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
.intro-cap a {
   animation: fade-in 5s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(1), .intro-cap h4 span:nth-child(1) {
  animation: fade-in 5s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(2), .intro-cap h4 span:nth-child(2) {
  animation: fade-in 5s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(3), .intro-cap h4 span:nth-child(3) {
  animation: fade-in 5s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(4), .intro-cap h4 span:nth-child(4) {
  animation: fade-in 5s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(5), .intro-cap h4 span:nth-child(5) {
  animation: fade-in 5s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(6), .intro-cap h4 span:nth-child(6) {
  animation: fade-in 5s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(7), .intro-cap h4 span:nth-child(7) {
  animation: fade-in 5s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(8), .intro-cap h4 span:nth-child(8) {
  animation: fade-in 5s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(9), .intro-cap h4 span:nth-child(9) {
  animation: fade-in 5s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(10), .intro-cap h4 span:nth-child(10) {
  animation: fade-in 5s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(11), .intro-cap h4 span:nth-child(11) {
  animation: fade-in 5s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(12), .intro-cap h4 span:nth-child(12) {
  animation: fade-in 5s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(13), .intro-cap h4 span:nth-child(13) {
  animation: fade-in 5s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(14), .intro-cap h4 span:nth-child(14) {
  animation: fade-in 5s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(15), .intro-cap h4 span:nth-child(15) {
  animation: fade-in 5s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(16), .intro-cap h4 span:nth-child(16) {
  animation: fade-in 5s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(17), .intro-cap h4 span:nth-child(17) {
  animation: fade-in 5s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(18), .intro-cap h4 span:nth-child(18) {
  animation: fade-in 5s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(19), .intro-cap h4 span:nth-child(19) {
  animation: fade-in 5s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(20), .intro-cap h4 span:nth-child(20) {
  animation: fade-in 5s 2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(21), .intro-cap h4 span:nth-child(21) {
  animation: fade-in 5s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(22), .intro-cap h4 span:nth-child(22) {
  animation: fade-in 5s 2.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(23), .intro-cap h4 span:nth-child(23) {
  animation: fade-in 5s 2.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(24), .intro-cap h4 span:nth-child(24) {
  animation: fade-in 5s 2.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(25), .intro-cap h4 span:nth-child(25) {
  animation: fade-in 5s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(26), .intro-cap h4 span:nth-child(26) {
  animation: fade-in 5s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.intro-cap h3 span:nth-child(27), .intro-cap h4 span:nth-child(27) {
  animation: fade-in 5s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
/*-------- caption transition --------*/
.introleaf-left, .introleaf-right-long, .introleaf-right-bottom,  .bamboo-accom, .footer-leaf, .bamboo-sub-top {
  position: absolute;
  left: -116px;
  bottom: -60px;
  width: 230px;
  z-index: 30000
}
.introleaf-right-long {
  left: auto;
  right: -60px;
  width: 206px;
}
.introleaf-right-bottom {
  left: auto;
  right: 150px;
  width: 200px
}
.welcome-leaf-bamboo {
  position: absolute;
  left: -116px;
 
  width: 230px;
  z-index: 10	
}
/*--------- scroll down effects ---------*/

.scroll-down {
  display: block;
  position: absolute;
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 50px;
  height: 50px;
  border: 1.5px solid rgba(255,255,255,0.7);
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1);
  background: #fff;
  color: #000;
}
.scroll-down::before {
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 10px);
  transform: rotate(-45deg);
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  border: 1.5px solid rgba(8, 8, 8, 0.7);
    border-top-width: 1.5px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    border-left-width: 1.5px;
  border-width: 0px 0 2px 2px;
}
/*.scroll-down:hover { background:#54802a; }*/
@keyframes bounce { 0%, 100%, 20%, 50%,
80% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); }
40% { -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); }
60% { -webkit-transform:translateY(-2px); -ms-transform:translateY(-2px); transform:translateY(-2px); }
}
/*--------- scroll down effects ---------*/
@media (max-width: 768px){
	.scroll {
		position: absolute;
		width: 100%;
		text-align: center;
		z-index: 1000000;
		bottom: 45px;
	}	
	.intro-top {
		text-align: center;
		
	}
	.intro-cap {
		letter-spacing: 5px;
	}
	
	
	.home-intro-wrapp {
 
  top: -150px;
  left: 0;
  width: 100%;
  height: 600px;
  min-height: 600px;
 background-image: url("../images/main1.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
 
  overflow: hidden
}
.intro-cap {
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  text-align: left;
  letter-spacing: 15px;
}

.intro-cap h3, .intro-cap h4 {
  text-align: center;
  transform: scale(0.80);
  animation: scale 8s forwards cubic-bezier(0.5, 1, 0.89, 1);
  padding-left:50px;
   padding-right:50px;
   font-size:18px;
   letter-spacing: 1.5px;
}
.intro-cap  {
  text-align: center;
}
.intro-cap a {
 text-align: left;
 color: #fff;
 background: var(--clr-orange);
   text-align: center;
  transform: scale(0.80);
  animation: scale 8s forwards cubic-bezier(0.5, 1, 0.89, 1);
margin-left:auto;
  padding: 8px 20px;
  border-radius: 500px;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 22px;
  margin-top: 10px;
}

.intro-cap a {
  display: inline-block;
  opacity: 0;
  filter: blur(3px);
}
.intro-cap a {
   animation: fade-in 5s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
}