*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{

    margin: 0;
    padding: 0;
}
header{
    height:80px;
    width:100%;
    z-index:12;
    position:fixed;
    
    }

    
.navbar{
    display: flex;
text-align: center;

  justify-content: space-between;
  align-items: center;
  color:  #4e4494;  
  font-family: 'Dela Gothic One', cursive;
}
.logo{

    width: 10%;
    height: 0%;
    padding: 10px;

}.slide1 img{
    float: right;

 display:inline-block;
 width:15px;
   margin: 30px 15px;
 height:100px;

  
}.slide img{

    width:50px;


}


 
.navb-links ul{
    padding: 30px 80px;

    display: flex;
    text-align: center;
    margin: 0 auto;

}
.navb-links li a{
    display:inline-block;

    text-decoration: none;
color:  #4e4494;
text-align: center; 
padding:2rem;

}
.navb-links li:hover{
background-color: rgba(167, 172, 172, 0.486);
}

#section3{
    padding-left:70px;
    
}
#section3 .lbac{ 
    width: 40%;
    height: 40%;
    float: right;
    padding-right: 20px;
    padding-top: 0.7px;

     }
.toggle-button{
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;

    
}

.toggle-button .bar{
   
    width: 100%;
    height: 3px;
    background-color: rgb(1, 18, 32);
    border-radius: 10px;


    
}

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

    .slide1 .slide {

        padding-top:200;
        display:inline-block;
        width:10px;
          margin: 30px 15px;
        height:10px;
    }

  

    .slide1 .slide img{

                 
        display:inline-block;
        width:10px;
          
        height:10px;
    }
    #section2{
        width: 9px;

        padding-top:8%;
         font-size:20px;
         font-family:"Times New Roman", Times, serif;
         color:#0d47a1; 
     }
     #section2 p{
        font-size:9px;  
     } #section2 h2{
        text-align: center;
        }
 
     #section2 .team{
        display: flex;
        text-align: center;
        width: 360px;
        justify-content: center;
    }
    .team .team-member{
        background: #fff;
        margin: 3px;
        margin-bottom: 50px;
        width: 10px;
        padding: 10px;
        line-height: 20px;
        position: relative;
        
    }
    .content-area1{
position:relative;
top:70px;
background-image: url("xx3.png");
text-align:left;
width:20%;
height:1000px;
background-repeat: no-repeat;
background-size: cover;
background-attachment:scroll;
-moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-origin: cover;


    }
    .content-area1 h1{ 
        font-size:2px;
        text-align: center;

        padding-top:90%;
       
      
        }
        .content-area1 #section1 p{ 

            font-size:10px;

           
          
            }
            .content-area1 #section1{
                padding-top: 200px;
                font-size: 10px;
            }
    
  
    .content-area #section0{
      padding-top: 150px;
       font-size: 7px;

   }
    .toggle-button{
        display: flex;

    }
    .navb-links{
    display: none;
    width: 100%;
    
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        height: 200px;
        width: 100%;
    }
    .navb-links ul{
        width: 100%;
        flex-direction: column;
       
        }
        .navb-links li {

           
text-align: center;            
            
            }
.navb-links li a{
            
      padding: .5rem 1rem;

                            
    }
    .navb-links.active{
      display: flex;
     }
     
    
  }

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

    .content-area #section0{
        padding-top: 150px;
         font-size: 10px;
  
     }
      .toggle-button{
          display: flex;
  
      }
      .navb-links{
      display: none;
      width: 100%;
      
      }
      .navbar{
          flex-direction: column;
          align-items: flex-start;
          height: 200px;
          width: 100%;
      }
      .navb-links ul{
          width: 100%;
          flex-direction: column;
         
          }
          .navb-links li {
  
             
  text-align: center;            
              
              }
  .navb-links li a{
              
        padding: .5rem 1rem;
  
                              
      }
      .navb-links.active{
        display: flex;
       }
       
      
  }





.content-area{
    width:100%;
    position:relative;
    top:70px;
    background:rgb(251, 253, 255);
    height:1500px;
    
    text-align:center;
  

    
    font-family: 'Kaushan Script', cursive;
      
          background-repeat: no-repeat;
  
      background-size: cover;
    background-attachment:scroll;
  
      
  

    
    }
    #section0 .logohom{ 
       width: 50%;
       height: 70%;
       float: right;
       padding-left: 20px;
      
        }
        #section1 .logohom{ 
            padding-top:8%;
            width: 40%;
            height: 60%;
            float: right;
            padding-left: 30px;
           
             }
    #section0{ padding-top:8%;
    font-size:40px;
    font-family:poppins;
    color:#4e4494;
  text-align:center;
  font-family: 'Yellowtail', cursive;    }
    #section0 h2{ 
        padding-top:20%;
        font-family: 'Yellowtail', cursive;      
        }
        .content-area1{
            width:100%;
    position:relative;
    top:70px;
    background-image: url("xx3.png");
    text-align:left;
    width:100%;
    height:1000px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:scroll;
    -moz-background-size: cover;
            -o-background-size: cover;
            -webkit-background-origin: cover;

  
        }

     

        .content-area2{
            width:100%;
    position:relative;
    top:70px;
    background:rgb(251, 253, 255);
    height:1500px;
    
    text-align:left;
  
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:scroll;
  
        }
        #section1{ padding-top:8%;
            font-size:40px;
            font-family:poppins;
            color:#4e4494;
          text-align:center;
          
          
            }
            #section1 h1{ 
                font-size:40px;
                font-family: 'Oleo Script Swash Caps', cursive;
                padding-top:8%;
               
              
                }
                #section1 p{ 
                    color:#4e4494;

                    font-family: 'Oleo Script Swash Caps', cursive;                  
                    }
               .slide1 .slide {

                    padding-top:200;
                    display:inline-block;
                    width:140px;
                      margin: 30px 15px;
                    height:100px;
                }

                .slide1 .slide img{

                 
                    display:inline-block;
                    width:150px;
                      
                    height:150px;
                }
                #section1 p{ 

                    font-size:29px;
    
                   
                  
                    }
         /*#section1.slider{
            overflow: hidden;
            height: 200px;
            float: right;
        }*/
        /*.slider figure div{
            float: right;
            width: 10%;
        }*/
        /*.slider figure img{
            width: 20%;
            float: left;
            padding-top:17%;
        }*/
        /*.slider figure{
            position: relative;
            width: 312%;
            margin: 0px;
            left: 0;
            animation: 20s ravi infinite;
        }
        @keyframes ravi {
            100%{
                left: 0;
              }
              
              0%{
                left: calc(100% - 20px);
              }
        }*/

    
   .How-area{
   width:100%;
    position:relative;
    top:70px;
    background:#eceff1;
    height:1500px;
    


      
          background-repeat: no-repeat;
  
      background-size: cover;
    background-attachment:scroll;
   
   }
   .How-area{
    margin-top: 10%;
    padding-top: 1px;
   
    
       }
      
       .How-area h2{
       font-size:50px;
       margin-bottom: 60px;
       text-align: center;
       font-family: 'Permanent Marker', cursive;

       }
       .team{
           display: flex;
           text-align: center;
           width: auto;
           justify-content: center;
       }
       .team .team-member{
           background: #fff;
           margin: 5px;
           margin-bottom: 50px;
           width: 300px;
           padding: 20px;
           line-height: 20px;
           position: relative;
           
       }
       .team .team-member .team_img{
           width: 70px;
           height: 70px;
           border-radius: 50%;
           position: absolute;
           top: -50px;
           left: 50%;
           transform: translateX(-50%);
           background: #fff;
       }
       .team .team-member .team_img img{
        width: 80px;
        height: 80px;
        padding: 10px;
        
    }
    .team .team-member p{
        padding-top: 30px;
    font-family: 'Oleo Script Swash Caps', cursive;
    }
   
   #section2{
   padding-top:8%;
    font-size:20px;
    font-family:"Times New Roman", Times, serif;
    color:#4e4494; 
}
#section3 p{ 
    font-size: 20px;
     } 

#section3{
     padding-top:10%;
      font-size:20px;
      color:#4e4494;
 
    padding-left: 10%;
    }
    

      .button {
        width: 200px;
        height: 50px;
        background-color: #4e4494;
        color: white;
        border-radius: 10px;
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
          text-align: center;
        padding: 15px 0;
          margin:  20px 10px;
        font-size:20px;
        
        cursor:pointer;
        }
        .button:hover {
            background-color: #eceff1;
            color: black;
            }
            .container{
                max-width: 1170px;
                margin: auto;
            }
            .row{
                display: flex;
                flex-wrap: wrap;
            }
            ul{
                list-style: none;
            }
         
            .footer{
                
                background-color: #4a4e55;
               padding: 70px 0;
            }
            .footer-col{
                width: 25%;
                padding: 0 15px;
            }
            .footer-col h4{
               font-size: 18px;
               color:#ffffff;
               text-transform: capitalize;
               margin-bottom: 35px;
               font-weight: 500;
               position: relative;
            }

            .footer-col h4::before{
                content: '';
                position: absolute;
                left: 0;
                bottom: -10px;
                background-color: #ffffff;
                height: 2px;
                box-sizing: border-box;
                width: 50px;
         
             }

             .footer-col ul li:not(:last-child)
        {
            margin-bottom: 10px;
        }
        .footer-col ul li a{
            font-size: 16px;
            text-transform: capitalize;
            color: #ffffff;
            text-decoration: none;
            font-weight: 300;
            color: #ffffff;
            display: block;
            transition: all 0.3s ease;
        }
        .footer-col ul li a:hover{
            color: #ffffff;
            padding-left: 8px;
        }
        .footer-col .social-links a{
            display: inline-block;
            height: 40px;
            width: 40px;
            background-color: rgba(113, 112, 119, 0.2);
            margin: 0 10px 10px 0;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            color: #ffffff;
            transition: all 0.3s ease;

        }
        .footer-col .social-links a{
         
            transition: all 0.3s ease;

        }

        .footer-col .social-links a:hover{
            color: #24262b;
            background-color: #ffffff;

        }


        @media (max-width:767px) {
            .footer-col{
                width: 50px;
                margin-bottom: 30px;
            }
            
        }
        @media (max-width:574px) {
            .footer-col{
                width: 100%;
            }
            
        }