* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   background: rgb(18, 18, 18, 1);
}

header h1 {
   color: rgb(238, 238, 238, 1);
   font-family: 'Gilroy', sans-serif;
   font-size: 23px;
   top: 24px;
   left: 26px;
   position: absolute;
   cursor: pointer;
}

header button {
   background-color: rgba(197, 242, 119, 1);
   position: absolute;
   right: 26px;
   width: 145px;
   height: 47px;
   font-family: 'Gilroy', sans-serif;
   border: none;
   border-radius: 8px;
   top: 14px;
   transition: all 1s ease;
   color: rgba(18, 18, 18, 1);
   font-weight: bold;
   z-index: 1;
   appearance: none;
   outline: none;
}
.sticky {
   position: fixed;
   top: 0;
   width: 100%;
}
header button:hover {
   border: 2px solid rgb(238, 238, 238, 1);
   color: rgba(238, 238, 238, 1);
   background-color: transparent;
}

nav {
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
   margin-top: 0px;
   width: 100%;
   height: 75px;
   color: rgb(18, 18, 18, 1);
   border-bottom: 0.5px solid rgb(129, 129, 129);
   background-color: rgb(18, 18, 18, 1);
}

nav li {
   display: inline;
}

nav a {
   color: rgb(165, 163, 163);
   font-family: 'Gilroy', sans-serif;
   font-size: 1rem;
   text-decoration: none;
   margin-top: 28px;
   display: inline-block;
   font-weight: bold;
   margin-left: 30px;
   font-size: 0.9rem;
   transition: all 1s ease;
}

nav a:hover {
   color: rgba(197, 242, 119, 1);
}

@media (max-width : 768px) {
   nav a {
      display: none;
   }
}

@media (min-width : 1000px) {
   header h1 {
      left: 53px;
   }

   header button {
      right: 53px;
   }
}

@media (min-width : 1200px) {
   header h1 {
      left: 83px;
   }
   header button {
      right: 83px;
      width: 170px;
   }
   header button:hover {
      border: 3px solid rgba(238, 238, 238, 1);
   }
}

#txt1 {
   color: rgba(238, 238, 238, 1);
   text-align: center;
   padding: 45px;
   font-family: 'Gilroy', sans-serif;
   font-size: 27px;
   line-height: 39px;
   font-weight: 500;
   margin-top: 80px;
}
#txt2 {
   color: rgb(194, 194, 194);
   text-align: center;
   padding: 65px;
   font-family: 'Gilroy', sans-serif;
   font-size: 14px;
   line-height: 19px;
   /* font-weight: 100; */
   margin-top: -100px;
}
span {
   color: rgba(197, 242, 119, 1);
   font-weight: bold;
}
.scroll-downs {
   position: absolute;
   top: 300px;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   
   width :24px;
   height: 35px;
 }
 .mousey {
   width: 1px;
   padding: 10px 15px;
   height: 30px;
   border: 2px solid #fff;
   border-radius: 25px;
   opacity: 0.75;
   box-sizing: content-box;
 }
 .scroller {
   width: 3px;
   height: 10px;
   border-radius: 25%;
   background-color: #fff;
   animation-name: scroll;
   animation-duration: 2.2s;
   animation-timing-function: cubic-bezier(.15,.41,.69,.94);
   animation-iteration-count: infinite;
 }
 @keyframes scroll {
   0% { opacity: 0; }
   10% { transform: translateY(0); opacity: 1; }
   100% { transform: translateY(15px); opacity: 0;}
 }
@media (min-width : 768px) {
   #txt1 {
      padding: 180px;
      font-size: 42px;
      margin-top: -70px;
      line-height: 52px;
   }
   #txt2 {
      padding: 180px;
      font-size: 22px;
      margin-top: -90px;
      line-height: 52px;
   }
}

@media (min-width : 1000px) {
   #txt1 {
      padding: 170px;
      margin-top: 60px;
      font-size: 28px;
      line-height: 38px;
   }
}

@media (min-width : 1200px) {
   #txt1 {
      font-size: 32px;
      line-height: 52px;
      padding: 250px;
      margin-top: -130px;
   }
}
.images1 {
   display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.images1 #img1{
 width: 250px;
 margin-top: 260px;
 height: 500px;
}

.images1 #img2 {
   margin-left: 66px;
   width: 250px;
   height: 500px;
   display: none;
}
.images1 #img3 {
   margin-left: 62px;
   margin-top: 260px;
   width: 250px;
   height: 500px;
   display: none;
}
@media(min-width : 768px ) {
   .images1 #img1 {
      margin-left:390px;
      width: 200px;
      height: 400px;

   }
   .images1 #img2 {
      margin-top: 80px;
      display: block;
      width: 200px;
      height: 400px;
   }
   .images1 #img3 {
      display: block;
      width: 200px;
      height: 400px;
      margin-right: 390px;
   }
}
@media(min-width : 1000px) {
   .images1 {
      margin-top: -20px;
   }
   .images1 #img1 {
      width: 250px;
      height: 520px;
      margin-left: 450px;
   }
   .images1 #img2 {
      width: 250px;
      height: 520px;
   }
   .images1 #img3 {
      margin-right: 450px;
      width: 250px;
      height: 520px;
   }
}
@media(min-width : 1200px) {
   .images1 {
      margin-top: -100px;
   }
   .images1 #img1 {
      width: 350px;
      height: 700px;
   }
   .images1 #img2 {
      width: 350px;
      height: 700px;
   }
   .images1 #img3 {
      width: 350px;
      height: 700px;
   }
}
.stats {
   margin-top: 150px;
   font-family : 'Gilroy', sans-serif;
   color: rgba(238, 238, 238, 1);
   text-align: center;
   line-height: 28px;
   font-size: 0.8rem;
   padding: 20px;
}
.stats .box1 {
   width: 301px;
   height: 80px;
   border-radius: 12px;
   background-color: #ffd6ad;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
   margin-left: 8px;
}
.stats .box2 {
   width: 301px;
   height: 80px;
   border-radius: 12px;
   background: #E6D6FF;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
   margin-left: 8px;
}
.stats .box3 {
   width: 301px;
   height: 80px;
   border-radius: 12px;
   background: #336DFF;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
   margin-left: 8px;
}
.stats .box4 {
   width: 301px;
   height: 80px;
   border-radius: 12px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
   margin-left: 8px;
}
.box1 p {
   color: rgba(18, 18, 18, 1);
   font-weight: bold;
   font-family: 'gilroy', sans-serif;
   font-size: 1.0rem;
}
.box2 p {
   color: rgba(18, 18, 18, 1);
   font-weight: bold;
   font-family: 'gilroy', sans-serif;
   font-size: 1.0rem;
}
.box3 p {
   color: rgba(238, 238, 238, 1);
   font-weight: bold;
   font-family: 'gilroy', sans-serif;
   font-size: 1.0rem;
}
.box4 p {
   color: rgba(18, 18, 18, 1);
   font-weight: bold;
   font-family: 'gilroy', sans-serif;
   font-size: 1.0rem;
}
@media(min-width : 768px) {
   .stats {
      margin-top: 50px;
      font-size: 1rem;
      padding: 80px;
      line-height: 32px;
   }
   .stats .box1 {
      margin-left: -20px;
   }
   .stats .box2 {
      margin-top: -80px;
      margin-left: 325px;
   }
   .stats .box3 {
      margin-left: -20px;
   }
   .stats .box4 {
      margin-top: -80px;
      margin-left: 325px;
   }
}
@media(min-width : 1000px) {
   .stats {
      font-size: 1.2rem;
      padding: 150px;
      line-height: 38px;
      margin-top: -20px;
   }
   .stats .box1 {
   margin-top: 40px;
   width: 380px;
   height: 100px;
   margin-left: -65px;
   }
   .box1 p {
      font-size: 1.3rem;
   }
   .stats .box2 {
      width: 380px;
      height: 100px;
      margin-left: 400px;
      margin-top: -100px;
   }
   .box2 p {
      font-size: 1.3rem;
   }
   .stats .box3 {
      width: 380px;
      height: 100px;
      margin-left: -65px;
   }
   .box3 p {
      font-size: 1.3rem;
   }
   .stats .box4 {
      width: 380px;
      height: 100px;
      margin-left: 400px;
      margin-top: -100px;
   }
   .box4 p {
      font-size: 1.3rem;
   }
}
@media(min-width : 1200px) {
   .stats {
      margin-top: -80px;
      padding: 350px;
   }
   .stats .box1 {
      margin-left: -70px;
   }
   .stats .box2 {
      margin-left: 470px;
   }
   .stats .box3 {
      margin-left: -70px;
   }
   .stats .box4 {
      margin-left: 470px;
   }
}
.container1 {
   width: 301px;
   height: 380px;
   background-color: transparent;
   border: 3px solid rgba(197, 242, 119, 1);
   border-radius: 20px;
   margin-top: 100px;
   margin-left: 27px;
}
.container1 h1 {
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   margin-top: -60px;
   margin-left: -50px;
   padding: 80px;
}
span {
   color: rgba(197, 242, 119, 1);
}
.container1 p {
   margin-top: -90px;
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   padding: 30px;
   font-size: 1rem;
   line-height: 23px;
}
.container2 {
   width: 301px;
   height: 310px;
   background-color: transparent;
   border: 3px solid rgba(197, 242, 119, 1);
   border-radius: 20px;
   margin-top: 30px;
   margin-left: 27px;
}
.container2 h1 {
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   margin-top: -20px;
   margin-left: -10px;
   padding: 40px;
}
.container2 p {
   margin-top: -50px;
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   padding: 30px;
   font-size: 1rem;
   line-height: 23px;
}
.container3 {
   width: 301px;
   height: 445px;
   background-color: transparent;
   border: 3px solid rgba(197, 242, 119, 1);
   border-radius: 20px;
   margin-top: 30px;
   margin-left: 27px;
}
.container3 h1 {
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   margin-top: -60px;
   margin-left: -50px;
   padding: 80px;
}
.container3 p {
   margin-top: -90px;
   color: rgba(238, 238, 238, 1);
   font-family: 'gilroy', sans-serif;
   padding: 30px;
   font-size: 1rem;
   line-height: 23px;
}
@media(min-width : 768px) {
.container1 {
   margin-left: 60px;
   width: 650px;
   margin-top: 20px;
   height: 210px;
}
.container2 {
   margin-top: 40px;
   height: 180px;
   width: 650px;
   margin-left: 60px;
}
.container3 {
   margin-top: 40px;
   width: 650px;
   height: 230px;
   margin-left: 60px;
}
}
@media(min-width : 1000px) {
   .container1 {
      margin-top: -50px;
      margin-left: 90px;
      width: 840px;
      height: 210px;
   }
   .container1 h1 {
      font-size: 1.9rem;
   }
   .container1 p {
      font-size: 1.2rem;
      line-height: 28px;
   }
   .container2 {
      margin-left: 90px;
      width: 840px;
      height: 190px;;
   }
   .container2 h1 {
      font-size: 1.9rem;
   }
   .container2 p {
      font-size: 1.2rem;
      line-height: 28px;
   }
   .container3 {
      margin-left: 90px;
      width: 840px;
      height: 240px;;
   }
   .container3 h1 {
      font-size: 1.9rem;
   }
   .container3 p {
      font-size: 1.2rem;
      line-height: 28px;
   }
}
#circle {
   width: 200px;
   height: 200px;
   background-color: red;
   margin-top: 2800px;
}