main { margin-top: 0px; }

/* Container title */
.container-hero { height: 500px; position: relative; width: 100%; overflow: hidden; justify-content: center; min-height: 100vh; }
.container-hero .payoff { position: relative; z-index: 2; top: 40px; }
.container-hero .sub-payoff { font-size: 40px; font-weight: 400; color: #fff; margin-bottom: 0px; }

.container-hero .hero { color: #fff; }
.container-hero .we-are { font-size: 80px; }
.container-hero .web-software { font-size: 140px; line-height: 90px; margin-bottom: 0; }
.container-hero .agency { font-size: 80px; }

.container-hero .title-extras { color: #fff; position: relative; top: -40px; margin-bottom: 0; }

.scroll-down { background-image: url(/frontend/assets/icons/down-arrow.svg); background-repeat: no-repeat; background-position: center center; 
  background-size: contain; width: 30px; height: 30px; background-color: #fff; border-radius: 30px; }

.float-wrapper { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 3; }
.floating-box { width: 200px; height: 200px; display: flex; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); animation: float 2s ease-in-out infinite; }
.shadow { position: absolute; bottom: -20px; left: 50%; width: 80px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; transform: translateX(-50%); filter: blur(4px); animation: shadow 3s ease-in-out infinite; }

@keyframes float { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-20px); } }

/* Slideshow */
.hero-slider { position: absolute; width: 100%; height: 100vh; overflow: hidden; background-color: #000; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; }
.hero-slider .slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); pointer-events: none; }
.hero-slider .slide.active { opacity: 1; z-index: 2; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lettering */
.animate-anything-wrapper { position: relative; display: inline-block; }
.animate-anything { display: inline-block; color: #fff; }
.animate-anything .word { line-height: 30px; }
.animate-anything .char { display: inline-block; transform-origin: 0% 95%; }
.animate-anything-dot { position: absolute; right: 6px; bottom: 0; display: block; color: #fff; }

/* Container company */
.container-company .main-text { font-size: 80px; line-height: 80px; }
.container-company .counter-head { font-size: 36px; line-height: 1; font-weight: 600; margin-bottom: 5px; }
.container-company .counter-head small { font-size: 30px; }
.container-company .counter-item .icon { margin-bottom: 10px; }
.container-company .counter-item p { margin: 0; }
.container-company .icon { display: none; width: 40px; }

/* Container services */
.container-services h3 { font-weight: 400; }
.container-services .swiper-pagination { position: relative; text-align: left; }
.container-services .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; }
.container-services .swiper-pagination .swiper-pagination-bullet-active { background-color: #333333; }
.container-services .image-slider { text-align: center; }
.container-services .image-slider img { width: 80%; transform: translateX(150%); opacity: 0; }

.container-services .lets-tip { font-size: 100px; line-height: 100px; margin-bottom: 1.5rem !important; }
.container-services .lets-tip span { font-size: 130px; line-height: 100px; padding-left: 5px; }

/* Why us */
.container-whyus h4 { font-weight: 700; color: var(--let-text-color-primary); }
.container-whyus .dot img { width: 50px; height: 50px; }

/* Responsive */
/*
@media only screen and (max-width:767px) and (min-width:320px) { 
  header { background-color: aqua; }
}

@media only screen and (max-width:431px) and (min-width:320px) { 
  header { background-color: rebeccapurple; }
  
  .lets-text { font-size: 45px; line-height: 45px; } 

  .container-hero .mobile-wave { background-color: #f3f3f3; }
  .container-hero .mobile-wave span { display: none; }
  
  .container-hero .hero { top: 20px; } 
  .container-hero .we-are { font-size: 45px; line-height: 45px; } 
  .container-hero .web-software { font-size: 60px; line-height: 60px; } 
  .container-hero .agency { font-size: 45px; line-height: 45px; } 
  .container-hero .wave { top: -40px; } 
  .container-hero .title-extras { top: 20px; } 
  .container-hero .title-extras p { font-size: 18px !important; } 
  .container-hero .animate-anything-dot { right: 3px; bottom: 1px; } 
  .container-hero .float-wrapper { bottom: 40px; }

  .container-services .lets-tip { font-size: 45px; line-height: 45px; } 
  .container-services .lets-tip span { font-size: 45px; line-height: 45px; }
  .container-services .swiper-wrapper { min-height: 360px; }
  
  .container-company .border-end { border: none !important; }

}

@media only screen and (min-width:768px) and (max-width:991px) { 
  .container-hero .we-are { font-size: 70px; line-height: 60px; } 
  .container-hero .web-software { font-size: 82px; } 
  .container-hero .agency { font-size: 70px; line-height: 60px; } 
  .container-hero .title-extras { top: 40px; } 
}

@media only screen and (min-width:992px) and (max-width:1199px) { 
  .container-hero .we-are { font-size: 70px; line-height: 60px; } 
  .container-hero .web-software { font-size: 110px; } 
  .container-hero .agency { font-size: 70px; line-height: 60px; } 
  .container-hero .title-extras { top: 20px; } 
}

@media only screen and (min-width:1200px) and (max-width:1366px) { 
  .container-hero .we-are { font-size: 70px; } 
  .container-hero .web-software { font-size: 130px; }
  .container-hero .agency { font-size: 70px; } 
}

@media only screen and (min-width:1367px) and (max-width:1440px) { 
  .container-hero .we-are { font-size: 70px; } 
  .container-hero .web-software { font-size: 130px; } 
  .container-hero .agency { font-size: 70px; } 
}
*/


/* 
------------------------------------------
Responsive 
------------------------------------------
*/

/* Smartphone */
@media only screen and (max-width:767px) and (min-width:320px) {
  .lets-text { font-size: 45px; line-height: 45px; } 

  .container-hero { margin-top: 96px; height: 500px; min-height: initial; background-color: #f3f3f3; }
  .container-hero .mobile-wave { display: none; }
  
  .container-hero .hero { top: 0px; } 
  .container-hero .we-are { font-size: 45px; line-height: 45px; } 
  .container-hero .web-software { font-size: 60px; line-height: 60px; } 
  .container-hero .agency { font-size: 45px; line-height: 45px; } 
  .container-hero .title-extras { top: 20px; } 
  .container-hero .title-extras p { font-size: 18px !important; } 
  .container-hero .animate-anything-dot { right: 3px; bottom: 1px; } 
  .container-hero .float-wrapper { bottom: 40px; }

  .container-services .lets-tip { font-size: 45px; line-height: 45px; } 
  .container-services .lets-tip span { font-size: 45px; line-height: 45px; }
  .container-services .swiper-wrapper { min-height: 360px; }
  
  .container-company .border-end { border: none !important; }

  .container-services .swiper-pagination { text-align: center; margin-top: 20px; }
}

/* Smartphone Landscape */
@media only screen and (min-width:480px) and (max-width:767px){
}

/* Tablet */
@media only screen and (min-width:768px) and (max-width:991px) {
}

/* Tablet Landscape */
@media only screen and (min-width:992px) and (max-width:1199px) {
}

/* Laptop 13' - 1366x768 Non-Retina */
@media only screen and (min-width:1200px) and (max-width:1366px) {
}

/* Laptop 4:3 - 1440x1080 */
@media only screen and (min-width:1367px) and (max-width:1440px) {
}