/*------------------------------------------*/
/* GENERAL  STYLES
/*------------------------------------------*/

.timber-slider-holder{
    width: 100vw;
    height: 100vh;;
    box-sizing: border-box;
    text-align: left;
    background: #F2EEE9;
}

.slider-content-holder{
    margin-left: 5%;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .swiper-pagination .swiper-pagination-bullet{
    transition: all ease .3s .1s;
    -webkit-transition: all ease .3s .1s;
    -moz-transition: all ease .3s .1s;
    -ms-transition: all ease .3s .1s;
    -o-transition: all ease .3s .1s;
}

.swiper-pagination{
  opacity: 0;
  margin-right: -100px;
}

  .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
    right: 4% !important;
  }

  .swiper-pagination-clickable .swiper-pagination-bullet{
    background: #000;
    width: 7px;
    height: 7px;
    margin: 30px 0 !important;
    position: relative;
    opacity: 1;
  }

  .swiper-pagination.first .swiper-pagination-bullet{
    background: #fff;
  }
  

  .swiper-pagination-bullet {
    display: inline-block;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    position: relative;
  }

  
  .circle-svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: -9px;
    top: -9px;
    opacity: 0;
  }

  .swiper-pagination-bullet-active svg{
    opacity: 1;
  }
  
  .circle-svg circle {
    stroke-dasharray: 150; 
    stroke-dashoffset: 150; 
    transition: stroke-dashoffset 0.6s ease-in-out;
    fill: transparent;
    stroke: #000;
    stroke-width: 2;
  }

  .swiper-pagination.first .circle-svg circle {
    stroke: #fff;
  }
  
  .swiper-pagination-bullet-active .circle-svg circle {
    animation: drawCircle 0.6s ease-in-out forwards;
  }
  
  @keyframes drawCircle {
    0% {
      stroke-dashoffset: 150;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  .hero{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    background-size: cover;
    position: relative;
  }

  .hero h1{
    color: #fff;
  }

.hero .timber-btn-holder{
  position: absolute;
  bottom: 90px;
  opacity: 0;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}


.hero .social-media{
  position: absolute;
  right: 4%;
  bottom: 80px;
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}


.hero .social-media .social-account{
  float: left;
  margin-left: 30px;
}

.hero .social-media .social-account a{
  color: #C6CDBA;
  font-size: 15px;
  font-weight: 400;
}


.about-section, .timber-services{
  display: flex;
      justify-content: center;
      width: 100%;
      align-items: center;
      height: 100%;
}

.about-section h2{
  margin-bottom: 60px;
}



.timber-services{
  width: 100%;
}

.col-6 {
  flex: 1 1 calc(50% - 10px);
  margin: 5px;
}

.timber-services .left-area{
  padding-right: 10px;
}

.timber-services .left-area .sub-title{
  margin-top: 15px;
  color: #967764;
}

.timber-services .left-area img{
  width: 80%;
  height: auto;
}

.timber-services .service{
  padding-top: 75px;
  padding-bottom: 75px;
  margin: 0;
}

.timber-services .service:nth-child(n + 3) {
  border-top: solid 1px #000;
}
.timber-services .service:nth-child(odd){
  border-right: solid 1px #000;
  padding-right: 30px;
}

.timber-services .service:nth-child(even){
  padding-left: 45px;
}

.timber-services .service svg{
  width: 100%;
  margin-bottom: 20px;
}

.call-to-action{
  background: #31321D;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  z-index: 0;
}

.cta-btn{
  color: #fff;
}

.cta-btn h4, .cta-btn svg{

  transition: all ease .3s;
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  -o-transition: all ease .3s;
}

.cta-btn:hover h4{
  transform: translateX(-5%);
  -webkit-transform: translateX(-5%);
  -moz-transform: translateX(-5%);
  -ms-transform: translateX(-5%);
  -o-transform: translateX(-5%);
}

.cta-btn:hover svg{
  transform: translateX(10%);
  -webkit-transform: translateX(10%);
  -moz-transform: translateX(10%);
  -ms-transform: translateX(10%);
  -o-transform: translateX(10%);
}

.call-to-action .or{
  margin: 30px 0;
}

.call-to-action .timber-btn svg{
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.call-to-action .cta-btn svg{
  width: 50px;
  margin-top:30px;
}

.call-to-action .or{
  color: #C28922;
  font-size: 14px;
}

.call-to-action .cta-bg{
  width: 40vw;
  position: absolute;
  object-fit: contain;
  z-index: -1;
}

footer{
  display: none;
}


.timber-slider-holder .text-lines {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}



/*------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------*/

@media only screen and (max-width: 991px) {
  .timber-services .service {
      padding-top:45px;
      padding-bottom: 45px;
      margin: 0;
  }

  .timber-services .service:nth-child(odd) {
      border-right: solid 1px #000;
      padding-right: 45px;
  }

  .timber-services .service:nth-child(even) {
      padding-left: 45px;
  }

  .service-image{
    display: none !important;
  }

  .timber-services .service svg {
    margin-bottom: 10px;
  }

  .timber-services .right-area{
    margin-top: 90px;
  }


  .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
    right: 40px !important;
}

.about-section h2 {
  margin-bottom: 30px;
}
}



@media only screen and (max-width: 600px) {
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
  right: 30px !important;
}


}