@media only screen and (min-device-width: 1440px) and (max-device-width: 2560px){
    .navbar .navbar-expand-md .navbar-nav .nav-link {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .bg-image {
       
        width: 100%;
        height: 80vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 80vh;
       
      }

    #about {
        height: auto;
        width: 100%;
        padding-top: 80px;
        padding-bottom: 80px;
        
    }
    
    #about .about-header {
        text-align: left;
        padding-top: 100px;
        padding-bottom: 10px;
    }
    
    #about .about-header h1{
        text-align: left;
        color: #DE5B52;
        font-size: 4rem;
    }
    
    #about .about-content {
        text-align: justify ;
        padding-top: 5px;

    }
    
    #about .about-content p{
        color: #595554;
        font-size: 20px;
    }
    
    #about .about-content span{
        color: #DE5B52;
        font-size: 20px;
        text-align: justify ;
    }
    
    
#vision {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
  
}

#vision .vision-header {
    text-align: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 4rem;
    text-align: left;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 50px;
    padding-bottom: 50px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
  
}
#mission .mission-header {
    justify-content: left;
    padding-top: 100px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 4rem;
}

#mission .mission2 h1{
   text-align: center;
    font-size: 5rem;
    padding-bottom: 100px;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 20px;
}

#contact {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
   
}


#contact .contact-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact .mission1 h1{
    color: #DE5B52;
    font-size: 5rem;
}

#contact .contact-content {
    align-items: center ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#contact .contact-content p{
    color: #595554;
    font-size: 20px;
    text-align: center ;
}

 
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1439px){
    .navbar .navbar-expand-md .navbar-nav .nav-link {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .bg-image {
       
        width: 100%;
        height: 80vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 80vh;
       
      }

    #about {
        height: auto;
        width: 100%;
        padding-top: 80px;
        padding-bottom: 80px;
        
    }
    
    #about .about-header {
        justify-content: left;
        padding-top: 100px;
        padding-bottom: 10px;
    }
    
    #about .about-header h1{
        color: #DE5B52;
        font-size: 3rem;
    }
    
    #about .about-content {
        text-align: justify ;
        padding-top: 5px;

    }
    
    #about .about-content p{
        color: #595554;
        font-size: 17px;
    }
    
    #about .about-content span{
        color: #DE5B52;
        font-size: 17px;
        text-align: justify ;
    }
    
    
#vision {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
  
}

#vision .vision-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 50px;
    padding-bottom: 50px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
  
}
#mission .mission-header {
    justify-content: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}

#contact {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
   
}

#contact .contact-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact .mission1 h1{
    color: #DE5B52;
    font-size: 3rem;
}

#contact .contact-content {
    align-items: center ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#contact .contact-content p{
    color: #595554;
    font-size: 20px;
    text-align: center ;
}

 
}

@media only screen and (min-width: 991px) and (max-width: 1023px) {
 
    .navbar{
        width: 100%;
    }

    .bg-image {
       
        width: 100%;
        height: 80vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 80vh;
      }
 
    #about {
        height: auto;
        width: 100%;
        padding-top: 50px;
       padding-bottom: 50px; 
    }
    
    #about .about-header {
        justify-content: left;
        padding-top: 100px;
        padding-bottom: 10px;
    }
    
    #about .about-header h1{
        color: #DE5B52;
        font-size: 3rem;
    }
    
    #about .about-content {
        text-align: justify;
        padding-top: 5px;
        padding-bottom: 50px;
    }
    
    #about .about-content p{
        color: #595554;
        font-size: 17px;
    }
    
    #about .about-content span{
        color: #DE5B52;
        font-size: 17px;
        text-align: justify ;
    }
    
    
#vision {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 50px;
    padding-bottom: 50px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
}
#mission .mission-header {
    justify-content: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}

#contact {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#contact .contact-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact .mission1 h1{
    color: #DE5B52;
    font-size: 3rem;
}

#contact .contact-content {
    align-items: center ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#contact .contact-content p{
    color: #595554;
    font-size: 20px;
    text-align: center ;
}

 
}

@media only screen and (min-width: 800px) and (max-width: 990px) {
 
    .navbar{
        width: 100%;
    }

    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
      }
 
    #about {
        height: auto;
        width: 100%;
        padding-top: 80px;
       padding-bottom: 50px; 
    }
    
    #about .about-header {
        justify-content: left;
        padding-top: 100px;
        padding-bottom: 10px;
    }
    
    #about .about-header h1{
        color: #DE5B52;
        font-size: 3rem;
    }
    
    #about .about-content {
        text-align: justify;
        padding-top: 5px;
        padding-bottom: 50px;
    }
    
    #about .about-content p{
        color: #595554;
        font-size: 17px;
    }
    
    #about .about-content span{
        color: #DE5B52;
        font-size: 17px;
        text-align: justify ;
    }
    
    
#vision {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 50px;
    padding-bottom: 50px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
}
#mission .mission-header {
    justify-content: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}

#contact {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#contact .contact-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact .mission1 h1{
    color: #DE5B52;
    font-size: 3rem;
}

#contact .contact-content {
    align-items: center ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#contact .contact-content p{
    color: #595554;
    font-size: 20px;
    text-align: center ;
}

 
}

@media only screen and (min-width: 768px) and (max-width: 799px) {
 
    .navbar{
        width: 100%;
    }

    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
      }
 
    #about {
        height: auto;
        width: 100%;
        padding-top: 80px;
       padding-bottom: 50px; 
    }
    
    #about .about-header {
        justify-content: left;
        padding-top: 100px;
        padding-bottom: 10px;
    }
    
    #about .about-header h1{
        color: #DE5B52;
        font-size: 3rem;
    }
    
    #about .about-content {
        text-align: justify;
        padding-top: 5px;
        padding-bottom: 50px;
    }
    
    #about .about-content p{
        color: #595554;
        font-size: 17px;
    }
    
    #about .about-content span{
        color: #DE5B52;
        font-size: 17px;
        text-align: justify ;
    }
    
    
#vision {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 50px;
    padding-bottom: 50px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 20px;
    text-align: justify ;
}


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
}
#mission .mission-header {
    justify-content: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}

#contact {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 100px; 
   background-color: #de5b5296;
}

#contact .contact-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact .mission1 h1{
    color: #DE5B52;
    font-size: 3rem;
}

#contact .contact-content {
    align-items: center ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#contact .contact-content p{
    color: #595554;
    font-size: 20px;
    text-align: center ;
}

 
}



@media only screen and (min-width: 660px) and (max-width: 767px) {
 
    .navbar.navbar-no-bg { width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }
 

    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
       
      }

      .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 4rem;
    }


   /********** about ************/

#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#about .about-header {
    justify-content: left;
    padding-top: 80px;
    padding-bottom: 10px;
}

#about .about-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#about .about-content {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 30px;
}

#about .about-content p{
    color: #595554;
    font-size: 17px;
}

#about .about-content span{
    color: #DE5B52;
    font-size: 17px;
    text-align: justify ;
}


    
#vision {
    height: auto;
    width: 100%;
    padding-top: 50px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 20px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 20px;
    padding-bottom: 20px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

/********************** mission ********/


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 10px; 
}

#mission .mission-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}
 
#contact {
    height: auto;
    width: 100%;
    padding-top: 50px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}

#footer-icons {
    margin-top: 10px;
    padding-top: 20px;
}

}

@media only screen and (min-width: 541px) and (max-width: 659px) {
 
    .navbar.navbar-no-bg { width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }
 

    .bg-image {
       
        width: 100%;
        height: 120vh;
        
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 120vh;
       
      }

      .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 4rem;
    }


   /********** about ************/

#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#about .about-header {
    justify-content: left;
    padding-top: 80px;
    padding-bottom: 10px;
}

#about .about-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#about .about-content {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 30px;
}

#about .about-content p{
    color: #595554;
    font-size: 17px;
}

#about .about-content span{
    color: #DE5B52;
    font-size: 17px;
    text-align: justify ;
}


    
#vision {
    height: auto;
    width: 100%;
    padding-top: 50px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 20px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 20px;
    padding-bottom: 20px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

/********************** mission ********/


#mission {
    height: auto;
    width: 100%;
    padding-top: 80px;
   padding-bottom: 10px; 
}

#mission .mission-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}
 
#contact {
    height: auto;
    width: 100%;
    padding-top: 50px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}

#footer-icons {
    margin-top: 10px;
    padding-top: 20px;
}

}



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

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar.navbar-no-bg { position: fixed ; width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }


    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
       
      }

    .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 4.5rem;
     
    } 

#about {
    height: auto;
    width: 100%;
    padding-top: 0px;
   
}

#about .about-content {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 30px;
}

#vision {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#vision .vision-content {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 30px;
}
#mission {
    height: auto;
    width: 100%;
    padding-top: 100px;
   padding-bottom: 50px; 
}
.mission1 {
    padding-top: 50px;
}
#contact {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}


#footer-icons{
    padding-top: 10px;
    margin-top: 10px;
}
}


@media (max-width: 399px){
 
    
    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar.navbar-no-bg { position: fixed ; width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }
 

    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
        
      }

      .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 3rem;
     
    }
    .typed{
        font-size : 25px;
    }
   /********** about ************/

#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#about .about-header {
    justify-content: left;
    padding-top: 80px;
    padding-bottom: 10px;
}

#about .about-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#about .about-content {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 30px;
}

#about .about-content p{
    color: #595554;
    font-size: 17px;
}

#about .about-content span{
    color: #DE5B52;
    font-size: 17px;
    text-align: justify ;
}


    
#vision {
    height: auto;
    width: 100%;
    padding-top: 50px;
   padding-bottom: 50px; 
   background-color: #de5b5296;
   display: flex-end;
}

#vision .vision-header {
    justify-content: left;
    padding-top: 70px;
    padding-bottom: 30px;
}

#vision .vision-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#vision .vision-content {
    align-items: center ;
    padding-top: 20px;
    padding-bottom: 20px;
}

#vision .vision-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

/********************** mission ********/


#mission {
    height: auto;
    width: 100%;
    padding-top: 100px;
   padding-bottom: 10px; 
}

#mission .mission-header {
    justify-content: left;
    padding-top: 30px;
    padding-bottom: 10px;
}

#mission .mission-header h1{
    color: #DE5B52;
    font-size: 3rem;
}

#mission .mission-content {
    text-align: justify ;
    padding-top: 10px;
    padding-bottom: 50px;
}

#mission .mission-content p{
    color: #595554;
    font-size: 17px;
    text-align: justify ;
}

#mission .mission-content span{
    color: #DE5B52;
    font-size: 17px;
}
 
#contact {
    height: auto;
}

#footer-icons{
    padding-top: 10px;
    margin-top: 10px;
}
}


@media (max-width: 320px) {

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar.navbar-no-bg { position: fixed ; width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }


    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
        
      }

    .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 3rem;
      font-family: 'Republiko', sans-serif; 
    }
    .typed{
        font-size : 20px;
    }
#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#vision {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
#mission {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
.mission1 {
    padding-top: 50px;
}

#contact {
    height: auto;
}

#footer-icons{
    padding-top: 10px;
    margin-top: 10px;
}
}



@media (max-width: 250px) {

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar.navbar-no-bg { position: fixed ; width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }


    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
        
      }

    .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 2rem;
      font-family: 'Republiko', sans-serif; 
    }
    .typed{
        font-size : 16px;
    }
#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#vision {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
#mission {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
.mission1 {
    padding-top: 50px;
}

#contact {
    height: auto;
}

#footer-icons{
    padding-top: 10px;
    margin-top: 10px;
}
}

@media (max-width: 180px) {

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar.navbar-no-bg { position: fixed ; width: 100%; background:  linear-gradient(45deg, #DE5B52, #E4DCCE ); }
    .navbar-dark .navbar-toggler { border-color:#000 ;  background: #000; color:#000;}
    .navbar-dark .navbar-toggler:focus { background: #000; color: #000; outline: 0; }


    .bg-image {
       
        width: 100%;
        height: 100vh;
          
    }
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100vh;
        
      }

    .particles-js-canvas-el {
        position : absolute;
    }
  
    #particles-js h1 {
      font-size : 2rem;
      font-family: 'Republiko', sans-serif; 
    }
    .typed{
        font-size : 13px;
    }
#about {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}

#vision {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
#mission {
    height: auto;
    width: 100%;
    padding-top: 10px;
   padding-bottom: 50px; 
}
.mission1 {
    padding-top: 50px;
}

#contact {
    height: auto;
}

#footer-icons{
    padding-top: 10px;
    margin-top: 10px;
}
}