.banner{
    display: flex;flex-wrap: wrap;padding: 20px 10px;
    background:linear-gradient( to bottom right,  rgba(15, 23, 42, 0), rgba(37, 37, 37, 0.5)),url('/assets/uploads/bg.gif');
    background-position: center;
    background-size: cover;
}
.banner-content{width: 60%;padding: 3% 0 3% 10%;}
.banner-content h1 {font-family: "Space Grotesk", serif;font-size: 60px;}
.banner-content h1 span:nth-child(2){position: relative;}
.banner-content p{font-size: 20px;}
.banner-content a{margin-top: 20px;}
.banner-img{width: 40%;}
.banner-img img{ width: 80%; margin: 5% auto 0;}


/*======================== counter ========================*/

.counter-container {
    margin: 5% auto;
    text-align: center;
}
.counter-container .counter1{
    margin: 2%; 
    padding:20px 30px;
    width: 150px;
    height: 150px;
    font-size: 30px;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #000000 linear-gradient(to right, transparent 20% , rgb(3, 3, 59)  );
}
.counter-container .counter1 i{
   padding: 5px 0;
   color: aqua;
}
.counter-container span{
    font-size: 25px;
    font-family:"Space Grotesk", serif ;
}



@keyframes appear {
    from {
      opacity: 0;
      transform:translateY(100px);
    }
    to {
      opacity: 1;
      transform:translateY(0px);
    }
  }

  .counter-container{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }


@media (max-width:992px){
    .banner-content h1 {font-size: 40px;}
}

@media (max-width:880px){
    .banner-content{width: 100%;padding: 3% 8%;text-align: center;}
    .banner-content h1 {font-size: 50px;}
    .banner-img{width: 100%;margin-top: 8%;}
    .banner-img img{width: 80%;margin: 0 auto;}
}



@media (max-width:560px){
    .banner-content h1 {font-size: 40px;}
    .banner-content p {font-size: 16px;}
    .banner-content a {font-size: 16px;margin-top: 10px;}
}

@media (max-width:450px){
    .banner-content h1 { font-size: 30px;}
    .banner-content p {font-size: 14px;}
    .banner-content a {font-size: 14px;margin-top: 5px;}
    .count{flex-direction: column;}
    .counter-container .counter1{font-size: 15px;font-weight: 600;width: 100px;height: 100px;}
    .count .counter-container span{display: block;font-size: 20px;font-family:"Space Grotesk", serif ;}
}