main{
  overflow: hidden;
}

#banner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top:80px;
}

#banner section{
  margin-bottom:24px;
}

#banner section .title{
  font-size:61px;
  line-height:75px;
  margin-bottom:8px;
  display: flex;
  flex-wrap: wrap;
}

#banner section .title .red-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left:10px;
}

/* #banner section .title .red-text img{
  width: 100%;
} */

#banner section .content{
  font-size:20px;
  line-height: 27px;
}

#banner .red-button{
  display: flex;
  align-items: center;
  margin-bottom:40px;
}

#banner .video-container{
  width:100%;
  height:550px;
  border-radius:50px;
  overflow: hidden;
  margin-bottom:64px;
}

#banner .video{
  width:100%;
  height:100%;
  /* background-color:grey; */
  background-image:url('../images/home/banner.png');
  background-size:cover;
  background-position: center;
}

/* #banner .sub-content{
  align-self: center;
  margin-bottom:24px;
  font-size: 20px;
  line-height: 27px;
} */

#companies{
  margin-bottom:160px;
  display: flex;
  align-items: center;
  flex-direction: column;

}

#companies > p{
  margin-bottom:24px;
  font-size: 20px;
  line-height: 27px;
  padding:0 20px;
  text-align: center;
}

#companies .company-list{
  display: flex;
  width:100%;
}

#companies .company-list .image-container{
  margin:5px;
}

#companies .company-list li img{
  /* width:187px; */
  height:100px;
}

#service{
  margin-bottom:82px;
}

#service .main-section{
  display: flex;
}

#service .main-section .title{
  font-size:49px;
  line-height: 60px;
  letter-spacing: 0.005em;
}

#service .main-section .content{
  max-width:667px;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 22px;
  padding-top:20px;
}

#service .main-section .content .blue-button{
  margin-top:16px;
}

.service-section{
  max-width:1440px;
  width:100%;
  margin:auto auto 80px auto;
}

.service-section:last-of-type{
  margin-bottom:140px;
}

.service-section .container{
  margin: auto auto 20px 115px;
}

.service-section .container > section{
  margin-bottom:18px;
}

.service-section .title{
  display: flex;
  align-items: center;
  width:100%;
  text-transform: uppercase;
  font-size:39px;
}

.service-section .title::after{
  content:'';
  height:2px;
  background-color:#F25749;
  width:100%;
  margin-left:24px;
}

.service-section .content{
  max-width:998px;
  width:100%;
  line-height:22px;
}

.service-section .image-slick{
  display: flex;
}

.service-section  .image-container{
  border-radius:20px;
  overflow: hidden;
  width:400px;
  height:320px;
  margin-right:20px;
}

.service-section  .image-container:last-child{
  margin-right:0;
}

.service-section .see-more{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color:#204ECF;
  font-weight: 600;
  text-transform: uppercase;
}

.service-section .see-more .circle-arrow{
  margin-left:20px;
}

.service-section .see-more .circle-arrow .icon{
  transition: color 0.3s ease-in;
}

.service-section .see-more .circle-arrow:hover .icon{
  color:white;
}


#steps{
  background-color:#060F17;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:100px 20px;
  color:#ffffff;
  margin-bottom:120px;
}

#steps > section{
  max-width:1000px;
  width:100%;
  margin:auto;
  display: flex;
  flex-direction: column;
  align-items: center;

}

#steps > section > .title{
  font-size:49px;
  margin-bottom:80px;
}

#steps ul{
  margin-bottom:80px;
}

#steps li{
  display: flex;
  font-family: 'Clash Display';
  margin-bottom:64px;
}

#steps li:last-child{
  margin-bottom:0;
}

#steps li::before{
  content:'';
  color:#F25749;
  font-size: 39px;
  font-weight: 600;
  width:55px;
  margin-right:47px;
}

#steps li:first-child::before{
  content:'01';
}
#steps li:nth-child(2)::before{
  content:'02';
}
#steps li:last-child::before{
  content:'03';
}

#steps .sub-section .title{
  font-size:39px;
  line-height: 48px;
  margin-bottom:12px;
}

#steps .sub-section .content{
  font-size:16px;
  font-family: 'Satoshi';
}

#steps .red-button{
  display: flex;
  align-items: center;
  justify-content: center;
}

#steps .red-button .icon{
  margin-left:10px;
  width:24px;
  height:24px;
}

#about{
  margin-bottom:120px;
}

#about .container{
  display: flex;
  align-items: center;
}

#about .blue-button{
  margin-bottom:80px;
}

#about .container > section {
  width:794px;
  margin-right:118px;
}

#about .container .title{
  font-size:49px;
  margin-bottom:12px;
}

#about .container .sub-title{
  font-style: italic;
  font-weight: 700;
  font-size: 25px;
  line-height: 34px;
  margin-bottom:24px;
}

#about .container .content{
  margin-bottom:24px;
}

#about .info p{
  font-size: 61px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  font-family: 'Clash Display';
}

#about .info p:first-child{
  margin-bottom:32px;
}

#about .info p .red-text{
  font-size: 20px;
  text-transform: uppercase;
  font-weight:500;
}

#about .about-list ul{
  display: flex;
}

#about .about-list li{
  width:390px;
  margin-right:16px;
}

#about .about-list li:last-child{
  margin-right:0;
}

#about .about-list .title{
  font-size:31px;
}

.company-image{
  overflow: hidden;
  width:100%;
  margin-bottom:100px;
  height:450px;
  background-image: url(../images/home/bg_img.jpg);
  background-position: center;
  background-size: cover;
}

.company-image img{
  width:100%;
}


#testimonial{
  max-width:1440px;
  width:100%;
  margin:auto auto 140px auto;
}

#testimonial .container{
  margin:auto auto auto 115px;
}

#testimonial section .title{
  font-size: 49px;
  margin-left:100px;
  margin-bottom:22px;
  margin:auto auto 22px 100px;
}

#testimonial .slick-container{
  display: flex;
}

#testimonial .button-arrow{
  margin:88px 25px auto auto;
}

#testimonial .next.circle-arrow{
  margin-bottom:16px;
}

#testimonial .prev.circle-arrow img{
  transform: rotate(180deg);
}

#testimonial .testimonial-slick{
  width:100%;
}

#testimonial .slick-slider .slick-list{
  padding-left:15px;
}

#testimonial .testimonial-slick li{
  width:450px;
  box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding:30px;
  margin:20px 20px 20px auto;
}

#testimonial .content{
  margin-bottom:28px;
  font-size:20px;
}

#testimonial .author{
  display: flex;
  align-items: center;
}

#testimonial .author img{
  border-radius: 50%;
  width:60px;
  height:60px;
  margin-right:12px;
}

#testimonial .author .author-name{
  font-weight:700;
}

#testimonial .author .desc{
  font-size:14px;
}

#partner{
  margin-bottom:168px;
}

#partner .title{
  font-size:49px;
  margin-bottom:26px;
}

#partner ul{
  display: flex;
}

#partner .first-list{
  margin-bottom:16px;
}

#partner .image-container{
  width:187px;
  height:100px;
  margin-right:15px;
}

#partner .image-container img{
  width:100%;
}

#cta{
  color:white;
  background-image:url('../images/home/bg_cta.jpg');
  background-size:cover;
  background-position: center;
  padding:131px 85px 93px;
  border-radius: 50px 50px 0px 0px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#cta section{
  margin-right:135px;
}

#cta .title{
  font-size:61px;
}

#cta .blue-button{
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid #FFFFFF;
  min-width:244px;
}

#cta .blue-button:before{
  left:-22px;
}

#cta .blue-button:hover:before{
  width:80%;
}

#cta .blue-button a{
  display: flex;
  align-items: center;
  font-size:31px;
  font-family:'Clash Display';
}

#cta .blue-button a .icon{
  transform: translateX(15px);
  transition: transform 0.3s ease-in;
  width:32px;
  height:32px;
}

#cta .blue-button:hover a .icon{
  color:white;
  transform: translateX(25px);
}

@media( max-width:768px ){

  #banner{
    padding-top:60px;
  }

  #banner section .title{
    flex-direction: column;
    margin-bottom:25px;
  }
  #companies{
    margin-bottom:80px;
  }

  #service .main-section{
    flex-direction: column;
  }

  #service .main-section .content{
    padding-top:0;
  }

  .service-section .container{
    margin:auto auto 20px 40px;
  }

  .service-section .see-more .circle-arrow:hover .icon{
    color:#204ECF;
  }

  #decoratives{
    margin-bottom:110px;
  }

  #steps{
    padding:100px 40px;
    margin-bottom:100px;
  }

  #about{
    margin-bottom:80px;
  }

  #about .container{
    flex-direction: column;
    align-items: flex-start;
  }
  #about .container > section{
    width:auto;
  }

  #about .info{
    display: flex;
  }

  #about .info p:first-child{
    margin-right:32px;
  }

  #about .about-list ul{
    flex-direction: column;
  }

  #about .about-list li{
    width:90%;
    margin-bottom:32px;
  }

  #about .about-list li:last-child{
    margin-bottom:0;
  }

  #testimonial{
    margin:auto auto 120px auto;
  }
  

  #testimonial .container{
    margin:auto auto auto 40px;
  }

  #testimonial section .title{
    margin:0;
  }

  #partner{
    text-align: center;
    padding:0 80px;
  }

  #partner .image-container{
    width:30%;
  }

  #partner .image-container:nth-child(3n){
    margin-right:0;
  }
  #partner ul{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }


  #cta{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #cta section{
    margin:auto auto 32px auto;
  }

}

@media( max-width:480px ){
  #banner{
    padding-top:20px;
  }

  #banner section .title,
  #service .main-section .title,
  #steps > section > .title,
  #about .container .title,
  #testimonial section .title,
  #partner .title{
    font-size:25px;
    line-height: initial;
    margin-bottom:10px;
  }

  #banner section .title{
    flex-direction: row;
    flex-wrap: wrap;
  }

  #banner section .title .red-text{
    width: 162px;
  }

  #banner section .title .red-text img{
    width:100%;
  }

  #banner section .content,
  #companies > p,
  .service-section .content,
  .service-section .see-more,
  #steps .sub-section .content,
  #about .container .content,
  #about .about-list .content,
  #cta .content,
  #testimonial .content{
    font-size:16px;
    line-height: normal;
  }

  .service-section .title{
    font-size:20px;
  }

  #banner .video-container{
    height:300px;
  }
  
  .service-section{
    margin:auto auto 20px auto;
  }
/* 
  .service-section .title::after{
    display: none;
  } */

  .service-section .image-container{
    height:250px;
  }

  .service-section .container{
    margin:auto auto 20px 20px;
  }

  #decoratives{
    margin-bottom:50px;
  }

  #steps{
    padding: 50px 20px;
    margin-bottom: 40px;
  }
  #steps li{
    margin:0 10px 30px;
  }

  #steps > section > .title{
    text-align: center;
    margin-bottom:30px;
  }

  #steps li::before,
  #steps .sub-section .title{
    font-size:20px;
  }

  #steps .sub-section .title{
    line-height: normal;
  }

  #steps ul,
  #about{
    margin-bottom:40px;
  }
  

  #about .container > section{
    width:100%;
  }

  #about .container .sub-title,
  #about .about-list .title{
    font-size:20px;
  }
  #about .container .sub-title {
    line-height:normal;
  }

  #about .info p{
    font-size:30px;
  }

  #about .info p .red-text{
    font-size:18px;
  }

  #about .blue-button{
    margin-bottom:40px;
  }

  #about .about-list li{
    width:100%;
    margin-bottom:15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

  }

  .company-image{
    margin-bottom:50px;
  }

  #testimonial{
    margin-bottom:18px;
  }

  #testimonial .container{
    margin:auto;
  }

  #testimonial section .title{
    text-align: center;
  }

  #partner{
    padding:0 40px;
    margin-bottom: 50px;
  }

  #partner .image-container{
    width:40%;
    margin-right: 0;
  }

  /* #partner .image-container:nth-child(3n){
    margin-right:15px;
  } */

  #cta{
    padding:50px 20px;
  }

  #cta .title{
    font-size:30px;
  }

  #cta .blue-button a{
    font-size:20px;
  }
  #cta .blue-button{
    max-width:200px;
    width:100%;
  }

  .button-arrow{
    display: none;
  }

  #testimonial .testimonial-slick li{
    margin:10px 10px 10px auto;
  }

}