@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
body{
  font-family: 'Roboto', sans-serif;
}
.rotate{
    animation: mymove 5s infinite;
}
@keyframes mymove {
    50% {transform: rotate(180deg);}
  }
.zoom-in-out-box {
    width: 60px;
    height: 60px;
    animation: zoom-in-zoom-out 2s ease infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  .zoom-in-out-box1 {
    width: 30px;
    height: 30px;
    animation: zoom-in-zoom-out 1s ease infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  
  .zoom-in-out-box2 {
    width: 20px;
    height: 20px;
    animation: zoom-in-zoom-out 1s ease infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

.shape{position: relative;}
.star7{position: absolute; left:10%; top:0px;}
.star8{position: absolute; right:10%; top:50px;}
.star{position: absolute; left:10%; top:350px;}
.star1{position: absolute; right:10%; top:400px;}
.star2{position: absolute; left:10%; top:200px;}
.star3{position: absolute; left:23%; top:500px;}
.star4{position: absolute; right:20%; top:300px;}
.star5{position: absolute; right:30%; top:50px;}
.star6{position: absolute; right:30%; top:550px;}
.star6-1{position: absolute; left:2%; top:450px;}
.star6-2{position: absolute;  left:25%; top:300px;}
.star8-1{position: absolute; right:15%; top:550px;}
.star8-2{position: absolute; right:35%; top:450px;}
.star8-3{position: absolute; left:35%; top:450px;}
.star8-4{position: absolute; left:20%; top:550px;}
.star8-5{position: absolute; left:25%; top:50px;}
.star1-1{position: absolute; left:35%; top:200px;}
.star1-2{position: absolute; left:55%; top:600px;}

.text-center{text-align: center;}
.v-align{vertical-align: middle; display: grid; align-items: center; height: 100vh;}
.logo-img a img{max-width: 18%;}

.container1 {
    margin: 0 auto; width: 320px;
  }
.btn {
    color: #FFD287;
    border: 1px solid white;
    padding: 20px 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer; background-color: #EB1B23; margin-top: 30px;
  }
  .btn a{color: #fff; text-decoration: none;}
  .btn span {
    font-family: "Roboto", sans-serif;
    position: relative;
    z-index: 100;
  }
  .btn:before, .btn:after {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  .btn:before {
    transform: translate3d(-100%, 0, 0);
    background-color: #d1a84b;
    border: 1px solid #d1a84b;
    transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19); color: #EB1B23;
  }
  .btn:after {
    background-color: #d1a84b;
    border: 1px solid #d1a84b;
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62); color: #EB1B23;
  } 
  .btn:hover{color: #fff;}
  .btn:hover:before {
    transform: translate3d(0, 0, 0);
  }
  .btn:hover:after {
    transform: translate3d(0, 0, 0);
  }


@media (max-width:1366px){
    .logo-img a img{max-width: 28%;}
    .btn{margin-top: 25px;}
}

@media (max-width:767px){
  .logo-img a img{max-width:35%;}
  .btn{margin-top: 25px;}
  .star6-2, .star4, .star8-3, .star8-2, .star{display: none;}
}