.hero-button:hover .button-hero-inner {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-1 .icon-second {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.hero-1:hover .icon-second {
  opacity: 1;
  transform: translateX(0);
}
  



.hero-outer-wrapper{
padding-bottom: 30px;
}
.hero-outer {
  
  width: 100%;
  flex-shrink: 0;
}
.hero-text>p {
  color: #FFF !important;
  font-family: Overpass;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 274px;
  margin-bottom: 100px;
}


.hero-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1350px;
  margin-left:auto;
    margin-right:auto;
  
}

.hero-left,
.hero-right {
  flex: 1;
  min-width: 50%;
  box-sizing: border-box;
  
}

.hero-left {
padding-top: 113px;
 
  padding-bottom: 50px;
  
}

.hero-right {
    margin-top: 50px;
  padding: 20px;
}

@media (max-width: 1024px) {

  .hero-left,
  .hero-right {
    min-width: 100%;
  }

  .hero-container {
    flex-direction: column-reverse;
  }
}

.scroll-outer {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white; /* Set text color to white */
    }

    .scroll-down-button {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .scroll-text {
      color: white; /* Set text color to white */
    }


    .scroll-svg svg {
      fill: white; /* Set SVG fill color to white */
    }
.slide-bottom {
	-webkit-animation: slide-bottom 5.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-bottom 2.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}




.hero-button, .hero-button-2>.button-hero-inner {
  display: inline-flex;
  flex-direction:row;
  align-items: center;
}
.hero-button{
  padding: 8px 15px 8px 15px;
margin-right:30px;

flex-shrink: 0;

}
.hero-button:first-child {
  background-color: red;
   border-top: 3px solid red;
    border-bottom: 3px solid red;


}
.hero-button:nth-child(2){
  border-bottom: 3px solid white;
}

.hero-button:first-child>a>.icon-second{
display:none;
}

.hero-button:nth-child(2)>.icon-second>svg {
    display: inline!important;
width: 9px;
height: 4px;
transform: rotate(-90deg);
flex-shrink: 0;
stroke-width: 2px;
stroke: #FFF;
  }

.hero-button > a {
   text-decoration: none;
  color: #FFF;
  font-family: Overpass;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}


.hero-button .button-hero-inner .icon-second {
  margin-left: 5px; /* Adjust the margin as needed */
  display: inline!important;
}

.scroll-svg:hover{
cursor: pointer;
}

 transition: all 0.3s ease;
}

.hero-button:first-child:hover  {
  transform: scale(0.85);
}
.hero-button:first-child{
  transition: all 0.3s ease;
}

@media only screen and (min-width:1200px)and (max-width:1350px){.hero-left {
    padding-bottom: 50px;
    padding-top: 113px;
    padding-left: 50px!important;
  }}

@media only screen and (min-width:768px)and (max-width:1200px){
  .hero-button:nth-child(2) {
    border-bottom: 2px solid white!important;
}
  
  .hero-headline{
  font-size:36px!important;
    padding-right:50%;
        line-height: normal!important;
  }
  .hero-text>p{
  font-size:16px!important;
    margin-bottom:54px!important;
  }
  .button-hero-inner, .scroll-text{
  font-size:16px!important;
  }
 
  .hero-left {
    padding-top: 68px!important;
    padding-left: 40px;
    padding-right: 40px;
    width:100%;
   
  }
  .hero-right{
display:none;
  }
}
@media only screen and (max-width:540px){
  .hero-button-wrapper{
  display: flex!important;
   flex-direction: column!important;
  }
  .hero-button, .hero-button-2>.button-hero-inner {
    display: block!important;}
  .hero-left {

    margin-top: -40px!important;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
 .hero-right {
   padding-left:50px;
     padding-right:50px;
 
  }
   .hero-text>p {
    line-height:normal!important;}
  .hero-button:nth-child(2) {
    border-bottom: 2px solid white!important;
}
  .hero-headline{
  font-size:24px!important;
        line-height: normal!important;
    
  }
  .hero-text>p{
  font-size:16.2px!important;
    margin-bottom:54px!important;
  }
  .button-hero-inner, .scroll-text{
  font-size:14px!important;
  }
  .hero-button {
    padding: 8px 15px 8px 15px;
    margin-right: 0!important;
  }
}
@media only screen and (min-width:540px)and (max-width:768px){
  .hero-left>h1 {
    padding-bottom: 0!important;}
  
  .hero-right {
     background position: center;
       background-repeat: no-repeat;
    background-size:cover;
 
  }
  .hero-text>p {
    line-height:normal!important;}
  .hero-button:nth-child(2) {
    border-bottom: 2px solid white!important;
}
  .hero-headline{
  font-size:36px!important;
    
  }
  .hero-text>p{
  font-size:16px!important;
    margin-bottom:54px!important;
  }
  .button-hero-inner, .scroll-text{
  font-size:16px!important;
  }
  .hero-left{
  padding-left:40px!important;
    padding-right:40px!important;
  }
}
@media only screen and (max-width:768px){
.hero-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin-left:auto;
    margin-right:auto;
}

  
  .hero-left{
  padding-left:12px;
    padding-right:12px;
     padding-top:0!important;
    padding-bottom:0!important;
    margin-top: -30px;
  }
   .hero-right {
     margin-top:0.5rem!important;
   width: 100%!important;
     height:75%!important;
     aspect-ratio:4/3;
  background-size:contain;
  }
  .hero-text>p {
    margin-bottom: 20px!important;
    line-height: 2.5rem;
}
.hero-button:first-child {
        margin-bottom: 15px;
}
  
  .scroll-outer {
  padding-top:30px!important;
  }
}