/* header */

/* hero */
@media screen and (max-width: 768px) {
  .hero{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-content{
    transform: translateY(129px); 
}

.hero-content h6{  
    font-size: 12px;
}

.hero-content h1{
    font-size: 38px;
    margin: 20px 0;
    position: relative;
}

.hero-star{
    position: absolute;
    top:0;
    left: 40%;
    z-index: -1;
}
.hero-content p{
    font-size: 12px;
}

.hero-btn1{
    padding: 10px 10px;
    font-size: 10px;
}


.hero-btn2{
    padding: 10px 10px;
    font-size: 10px; 
}

.hero-meta{
    display: none !important;
}
.hero-imgs{
    transform: translateY(170px);
}

.hero-img1{
    position: relative;
    width: 97%;
}
.hero-img5{
    width: 35%;
    position: absolute;
    top: 40%;
    right: 0%;
}
.hero-img3{
    width: 38%;
    position: absolute;
    top: 35px;
    left: 0;
}
.hero-img2{
    width: 35%;
    position: absolute;
    top: 52px;
    left: 22px;
    z-index: 1;
    animation: pop 10s linear infinite;
}


.hero-img4{
    width: 23%;
    position: absolute;
    bottom: 80px;
    left: -4%;
    animation: arrow 2s linear infinite;
}


.hero-img6{
    position: absolute;
    bottom: 00px;
    left: 40px;
    width: 36%;
}
.hero-img7{
    position: absolute;
    bottom: 8px;
    left: 52%;
    width: 20%;
    animation: arrow2 2s linear infinite;
}


.hero-img8{
    position: absolute;
    top: -25px;
    right: 38%;
    width: 22%;
}

.hero-img9{
    position: absolute;
    top: -10px;
    right: 45%;
    width: 10%;
}



.hero-img10{
    position: absolute;
    top: -31px;
    right: 10%;
    width: 24%;
    animation: cloud 3s linear infinite;
}


  
}

/*  */

/* about us  */

@media (max-width: 768px) {
  .about-content h1 {
    font-size: 38px;
    line-height: 40px;
    font-weight: bold;
  }

  .about-content h6 {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .about-content h5 {
    font-size: 16px;
  }

  .about-content p {
    font-size: 14px;
    line-height: 26px;
    padding-bottom: 15px;
  }

  .about-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
   .about-content{
    padding-left: 2px;
   }

  .about-img img {
    width: 100%;
    height: auto;
  }
}

/* portfolio */
@media (max-width: 768px) {
  #portfolioItems {
    margin: 0 0 26% 0;
  }

  
}


/* promo */
@media (max-width: 768px) {
  .promo-bg {
    width: 100%;
    min-height: 800PX;
  }

  .promo-img .img_2 {
    position: absolute;
    bottom: 34px;
    right: 8px;
  }

  .promo-img .img_1 {
    position: relative;
    margin-top: 8px;
    z-index: 1;
  }

  .swiper {
    padding: none !important;
  }

}

@media (max-width: 360px) {
  .promo-bg {
    width: 100%;
    min-height: 800PX;
  }

  .promo-img .img_2 {
    position: absolute;
    bottom: 34px;
    right: 8px;
  }

  .promo-img .img_1 {
    position: relative;
    margin-top: 8px;
    z-index: 1;
}

}
/* footer */

@media (max-width: 768px) {
  .footer{
    text-align: center;
  }

  .social-footer{
    text-align: center;
  }

  .social-footer{
    float: none;
  }

  .footer-logo{
    margin-bottom: 10%;
  }
}