body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#053ef8 5%, #f3ede7);
}


.main-page1 {
  height: 100vh;
}

.carousel-item img {
  width: 100vw;
  height: 100vh;
}

.nav-item {
  font-size: 14px;
}

/* button */
.button-detail {
  display: inline-block;
  border-radius: 4px;
  background-color: #053ef8;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button-detail span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-detail a {
  text-decoration: none;
  color: white;
}

.button-detail span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-detail:hover span {
  padding-right: 25px;
}

.button-detail:hover span:after {
  opacity: 1;
  right: 0;
}

/* show page 2 */
.main-page2 {
  height: 100vh;
}

#page1_2_image_service {
  height: 400px;
  overflow: hidden;
}

#page1_2_image_service img {
  height: 400px;
  filter: blur(0.8px);
}

#page1_2_image_service img:hover {
  filter: none;
  transition: 0.8s;
  transform: scale(0.95);
}

/*Animation Page Service Start*/
#text_cube {
  display: block;
  color: white;
  animation: text_cube 3s;

}

@keyframes text_cube {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#cube_animation div {
  opacity: 0;
  display: inline-block;
  height: 200px;
  width: 200px;
  background-color: white;
  animation: cube_animation 2s
}

#cube_animation div img {
  height: 100%;
  width: 100%;
}

@keyframes cube_animation {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }

  30% {  
    transform: rotate(6deg);
  }

  45% {
    height: 200px;
    opacity: 0.8;
    transform: rotate(2deg);
  }

  100% {
    opacity: 0;
    height: 120vh;
    transform: translateX(0%);
    transform: rotate(0);
  }
}



#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #053ef8;
  border:1px solid white;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
}

#circle-container {
  min-height: 100vh;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  height: 560px;
  overflow: hidden;
}

#main-circle {
  margin: 0px auto;
  width: 480px;
  height: 480px;
  position: relative;
}

/*Earth Circle*/
#circle {
  animation: circle-rotate 20s linear infinite;
  -webkit-animation: circle-rotate 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  width: 75%;
  height: 75%;
  border-radius: 50%;
}

#circle #satellite {
  animation: img-rotate 20s linear infinite;
  -webkit-animation: img-rotate 20s linear infinite;

}

#satellite img {
  margin: 0px auto;
  width: 30%;
  animation: Rotate-reverse 20s linear infinite;
  -webkit-animation: Rotate-reverse 20s linear infinite;
}

#center-earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#center-earth img {
  max-width: 250px;
}

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
  }
}

/*Earth Circle end*/
#bg-service {
  height: 100%;
  overflow: hidden;
}

#bg-service img {
  height: 100%;
  animation: bg_cube 2.5s;
}

#bg-service2 {
  height: 100%;
}

#bg-service2 img {
  width: 150%;
  height: 100%;

}

@keyframes bg_cube {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
#servic_showimg{
  overflow: hidden;
}
#servic_showimg img:hover{
 transition: all .4s ease-in-out;
 transform:  scale(1.2);
}