/* The Portfolio Website of MD SHOAIB ALI
date = 3 May 2023
written using HTML, CSS and JavaScript */

body {
  font-family: "Open Sans", sans-serif;
/*   background: #16213E; */
  background: linear-gradient(to right, #010614, black, #010614);
  color: #a1acb7;
  cursor: url(../img/cursor_firefly.png), auto;
  overflow-x: hidden;
}
.simple-cursor{
  cursor: pointer;
}

a {
  color: #0563bb;
  text-decoration: none;
}

a:hover {
  color: #067ded;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

.btn{
  background-color: #0563bb;
  color: white;
  text-decoration: none;
  border:2px solid #0563bb;
  font-weight: bold;
  font-size: medium;
  padding: 8px 28px;
  border-radius: 30px;
  transition: transform.4s;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 10px 0;
}

.btn:hover{
  transform: scale(1.1);
  color: #0563bb;
  background-color: white;
}

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #0563bb;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #0678e3;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #0563bb;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* @media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
} */

#header {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9997;
  transition: all 0.5s;
  padding: 15px;
  overflow-y: auto;
}

@media (max-width: 991px) {
  #header {
    width: 300px;
    background: #fff;
    border-right: 1px solid #e6e9ec;
    left: -300px;
  }
}

@media (min-width: 991px) {
  #main {
    margin-left: 100px;
  }
}

.nav-menu {
  padding: 0;
  display: block;
}

.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu>ul>li {
  position: relative;
  white-space: nowrap;
}

.nav-menu a,
.nav-menu a:focus {
  display: flex;
  align-items: center;
  color: #45505b;
  padding: 10px 18px;
  margin-bottom: 8px;
  transition: 0.3s;
  font-size: 15px;
  border-radius: 50px;
  background: #f2f3f5;
  height: 56px;
  width: 100%;
  overflow: hidden;
  transition: 0.3s;
}

.nav-menu a i,
.nav-menu a:focus i {
  font-size: 20px;
}

.nav-menu a span,
.nav-menu a:focus span {
  padding: 0 5px 0 7px;
  color: #45505b;
}

@media (min-width: 992px) {

  .nav-menu a,
  .nav-menu a:focus {
    width: 56px;
  }

  .nav-menu a span,
  .nav-menu a:focus span {
    display: none;
    color: #fff;
  }
}

.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu li:hover>a {
  color: #fff;
  background: #0563bb;
}

.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu li:hover>a span {
  color: #fff;
}

.nav-menu a:hover,
.nav-menu li:hover>a {
  width: 100%;
  color: #fff;
}

.nav-menu a:hover span,
.nav-menu li:hover>a span {
  display: block;
}

.mobile-nav-toggle {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 9998;
  border: 0;
  background: #0563bb;
  font-size: 28px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 0;
  cursor: pointer;
  border-radius: 50px;
  padding: 5px;
}

.mobile-nav-toggle i {
  color: #0563bb;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active #header {
  left: 0;
}

.mobile-nav-active .mobile-nav-toggle {
  color: #fff;
  background-color: #0563bb;
}
/* backgroung image */
#hero {
  width: 100%;
  height: 100vh;
  background: url("../img/SEgif.gif") center no-repeat;
  background-size: cover;
  position: relative;
}


@media (min-width: 992px) {
  #hero {
    padding-left: 160px;
  }
}

#hero:before {
  content: "";
  background: rgba(255, 255, 255, 0);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: #45505b;
}

#hero p {
  color: white;
  margin: 15px 0 0 0;
  font-size: 26px;
  font-family: "Poppins", sans-serif;
}

#hero p span {
  color: #04d9ff;
  letter-spacing: 1px;
}

#hero .social-links {
  margin-top: 30px;
}

#hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: white;
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

#hero .social-links a:hover {
  color: #0563bb;
  transition: .4s;
  transform: scale(1.8);
}

@media (max-width: 992px) {
  #hero {
    text-align: center;
  }

  #hero h1 {
    font-size: 32px;
    line-height: 36px;
  }

  #hero p {
    margin-top: 10px;
    font-size: 20px;
    line-height: 24px;
  }
}


/* glowing text */
.tube {
  font-size: 3em;
  letter-spacing: 15px;
  color: #0e3742;
  animation: animate 2s linear infinite;
}
@keyframes animate {
  0%,18%,20%,50%,60%,65%,80%,90%,92% {
      color: #0e3742;
      text-shadow: none;
  }
  18%,20%,50%,60%,65%,80%,90%,92%,100% {
      color: white;
      text-shadow: 0 0 10px #03bcf4,
                  0 0 20px #03bcf4,
                  0 0 40px #03bcf4,
                  0 0 80px #03bcf4,
                  0 0 160px #03bcf4;
  }
}


section {
  padding: 60px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #0563bb;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0;
}

.shoaib{
  color: white;
}

.fst-italic{
  color: #9aabbb;
}

.about .content h3 {
  font-weight: 700;
  font-size: 26px;
  color: #9aabbb;
}

img{
  border-radius: 15%;
}

.dp img{
  border-radius: 0%;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: #0563bb;
  line-height: 0;
}

.about{
  color: #9aabbb;
}

.about .content p:last-child {
  margin-bottom: 0;
}
/*--------------------------------------------------------------
# Facts
--------------------------------------------------------------*/


@media (max-width: 1000px) {
  .facts {
      height: 350px;
  }
}









.facts .count-box {
  padding: 30px 30px 25px 30px;
  margin-top: 30px;
  width: 100%;
  position: relative;
  text-align: center;
  background: #fff;
}

.facts .count-box i {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  background: #0563bb;
  color: #fff;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.facts .count-box span {
  font-size: 36px;
  display: block;
  font-weight: 600;
  color: #011426;
}


.facts .count-box p {
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
}

.resume .resume {
  color: white;
}

.resume .resume-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
}

.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid #0563bb;
  position: relative;
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #0563bb;
  margin-bottom: 10px;
}

.resume .resume-item h5 {
  font-size: 16px;
  background: #f7f8f9;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume .resume-item ul {
  padding-left: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 10px;
}

.resume .resume-item:last-child {
  padding-bottom: 0;
}

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: #fff;
  border: 2px solid #0563bb;
}


/* media-coverage */
.testimonials .testimonial-item .media-coverage {
  height: auto;
  width: 40%;
  border-radius: 0%;
  border: 1px solid #fff;
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Projects
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #272829;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #0563bb;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(69, 80, 91, 0.8);
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  border-top: 3px solid #d7dce1;
  border-left: 3px solid #d7dce1;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-bottom: 3px solid #d7dce1;
  border-right: 3px solid #d7dce1;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #45505b;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #45505b;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #45505b;
  margin: 0 2px;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #148af9;
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #0563bb;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0563bb;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(187, 194, 201, 0.955);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  padding: 10px 0;
  margin: 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: white;
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: #f2f3f5;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: #0563bb;
}


/* testimonials */

.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #0563bb;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #90c8fc;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
  color: white;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #0563bb;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0563bb;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.cbackground {
  display: flex;
  min-height: 100vh;
}

.container {
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
}

.screen {
  position: relative;
  background: #3e3e3e;
  border-radius: 15px;
}

.screen:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: -1;
}

.screen-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #4d4d4f;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.screen-header-left {
  margin-right: auto;
}

.screen-header-button {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 8px;
  background: white;
}

.screen-header-button.close {
  background: red;
}

.screen-header-button.maximize {
  background: #e8e925;
}

.screen-header-button.minimize {
  background: #74c54f;
}

.screen-header-right {
  display: flex;
}

.screen-header-ellipsis {
  width: 3px;
  height: 3px;
  margin-left: 2px;
  border-radius: 8px;
  background: #999;
}

.screen-body {
  display: flex;
}

.screen-body-item {
  flex: 1;
  padding: 50px;
}

.screen-body-item.left {
  display: flex;
  flex-direction: column;
}

.app-title {
  display: flex;
  flex-direction: column;
  position: relative;
  color: white;
  font-size: 26px;
}

.app-title:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 25px;
  height: 4px;
  background: white;
}

.app-contact {
  margin-top: auto;
  font-size: 8px;
  color: #888;
}

.app-form-group {
  margin-bottom: 15px;
}

.app-form-group.message {
  margin-top: 40px;
}

.app-form-group.buttons {
  margin-bottom: 0;
  text-align: right;
}

.app-form-control {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #ddd;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s;
}

.app-form-control::placeholder {
  color: #666;
}

.app-form-control:focus {
  border-bottom-color: #ddd;
}

.app-form-button {
  background: none;
  border: none;
  color: white;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

.app-form-button:hover {
  color: #16213E;
}

@media screen and (max-width: 520px) {
  .screen-body {
    flex-direction: column;
  }

  .screen-body-item.left {
    margin-bottom: 30px;
  }

  .app-title {
    flex-direction: row;
  }

  .app-title span {
    margin-right: 12px;
  }

  .app-title:after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .screen-body {
    padding: 40px;
  }

  .screen-body-item {
    padding: 0;
  }
}


/* end contact */


/* footer */



/* wave start */
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position: relative;
  width: 100%;
  height: 20vh; /* Adjust for smaller screens */
  min-height: 60px;
  max-height: 150px;
  margin-bottom: -7px; /* Fix for safari gap */
  overflow: hidden; /* Prevents overflow on small screens */
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  /* background-color: white; */
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  position:relative;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 10vh; /* Reduce height on smaller screens */
    min-height: 50px;
    max-height: 80px;
  }

  .content {
    height: 30vh;
  }

  h1 {
    font-size: 24px;
  }
}

/* wave end */

#footer {
  background: #f7f8f9;
  color: #45505b;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

#footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  font-family: "Poppins", sans-serif;
  padding: 0;
  margin: 0 0 15px 0;
}

#footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 40px 0;
}

#footer .social-links {
  margin: 0 0 40px 0;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #0563bb;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #0678e3;
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  margin: 0 0 5px 0;
}

#footer .credits {
  font-size: 13px;
}

/* certificate */
.testimonials .testimonial-item .certificates {
  height:auto;
  width: 54%;
  border-radius: 0%;
  border: 1px solid #fff;
  margin: 0 auto;
}
.certi-details{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: small;
}





/* Wrap circles to contain overflow */
.circle-wave-container {
  position: fixed; /* Fix to bottom-right of the screen */
  bottom: -10px; /* Position from the bottom */
  right: -10px; /* Position from the right */
  width: 0; /* Set width and height to 0 to avoid container taking space */
  height: 0;
  z-index: 10; /* Ensure circles are above other content */
  pointer-events: none; /* Prevent the container from blocking interactions with other elements */
}

/* Background for the circles */
.ripple-background {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0; /* Set width and height to 0 */
  height: 0;
  display: flex;
  justify-content: center; /* Center all circles horizontally */
  align-items: flex-end; /* Align all circles to the bottom */
  pointer-events: none;
}

/* Circle wave shades and animations */
.circle {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple 12s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
  transform-origin: bottom right;
  z-index: -1;
}

/* Sizes for the circles */
.small{
  width: 200px;
  height: 200px;
  right: -100px;
  bottom: -100px;
}

.medium{
  width: 400px;
  height: 400px;
  right: -200px;
  bottom: -200px;
}

.large{
  width: 600px;
  height: 600px;
  right: -300px;
  bottom: -300px;
}

.xlarge{
  width: 1000px;
  height: 1000px;
  right: -400px;
  bottom: -400px;
}

.xxlarge{
  width: 1400px;
  height: 1400px;
  right: -500px;
  bottom: -500px;
}

/* Adjust opacity for each circle */
.shade1 { opacity: 0.03; }
.shade2 { opacity: 0.05; }
.shade3 { opacity: 0.07; }
.shade4 { opacity: 0.09; }
.shade5 { opacity: 0.11; }

/* Ripple animation (same for all circles) */
@keyframes ripple {
  0% {
    transform: scale(0.5); /* Start with a smaller scale */
  }
  50% {
    transform: scale(1.5); /* Grow to the original size */
  }
  100% {
    transform: scale(0.5); /* Shrink back to the smaller size */
  }
}

/* circle wave shade end */









/* ________________________________firefly start________________________________________ */
.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 18s;
}
.firefly:nth-child(1)::after {
  animation-duration: 18s, 9113ms;
  animation-delay: 0ms, 923ms;
}

@keyframes move1 {
  0% {
    transform: translateX(44vw) translateY(18vh) scale(1);
  }
  5.5555555556% {
    transform: translateX(-40vw) translateY(45vh) scale(0.47);
  }
  11.1111111111% {
    transform: translateX(-40vw) translateY(-35vh) scale(0.61);
  }
  16.6666666667% {
    transform: translateX(23vw) translateY(-4vh) scale(0.76);
  }
  22.2222222222% {
    transform: translateX(7vw) translateY(-3vh) scale(0.74);
  }
  27.7777777778% {
    transform: translateX(-9vw) translateY(-34vh) scale(0.99);
  }
  33.3333333333% {
    transform: translateX(-34vw) translateY(12vh) scale(0.5);
  }
  38.8888888889% {
    transform: translateX(-17vw) translateY(-37vh) scale(0.61);
  }
  44.4444444444% {
    transform: translateX(-6vw) translateY(-21vh) scale(0.51);
  }
  50% {
    transform: translateX(15vw) translateY(-15vh) scale(0.71);
  }
  55.5555555556% {
    transform: translateX(-21vw) translateY(-14vh) scale(0.58);
  }
  61.1111111111% {
    transform: translateX(26vw) translateY(-44vh) scale(0.54);
  }
  66.6666666667% {
    transform: translateX(-13vw) translateY(-26vh) scale(0.95);
  }
  72.2222222222% {
    transform: translateX(16vw) translateY(6vh) scale(0.43);
  }
  77.7777777778% {
    transform: translateX(27vw) translateY(38vh) scale(0.67);
  }
  83.3333333333% {
    transform: translateX(-2vw) translateY(24vh) scale(0.57);
  }
  88.8888888889% {
    transform: translateX(45vw) translateY(39vh) scale(0.8);
  }
  94.4444444444% {
    transform: translateX(5vw) translateY(9vh) scale(0.39);
  }
  100% {
    transform: translateX(-32vw) translateY(-40vh) scale(0.85);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 17s;
}
.firefly:nth-child(2)::after {
  animation-duration: 17s, 5868ms;
  animation-delay: 0ms, 5356ms;
}

@keyframes move2 {
  0% {
    transform: translateX(-17vw) translateY(-25vh) scale(0.71);
  }
  3.5714285714% {
    transform: translateX(-6vw) translateY(-39vh) scale(0.45);
  }
  7.1428571429% {
    transform: translateX(-45vw) translateY(-42vh) scale(0.82);
  }
  10.7142857143% {
    transform: translateX(44vw) translateY(50vh) scale(0.52);
  }
  14.2857142857% {
    transform: translateX(-46vw) translateY(-12vh) scale(0.45);
  }
  17.8571428571% {
    transform: translateX(24vw) translateY(5vh) scale(0.86);
  }
  21.4285714286% {
    transform: translateX(-12vw) translateY(28vh) scale(0.5);
  }
  25% {
    transform: translateX(6vw) translateY(29vh) scale(0.35);
  }
  28.5714285714% {
    transform: translateX(16vw) translateY(45vh) scale(0.77);
  }
  32.1428571429% {
    transform: translateX(9vw) translateY(47vh) scale(0.77);
  }
  35.7142857143% {
    transform: translateX(15vw) translateY(-14vh) scale(0.55);
  }
  39.2857142857% {
    transform: translateX(5vw) translateY(-45vh) scale(0.91);
  }
  42.8571428571% {
    transform: translateX(37vw) translateY(-24vh) scale(0.79);
  }
  46.4285714286% {
    transform: translateX(22vw) translateY(50vh) scale(0.34);
  }
  50% {
    transform: translateX(-35vw) translateY(-29vh) scale(0.63);
  }
  53.5714285714% {
    transform: translateX(47vw) translateY(1vh) scale(0.29);
  }
  57.1428571429% {
    transform: translateX(-5vw) translateY(2vh) scale(0.81);
  }
  60.7142857143% {
    transform: translateX(13vw) translateY(11vh) scale(0.52);
  }
  64.2857142857% {
    transform: translateX(-49vw) translateY(18vh) scale(0.4);
  }
  67.8571428571% {
    transform: translateX(-39vw) translateY(33vh) scale(0.5);
  }
  71.4285714286% {
    transform: translateX(26vw) translateY(-4vh) scale(0.53);
  }
  75% {
    transform: translateX(14vw) translateY(-32vh) scale(0.38);
  }
  78.5714285714% {
    transform: translateX(-31vw) translateY(-40vh) scale(0.74);
  }
  82.1428571429% {
    transform: translateX(42vw) translateY(-16vh) scale(0.53);
  }
  85.7142857143% {
    transform: translateX(-31vw) translateY(-48vh) scale(0.83);
  }
  89.2857142857% {
    transform: translateX(38vw) translateY(-31vh) scale(0.98);
  }
  92.8571428571% {
    transform: translateX(15vw) translateY(-30vh) scale(0.97);
  }
  96.4285714286% {
    transform: translateX(19vw) translateY(20vh) scale(0.8);
  }
  100% {
    transform: translateX(34vw) translateY(7vh) scale(0.71);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 9s;
}
.firefly:nth-child(3)::after {
  animation-duration: 9s, 10862ms;
  animation-delay: 0ms, 3206ms;
}

@keyframes move3 {
  0% {
    transform: translateX(-28vw) translateY(40vh) scale(0.55);
  }
  4.347826087% {
    transform: translateX(-26vw) translateY(-26vh) scale(0.89);
  }
  8.6956521739% {
    transform: translateX(16vw) translateY(-2vh) scale(0.94);
  }
  13.0434782609% {
    transform: translateX(12vw) translateY(-49vh) scale(0.91);
  }
  17.3913043478% {
    transform: translateX(35vw) translateY(-22vh) scale(0.9);
  }
  21.7391304348% {
    transform: translateX(-35vw) translateY(27vh) scale(0.43);
  }
  26.0869565217% {
    transform: translateX(16vw) translateY(6vh) scale(0.62);
  }
  30.4347826087% {
    transform: translateX(-29vw) translateY(19vh) scale(0.32);
  }
  34.7826086957% {
    transform: translateX(6vw) translateY(-44vh) scale(0.34);
  }
  39.1304347826% {
    transform: translateX(39vw) translateY(-34vh) scale(0.81);
  }
  43.4782608696% {
    transform: translateX(48vw) translateY(18vh) scale(0.76);
  }
  47.8260869565% {
    transform: translateX(-23vw) translateY(-26vh) scale(1);
  }
  52.1739130435% {
    transform: translateX(-12vw) translateY(-4vh) scale(0.8);
  }
  56.5217391304% {
    transform: translateX(-10vw) translateY(16vh) scale(0.92);
  }
  60.8695652174% {
    transform: translateX(48vw) translateY(30vh) scale(0.73);
  }
  65.2173913043% {
    transform: translateX(-9vw) translateY(45vh) scale(0.46);
  }
  69.5652173913% {
    transform: translateX(1vw) translateY(-2vh) scale(0.51);
  }
  73.9130434783% {
    transform: translateX(28vw) translateY(42vh) scale(0.97);
  }
  78.2608695652% {
    transform: translateX(29vw) translateY(5vh) scale(0.53);
  }
  82.6086956522% {
    transform: translateX(-13vw) translateY(29vh) scale(0.5);
  }
  86.9565217391% {
    transform: translateX(6vw) translateY(33vh) scale(0.93);
  }
  91.3043478261% {
    transform: translateX(-49vw) translateY(38vh) scale(0.79);
  }
  95.652173913% {
    transform: translateX(29vw) translateY(31vh) scale(0.34);
  }
  100% {
    transform: translateX(-30vw) translateY(-36vh) scale(0.3);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 10s;
}
.firefly:nth-child(4)::after {
  animation-duration: 10s, 8090ms;
  animation-delay: 0ms, 6612ms;
}

@keyframes move4 {
  0% {
    transform: translateX(44vw) translateY(-43vh) scale(0.38);
  }
  3.7037037037% {
    transform: translateX(-31vw) translateY(16vh) scale(0.83);
  }
  7.4074074074% {
    transform: translateX(9vw) translateY(-30vh) scale(0.9);
  }
  11.1111111111% {
    transform: translateX(-45vw) translateY(-28vh) scale(0.55);
  }
  14.8148148148% {
    transform: translateX(-16vw) translateY(16vh) scale(0.37);
  }
  18.5185185185% {
    transform: translateX(17vw) translateY(-21vh) scale(0.71);
  }
  22.2222222222% {
    transform: translateX(48vw) translateY(12vh) scale(0.39);
  }
  25.9259259259% {
    transform: translateX(-1vw) translateY(-12vh) scale(0.28);
  }
  29.6296296296% {
    transform: translateX(10vw) translateY(10vh) scale(0.53);
  }
  33.3333333333% {
    transform: translateX(11vw) translateY(-41vh) scale(0.86);
  }
  37.037037037% {
    transform: translateX(-31vw) translateY(31vh) scale(0.86);
  }
  40.7407407407% {
    transform: translateX(4vw) translateY(22vh) scale(0.7);
  }
  44.4444444444% {
    transform: translateX(8vw) translateY(29vh) scale(0.59);
  }
  48.1481481481% {
    transform: translateX(-14vw) translateY(-40vh) scale(0.33);
  }
  51.8518518519% {
    transform: translateX(3vw) translateY(-8vh) scale(0.96);
  }
  55.5555555556% {
    transform: translateX(-4vw) translateY(-17vh) scale(0.31);
  }
  59.2592592593% {
    transform: translateX(31vw) translateY(-9vh) scale(0.85);
  }
  62.962962963% {
    transform: translateX(-6vw) translateY(-17vh) scale(0.7);
  }
  66.6666666667% {
    transform: translateX(4vw) translateY(23vh) scale(0.39);
  }
  70.3703703704% {
    transform: translateX(-38vw) translateY(-35vh) scale(0.64);
  }
  74.0740740741% {
    transform: translateX(22vw) translateY(47vh) scale(0.68);
  }
  77.7777777778% {
    transform: translateX(-37vw) translateY(12vh) scale(0.44);
  }
  81.4814814815% {
    transform: translateX(35vw) translateY(50vh) scale(0.42);
  }
  85.1851851852% {
    transform: translateX(42vw) translateY(31vh) scale(0.29);
  }
  88.8888888889% {
    transform: translateX(9vw) translateY(26vh) scale(0.43);
  }
  92.5925925926% {
    transform: translateX(23vw) translateY(13vh) scale(0.83);
  }
  96.2962962963% {
    transform: translateX(22vw) translateY(-22vh) scale(0.84);
  }
  100% {
    transform: translateX(32vw) translateY(-21vh) scale(0.73);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 11s;
}
.firefly:nth-child(5)::after {
  animation-duration: 11s, 7680ms;
  animation-delay: 0ms, 1431ms;
}

@keyframes move5 {
  0% {
    transform: translateX(-3vw) translateY(-30vh) scale(0.67);
  }
  4.5454545455% {
    transform: translateX(35vw) translateY(-8vh) scale(0.63);
  }
  9.0909090909% {
    transform: translateX(-29vw) translateY(-16vh) scale(0.63);
  }
  13.6363636364% {
    transform: translateX(42vw) translateY(19vh) scale(0.44);
  }
  18.1818181818% {
    transform: translateX(-49vw) translateY(-18vh) scale(0.29);
  }
  22.7272727273% {
    transform: translateX(-16vw) translateY(48vh) scale(0.53);
  }
  27.2727272727% {
    transform: translateX(47vw) translateY(40vh) scale(0.65);
  }
  31.8181818182% {
    transform: translateX(38vw) translateY(-15vh) scale(0.99);
  }
  36.3636363636% {
    transform: translateX(-27vw) translateY(-23vh) scale(0.81);
  }
  40.9090909091% {
    transform: translateX(17vw) translateY(5vh) scale(1);
  }
  45.4545454545% {
    transform: translateX(2vw) translateY(-22vh) scale(0.95);
  }
  50% {
    transform: translateX(-35vw) translateY(7vh) scale(0.7);
  }
  54.5454545455% {
    transform: translateX(-15vw) translateY(-36vh) scale(0.55);
  }
  59.0909090909% {
    transform: translateX(1vw) translateY(-12vh) scale(0.9);
  }
  63.6363636364% {
    transform: translateX(29vw) translateY(12vh) scale(0.4);
  }
  68.1818181818% {
    transform: translateX(24vw) translateY(-7vh) scale(0.35);
  }
  72.7272727273% {
    transform: translateX(-35vw) translateY(33vh) scale(0.57);
  }
  77.2727272727% {
    transform: translateX(37vw) translateY(22vh) scale(0.94);
  }
  81.8181818182% {
    transform: translateX(-32vw) translateY(-24vh) scale(0.94);
  }
  86.3636363636% {
    transform: translateX(18vw) translateY(-35vh) scale(0.59);
  }
  90.9090909091% {
    transform: translateX(42vw) translateY(-21vh) scale(0.35);
  }
  95.4545454545% {
    transform: translateX(4vw) translateY(21vh) scale(0.27);
  }
  100% {
    transform: translateX(15vw) translateY(23vh) scale(0.87);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 10s;
}
.firefly:nth-child(6)::after {
  animation-duration: 10s, 8026ms;
  animation-delay: 0ms, 4269ms;
}

@keyframes move6 {
  0% {
    transform: translateX(-43vw) translateY(9vh) scale(0.61);
  }
  5.2631578947% {
    transform: translateX(5vw) translateY(9vh) scale(0.98);
  }
  10.5263157895% {
    transform: translateX(47vw) translateY(-29vh) scale(0.37);
  }
  15.7894736842% {
    transform: translateX(26vw) translateY(15vh) scale(0.59);
  }
  21.0526315789% {
    transform: translateX(-46vw) translateY(1vh) scale(0.43);
  }
  26.3157894737% {
    transform: translateX(4vw) translateY(18vh) scale(0.32);
  }
  31.5789473684% {
    transform: translateX(-18vw) translateY(-29vh) scale(0.4);
  }
  36.8421052632% {
    transform: translateX(-5vw) translateY(-39vh) scale(0.32);
  }
  42.1052631579% {
    transform: translateX(-34vw) translateY(-44vh) scale(0.26);
  }
  47.3684210526% {
    transform: translateX(-45vw) translateY(-43vh) scale(0.91);
  }
  52.6315789474% {
    transform: translateX(12vw) translateY(-29vh) scale(0.84);
  }
  57.8947368421% {
    transform: translateX(-25vw) translateY(-39vh) scale(0.4);
  }
  63.1578947368% {
    transform: translateX(-5vw) translateY(24vh) scale(0.79);
  }
  68.4210526316% {
    transform: translateX(-9vw) translateY(-1vh) scale(0.42);
  }
  73.6842105263% {
    transform: translateX(-8vw) translateY(-38vh) scale(0.65);
  }
  78.9473684211% {
    transform: translateX(-27vw) translateY(-12vh) scale(0.39);
  }
  84.2105263158% {
    transform: translateX(17vw) translateY(4vh) scale(0.37);
  }
  89.4736842105% {
    transform: translateX(-4vw) translateY(-31vh) scale(0.98);
  }
  94.7368421053% {
    transform: translateX(-5vw) translateY(-27vh) scale(0.92);
  }
  100% {
    transform: translateX(35vw) translateY(-26vh) scale(0.82);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 15s;
}
.firefly:nth-child(7)::after {
  animation-duration: 15s, 9815ms;
  animation-delay: 0ms, 7617ms;
}

@keyframes move7 {
  0% {
    transform: translateX(-17vw) translateY(28vh) scale(0.71);
  }
  5.8823529412% {
    transform: translateX(-8vw) translateY(-22vh) scale(0.98);
  }
  11.7647058824% {
    transform: translateX(-26vw) translateY(-31vh) scale(0.81);
  }
  17.6470588235% {
    transform: translateX(-44vw) translateY(2vh) scale(0.95);
  }
  23.5294117647% {
    transform: translateX(44vw) translateY(-8vh) scale(0.87);
  }
  29.4117647059% {
    transform: translateX(-26vw) translateY(6vh) scale(0.59);
  }
  35.2941176471% {
    transform: translateX(-49vw) translateY(-32vh) scale(0.43);
  }
  41.1764705882% {
    transform: translateX(-22vw) translateY(5vh) scale(0.87);
  }
  47.0588235294% {
    transform: translateX(30vw) translateY(-36vh) scale(0.36);
  }
  52.9411764706% {
    transform: translateX(36vw) translateY(36vh) scale(0.99);
  }
  58.8235294118% {
    transform: translateX(32vw) translateY(-28vh) scale(0.84);
  }
  64.7058823529% {
    transform: translateX(27vw) translateY(26vh) scale(0.3);
  }
  70.5882352941% {
    transform: translateX(5vw) translateY(-17vh) scale(0.83);
  }
  76.4705882353% {
    transform: translateX(44vw) translateY(-20vh) scale(0.26);
  }
  82.3529411765% {
    transform: translateX(-28vw) translateY(-17vh) scale(0.49);
  }
  88.2352941176% {
    transform: translateX(35vw) translateY(47vh) scale(0.56);
  }
  94.1176470588% {
    transform: translateX(17vw) translateY(-21vh) scale(0.93);
  }
  100% {
    transform: translateX(33vw) translateY(5vh) scale(0.33);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 14s;
}
.firefly:nth-child(8)::after {
  animation-duration: 14s, 6125ms;
  animation-delay: 0ms, 4339ms;
}

@keyframes move8 {
  0% {
    transform: translateX(29vw) translateY(-15vh) scale(0.54);
  }
  3.7037037037% {
    transform: translateX(-36vw) translateY(4vh) scale(0.33);
  }
  7.4074074074% {
    transform: translateX(-35vw) translateY(27vh) scale(0.41);
  }
  11.1111111111% {
    transform: translateX(32vw) translateY(22vh) scale(0.46);
  }
  14.8148148148% {
    transform: translateX(17vw) translateY(-2vh) scale(0.48);
  }
  18.5185185185% {
    transform: translateX(-25vw) translateY(44vh) scale(0.88);
  }
  22.2222222222% {
    transform: translateX(1vw) translateY(-3vh) scale(0.92);
  }
  25.9259259259% {
    transform: translateX(24vw) translateY(-47vh) scale(0.9);
  }
  29.6296296296% {
    transform: translateX(32vw) translateY(-12vh) scale(0.81);
  }
  33.3333333333% {
    transform: translateX(20vw) translateY(-32vh) scale(0.5);
  }
  37.037037037% {
    transform: translateX(-3vw) translateY(-26vh) scale(0.41);
  }
  40.7407407407% {
    transform: translateX(21vw) translateY(11vh) scale(0.87);
  }
  44.4444444444% {
    transform: translateX(-18vw) translateY(9vh) scale(0.94);
  }
  48.1481481481% {
    transform: translateX(-40vw) translateY(30vh) scale(0.92);
  }
  51.8518518519% {
    transform: translateX(32vw) translateY(22vh) scale(0.99);
  }
  55.5555555556% {
    transform: translateX(-4vw) translateY(-20vh) scale(0.63);
  }
  59.2592592593% {
    transform: translateX(49vw) translateY(-41vh) scale(0.74);
  }
  62.962962963% {
    transform: translateX(-12vw) translateY(15vh) scale(0.48);
  }
  66.6666666667% {
    transform: translateX(37vw) translateY(5vh) scale(0.73);
  }
  70.3703703704% {
    transform: translateX(-20vw) translateY(-12vh) scale(0.56);
  }
  74.0740740741% {
    transform: translateX(-18vw) translateY(-17vh) scale(0.71);
  }
  77.7777777778% {
    transform: translateX(-49vw) translateY(26vh) scale(0.61);
  }
  81.4814814815% {
    transform: translateX(44vw) translateY(15vh) scale(0.37);
  }
  85.1851851852% {
    transform: translateX(-7vw) translateY(34vh) scale(0.8);
  }
  88.8888888889% {
    transform: translateX(28vw) translateY(-26vh) scale(0.53);
  }
  92.5925925926% {
    transform: translateX(-1vw) translateY(-48vh) scale(0.43);
  }
  96.2962962963% {
    transform: translateX(-3vw) translateY(50vh) scale(0.99);
  }
  100% {
    transform: translateX(49vw) translateY(22vh) scale(0.66);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 10s;
}
.firefly:nth-child(9)::after {
  animation-duration: 10s, 7500ms;
  animation-delay: 0ms, 6211ms;
}

@keyframes move9 {
  0% {
    transform: translateX(-24vw) translateY(-18vh) scale(0.72);
  }
  5.8823529412% {
    transform: translateX(-25vw) translateY(17vh) scale(1);
  }
  11.7647058824% {
    transform: translateX(-34vw) translateY(-46vh) scale(0.76);
  }
  17.6470588235% {
    transform: translateX(12vw) translateY(34vh) scale(0.63);
  }
  23.5294117647% {
    transform: translateX(17vw) translateY(23vh) scale(0.73);
  }
  29.4117647059% {
    transform: translateX(20vw) translateY(-30vh) scale(0.37);
  }
  35.2941176471% {
    transform: translateX(-2vw) translateY(-28vh) scale(0.55);
  }
  41.1764705882% {
    transform: translateX(-4vw) translateY(48vh) scale(0.89);
  }
  47.0588235294% {
    transform: translateX(-20vw) translateY(-48vh) scale(0.59);
  }
  52.9411764706% {
    transform: translateX(-32vw) translateY(41vh) scale(0.54);
  }
  58.8235294118% {
    transform: translateX(14vw) translateY(-10vh) scale(0.8);
  }
  64.7058823529% {
    transform: translateX(-30vw) translateY(0vh) scale(0.58);
  }
  70.5882352941% {
    transform: translateX(45vw) translateY(-39vh) scale(0.62);
  }
  76.4705882353% {
    transform: translateX(-26vw) translateY(-5vh) scale(0.29);
  }
  82.3529411765% {
    transform: translateX(-2vw) translateY(44vh) scale(0.86);
  }
  88.2352941176% {
    transform: translateX(-18vw) translateY(-21vh) scale(0.74);
  }
  94.1176470588% {
    transform: translateX(-48vw) translateY(33vh) scale(0.31);
  }
  100% {
    transform: translateX(6vw) translateY(-27vh) scale(0.9);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 15s;
}
.firefly:nth-child(10)::after {
  animation-duration: 15s, 9838ms;
  animation-delay: 0ms, 684ms;
}

@keyframes move10 {
  0% {
    transform: translateX(23vw) translateY(-49vh) scale(0.5);
  }
  5.8823529412% {
    transform: translateX(20vw) translateY(-8vh) scale(0.67);
  }
  11.7647058824% {
    transform: translateX(-43vw) translateY(9vh) scale(0.97);
  }
  17.6470588235% {
    transform: translateX(-14vw) translateY(-19vh) scale(0.73);
  }
  23.5294117647% {
    transform: translateX(-6vw) translateY(-37vh) scale(0.7);
  }
  29.4117647059% {
    transform: translateX(41vw) translateY(-5vh) scale(0.57);
  }
  35.2941176471% {
    transform: translateX(9vw) translateY(29vh) scale(0.78);
  }
  41.1764705882% {
    transform: translateX(8vw) translateY(11vh) scale(0.71);
  }
  47.0588235294% {
    transform: translateX(21vw) translateY(4vh) scale(0.53);
  }
  52.9411764706% {
    transform: translateX(38vw) translateY(21vh) scale(0.65);
  }
  58.8235294118% {
    transform: translateX(19vw) translateY(-13vh) scale(0.92);
  }
  64.7058823529% {
    transform: translateX(20vw) translateY(-4vh) scale(0.9);
  }
  70.5882352941% {
    transform: translateX(-11vw) translateY(-11vh) scale(0.5);
  }
  76.4705882353% {
    transform: translateX(48vw) translateY(-45vh) scale(0.33);
  }
  82.3529411765% {
    transform: translateX(17vw) translateY(-46vh) scale(0.94);
  }
  88.2352941176% {
    transform: translateX(-2vw) translateY(33vh) scale(0.31);
  }
  94.1176470588% {
    transform: translateX(9vw) translateY(32vh) scale(0.41);
  }
  100% {
    transform: translateX(-27vw) translateY(-21vh) scale(0.67);
  }
}
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 9s;
}
.firefly:nth-child(11)::after {
  animation-duration: 9s, 7083ms;
  animation-delay: 0ms, 7703ms;
}

@keyframes move11 {
  0% {
    transform: translateX(-22vw) translateY(-32vh) scale(0.77);
  }
  3.8461538462% {
    transform: translateX(-22vw) translateY(34vh) scale(0.99);
  }
  7.6923076923% {
    transform: translateX(50vw) translateY(1vh) scale(0.88);
  }
  11.5384615385% {
    transform: translateX(30vw) translateY(34vh) scale(0.86);
  }
  15.3846153846% {
    transform: translateX(-3vw) translateY(32vh) scale(0.48);
  }
  19.2307692308% {
    transform: translateX(23vw) translateY(24vh) scale(0.93);
  }
  23.0769230769% {
    transform: translateX(-43vw) translateY(-26vh) scale(0.99);
  }
  26.9230769231% {
    transform: translateX(-39vw) translateY(-27vh) scale(0.83);
  }
  30.7692307692% {
    transform: translateX(19vw) translateY(26vh) scale(0.32);
  }
  34.6153846154% {
    transform: translateX(21vw) translateY(-45vh) scale(0.29);
  }
  38.4615384615% {
    transform: translateX(25vw) translateY(29vh) scale(0.73);
  }
  42.3076923077% {
    transform: translateX(7vw) translateY(7vh) scale(0.45);
  }
  46.1538461538% {
    transform: translateX(29vw) translateY(50vh) scale(0.63);
  }
  50% {
    transform: translateX(-6vw) translateY(-7vh) scale(0.68);
  }
  53.8461538462% {
    transform: translateX(2vw) translateY(27vh) scale(0.41);
  }
  57.6923076923% {
    transform: translateX(-44vw) translateY(-22vh) scale(0.26);
  }
  61.5384615385% {
    transform: translateX(12vw) translateY(39vh) scale(0.62);
  }
  65.3846153846% {
    transform: translateX(12vw) translateY(24vh) scale(0.71);
  }
  69.2307692308% {
    transform: translateX(34vw) translateY(20vh) scale(0.36);
  }
  73.0769230769% {
    transform: translateX(43vw) translateY(44vh) scale(0.99);
  }
  76.9230769231% {
    transform: translateX(-12vw) translateY(-12vh) scale(0.51);
  }
  80.7692307692% {
    transform: translateX(14vw) translateY(-4vh) scale(0.88);
  }
  84.6153846154% {
    transform: translateX(-10vw) translateY(24vh) scale(0.7);
  }
  88.4615384615% {
    transform: translateX(-2vw) translateY(-22vh) scale(0.8);
  }
  92.3076923077% {
    transform: translateX(4vw) translateY(-42vh) scale(0.94);
  }
  96.1538461538% {
    transform: translateX(-10vw) translateY(-1vh) scale(0.34);
  }
  100% {
    transform: translateX(-9vw) translateY(21vh) scale(0.37);
  }
}
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 10s;
}
.firefly:nth-child(12)::after {
  animation-duration: 10s, 7297ms;
  animation-delay: 0ms, 736ms;
}

@keyframes move12 {
  0% {
    transform: translateX(-10vw) translateY(-8vh) scale(0.51);
  }
  3.7037037037% {
    transform: translateX(15vw) translateY(23vh) scale(0.33);
  }
  7.4074074074% {
    transform: translateX(9vw) translateY(4vh) scale(0.6);
  }
  11.1111111111% {
    transform: translateX(50vw) translateY(49vh) scale(0.29);
  }
  14.8148148148% {
    transform: translateX(-19vw) translateY(-12vh) scale(0.97);
  }
  18.5185185185% {
    transform: translateX(47vw) translateY(46vh) scale(0.42);
  }
  22.2222222222% {
    transform: translateX(-41vw) translateY(11vh) scale(0.54);
  }
  25.9259259259% {
    transform: translateX(-43vw) translateY(46vh) scale(0.63);
  }
  29.6296296296% {
    transform: translateX(-23vw) translateY(-46vh) scale(0.34);
  }
  33.3333333333% {
    transform: translateX(-38vw) translateY(-12vh) scale(0.63);
  }
  37.037037037% {
    transform: translateX(44vw) translateY(-31vh) scale(0.92);
  }
  40.7407407407% {
    transform: translateX(37vw) translateY(-31vh) scale(0.71);
  }
  44.4444444444% {
    transform: translateX(29vw) translateY(25vh) scale(0.7);
  }
  48.1481481481% {
    transform: translateX(19vw) translateY(48vh) scale(0.92);
  }
  51.8518518519% {
    transform: translateX(36vw) translateY(-16vh) scale(0.85);
  }
  55.5555555556% {
    transform: translateX(-36vw) translateY(27vh) scale(0.44);
  }
  59.2592592593% {
    transform: translateX(22vw) translateY(40vh) scale(0.64);
  }
  62.962962963% {
    transform: translateX(16vw) translateY(46vh) scale(1);
  }
  66.6666666667% {
    transform: translateX(20vw) translateY(-34vh) scale(0.83);
  }
  70.3703703704% {
    transform: translateX(-32vw) translateY(44vh) scale(0.4);
  }
  74.0740740741% {
    transform: translateX(37vw) translateY(2vh) scale(0.48);
  }
  77.7777777778% {
    transform: translateX(31vw) translateY(21vh) scale(0.34);
  }
  81.4814814815% {
    transform: translateX(15vw) translateY(26vh) scale(0.43);
  }
  85.1851851852% {
    transform: translateX(-4vw) translateY(4vh) scale(0.57);
  }
  88.8888888889% {
    transform: translateX(0vw) translateY(-18vh) scale(0.81);
  }
  92.5925925926% {
    transform: translateX(1vw) translateY(40vh) scale(0.34);
  }
  96.2962962963% {
    transform: translateX(12vw) translateY(42vh) scale(0.82);
  }
  100% {
    transform: translateX(45vw) translateY(19vh) scale(0.28);
  }
}
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 18s;
}
.firefly:nth-child(13)::after {
  animation-duration: 18s, 9802ms;
  animation-delay: 0ms, 1598ms;
}

@keyframes move13 {
  0% {
    transform: translateX(-38vw) translateY(4vh) scale(0.63);
  }
  5.2631578947% {
    transform: translateX(23vw) translateY(4vh) scale(0.7);
  }
  10.5263157895% {
    transform: translateX(-35vw) translateY(-46vh) scale(0.7);
  }
  15.7894736842% {
    transform: translateX(46vw) translateY(-26vh) scale(0.89);
  }
  21.0526315789% {
    transform: translateX(-20vw) translateY(-39vh) scale(0.36);
  }
  26.3157894737% {
    transform: translateX(-41vw) translateY(23vh) scale(0.76);
  }
  31.5789473684% {
    transform: translateX(6vw) translateY(-47vh) scale(0.56);
  }
  36.8421052632% {
    transform: translateX(-16vw) translateY(-48vh) scale(0.61);
  }
  42.1052631579% {
    transform: translateX(23vw) translateY(36vh) scale(0.32);
  }
  47.3684210526% {
    transform: translateX(4vw) translateY(-32vh) scale(0.64);
  }
  52.6315789474% {
    transform: translateX(-43vw) translateY(24vh) scale(0.64);
  }
  57.8947368421% {
    transform: translateX(-31vw) translateY(-11vh) scale(0.98);
  }
  63.1578947368% {
    transform: translateX(27vw) translateY(38vh) scale(0.48);
  }
  68.4210526316% {
    transform: translateX(28vw) translateY(-43vh) scale(0.31);
  }
  73.6842105263% {
    transform: translateX(-21vw) translateY(-27vh) scale(0.9);
  }
  78.9473684211% {
    transform: translateX(25vw) translateY(-5vh) scale(0.51);
  }
  84.2105263158% {
    transform: translateX(-27vw) translateY(9vh) scale(0.63);
  }
  89.4736842105% {
    transform: translateX(-4vw) translateY(-36vh) scale(0.56);
  }
  94.7368421053% {
    transform: translateX(-1vw) translateY(-21vh) scale(0.68);
  }
  100% {
    transform: translateX(-15vw) translateY(20vh) scale(0.78);
  }
}
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 16s;
}
.firefly:nth-child(14)::after {
  animation-duration: 16s, 8831ms;
  animation-delay: 0ms, 7466ms;
}

@keyframes move14 {
  0% {
    transform: translateX(-12vw) translateY(-34vh) scale(0.38);
  }
  4.7619047619% {
    transform: translateX(38vw) translateY(39vh) scale(0.73);
  }
  9.5238095238% {
    transform: translateX(28vw) translateY(25vh) scale(0.59);
  }
  14.2857142857% {
    transform: translateX(9vw) translateY(49vh) scale(0.94);
  }
  19.0476190476% {
    transform: translateX(24vw) translateY(3vh) scale(0.43);
  }
  23.8095238095% {
    transform: translateX(-12vw) translateY(19vh) scale(0.28);
  }
  28.5714285714% {
    transform: translateX(2vw) translateY(-10vh) scale(0.91);
  }
  33.3333333333% {
    transform: translateX(-18vw) translateY(30vh) scale(0.79);
  }
  38.0952380952% {
    transform: translateX(42vw) translateY(20vh) scale(0.81);
  }
  42.8571428571% {
    transform: translateX(35vw) translateY(21vh) scale(0.98);
  }
  47.619047619% {
    transform: translateX(-30vw) translateY(7vh) scale(0.73);
  }
  52.380952381% {
    transform: translateX(-14vw) translateY(-1vh) scale(0.28);
  }
  57.1428571429% {
    transform: translateX(42vw) translateY(10vh) scale(0.65);
  }
  61.9047619048% {
    transform: translateX(25vw) translateY(24vh) scale(0.53);
  }
  66.6666666667% {
    transform: translateX(21vw) translateY(21vh) scale(0.6);
  }
  71.4285714286% {
    transform: translateX(40vw) translateY(-38vh) scale(0.81);
  }
  76.1904761905% {
    transform: translateX(44vw) translateY(-5vh) scale(0.38);
  }
  80.9523809524% {
    transform: translateX(-8vw) translateY(-16vh) scale(0.3);
  }
  85.7142857143% {
    transform: translateX(16vw) translateY(4vh) scale(0.33);
  }
  90.4761904762% {
    transform: translateX(-10vw) translateY(20vh) scale(0.29);
  }
  95.2380952381% {
    transform: translateX(-44vw) translateY(-7vh) scale(0.49);
  }
  100% {
    transform: translateX(-31vw) translateY(19vh) scale(0.37);
  }
}
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 14s;
}
.firefly:nth-child(15)::after {
  animation-duration: 14s, 5862ms;
  animation-delay: 0ms, 5332ms;
}

@keyframes move15 {
  0% {
    transform: translateX(-18vw) translateY(-28vh) scale(0.64);
  }
  4.5454545455% {
    transform: translateX(24vw) translateY(21vh) scale(0.92);
  }
  9.0909090909% {
    transform: translateX(-40vw) translateY(-4vh) scale(0.78);
  }
  13.6363636364% {
    transform: translateX(-45vw) translateY(40vh) scale(0.96);
  }
  18.1818181818% {
    transform: translateX(-23vw) translateY(-37vh) scale(0.91);
  }
  22.7272727273% {
    transform: translateX(-6vw) translateY(-37vh) scale(0.47);
  }
  27.2727272727% {
    transform: translateX(27vw) translateY(-10vh) scale(0.98);
  }
  31.8181818182% {
    transform: translateX(40vw) translateY(49vh) scale(0.58);
  }
  36.3636363636% {
    transform: translateX(12vw) translateY(-26vh) scale(0.86);
  }
  40.9090909091% {
    transform: translateX(-42vw) translateY(-31vh) scale(0.97);
  }
  45.4545454545% {
    transform: translateX(1vw) translateY(-10vh) scale(0.98);
  }
  50% {
    transform: translateX(3vw) translateY(49vh) scale(0.46);
  }
  54.5454545455% {
    transform: translateX(34vw) translateY(-18vh) scale(0.7);
  }
  59.0909090909% {
    transform: translateX(7vw) translateY(36vh) scale(0.76);
  }
  63.6363636364% {
    transform: translateX(22vw) translateY(16vh) scale(0.95);
  }
  68.1818181818% {
    transform: translateX(-34vw) translateY(29vh) scale(0.7);
  }
  72.7272727273% {
    transform: translateX(-21vw) translateY(-2vh) scale(0.74);
  }
  77.2727272727% {
    transform: translateX(14vw) translateY(-7vh) scale(0.65);
  }
  81.8181818182% {
    transform: translateX(-38vw) translateY(-10vh) scale(0.47);
  }
  86.3636363636% {
    transform: translateX(-12vw) translateY(-3vh) scale(0.93);
  }
  90.9090909091% {
    transform: translateX(33vw) translateY(-34vh) scale(0.97);
  }
  95.4545454545% {
    transform: translateX(-32vw) translateY(35vh) scale(1);
  }
  100% {
    transform: translateX(31vw) translateY(-32vh) scale(0.97);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}
/* ________________________________firefly end_____________________________________________________ */