@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Dancing+Script:wght@400..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

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%;
}

.div1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 100px;
  margin-left: 10%;
  

}

.c1 {
    font-size: 38px;
    letter-spacing: 3px;
    font-weight: 200;
    color: black;
    width: 40%;
    margin-left: 10%;

}

.span2 {
    font-weight: bold;
}

@media (max-width:822px) {
    .div1 {
        display: block;
        width: 100%;

    }
}



@media screen and (width <= 1500px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-shadow: 2px 3px 10px blue;
    background-color: blue;
    color: white;
  }
}


@media screen and (width <= 1500px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a {
   float: none;
    display: block;
   text-align:center;
   box-shadow: 2px 3px 10px blue;
color: white;
  }
}

.hr1 {
        width: 60%;
    margin-left: 10%;
    height: 1px;
    background-color: #BFBFBF;
}


.div2 {
    text-align: center;
    flex-wrap: wrap;
}
.div2 h1 {
 font-size: 26px;
 color: black;
}


.div2 h4 {
    font-size: 15.21px;
    color: black;
}

.p5 {
    line-height: 23px;
    font-size: 13px;
    color: black;
    margin-left: 10%;
}
.imgdiv {
  text-align: center;
}


@media (max-width:822px) {
    .img2 {
        width:100%;
        margin: 0px;
         padding: 0px;
    }
}

.footer {
           font-family: "Dancing Script", cursive;
  height: 490px;


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

.li1 {
  font-size: 35px;
  
}

.ul2 {
 font-size: 22px;
  
  list-style-type: none;

}
.hr2 {
  height: 1px;
 
}

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

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


}
.pdiv {
    display: flex;
    flex-wrap: wrap;
   
  margin-left: 28%;
}


.p4 {
  font-size: 15px;
height: 70px;
  margin-top: 25px;
  text-align: center;
}

.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;
  }
}



@media(max-width:2000px) {
   .footer{
    width: 100%;
    flex-wrap: wrap;
    height: auto;
   }
}

@media (width <= 700px)  {
  body {
    width: 100%;
    flex-wrap: wrap;
     padding: 8px;
     text-align: center;
  }
}




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


.img2, .cimg {
  animation: zoom-in-zoom-out 3s ease infinite;
}
@keyframes zoom-in-zoom-out {
  0% {
    scale: 100%;
  }
  50% {
    scale: 80%;
  }
  100% {
    scale: 110%;
  }
}


.c1 {
  animation: pulse 5s infinite;
}


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

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


.img1  {
  animation-duration: 5s;
  animation-name: slide-in;
}

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

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

.maindiv {
    display: flex;
    align-items: center;
    margin-left: 10%;
    gap: 100px;
    color: black;
    flex-wrap: wrap;

}
.maindiv img {
    height: 230px;
}

body {
  background-size: cover;
    background-attachment: fixed;

    
    
}


.limg {
    margin-left: 20%;
    margin-top: 60px;
}
.limg img {
  border-radius: 50px;
}




#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}



.p2 {
  text-align: center;
  color: black;
            font-family: "Dancing Script", cursive;
font-weight: bolder;
font-size: 25px;
}





@media (max-width:1900px) {
  .limg {
    margin-left: 0;
  }
  .child2 {
    margin-left: 0px;
  }
}