

/*-----------------------
MAIN CSS START
------------------------*/
/* ============== MIAN BODY CSS ============== */

/* SECTION 2 */
.flavor{background: #000; color: #fff;padding: 100px 0;}
.flavor h3 {
    font-size: 40px;
    line-height: 50px;
    font-family: 'Helvetica-Bold';
}
.flavor .option{padding-top: 40px; width: 70%;margin: auto;}
.flavor .option .row{justify-content: space-between;display: flex;width: 100%;}
.flavor .option .op .op-box{font-family: 'Helvetica-Bold';
    box-shadow: 5px 0px 15px 3px rgb(255 255 255 / 50%);
    padding: 15px;
    font-size: 25px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;}
.flavor .option .op .op-body{padding: 0 20px;margin-top: 30px;}
.flavor .option .op .op-title{font-size: 18px;font-family: 'Helvetica-Bold';    line-height: 30px;}
.flavor .option .op .op-point
{
    margin-top: 0;
}


.flavor .option .op .op-point p{margin-bottom: 20px;font-size: 18px;}
.flavor .option .op .op-point li{font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica-Bold';}


.flavor .option .op .op-point li:nth-child(2){
    margin-bottom: 15px;
}



/* SECTION 3 */
.short-desc1{padding: 200px 0;}
.short-desc1 .content{width: 70%; margin: auto;}
.short-desc1 p{font-family: 'Helvetica-Bold';
    font-size: 25px;
    line-height: 35px;}
.short-desc1 .desc-btn{margin-top: 30px;}
.short-desc1 .desc-btn .btn{  font-size: 25px;
    border: 1px solid #000;
    padding: 10px 30px;
    border-radius: 30px;
    font-family: 'Helvetica-Bold';
    margin-top: 30px;
    display: table;}
.short-desc1 .desc-btn .btn .fa{position: relative;top: 1px;right: -10px;}
/* SECTION 4 */
.grill{padding: 250px 0;background-color: #FAFAFA;}
.grill .content{width: 100%; margin: auto;}
.grill .content h3{color:#FAA82E;font-weight: 700;margin-bottom: 50px;font-size: 50px;line-height: 65px;}
.grill .content p{font-family: 'Helvetica-Bold';font-size: 25px;line-height: 35px;}
.grill .box{width: 20%;margin: 50px 50px 0 0;}
.grill .box h2{font-size: 44px;
    padding: 0 0;
    line-height: 54px;
    margin: 10px 0;}
.grill .box p{color: rgba(0, 0, 0, 0.42);
    font-size: 18px;
    line-height: 22px;}
/* SECTION 5 */
/* .sec5 {background: url(../images/bg1.png) center no-repeat; background-size: 90% 110%;padding: 250px 0;} */
.sec5 {padding: 250px 0;}
.short-desc2 .content{max-width: 1000px; width: 100%; margin: auto;}
.short-desc2 .content li {
    margin-bottom: 45px;
    width: 45%;
    font-size: 35px;
    color: #000;
    line-height: 43px;
    font-family: 'Helvetica-Bold';
}
.short-desc2 .content li span{
    background: #000;
    height: 29px;
    display: inline-block;
    width: 5px;
    position: relative;
    top: 1px;}

    #videoSection_two.short-desc2 .content li span{
        background: #fff;
       }


/* SECTION 6 */
.grill-black{background: #000;}
.grill-black .content p{color: #fff;}
.grill-black .box p{color: rgba(255, 255, 255, 0.5);}
.grill-black .box h2{color: #fff;}
/* SECTION 7 */
.sec7 {
    background: url(../images/free-image.jpg) center no-repeat;
    background-size: 100% 160%;
}
.short-desc-black .content li{color: #fff;}

.out_world_area
{
    padding: 200px 0;
}
.out_world_area h4 {
    font-size: 78px;
    line-height: 79px;
    text-align: left;
    font-family: 'Helvetica-Bold';
    width: 650px;
    max-width: 100%;
    margin: auto;
}

.black_box_area{
    background-color: #000000;
    padding: 163px 150px;
    width: 860px;
    max-width: 100%;
    margin: 110px auto 0;
    border-radius: 50px;
}

.ript_entire
{
    font-size: 45px;
    color: #fff;
    line-height: 50px;
}

.hdng_hr
{
    font-size: 45px;
    color: #fff;
    line-height: 50px;
    padding: 40px 0 30px;
}


.statistic_pl
{
    font-size: 25px;
    color: #fff;
    line-height: 30px;
}

.plz_box p {
    margin: 20px 0 30px;
}

img.scnd_hdr{
    width: 80%;
}
img.thrd_hdr{
    width: 60%;
}
.out_wrld_bx
{
    margin-bottom: 135px;
}

.out_wrld_bx:nth-child(2){
    margin-bottom: 0;
}

.unmatched_area{
    padding: 0 0 200px;
    height: 100vh;
}

.unmatched_area .container{
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.unmatched_content{
    font-size: 60px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 70px;
    padding: 40px 0 30px;
}

.unmatch_image
{
    max-width: 775px;
    display: block;
    width: 100%;
}


.smart_control_area
{
    background-image: url(../images/free-image.jpg);
    min-height: 500px;
    height: 700px;
    background-size: cover;
    padding: 140px 0;
    margin-top: 150px;
}

.smart_control_area .container{
    max-width: 900px;
}

.smart_desc {
    font-size: 70px;
    font-family: 'Helvetica-Bold';
    color: #fff;
    line-height: 90px;
    text-transform: uppercase;
}

.ript_mob_area{
   padding: 200px 0 180px;
}

.ript_mob_area .container{
    max-width: 920px;
}

.ttl_mob
{
    display: flex;
    justify-content: space-between;
}

.lft_mob
{
    width: 240px;
    max-width: 100%;
}

.rt_mob{
    width: 567px;
    max-width: 100%;
    font-size: 38px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 47px;
}
.show_it_off_area .container{
    max-width: 100%;
}

.show_it_off_area{
    padding: 164px 0 70px;
    width: 1220px;
    margin: auto;
    border-radius: 100px;
    background-color: #fafafa;
    max-width: 100%;
}
.show_it_off_cntn{
    max-width: 100%;
    margin: auto;
    width: 100%;
}

.box_show_off
{
    max-width: 760px;
    width: 100%;
    margin: auto;
}

.show_it_off_txt
{
    font-size: 45px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 50px;
    text-transform: uppercase;
}

.show_it_dsc
{
    margin-top: 80px;
    font-size: 34px;
    font-family: 'Helvetica-Bold';
    color: rgba(0, 0, 0, 0.38);
    line-height: 40px;
    width: 800px;
    max-width: 100%;
    margin-bottom: 140px;
}
.b_radius_show
{
    width: 100%;
border-radius: 0 0 120px 120px;
overflow: hidden;
}

.b_radius_show video{
    width: 100%;
    height: 100%;
}

.smart_control_area.taste_off {
    background-image: url(../images/free-image.jpg);
    min-height: 500px;
    height: 880px;
    background-size: cover;
    padding: 140px 0;
    margin-top: 100px;
    display: flex;
    align-items: center;
}
.entire_image
{
    padding: 175px 0 0;
}


.entire_image .container{
    max-width: 900px;
    
}
.entire_image p{
    font-size: 30px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 40px;
}


.woodchip_area
{
    padding: 80px 0 0;
}

.woodchip_area .container{
max-width: 900px;
}
.woodchp_hdng {
    text-align: left;
    font-size: 40px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000000;
    margin-bottom: 52px;
}

.woodchp_dsc
{
    display: flex;
    justify-content: space-between;
}

.unmatched_box
{
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.box_lft_wood{
    width: 50%;
    padding-right: 100px;
}

.box_rt_wood
{
    width: 50%;
    padding-left: 0;
}

.woodchp_dsc {
    text-align: left;
    font-size: 22px;
    font-family: 'Helvetica-Bold';
    color: #000;
    line-height: 31px;
    padding-bottom: 0;
}

.animates_scroll_wood{
    margin-top: 70px;
}

.woodchp_dsc ul{
    min-height: 90px;
}

.mddle_area
{
    display: flex;
    justify-content: center;
    padding-top: 80px;
    height: 70vh;
}
.winning_area
{
    padding: 180px 0 0;
}
.setup_area .container{
    max-width: 900px;
}
.winning_area h3
{
    font-size: 70px;
    line-height: 85px;
    font-family: 'Helvetica-Bold';
    margin-bottom: 100px;
}
.image_setup
{
    max-width: 900px;
}

.image_col_flx
{
    display: flex;
    padding: 100px 0;
}

.setup_area p{
    color: rgba(0, 0, 0, 0.4);
    font-size: 30px;
    font-family: 'Helvetica-Bold';
    line-height: 40px;
}

.setup_area h6{
    color: #000;
    font-size: 25px;
    font-family: 'Helvetica-Bold';
    line-height: 30px;
    margin-top: 100px;
}


.looking_for_more
{
    padding: 92px 0 125px;
}

.looking_for_more .container{
    width: 80%;
    max-width: 100%;
    padding: 45px 0;
    
}

.contn_bx{
    background-color: #fafafa;
    border-radius: 100px;
    padding: 57px 35px;
    width: 1220px;
    max-width: 100%;
    margin: auto;
}

.looking_for_more h5{
    font-size: 60px;
    line-height: 70px;
    font-family: 'Helvetica-Bold';
    
    max-width: 900px;
    margin: auto;
    margin-bottom: 42px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.accessories_area
{
    color: #000;
    font-size: 25px;
    font-family: 'Helvetica-Bold';
    line-height: 30px;
    margin-top: 40px;
}

.looking_for_more h6{
    color: #000;
    font-size: 30px;
    font-family: 'Helvetica-Bold';
    line-height: 40px;
    margin-top: 0;
    margin-bottom: 37px;
}

.attachment_row
{
    background-color: #fff;
    
}

.col_at ul{
    display: flex;
    padding: 15px;
}

.col_at ul li{
    width: 33.33333%;
}

.accessories_area h3{
    color: #000;
    font-size: 25px;
    font-family: 'Helvetica-Bold';
    line-height: 35px;
    margin-top: 10px;
}

.attach_bx
{
    margin-bottom: 65px;
}


.my_slide {
    margin: 0 25px 0 0;
    position: relative;
}

.my_slide a{
    display: block;
}

.slide_dsc
{
    color: #fff;
    font-size: 25px;
    font-family: 'Helvetica-Bold';
    line-height: 30px;
    position: absolute;
    bottom: 25px;
    left: 25px;
    width: 200px;
}

.my_slide a{
    position: relative;
}
.my_slide a:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in;
}

.my_slide img{
    display: block;
}

.my_slide a:hover:before{
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in;
}

.woodchips_area .container{
    max-width: 1280px;
    width: 100%;
}



.woodchips_area
{
    padding: 65px 0 78px;
}

.woodchips_area img{
    display: block;
}
.slick-slider {
    margin-bottom: 0;
}

.box_anim {
    margin: 0 25px 0 0;
    position: relative;
    width: 593px;
    max-width: 100%;
}

.box_anim a{
    display: block;
}

.ttl_anim{
    display: flex;
    justify-content: space-between;
}
.box_anim_dsc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    max-width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.box_anim_dsc h5 {
    color: #fff;
    font-size: 35px;
    font-family: 'Helvetica-Bold';
    line-height: 45px;
    margin-bottom: 25px;
}

.box_anim_dsc p{
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 38px;
}

.box_anim a{
    position: relative;
}
.box_anim a:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in;
}

.box_anim a:hover:before{
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in;
}

.woodchips_area .container{
    max-width: 1280px;
    width: 100%;
}

.falvour_box
{
    width: 42%;
}

#imagesequence2 .lastOverlay{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    background-color: black;
    z-index: 5;
    opacity: 0;
    padding: 50px 0;
}
#imagesequence2 .lastOverlay h1{
    font-size: 50px;
    font-weight: bold;
    opacity: 0;
    color: white;
    text-align: center;
    margin: 0 auto;
}
#imagesequence2 .footerText{
    width: 80%;
    display: flex;
    margin: 0 auto;
}
#imagesequence2 .footerText .cont{
    width: 100%;
    display: inline-block;
}
#imagesequence2 .footerText li{
    opacity: 0;
    transform: translateY(10px);
}

#imagesequence2 .op-box{
    opacity: 0;
    transform: translateY(10px);
}



#videoSection{
    position: relative;
    height:100vh;
    background-color: black;
  }
  #videoSection video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
  }

  #videoSection .overlayScroll{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    overflow: hidden;
    z-index: 3;
  }
  #videoSection .overlayScroll:before,
  #videoSection .overlayScroll:after{
    content: "";
    display: block;
    height: 70vh;
  }
  #videoSection .overlayScroll>span{
      color: white;
      font-size: 40px;
      width: 500px;
      max-width: 80vw;
      margin-left: 20vw;
      margin-bottom: 70px;
      padding-left: 20px;
      display: block;
  }


  #videoSection_two{
    position: relative;
    height:100vh;
    background-color: black;
  }
  #videoSection_two video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
  }

  #videoSection_two .overlayScroll{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    overflow: hidden;
    z-index: 3;
  }
  #videoSection_two .overlayScroll:before,
  #videoSection_two .overlayScroll:after{
    content: "";
    display: block;
    height: 70vh;
  }
  #videoSection_two .overlayScroll>span{
      color: white;
      font-size: 40px;
      width: 500px;
      max-width: 80vw;
      margin-left: 20vw;
      margin-bottom: 70px;
      padding-left: 20px;
      display: block;
  }


@keyframes stackUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  .stackUp{
      animation-duration: .5s;
      animation-fill-mode: forwards;
      animation-name: stackUp;
  }
  
  @keyframes stackDown {
    to {
      opacity: 0;
      transform: translateY(10px);
    }
    from {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  .stackDown{
      animation-duration: .5s;
      animation-fill-mode: forwards;
      animation-name: stackDown;
  }



  .video-wrap {
    width: 100%;
  }
  
  .video-wrap::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
  
  .video-wrap video {
    width: 100%;
    height: 100%;
  }
  
  .content-overlay {
    position: absolute;
    height: 200px;
    bottom: 0;
    top: 0;
    right: 0;
    left: 20%;
    margin: auto;
    z-index: 100;
  }

  .left_setup
  {
    max-width: 200px;
    margin-right: 20px;
  }

  @media only screen and (min-width: 1400px){
    .flavor .option .op .op-box {
        height: 300px;
    }
  }

  @media only screen and (min-width: 1600px){
    .flavor .option {
        padding-top: 80px;
    }
  .flavor .option .op .op-point li {
    font-size: 20px;
    line-height: 32px;
}

  }


@media only screen and (min-width: 1800px){
    .flavor h3 {
        font-size: 60px;
        line-height: 70px;
    }
    .flavor .option .op .op-point li {
        font-size: 25px;
        line-height: 38px;
    }
    
    .flavor .option {
        padding-top: 60px;
    }
  
    #imagesequence2 .lastOverlay {
        padding: 30px 0;
    }
    .flavor .option .op .op-body {
        margin-top: 60px;
    }
}











