/* >> Home Content Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/*Technology*/
.tech__block{
  @extend %flexBox; 
  align-items: center; 
  justify-content: space-between; 
  flex-direction: column-reverse;
  padding: 0 2rem;
  @media #{$mq-iPad_port}{padding: 0 4rem;}
  @media #{$mq-iPad_land}{flex-direction: row;}
  .tech__tiles{width: 96%;
    @media #{$mq-iPad_land}{width: 50%; margin: 0;}
    .tile__item{
      @media #{$mq-tab-720}{width: 50%;}
      @media #{$mq-iPad_land}{width: 50%;}
    }
  }
  .tech__desc{width: 100%;}
}

.tech__tiles{@extend %flexBox; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 1600px; margin: 0 auto;
  @media #{$mq-iPad_land}{width: 100%;}
  .tile__item{@extend %flexBox; align-items: center; width: 100%; position: relative; max-height: 360px;
    @media #{$mq-tab-720}{width: 50%;}
    @media #{$mq-iPad_land}{width: calc(100% / 3 );}
    &:hover{
      .tile__item__lead{visibility: visible; opacity: 1; transform: translateY(0); z-index: 2;}
      .tile__item__img{
        img{transform: scale(1.1);}
        &:after{opacity: 0.85;}
      }
    }
  }
}

.tile__item__caption{display: block; width: 100%; position: absolute; left: 0; z-index: 5; color: white; text-align: center;
  .tile__item__title{display: block; width: 100%; font-size: 1.8rem; line-height: 1.2; font-weight: 600; text-transform: uppercase; color: white;
    @media #{$mq-tab-720}{font-size: 2rem;}
    @media #{$mq-pc_1280}{font-size: 2.8rem;}
    span{font-weight: 300; text-transform: none; color: $color-primary;}
  }
  p{display: block; width: 100%; font-size: 0.9rem; line-height: 1.2; font-weight: 500; color: white;
    @media #{$mq-pc_1280}{font-size: 1.1rem;}
  }
  .btn--arrow{margin: 1rem auto 0;}
}
.tile__item__lead{transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1); display: block; width: 100%; left: 0; bottom: 0; position: absolute; padding: 1rem; z-index: -1; visibility: hidden; opacity: 0; transform: translateY(100%); font-size: 0.9rem; line-height: 1.3; text-align: center; color: white;}
.tile__item__img{@extend %flexBox; position: relative; overflow: hidden;
  img{transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); display: block; width: 100%; object-fit: cover;}
  &:after{transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); content: ''; display: block; position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top:0; background-color: $color-darkBlue; opacity: 0.5;}
}


.section{
  display: block; 
  position: relative; 
  width: 100%; 
  margin: 0 auto; 
  padding: 2.5rem 0;
  @media #{$mq-iPad_land}{padding: 4rem 0;}
  &.section--wgiteBg{background-color: #fff;}
  .section-subtitle{
    font-size: 12px;
    font-weight: 500;
    color: $color-title;
    margin-bottom: 1rem;
    padding-top: 1rem;
  }
  .section-title{
    font-size: 36px;
    font-weight: 400;
    color: $color-title;
    margin-bottom: 1.5rem;
    @media #{$mq-iPad_port}{font-size: 42px;}
    @media #{$mq-iPad_land}{font-size: 48px;}
  }
  .section-text{
    font-size: 14px;
    line-height: 1.5;
    color: $color-gray;
    margin-bottom: 2rem;
  }
  .section-box{
    text-align: left;
    max-width: 700px; margin: 0 auto;
    &.box--center{text-align: center;}
    &.box--white{
      .section-subtitle, .section-title{
        color: #fff!important;
      }
    }
  }

 /*Service*/
 &.section--service{
  padding: 2rem 0 14rem; 
  background-color: $color-primary;
  background-image: url('../images/technology-bg.svg'); 
  background-repeat: no-repeat; 
  background-position: bottom right; 
  background-size: 40% 70%;
  .contentWrapper{
    max-width: 1280px;
  }
  .service-slider{
    padding: 0 2rem;
    @media #{$mq-iPad_port}{padding: 0 4rem;}
    .slick-prev{
      left: 0;
      @media #{$mq-iPad_port}{left: 0.5rem;}
    }
    .slick-next{
      right: 0;
      @media #{$mq-iPad_port}{right: 0.5rem;}
    }
    .slick-list{
      margin: 0 -1rem;
      .slick-track{display: flex;}
    }
    .slider-item{
      margin: 0 1rem;
      background-color: #fff;
      .slider-text{
        padding: 1.5rem 1.5rem 1rem 1.5rem; 
        .slider-title{
          @include transition();
          display: block; 
          width: 100%; 
          margin: 0 auto 0.5rem; 
          font-size: 1rem; 
          line-height: 1.1; 
          font-weight: 700; 
          text-transform: none; 
          text-align: left; 
          color: transparent;
          -webkit-background-clip: text;
          background-clip: text;
          background-repeat: no-repeat;
          background-image: linear-gradient(to right, $color-primary 45%, $color-baseText 55%);
            background-size: 220% 100%;
            background-position: 100% 50%;
          @media #{$mq-iPad_land}{font-size: 1.25rem;}
          &:hover{ background-position: 0% 50%;}
        }
      }
    }
    .slick-dots{bottom: -3rem;}
  }
}

&.section--hero{
  position: relative;
  padding: 4.6rem 0 0;
  display: flex;
  min-height: 780px;
  max-height: 1140px;
  &:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(25, 31, 51, 0) 0%, rgba(25, 31, 51, 0) 50%, #191F33 100%);
    z-index: 1;
  }
  img{object-fit: cover;}
  .hero-info{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 96%;
    max-width: 1600px;
    margin: 0 auto;
    color: $color-light;
    padding: 0 1rem 4rem 1rem;
    z-index: 2;
    .subtitle{
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 1.5rem;
    }
    .title{
      font-size: 36px;
      margin-bottom: 1rem;
      @media #{$mq-iPad_port}{font-size: 42px;}
      @media #{$mq-iPad_land}{font-size: 48px;}
    }
  }
}

&.section--about{
  background-color: $color-section;
}

&.section--team{
  padding-bottom: 5rem;
  .section-box{padding-bottom: 5rem;}
  .team-boxes{
    @extend %flexBox;
    justify-content: center;
    gap: 4%;
    max-width: 1100px;
    margin: 0 auto;
    @media #{$mq-iPad_port}{gap: 2%;}
    .team-box{
      background-color: $color-section;
      width: 48%;
      margin-bottom: 4%;
      @media #{$mq-iPad_port}{width: 32%; margin-bottom: 2%;}
      .box-data{
        padding: 1.5rem;
        .box-name{
          font-size: 18px;
          font-weight: 500;
          color: $color-primary;
          margin-bottom: 1rem;
        }
        .box-desc{
          font-size: 12px;
          line-height: 1.5;
          color: $color-gray;
        }
      }
    }
  }
}
&.team--end{
  .contentWrapper{max-width: 1400px;}
}

&.section--contact{
  padding: 0;
  .contentWrapper{background-color: $color-title;}
  .box-left{
    @extend %flexBox;
    align-items: center;
    .img-box{
      @extend %flexBox;
      position: relative;
      align-self: stretch;
      width: 100%;
      @media #{$mq-iPad_port}{width: 33%;}
      img{object-fit: cover;}
      &.img-box--left:before{
        content: "";
        position: absolute;
        left: -1000%;
        top: 0;
        width: 1000%;
        height: 100%;
        background-color: $color-site_bg;
      }
      &.img-box--right:before{
        content: "";
        position: absolute;
        right: -1000%;
        top: 0;
        width: 1000%;
        height: 100%;
        background-color: $color-site_bg;
      }
    }
    .section-box{
      max-width: 800px;
      padding: 2rem 1rem;
      width: 100%;
      @media #{$mq-iPad_port}{width: 66%; padding: 2rem;}
    }
    &.box-half{
      .img-box{
        width: 100%;
        @media #{$mq-iPad_port}{width: 48%;}
      }
      .section-box{
        width: 100%;
        @media #{$mq-iPad_port}{width: 48%;}
      }
    }
  }
  .contactBoxes{
    
  }
}

&.section--tips{
  padding: 6rem 0;
  .boxContainer{
    @extend %flexBox;
    justify-content: center;
    @media #{$mq-iPad_land}{padding: 0 2rem;}    
    .section-box{
      width: 100%;
      margin: initial;
      text-align: center;
      padding-bottom: 4rem;
      @media #{$mq-iPad_land}{width: 33%; text-align: left; padding-right: 2rem; padding-bottom: 0;}
      .section-title{
        font-size: 36px;
        @media #{$mq-pc_1400}{font-size: 48px;}
      }
    }
    .articleContainer{
      @extend %flexBox;
      justify-content: space-between;
      gap: 2%;
      width: 100%;
      @media #{$mq-iPad_land}{width: 66%;}
      .article-box{
        width: 100%;
        margin-bottom: 2rem;
        &:last-child{margin-bottom: 0;}
        @media #{$mq-slide-spec-sm}{width: 49%; margin-bottom: 0;}
        .article-title{
          font-size: 18px;
          font-weight: 500;
          color: $color-title;
          padding: 1rem 0;
        }
        .article-desc{
          font-size: 14px;
          line-height: 1.5;
          color: $color-gray;
          padding-bottom: 1.5rem;
        }
      }
    }
  }
}

 &.section--whyus{
  @media #{$mq-iPad_land}{padding-bottom: 0; z-index: 2;}
  .statText, .splitText{color: $color-darkBlue;
    p, ul li, h3,h4,h5,h6{color: $color-darkBlue;}
  }
 }

  /*Timeline*/
  &.section--timeline{background-color: white; background-image: url('../images/timeline-bg.svg'); background-repeat: no-repeat; background-position: bottom left; background-size: contain;
    @media #{$mq-iPad_land}{padding: 10rem 0 6rem}
    &.timeline--home{background-image: url('../images/timeline-home-bg.svg'); }
  }

  /*CTA*/
  &.section--cta{padding: 5rem 0; background-color: $color-primary; color: white; overflow: hidden;
    &:before{content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: $color-darkBlue; opacity: 0.8; z-index: 2;}
    .cta__bgImage{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('../images/cta-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed;filter: blur(4px);}
    .contentWrapper{position: relative; z-index: 3;
      .cta__text{ width: 100%; text-align: center;
        .cta__title{display: block; margin-bottom: 1.5rem; font-size: 2.2rem; line-height: 1.3; font-weight: 300; text-align: center;
          @media #{$mq-iPad_land}{font-size: 3.5rem;}
        }
        p{font-size: 1.1rem; font-weight: 800;
          @media #{$mq-iPad_land}{font-size: 1.5rem;}
        }
      }
      .buttonWrapper{
        .btn--xxl{min-width: auto; width: 100%; margin-bottom: 2rem;
          @media #{$mq-tab_720}{min-width: 220px; width: auto; margin-bottom: 0;}
          @media #{$mq-iPad_land}{min-width: 320px;}
          &:last-child{margin-bottom: 0;}
        }
        &.buttonWrapper--btnGroup{
          .btn--cta{min-width: auto;}
        }
      }    
    }
  }
  /*COUNTER*/
  &.section--counter{position: relative; padding: 0; margin-top: -8rem;
    &:before{content: ''; display: none; position: absolute; width: 50%; height: 100%; right: 0; top: 0; background-color: $color-darkBlue;
      @media #{$mq-iPad_land}{display: block;}
    }
    .contentWrapper{max-width: 1280px; z-index: 2; background-color: $color-darkBlue;}
  }

  &.section--references{padding-bottom: 0; z-index: 3;}
  &.section--opinion{padding: 8rem 0 4rem; background-color: $color-primary; position: relative; background-image: url('../images/opinions-bg.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-attachment: fixed;
    &:before{content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.8;
      background: rgb(0,37,51);
      background: linear-gradient(90deg, rgba(0,37,51,1) 0%, rgba(0,175,237,1) 100%);
    }
    .contentWrapper{@extend %flexBox; justify-content: center; align-items: center; max-width: 1280px;}
    .titleWrapper{width: 90%;
      @media #{$mq-iPad_land}{width: 50%;}
    }
    .opinionList{width: 100%;
      @media #{$mq-iPad_land}{width: 50%;}
    }

  }
  &.section--blog{padding-bottom: 0; background-color: white;background-image: url('../images/blog-bg.svg'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-attachment: fixed;
    .contentWrapper{max-width: 1280px;}
  }
}

/*COUNTER*/
.counter{@extend %flexBox; justify-content: center; align-items: flex-start; max-width: 1600px; margin: 0 auto; padding: 1rem;
  @media #{$mq-tab}{justify-content: space-between;}
  @media #{$mq-iPad_land}{padding: 2rem;}
  .counter__item{display: block; width: 50%; text-align: center; margin-bottom: 3rem;
    @media #{$mq-tab}{width: calc(100% / 2); margin: 0 auto 2rem; }
    @media #{$mq-tab_720}{width: calc(100% / 3); margin-bottom: 3rem;}
    @media #{$mq-pc_1280}{width: calc(100% / 5); margin-bottom: 0;}
    .counter__item__icon{@extend %flexBox; align-items: center; justify-content: center; position: relative; width: 50px; height: 50px; margin: 0 auto 1rem; background-color: $color-primary;
      img{width: 32px; margin: 0 auto;}
    }
    .counter__item__number{display: inline-block; vertical-align: middle; margin-bottom: 0.5rem; font-size: 2rem; line-height: 1; font-weight: 700; color: white;
      @media #{$mq-iPad_land}{font-size: 2.5rem;}
      @media #{$mq-pc_1280}{font-size: 3rem;}
    }
    .counter__item__title{display: block; width: 100%; position: relative;  font-family: $baseFont; font-size: 0.85rem; line-height: 1.2; font-weight: 500; text-transform: uppercase; color: white;
      @media #{$mq-pc_1400}{font-size: 1rem;}
    }
    .counter__item__unit{display: block; width: 100%; position: relative; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: white; margin-bottom: 0.5rem;}
  }
}

/*OPINIONS*/
#opinions{
  .opinion__item{ padding: 2rem; background-color: transparent;
    &:before{ transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); content: ''; display: block; position: absolute; width: 64px; height: 64px; right: 2rem; bottom: 2rem; background-color: transparent;
      background-image: url("../images/icons/icon-opinion.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain;
    }
    .statText{
      p{color: white; font-size: 1.2rem; line-height: 1.3; font-weight: 500; font-style: italic;}
    }
    .opinion__footer{padding-top: 1rem; margin-top: 1rem; text-align: center; padding-left: 2rem;
      &:before{content: ''; display: block; position: absolute; width: 44px; height: 44px; left: 0; top: calc(50% - 22px);}
      @media #{$mq-slide-spec-md}{text-align: left;}
      .opinion__image{
        display: inline-block; vertical-align: middle; width: 90px; height: 90px; margin-bottom: 1rem; border-radius: $radius-round; overflow: hidden; border: 2px solid $color-border;
        @media #{$mq-slide-spec-md}{margin-bottom: 0;}
        @media #{$mq-iPad_land}{width: 120px; height: 120px;}
      }
      .opinion__name{display: block; font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.25rem; font-weight: 600; color: white}
      .opinion__company{display: block; font-size: 0.9rem; line-height: 1.1; font-weight: 500; color: white}
      
    }
  }

  .slick-track{padding: 2rem 0;
    .slick-slide{
      &:before{ opacity: 0;}
      &.slick-active{
        &:before{ opacity: 1;}
      }
    }
  }
  .slick-prev, .slick-next{top: auto; bottom: 0;}
  .slick-prev{left: 2rem}
  .slick-next{right: auto; left: 5rem;}
}

.slider-track {
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

/*Why Us*/
.splitBox{@extend %flexBox; justify-content: center; align-items: flex-start;
    .splitItem{width: 94%;
      @media #{$mq-iPad_land}{width: 50%;}
      .splitText{
        width: 90%; 
        margin: 0 auto 2rem;
        @media #{$mq-iPad_land}{max-width: 640px; margin: 0; margin-bottom: 3rem!important; padding-left: 3rem;}
        ul{
          li{display: block; position: relative; padding-left: 1.5rem; margin-bottom: 1.5rem; font-size: 1rem; font-weight: 800;
            @media #{$mq-tab_720}{padding-left: 2rem; margin-bottom: 2.5rem; font-size: 1.2rem;}
            &:before{content: ''; display: block; position: absolute; width: 16px; height: 16px; left: 0; top: 2px; background-repeat: no-repeat; background-position: center center; background-size: contain;
              background-image: url("../images/icons/svg-listImg.svg");
              @media #{$mq-tab_720}{width: 19px; height: 19px;}
            }
            p{
              margin-top: 0.5rem; 
              font-size: 0.9rem;
              font-weight: 500;
              @media #{$mq-pc_1400}{font-size: 1.1rem;}
            }
            a{
              @include transition;
              color: $color-darkBlue;
              &:hover{
                color: $color-primary;
              }
            }
            ul{ margin-top: 0.5rem;
              li{padding-left: 1rem; margin-bottom: 0; font-weight: 600; font-size: 1rem;
                &:before{background-image: none; width: 5px; height: 5px; top: 10px; background-color: $color-primary; border-radius: $radius-round;}
              }
            }
          }
        }
      }
      &:nth-child(1){
        .splitText{
          @media #{$mq-iPad_land}{margin: 0 0 0 auto; padding-left: 0; padding-right: 3rem;}
          }
      }
    }
    .splitVideo{ @include shadow-depthLarge;margin: 0 auto 3rem; max-width: 640px;
      @media #{$mq-iPad_land}{margin: 0 0 -4rem 0; max-width: 100%;}
    }
    .video{
      .video__overlay{display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: $color-secondary; z-index: 2; opacity: 0.8;}
      
      #playBtn{display: block; position: absolute; width: 64px; height: 64px; left: 0; right: 0; margin: 0 auto; top: calc(50% - 32px); line-height: 0; font-size: 0; text-indent: -1000px; overflow: hidden; z-index: 10; background-color: $color-active; border-radius: $radius-round;
        background-repeat: no-repeat; background-size: contain; background-position: right center; background-image: url("../images/icons/video-play.svg"); background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; cursor: pointer;
        animation: pulse-animation 2s infinite; 
        @keyframes pulse-animation {
          0% {
            box-shadow: 0 0 0 0px rgba(238,198, 0, 0.2);
          }
          100% {
            box-shadow: 0 0 0 30px rgba(238,198, 0, 0);
          }
        }
        &:hover{background-color: lighten($color-active,5%); transform: scale(1.05)}
      }
    }
    .splitSlider{ @include shadow-depthLarge; background-color: $color-darkBlue; margin-bottom: -4rem;
      @media #{$mq-iPad_land}{margin-bottom: -4rem;}
      .slick-dots{
        bottom: 2rem; margin: 0 0 0 auto; padding: 0 2rem; text-align: right;
      }
      .slick-track{@extend %flexBox;}
      .slider__item{ max-height: 640px; overflow: hidden;
        .slider__item__img{ @extend %flexBox; height: 100%;
          img{object-fit: cover;}
          &:hover{
            &:before{opacity: 0.2;}
          }
        }
      }
    }
}

#referenceSlider{max-width: 720px; margin-left: auto;
  margin-right: auto;
  @media #{$mq-iPad_land}{max-width: 100%;}
}

.timeline{
  .timelineWrapper{max-width: 1600; margin: 0 auto;
    .slick-track{/*@extend %flexBox; align-items: stretch; */}
    &:before{ content: ''; display: block; position: absolute; width: 100%; height: 3px; left: 0; top: calc(50% - 7px); background-color: $color-active;}
    .timelineItem{ /*@extend %flexBox; align-items: flex-start; justify-content: flex-start;*/
      .timelineItem__title{@extend %flexBox; align-items: flex-end; justify-content: center;  width: 100%; min-height: 160px; position: relative; padding: 3rem 0; font-size: 0.8rem; line-height: 1.2; font-weight: 900; text-transform: uppercase; text-align: center; color: $color-darkBlue;
        @media #{$mq-iPad_land}{font-size: 1rem;}
        &:before{content: ''; display: block; position: absolute; width: 13px; height: 13px; left: 0; right: 0; margin: 0 auto; bottom: 0; background-color: $color-active; border-radius: $radius-round;}
        &:after{content: ''; display: block; position: absolute; width: 2px; height: 1.5rem; left: 0; right: 0; margin: 0 auto; bottom: 19px; background-color: $color-active;}
      }
      .timelineItem__number{display: block; width: 100%; padding: 3rem 0; font-size: 4rem; line-height: 1; font-weight: 300; text-align: center; color: $color-primary;}
      &:nth-child(2n){flex-direction: column-reverse;
        .timelineItem__title{ align-items: flex-start; 
          &:before{bottom: auto; top: -12px;}
          &:after{bottom: auto; top: 10px;}
        }
      }

    }
  }
}