:root {

  --blue: #00b8ff;

  --dp-blue: #323b4e;

}





body {

  /* overflow: hidden; */

  /* overflow-y: hidden; */

  padding: 0;

  margin: 0;

  height: 3000px;

  background-color: white;

  font-family: "Poppins", sans-serif;

  color: var(--dp-blue);

}



nav {

  position: fixed;

  width: 100%;

  display: flex;

  flex-direction: row;

  background-color: white;

  height: 80px;

  z-index: 1;

  transition: height 0.5s ease;

}



#nav-logo {

  background-color: aquamarine;

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: center;

}



.logo-img {

  height: 95px;

  width: auto;

  position: absolute;

  margin-left: auto;

  margin-right: auto;

  left: 0;

  right: 0;

  transition: height 0.5s ease;

}



#logo-img-quick {

  height: 30px;

  width: auto;

  position: absolute;

  margin-left: auto;

  margin-right: auto;

  left: 0;

  right: 180px;

  margin-top: 24px;

}



#logo-img-earn {

  height: 30px;

  width: auto;

  position: absolute;

  margin-left: auto;

  margin-right: auto;

  left: 161px;

  right: 0;

  margin-top: 24px;

}



.link-group {

  padding: 11px;

  margin: 17px 0 0 51px;

}



.link {

  font-size: 14px;

  margin: 0 10px 0 10px;

  color: var(--dp-blue);

}



.link:hover {

  color: black;

}



.link:active {

  color: var(--blue);

}

.active {

  color: var(--blue);

}



.right {

  position: absolute;

  right: 0;

}



.round {

  border-radius: 30px !important;

}



.overflow {

  overflow: hidden;

}



.bg-img {

  margin-top: 80px;

  height: 540px;

}



#bar {

  display: none;

}



#heading {

  position: absolute;

  width: 100%;

  text-align: center;

  margin-top: 130px;

  font-size: 37px;

  font-weight: 50 !important;

}



#sidebar {

  height: 100% !important;

  width: 235px;

  right: -260px;

  padding: 10px;

  position: fixed;

  z-index: 2;

  display: flex;

  flex-direction: column;

  background-color: rgb(242, 243, 248);



  transition: right 0.5s ease;

}

#sidebar > a {

  margin-top: 10px;

  margin-left: 10px;

  color: var(--dp-blue);

  font-size: 16px;

}

#close-btn {

  color: var(--dp-blue);

  margin-right: 0;

  margin-left: auto;

}

.media-link {

  margin: auto auto 0 auto;

}

.txt-dp-blue {

  color: var(--dp-blue);

}

.svg-icon {

  width: 200px;

  margin: 0 auto 0 auto;

  padding: 10px;

  border-radius: 20px;

  transition: box-shadow 0.5s ease;

}

.svg-icon > img {

  width: 100px;

  margin: 0 auto 0 auto;

  display: block;

}

.svg-icon:hover {

  -webkit-box-shadow: 0px 0px 29px 4px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 0px 0px 29px 4px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 0px 29px 4px rgba(0, 0, 0, 0.1);

}

.about-img {

  margin: 0 auto 0 auto;

  display: block;

  width: 500px;

}

.hr-sm {

  width: 100px;

  border-bottom: 1px solid var(--dp-blue);

  margin: 10px auto 0 auto;

}

.sprt {

  overflow: hidden;
  margin: 0 auto 0 auto;

  display: flex;

  flex-direction: row;

  justify-content: center;

}

.support {

  height: 50px;

  margin: 15px;

  filter: grayscale(100%);

  opacity: 0.5;

  transition: filter 0.5s ease;

  transition: opacity 0.5s ease;

}

.support:hover {

  filter: none;

  opacity: 1;

}

#windmil {

  margin: 0 auto -75px auto;

  display: block;

}

#footer {

  width: 100%;

  height: 300px;

  position: relative;

  margin-top: -3px;

  background-color: #293742;

}

.footer-media {

  display: flex;

  flex-direction: row;

  justify-content: center;

}

.footer-media > a {

  width: 45px;

  height: 45px;

  color: #00b8ff;

  border: 2px solid #00b8ff;

  padding: 10px;

  border-radius: 50%;

  margin: 10px;

  text-align: center;

}

#footer-link {

  text-align: center;

  margin: 150px auto 0 auto;

  top: 20px;

}

#footer-link > small {

  color: #e3e5e6;

  margin: auto auto 0 auto;

}

.hover-shadow {

  transition: box-shadow 0.5s ease;

}

.hover-shadow:hover,

.hover-shadow:active,

.hover-shadow:focus {

  -webkit-box-shadow: 0px 0px 33px -5px rgba(0, 0, 0, 0.26) !important;

  -moz-box-shadow: 0px 0px 33px -5px rgba(0, 0, 0, 0.26) !important;

  box-shadow: 0px 0px 33px -5px rgba(0, 0, 0, 0.26) !important;

}



.modal-cls{

    display: inline;

    margin: 20px;

}

.modal-cls > span{

   font-size: 22px;

   padding: 12px;

}

.close{

    color: var(--dp-blue)!important ;

}

.modal-bg-img{

    left:0;

    right:0;

    margin-left: auto;

    margin-right: auto;

    position: absolute;

    opacity: .2;

}



@media screen and (max-width: 900px) {

  .link-group {

    margin: 17px 0 0 10px;

  }

}



@media screen and (max-width: 820px) {

  .link-group
  {
    display: none;
  }

  #sign-up {

    /* display: none; */
    padding: 7px 15px 7px 15px !important;

  }



  .logo-img {

    height: 60px;

  }



  #logo-img-quick {

    height: 25px;

    right: 138px;

    margin-top: 17px;

  }



  #logo-img-earn {

    height: 25px;

    left: 123px;

    margin-top: 17px;

  }



  #sign-in {

    padding: 7px 15px 7px 15px !important;

  }



  #bar {

    display: inline;

    padding: 5px !important;

    border: none !important;

  }



  nav {

    height: 50px;

  }



  #heading {

    margin-top: 14vw;

    font-size: 5vh;

  }

  .support {

    margin: 5px;

    height: 40px;

  }



  .about-img {

    width: 400px;

  }

  #windmil {

    margin: 0 auto -57px auto;

    width: 300px;

  }

  .footer-media > a {

    width: 30px;

    height: 30px;

    padding: 2px;

  }

}



@media screen and (max-width: 500px) {

  .link-group,

  #sign-up {

    /* display: none; */
    padding: 2px 10px 2px 10px !important;

  }



  nav {

    height: 40px;

  }



  .logo-img {

    height: 40px;

    margin-left: 0;

    left: 10px;

  }



  #logo-img-quick {

    margin-left: 0;

    height: 17px;

    left: 51px;

    margin-top: 11px;

  }



  #logo-img-earn {

    margin-left: 0;

    height: 17px;

    left: 100px;

    margin-top: 11px;

  }



  #sign-in {

    padding: 1px 10px 1px 10px !important;

    border: 1px solid !important;

  }



  #bar {

    padding: 5px !important;

    border: none !important;

  }

  .support {

    margin: 5px;

    height: 30px;

  }

  .about-img {

    width: 300px;

  }

}















.layer {

  position: absolute;

  left: 0;

  right: 0;



}



#scene {

  width: 100%;

  position: relative;

}



#layer6 {

  position: relative;

  margin: 264px 244px;

  width: 60px;

  height: 55px;



  animation-name: rotate;

  animation-duration: 5s;

  animation-iteration-count: infinite;

  transform-origin: 50% 75%;

}



@keyframes rotate {

  0% {

    transform: rotate(-10deg);

  }



  25% {

    transform: rotate(0deg);

  }



  50% {

    transform: rotate(10deg);

  }



  75% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(-10deg);

  }

}



#layer8 {

  position: absolute;

  left: 832px;

  top: 252px;

  /*   margin: 257px 61.7%; */

  height: 53px;

  animation-name: up-down;

  animation-duration: 3s;

  animation-iteration-count: infinite;

  transform-origin: 50% 50%;

}



@keyframes up-down {

  0% {

    transform: translateY(0%);

  }



  50% {

    transform: translateY(-8%);

  }



  100% {

    transform: translateY(0%);

  }

}



#layer10 {

  position: absolute;

  /*   margin: 308px 82.3%; */

  width: 36px;

  height: 55px;

  top: 309px;

  left: 1110px;

  animation-name: rotate;

  animation-duration: 5s;

  animation-iteration-count: infinite;

  transform-origin: 50% 75%;

}



#dlr {

  position: absolute;

  /*   margin: 308px 82.3%; */

  width: 36px;

  height: 31px;

  top: 322px;

  left: 204px;



  animation: tada 3s linear infinite;

  transform-origin: 50% 50%;

}

#dlr2 {

  position: absolute;

  /*   margin: 308px 82.3%; */

  width: 55px;

  height: 43px;

  top: 288px;

  left: 760px;

  animation: tada 3s linear infinite;

  transform-origin: 50% 50%;

}



#dlr3 {

  position: absolute;

  /*   margin: 308px 82.3%; */

  width: 30px;

  height: 39px;

  top: 310px;

  left: 1171px;

  animation: tada 3s linear infinite;

  transform-origin: 50% 50%;

}



@keyframes tada {

  0% {

    transform: scale(1)

  }



  8.33333% {

    transform: scale(.9) rotate(-8deg)

  }



  16.66667% {

    transform: scale(.9) rotate(-8deg)

  }



  25% {

    transform: scale(1.3) rotate(8deg)

  }



  33.33333% {

    transform: scale(1.3) rotate(-8deg)

  }



  41.66667% {

    transform: scale(1.3) rotate(8deg)

  }



  50% {

    transform: scale(1.3) rotate(-8deg)

  }



  58.33333% {

    transform: scale(1.3) rotate(8deg)

  }



  66.66667% {

    transform: scale(1) rotate(0)

  }



  100% {

    transform: scale(1) rotate(0)

  }

}





/* author:md-arif-un;

email:arifunctg@gmail.com

linkedin: in/arif-un */

