.banner {
  color: #FFF;
  padding: 150px 0 70px 0;
  padding: 185px 0 70px 0;
}
.banner h1 {
  text-transform: uppercase;
  color: #FFF;
  width: 1040px;
  max-width: 100%;
  font-size: 120px;
  font-weight: 500;
  font-weight: 700;
  line-height: 1.158;
  letter-spacing: 0.03em;
  text-shadow: 0px 4px 144px rgba(0, 0, 0, 0.35);
  margin-bottom: 100px;
  text-align: left;
  word-break: keep-all;
  white-space: normal;
} 
.banner h1 span {
  display: block;
  text-align: left;
}
@supports (-webkit-hyphens: none) and (text-align-last: left) {
  .banner h1 {
    letter-spacing: 0.02em !important;
    transform: translateX(-0.5px);
  }
}

.banner-content {
  width: 470px;
  max-width: 100%;
  float: right;
}
.banner p {
  font-size: 24px; 
  margin-bottom: 10px;
  font-family: var(--primary-font);
  color: #FFF;
}

@keyframes scrollDotAnim {
  0% { transform: translateY(0px); opacity: 1; }
  50% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; }
}

.scroll-dot {
  animation: scrollDotAnim 1.5s infinite ease-in-out;
  transform-origin: center;
}


/* Responsive */
@media (max-width: 1080px) {
  .banner h1 {
    font-size: 85px; 
  }
}
@media (max-width: 800px) {
  .banner h1 {
    font-size: 70px; 
  }
}
@media (max-width: 768px) {
  .banner { 
    padding: 140px 0 60px 0; 
  }
  .banner h1 {
    font-weight: 700;
    font-size: 47px;
    letter-spacing: 0;
    color: var(--color-blue);
    font-family: var(--primary-font);
    margin: 0;
    letter-spacing: -0.02em;
  }
  .banner p {
    font-size: 18px;
    margin: 10px 0 0 0;
    color: var(--color-blue);
  }
  .banner a.btn {
    margin-bottom: 130px;
    margin-top: 30px;
    font-size: 14px;
  }
  .banner .scroll-mobile {
    text-align: center;
  }
  .scroll-mobile svg {
    width: 241px!important;  
  }
  .btn .arrow svg {
    top: 0;
  }
  a.btn {
    padding: 9px 9px 9px 16px;   
  }
}
@media (max-width: 460px) {
  .banner h1 {
    font-size: 35px;
  }
}