.hero-section{
  padding-top:100px;
  padding-bottom:100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-h1 {
  max-width: 550px;
  padding-bottom:15px;
}

.hero-h1:after {
  content: "";
  background-image: url('https://emteria.com/hubfs/2022/images/Android-icon.png');
  position: absolute;
  top: -70px;
  right: 0;
  width: 100px;
  display: inline-block;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 2;
}

.hero-animation, .hero-buttons {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  z-index:5;
  padding-bottom:15px;
}
#flip {
  height:50px;
  overflow:hidden;
  text-align:center;
}
#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:flex;
  background-color:#07406f;
  border-radius:10px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
#flip > div > div h2{
  color:#fff;
  margin:0;
}
#flip > div:first-child {
  animation: show 10s linear infinite;
}
.hero-section .hero-section-inner {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-section .hero-buttons {
  padding-top: 30px;
}
.hero-section .hero-buttons a {
  margin-left: 5px;
  margin-right: 5px;
}

.left-image {
  display: flex;
  align-items: center;
}

.hero-section .hero-section-inner img {
  max-width: 100%;
}

.right-image {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.left-image.left-image1 {
  padding-left: 100px;
}

.left-image.left-image3 {
  padding-left: 70px;
}

.right-image.right-image1 {
  padding-right: 100px;
}

.right-image.right-image3 {
  padding-right: 70px;
}

.center-contents {
  position: relative;
}

.left-images {
  width:25%;
}

.right-images {
  width:25%;
}
.hero-section .hero-content p {
  font-size: 25px;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

@media(max-width:1250px){
  .hero-section .hero-content p{
    font-size:20px;
  }
}

@media(max-width:1025px){
  .hero-buttons, .hero-content, .hero-heading{
    max-width: 500px;
  }
  .hero-section .hero-content p{
    font-size:16px;
  }
  #flip>div>div h2{
    font-size:22px;
  }
}

@media(max-width:992px){
  .hero-heading:after{
    top:-60px;
  }
  .hero-buttons, .hero-content, .hero-heading{
    max-width: 400px;
  }
  #flip>div>div h2{
    font-size:22px;
  }
  .left-image.left-image1 {
    padding-left: 60px;
  }

  .left-image.left-image3 {
    padding-left: 30px;
  }

  .right-image.right-image1 {
    padding-right: 60px;
  }

  .right-image.right-image3 {
    padding-right: 30px;
  }
  .hero-section{
    padding-top:50px;
    padding-bottom:50px;
  }
}


@media(max-width:767px){
  .hero-section{
    overflow:hidden;
    padding-bottom: 50px;
  }
  .left-images, .right-images{
    display:none;
  }
  .hero-section{
    padding-top:120px;
    padding-bottom:50px;
  }
  .center-contents {
    width: 100%;
  }
}