@font-face {
    font-family: Montserrat-Regular;
    src: url(../assets/fonts/montserrat/Montserrat-Regular.ttf)
}

@font-face {
    font-family: Montserrat-Bold;
    src: url(../assets/fonts/montserrat/Montserrat-Bold.ttf)
}

@font-face {
    font-family: Montserrat-Black;
    src: url(../assets/fonts/montserrat/Montserrat-Black.ttf)
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url(../assets/fonts/montserrat/Montserrat-SemiBold.ttf)
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(../assets/fonts/montserrat/Montserrat-Medium.ttf)
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #d6d6d6;
}

.container-main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: #000;
}
#scene {
  margin: 0;
  width: 115%;
  height: 120vh;
  overflow: hidden;
}
.parallax {
  position: absolute;
}
#warpbg {
  top: -200px;
  left: -350px;
}
#star1 {
  top: 150px;
  right: 200px;
}
#star2 {
  top: 46%;
  left: 48%;
}
#star3 {
  bottom: 20px;
  right: 20px;
}
#star4 {
  top: 40px;
  left: 290px;
}
#star5 {
  top: 70%;
  left: 50%;
}
#star6 {
  top: 34%;
  left: 19%;
}
#planet {
  /* top: -103px; */
  /* left: -103px; */
  top: -120px;
  left: -70px;
}
#robot {
  top: 400px;
  left: 150px;
}
#astronaut {
  top: 220px;
  right: 100px;
}
#asteroid {
  top: 70%;
  left: 80%;
}
.swiper-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* background: #0575e6; */
  background: rgb(47, 43, 109);
}

.swiper-wrapper,
.swiper-slide {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

span,
p {
  margin: 0;
  padding: 0;
}

.diff,
.first-letter {
  /* color: rgb(15, 79, 139); */
  color: #4facfe;

}

.slide {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#slide-1 {
  /* background-image: url("../assets/img/warpbg.png"); */
  /*background: #4facfe;
    background: -webkit-linear-gradient(to right, #4facfe 0%, #00f2fe 100%);  
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); */
}

#slide-2 {
  background-image: url("../assets/img/coding_bg.jpeg");
}

#slide-3 {
  background-image: url("../assets/img/model_making_bg.jpg");
}

#slide-4 {
  background-image: url("../assets/img/quiz_bg.jpeg");
}

#slide-5 {
  margin-top: 0;
  top: 0;
  background: #0575e6;
  background: -webkit-linear-gradient(to right, #021b79, #0575e6);
  background: linear-gradient(to right, #021b79, #0575e6);
}

.slider-content-1 {
  width: 80%;
  padding: 10px;
  color: #fff;
  position: relative;
  top: 35%;
  left: 10%;
  z-index: 1;
  font-family: Montserrat-Black;
}

.slider-content-1 span {
  text-align: center;
  font-size: 3.8rem;
  /* font-family: Arial, Helvetica, sans-serif; */
}

.slider-content-1 p {
  text-align: center;
  margin-top: 2rem;
  font-size: 28px;
}

.slider-content {
  width: 40%;
  padding: 10px;
  /* background: #000; */
  position: relative;
  top: 25%;
  left: 10%;
  color: #fff;
}

.slider-content span {
  font-size: 3rem;
  text-align: left;
  font-family: Montserrat-Black;

}

.slider-content p {
  margin-top: 1rem;
  font-family: Montserrat-SemiBold;

}

.slider-content-5 {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Montserrat-Medium;

}

.what-next {
  display: inline-block;
  width: 100%;
  margin-top: 5%;
  text-align: center;
  font-size: 3.5rem;
  color: #fff;
  /* font-family: Arial, Helvetica, sans-serif; */
  font-family: Montserrat-Black;

  font-weight: bold;
}

.register-div {
  position: absolute;
  top: 30%;
  left: 12.5%;
  width: 30%;
  padding: 2.5%;
  box-shadow: #000 1px 1px 10px;
  height: 35%;
  background: #fff;
  border-radius: 10px;
}

.gallery-div {
  position: absolute;
  top: 45%;
  left: 52.5%;
  width: 30%;
  padding: 2.5%;
  height: 25%;
  box-shadow: #000 1px 1px 10px;
  background: #fff;
  border-radius: 10px;
}

.register-div .container,
.gallery-div .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.register-div .container span,
.gallery-div .container span {
  display: inline-block;
  font-size: 22px;
  /* font-family: Arial, Helvetica, sans-serif; */
  font-family: Montserrat-SemiBold;
  font-weight: 550;
  margin-bottom: 20px;
  position: relative;
  top: 0;
  left: 0;
  text-align: left;
  left: 37.5%;
}

.register-div .container a,
.gallery-div .container a {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3% 10%;
  background: rgb(13, 69, 160);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  border-radius: 8px;
  font-family: Montserrat-Medium;
  margin-left: 28%;

}

.register-div .container a:hover,
.gallery-div .container a:hover {
  background: rgb(2, 25, 128);
}

.ps_btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 12px;
  border-radius: 8px;
  background: rgb(11, 128, 196);
  text-decoration: none;
  color: #fff;
    font-family: Montserrat-Medium;

}

.ps_btn:hover {
  background: #0575e6;
  background: -webkit-linear-gradient(to right, #021b79, #0575e6);
  background: linear-gradient(to right, #021b79, #0575e6);
}
.register-btn {
  margin-left: 20px;
}

/* Media Queries */

/* @media screen and (max-width:) */

@media screen and (max-width: 1050px) {
  .what-next {
    margin-top: 10%;
  }
  .register-btn {
    margin-left: 0px;
  }
  .register-div .container a, .gallery-div .container a {
    font-size: 15px;
  }
  .register-div {
    margin-top: -3em;
  }
  .gallery-div {
    margin-top: -2em;
  }
  .register-card-btn {
    margin-bottom: 1.5em;
  }
  .ps_btn {
    left: 30%;
  }
}

@media screen and (max-width: 769px) {
  .register-div,
  .gallery-div {
    width: 75%;
    height: 27%;
    left: 12.5%;
    font-size: 14px;
  }

  .register-div {
    top: 30%;
    height: 32%;
  }

  .gallery-div {
    top: 68%;
    height: 22%;
  }


  .slider-content {
    left: 15%;
    top: 20%;
    width: 50%;
  }

  .slider-content span {
    font-size: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .what-next {
    margin-top: 20%;
    font-size: 2.6rem;
  }
  .slider-content p {
    font-size: 14px;
  }
  .slider-content-1 {
    top: 18%;
  }
}

@media screen and (max-width: 450px) {
  .gallery-div,
  .register-div {
    font-size: 10px;
  }
  .slider-content-1 span {
    font-size: 3.3rem;
  }
}

@media screen and (max-width: 340px) {
  .slider-content-1 span {
    font-size: 3rem;
  }
}
@media screen and (max-width: 500px) {
  #planet {
    top: -150px;
    left: -100px;
  }
  #astronaut {
    top: 80px;
    right: 10px;
  }
  #robot {
    top: 550px;
    left: 20px
  }
  #star2 {
    top: 60%;
  }
  #asteroid {
    left: 60%;
  }
  #star5 {
    top: 85%;
  }
  #star6 {
    top: 38.5%;
    left: 24%;
  }
  .ps_btn {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 450px) {
  .invertor {
    filter: invert(100%);
  }
}