body {
  font-family: "Helvetica";
}


.topnav {
    overflow: hidden;
}

.topnav a {
color: #115FA4;
 padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}


.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}


.img1 {

height: 40px;
margin-left: 10px;
}



.span1 {
  margin-left: 55%;
}

.child1 {
    border-top: 3px solid #6093BF;
}

.child1, .child2 {
  background-color: #F2F9FF;
  height: 200px;
  width: 300px;

}

.p1 {
   font-size: 38px;
  color: #A1C5E5;


}

.span2 {
  color: #6093BF;
  font-weight: bold;

}
  
.a1 {
   text-decoration: none;
  color:#6093BF;
  font-size: 22px;
}

.ul1 {
  font-size: 15px;
  line-height: 25px;
}


.span3 {
   color:#6093BF;
   margin-left: 70px;
}


.span6 {
   color:#6093BF;
   margin-left: 130px;
   font-size: 12px;
}
.span4 {
   color:#6093BF;
   margin-left: 10px;
   font-size: 16px;
}

.span5 {
   color:#6093BF;
   margin-left: 10px;
   font-size: 20px;
}


.learn {
  font-size: 20px;
  color:#6093BF;
}
.a2 {
  color: black;
  font-size: 22px;
  font-weight: bold;
}

.child2 {
  text-align: center;
  border-bottom: 4px solid #6093BF;

}

.child2 span {
  font-size: 20px;
}


.div1 {
  display: flex;
  margin-left: 17%;
  flex-wrap: wrap;
  gap: 50px;
}

.box2 .p1 {
  width: 300px;
  margin-left: 20%;
}

.child3 {
  display: flex;
  flex-wrap: wrap;
 width: 330px;
}

.img5 {
  width: 100%;
}



.span7 {
  font-size: 20px;
  margin-left: 20px;
 
}
.p2 {
   font-size: 21px;
   color: #115FA4;

}

.hr3 {
  width: 250px;
  height: 2px;
   background-color: #115FA4;
}

.hr4 {
  width: 250px;
  height: 3px;
   background-color: #6093BF;
   margin-top: 115%;


}


.box2 {
  height: 546px;

}


.mob {
  height: 52vh;
  margin-top: 30px;
}

.p3 {
   font-size: 38px;
   color: #E5D381;
   

}


.span8 {
  color: #E5D381;
  font-weight: bold;

}

.child4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.btn2 {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 20px;
  background-color: black;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  margin-left: 10px;
}

.bts1 {
  font-size: 11px;
}
.bts2 {
  font-size: 17px;
  font-weight: bold;
}

.fa-apple {
  font-size: 30px;
}

.fa-google-play {
  font-size: 24px;
}

.btn3 {
  padding: 12px 39px;
    background-color: black;
  color: #ffffff;
  border: none;
  border-radius: 10px;
 
}


.img9 {
margin-left: 35%;
border-bottom: 2px solid #6093BF;
border-top: 2px solid #6093BF;
width: 30%;
}



.img10 {
  width: 22%;
margin-left: 29%;
 border-bottom: 4px solid #6093BF;


}
.img11 {
  width: 22%;
 border-bottom: 4px solid #6093BF;
}
.img {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

}


.footer {
  background-color: #DBEAF8;
  height: 490px;

}
.foot {
    display: flex;
  flex-wrap: wrap;
    margin: 0 auto;
    gap: 100px;
   margin-left: 30%;
}

.li1 {
  font-size: 18px;
  color: #115FA4;
}

.ul2 {
 font-size: 14px;
  color: #115FA4;
  list-style-type: none;

}
.hr2 {
  height: 1px;
  background-color: #6093BF;
}

.ul2 li {
   line-height: 25px;
}

.ldiv {
  display: flex;
  flex-wrap: wrap;
  margin-left: 45%;
  gap: 10px;
  margin-top: 90px;

}

.p4 {
  font-size: 12px;
  color: #115FA4;
  text-align: center;
  margin-top: 25px;
}



.topnav, .img5  {
  animation-duration: 5s;
  animation-name: slide-in;
}

@keyframes slide-in {
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

.child1, .child2 {
  animation: pulse 5s infinite;
}


@keyframes pulse {
  0% {
    background-color:#DBEAF8;
  
  }
  100% {
    background-color :white;
  }
}

.child3, .box3 {
  animation: pulse 5s infinite;
}


@keyframes pulse {
  0% {
    background-color:white;
  
  }
  100% {
    background-color :#DBEAF8;
    border-radius: 10px;
    text-align: center;
  }
}





.img9, .img10, .img11 {
  animation: zoom-in-zoom-out 3s ease infinite;
}
@keyframes zoom-in-zoom-out {
  0% {
    scale: 60%;
  }
  50% {
    scale: 100%;
  }
  100% {
    scale: 70%;
  }
}


.footer {
  animation: red1 2s infinite;
  box-shadow: 0 0 0 0 blue;
  

}
@keyframes  red1 {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 blue;
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px #DBEAF8;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 #DBEAF8;
  }
}









.img5, .topnav , .div1 , .div2 , .img {
    opacity: 0;
    transform: translateY(80px);
    animation: moveup 0.5s linear forwards ;
}
@keyframes moveup {
    100% {
        opacity: 1;
transform: translateY(0px);
    }
}










.a3 {
    border-bottom: 5px solid red;
}



body {
  background-size: cover;
    background-attachment: fixed;
    background-image: url("https://static.vecteezy.com/system/resources/previews/043/191/561/non_2x/airplane-side-view-flying-above-the-clouds-with-blue-sky-background-illustration-vector.jpg");
}





@media (max-width:1000px) {
  body {
    margin: 20px;
    
  }
}



@media (max-width:1500px) {
  .span1 {
    margin-left: 0%;
  }
  .div1 {
    margin-left: 20%;
  }

}



.carousel {
 width: 100%;
}

.navbar {
  width: 100%;
}