body{
    overflow-x: hidden;

}

.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(182, 243, 182);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    border-radius: 20px;
    margin-left: 30px;
    margin-right: 30px;
}


.container img {
    height: 100px;
    border-radius: 50%;
    gap: 5px 10px;
}

.container h1 {
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 22px;
    font-weight: 750;
    gap: 10px;
    font-weight: 700;
}



.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
   gap: 20px;
 text-decoration: none;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-weight: 600;
 
 

}

.nav-link a{
font-size: 20px;
}


.programmes{
    text-decoration: none;
}

.impact{
    text-decoration: none;
}

.about{
    text-decoration: none;
}

.involved{
    text-decoration: none;
}
.nav-link a{
    color: black;
    transition: 1s all;
}




.container_button {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    color: white;
}


.register{
    background-color: green;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}


.login{
    background-color: white;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}
.A{
    text-decoration: none;
    color: white;
}
.B{
    text-decoration: none;
    color: green
}


.register:hover{
    transform: scale(1.05);
    transition: 1.05s;
    background: #11f3e0;
}

.login-btn{
    background-color: white;
    color: #1b5e20;
    border: 2px solid #1b5e20;
}

.login:hover{
    transform: scale(1.05);
    transition: 1.05s;
    background: #d41fd4;
}

.ham{
    display: none;
}
 
@media only screen and (max-width:600px){
    .ham{
        display: block;
    }
    .nav-link{
        display: none;
    }
.container_button{
    display: none;
}
.container{
    display: flex;
    justify-content: space-between;
}
}


 
.Application_button {
    display: flex;
    margin-left: 25px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    gap: 20px;
    padding-left: 50px;
}
.btn_app1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background-color: red;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    border-width: 20px;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 5px;
    padding: 12px 25px;
    font-weight: 500;
    text-decoration: none;
}

.btn_app1:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.AA{
    text-decoration: none;
    color: white;
}

.BB{
    text-decoration: none;
    color: black;
}

.btn_app2 {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: black;
    background: transparent;
    border-radius: 5px;
    padding: 12px 25px;
    font-weight: 500;
}

.btn_app2:hover{
     transform: scale(1.05);
    transition: 1.05s;
}

.hero_container{
    margin-left: 7px;
    margin-right: 30px;

}


.container_hero_left{
    background-color: whitesmoke;
    margin-right: 40px;
    padding-left: 50px;
    padding-right: 20px;
    border-radius: 20px;
}

.ham{
  height: 10px;
  width: 50px;
  
}


.container_hero_left_p {
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    gap: 15px;
    margin-left: -30px;
    
}

.edu_icon{
 background-color: white;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
    padding-bottom: 7px;
    border-radius: 15px;
      box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    height: 80px;
    
    
}

.edu_icon p{
    display: flex;
    gap: 50px;
    
}

.edu_icon p img{
    height: 50px;
}

.edu_icon:hover{
     transform: scale(1.05);
     transition: 1.05s;
}


.emp_icon{
    background-color: white;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
    border-radius: 15px;
      box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-right: 10px;
    height: 85px;
}

.emp_icon p img{
    height: 50%;
    width: 100px;
}

.emp_icon:hover{
    transform: scale(1.05);
    transition: 1.05s;
}
.com_icon{
    background-color: white;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
    border-radius: 15px;
      box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-right: 10px;
    height: 85px;
}

.com_icon p img{
    height: 50px;
}


.com_icon:hover{
     transform: scale(1.05);
     transition: 1.05s;
}

.container_hero_left_p p {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    gap: 2px;
}



.container_hero_left {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    gap: 20px;
}
.p1{
    color: red;
}


.hero_container {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}

.hero_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
}

.container_hero_right img {
    height: 505px;
    width: 540px;
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    border-radius: 20px;
    margin-right: 30px;
    
    
}

.hero_left_ img {
    height: 400px;
    border-radius: 20px;
}

.hero_right img {
     height: 400px;
    width: 600px;
    border-radius: 20px;
    
}


.second_hero h1 {
    font-weight: 1000;
    padding: 2px 30px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-size: 55px;
    text-transform: uppercase;
    text-shadow: 5px 2px 30px rgb(0,0,0,3);
    gap: 30px;
}


.second_hero h1:hover{
    transform: scale(1.03);
    letter-spacing: 4px;
    transform: translateY(-3PX);
    transition: 1.05s;

}

.p_1 {
    color: red;
}



.p_2 {
    color: red;
}

   
.application_section {
    background-color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
}

.eligibility{
    background-color: white;
    text-align: center;
    margin-right: 50px;
    margin-left: 50px;
    border-radius: 20px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-right: 10px;
    padding-left: 10px;

    }

    .eligibility:hover{
          transform: scale(1.05);
          transition: 1.05s
          ;
    }
      


.apply{
   background-color: white;
    text-align: center;
    border-radius: 20px;
    margin-left: 50px;
    margin-right: 50px;
      box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-right: 10px;
    padding-left: 10px;


}

.apply:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.review{
     background-color: white;
    text-align: center;
    margin-right: 50px;
    margin-left: 50px;
    border-radius: 20px;
      box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-left: 10px;
    padding-right: 10px;
    

}

.review:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.p_3 {
    color: red;
}


.second_hero {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    padding: 30px;
    gap: 30px;
}


.Our_Impact h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background-color: rgb(34, 168, 34);
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 60px;
    margin-right: 20px;
    font-weight: 700;
    gap: 30px;
    padding: 30px;
    text-align: center;
    font-size: 60px;
    background-color: #f4b400;
    border-radius: 15px;
}

.hero_container2{
    background-color: whitesmoke;
    margin-left: 30px;
    margin-left: 30px;
    border-radius: 20px;
}

.hero_about h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: green;
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    padding: 10px;
    font-size: 60px;
    position: relative;
    margin-bottom: 15px;
    border-radius: 15px;
}



.hero_container_left{
    background-color: whitesmoke;
    margin-right: 20px;
    margin-top: 20px;
    border-radius: 20px;
}



.hero_left2{
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}


.hero_left2 video{
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 30px auto;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgb(33, 220, 237);
}




.hero_left2 video:hover{
    transition: 0.3s;
}

.video_emp{
    margin-left: 50px;
}

.hero_left2 video:hover{
    transform: scale(1.02);
box-shadow: 0 12px 30px rgba(0,0,0,25);

}
.hero_left2 h1 {
    background-color: #267828;
    color: white;
    text-align: center;
    margin-right: 100px;
    margin-left: 100px;
    margin-top: -2px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 33px;
    border-radius: 15px;
    box-shadow: o 5px 15px rgb(33, 220, 237);
    
}

.hero_left2 p{
    background-color: rgb(17, 130, 145);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    border-radius: 15px;
    text-align: left;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.hero_left2 h1:hover{
    transform: scale(1.05);
    transition: 1.05s;
}




.hero_right2 {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}


.mission{
    background-color: rgb(250, 234, 205);
    box-shadow: 0 2px 5px rgb(33, 220, 237);
    border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;
     padding-left: 10px;
    padding-right: 10px;
}

.mission:hover{
  transform: scale(1.05);
    transition: 1.05s;   
}
.vis{
    background-color: rgb(250, 234, 205);
     box-shadow: 0 2px 5px rgb(33, 220, 237);
   border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;  
    padding-left: 10px;
    padding-right: 10px;

}

.vis:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.cor{
    border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;   
}

.core:hover{
   transform: scale(1.05);
    transition: 1.05s; 
}

.area:hover{
  transform: scale(1.05);
    transition: 1.05s;   
}

.ed{
     background-color:  rgb(246, 156, 83);
      box-shadow: 0 2px 5px rgb(33, 220, 237);
 border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;  
}

.ed:hover{
    transform: scale(1.05);
    transition: 1.05s;
}
.hum{
    background-color: rgb(246, 156, 83);
     box-shadow: 0 2px 5px rgb(33, 220, 237);
 border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;  
}

.hum:hover{
    transform: scale(1.05);
    transition: 1.05s;
}
.imp{
     background-color:  rgb(246, 156, 83);
      box-shadow: 0 2px 5px rgb(33, 220, 237);
     border-radius: 15px;
    text-align: center;
    padding-bottom: 10px;  
}

.imp:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.cor h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background-color: rgb(34, 168, 34);
    box-shadow:0 2px 5px rgb(49, 11, 243);
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 700;
    gap: 30px;
    padding: 30px;
    text-align: center;
    font-size: 45px;
    background-color: #87f0f7;
    box-shadow: 0 5px 15px rgb(246, 156, 83);
    border-radius: 15px;
}


.hero_container2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
}

.our_story{
    background-color: whitesmoke;
    margin-top: 80px;
    margin-right: 30px;
    margin-left: 30px;
    border-radius: 20px;

}

.our_story h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background-color: rgb(34, 168, 34);
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 15px;
    margin-right: 50px;
    font-weight: 700;
    gap: 30px;
    padding: 30px;
    text-align: center;
    font-size: 60px;
    background-color: #f4b400;
    border-radius: 15px;
    letter-spacing: 2px;
    
}


.story{
    margin-left: 35px;
}




.our_story h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: start;
    padding: 30px;
    font-size: 51px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 10);
}

.our_story h2:hover{
    transform: scale(1.03);
    transition: 1.05s;
}
.our_story_text {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.story-text{
    background-color: green;
}

.our_story_p {
    width: 500px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    font-weight: 500;
    padding: 30px;
    font-size: 16px;
}

.our_story_text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.our_story_text img {
    height: 350px;
    width: 700px;
    margin-right: 30px;
    box-shadow: 5px 5px 10px;
    color: rgb(160, 114, 114);
    border-radius: 20px;
}

.our_story_text img:hover{
     transform: scale(1.05);
    transition: 1.05s;
}



   .hero_programmes h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(123, 212, 63);
    box-shadow: rgb(199, 206, 188) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    padding: 30px;
    font-size: 45px;
    border-radius: 15px;
    font-size: 60px;
    font-weight: 750;
}



.hero_programmes_create {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hero_programmes4 h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}


.hero_programmes_3 {
      background-color: white;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-left: 20px;
}

.edu{
 background-color: white;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-left: 20px;   
}

.edu:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.emp{
      background-color: white;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-left: 20px;
}

.emp:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.com{
  background-color: white;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
    margin-top: 30px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding-left: 20px;
}  

.com:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.you{
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    gap: 10px 30px;
    margin-top: 30px;
    margin-left: 20px;
}

.you img{
    height: 80px;
    
}
.youth{
   background-color: white;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
    margin-top: 30px;
     box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);   
}
.youth:hover{
   transform: scale(1.05);
    transition: 1.05s; 
}




.hero_programmes_p2 {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    font-weight: 500;
}

.hero_programmes_emp {
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
     gap: 10px 30px;
}

.hero_programmes_emp_p1 {
    font-weight: 500;
}

.hero_programmes_3 {
    display: grid;
    grid-template-columns: 50% 50%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
}

.hero_programmes_com {
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
     gap: 10px 30px;
}

.hero_programmes_com_p1 {
    font-weight: 500;
}

.hero_help_h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(46, 130, 35);
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 45px;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
    border-radius: 15px;
    font-size: 60px;
  margin-left: 40px;
}



.hero_help_p {
   display: flex;
   align-items: center;
   justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-seri;
    width: 500px;
    text-align: left;
    font-weight: 500;
    margin-left: 370px;
    gap: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    font-size: 18px;
}

.hero_help_listen{
    text-align: center;
}


.hero_help {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}


.hero_help_listen{
font-size: 35px;
}

.hero_listen{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: green;
    margin-left: 30px;
    margin-right: 30px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    color: white;
    font-weight: 500;
    box-shadow:0 5px 15px rgb(187, 250, 92) 10px 10px 10px;
    padding: 30px;
    border-radius: 20px;
    padding-left: 45px;
}



.hero_listen1 {
  background-color: #1b5e20;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    font-weight: 500;
    border-radius: 15px;
    gap: 30px;
    text-align: center;
    margin-right: 20px;
    padding-bottom: 10px;
    font-size: 20px;
}

.hero_listen1:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.hero_listen1 h3{
    font-size: 25px;
     color: rgb(62, 59, 59);
     
}


.hero_listen2{
      background-color: #1b5e20;

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    font-weight: 500;
    border-radius: 15px;
    gap: 30px;
    text-align: center;
    margin-right: 20px;
    padding-bottom: 10px;
    font-size: 20px;
}

.hero_listen2:hover{
    transform: scale(1.05);
    transition: 1.05s;
}


.hero_listen2 h3{
    font-size: 25px;
     color: rgb(62, 59, 59);
     text-align: center;
}
.hero_listen3{
     
    background-color: #1b5e20;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    font-weight: 500;
    border-radius: 15px;
    gap: 30px;
    text-align: center;
    margin-right: 20px;
    padding-bottom: 10px;
    font-size: 20px;
    padding-bottom: 10px;
}

.hero_listen3:hover{
transform: scale(1.05);
    transition: 1.05s;
}


.hero_listen h3{
    font-size: 25px;
   color: white; 
}


.hero_listen3 h3{
    color: white;
}



.hero_matters {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hero_matters {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hero_button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    gap: 10px;
}

.hero_btn1 {
    color: black;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    border-radius: 5px;
    padding: 10px;
    gap: 12px 25px;
    
}

.hero_btn1 a{
    text-decoration: none;
    color: green;
    font-size: 18px;
}

.hero_btn1:hover{
transform: scale(1.05);
transition: 1.05s;
}

.hero_btn2 {
    background-color: rgb(28, 161, 75);
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 7px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 10px;
    gap: 12px 25px;
}
.hero_btn2 a{
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.hero_btn2:hover{
 transform: scale(1.05);   
 transition: 1.05s;
}

.hero_button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    gap: 10px;
}

.hero_sponsor {
    background-color: rgb(60, 135, 60);
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 15px;
}

.hero_sponsor:hovr{
    transform: scale(1.05);
    transition: 1.05s;
}

.hero_sponsor_h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hero_sponsor_h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 60px;
   padding-top: 50px;
}



.hero_sponsor_p {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    font-weight: 500;
    padding: 30px;
    font-size: 16px;
    text-align: left;
}

.hero_sponsor {
   
    background-color: rgb(60, 135, 60);
    box-shadow: rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
}

.sponsor{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: -70px;
}

.sponsor img{
    height:600px;
    width:480px ;
    margin-right: 30px;
    margin-bottom: 100px;
    margin-top: 100px;
    border-radius: 15px;
    box-shadow: 0 3px 5px #37e22e;
}

.p{
    background-color: rgb(6, 109, 42);
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 3px 5px #2ee7a3;
}
.sponsor p{
    text-align: left;
    margin-right: 180px;
}

/* .main_get_involved{
    border-radius: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
    border-radius: 15px;
} */

.get_involved h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 15px;
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 50px;
    font-size: 60px;

    
}

.get{
    background-color: rgb(7, 99, 18);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 15px;
}

.volunteer{
    background-color: rgb(26, 214, 70);
    font-size: 25px;
    text-align: center;
    margin-right: 50px;
    border-radius: 15px;
    color: rgb(249, 245, 245);
    box-shadow: 0 3px 10px rgb(238, 22, 216);
}

.volunteer p{
font-size: 20px;
}

.volunteer:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.support{
  background-color: rgb(26, 214, 70);
  font-size: 25px;
   color: rgb(249, 245, 245);
    text-align: center;
    margin-right: 50px;
    border-radius: 15px;   
     box-shadow: 0 3px 10px rgb(238, 22, 216);
}

.support p{
    font-size: 20px;
}



.support:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.partner{
     background-color: rgb(26, 214, 70);
     font-size: 25px;
    text-align: center;
    margin-right: 50px;
    border-radius: 15px;
    margin-top: 20px;
    padding-left: 10px;
    color: rgb(249, 245, 245);
    box-shadow:0 3px 10px rgb(238, 22, 216);
    
    
}

.partner p{
    font-size: 20px;
}

.partner:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.spread{
     background-color:  rgb(26, 214, 70);;
     font-size: 25px;
    text-align: center;
    margin-right: 50px;
    border-radius: 15px;
    margin-top: 20px;
    color: rgb(249, 245, 245);
     box-shadow:  0 3px 10px rgb(238, 22, 216);
}

.spread p{
    font-size: 20px;
}

.spread:hover{
    transform: scale(1.05);
    transition: 1.05s;
}
.together_can{
    background-color: rgb(238, 22, 216);
    font-size: 18px;
    margin-top: 20px;
    text-align: center;
    margin-right: 100px;
    margin-left: 50px;
    border-radius: 15px;
    box-shadow: 0 3px 10px   rgb(26, 214, 70)
}

.together_can:hover{
transform: scale(1.05);
transition: 1.05s;
}

.people{
     background-color: rgb(238, 22, 216);
    font-size: 18px;
    margin-top: 20px;
    text-align: center;
    margin-right: 100px;
    margin-left: 50px;
    border-radius: 15px;
     box-shadow: 0 3px 10px   rgb(26, 214, 70)
}

.people:hover{
    transform: scale(1.05);
transition: 1.05s;
}

.commitment_h1 h1{
    font-size: 50px;
}
.get_involved1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    
}


.get_involved_h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    
    margin-right: 300px;
    margin-left: 300px;
    border-radius: 20px;

}


.get_involved2 {
    display: grid;
    grid-template-columns: 50% 50%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    font-weight: 500;
    padding: 30px;
}



.main_get_involved {
    background-color: green;
    box-shadow:0 3px 10px rgb(187, 250, 92) 5px 5px 10px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 15px;

}

.cont{
 display: flex;
 align-items: center;
 justify-content: center;
 
}

.con{
    background-color: rgb(223, 38, 38);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    margin-left: -50px;
}

.cont  a{
    text-decoration: none;
font-size: 20px;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
   


/* .main_contact{
background-color: whitesmoke;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 50px;
} */

.contact_us {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
}


.contact_us{
    background-color: rgb(123, 200, 15);
    margin-top: 50px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 3px 10px #87f0f7;
    padding-top: 5px;
    padding-bottom:  10px;


    margin-left: 400px;
    margin-right: 400px;
    margin-bottom: 10px;
    font-size: 30px;
    
}


.contact_us_h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 20px
}

.contact_p {

    margin-left: 250px;
    margin-right: 250px;
    line-height: 1.7;
    max-width: 650px;
    text-align: center;
    font-weight: 549;
    font-size: 16px;


}

.main_can_we {
    display: grid;
    align-items: center;
    grid-template-columns: 50% 50%;
    justify-content: space-around;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    box-shadow:0 3px 10px rgb(17, 243, 243) 5px 5px 10px;
    background-color:whitesmoke;
    text-align: left;
    margin-left: 130px;
    margin-right: 120px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 200px;
    border-radius: 20px;
    padding-bottom: 30px;
    
}

.can_we1{
    background-color: rgb(15, 215, 233);
    margin-left:-45px;
    margin-right: 45px;
    text-align: center;
    border-radius: 15px;
    margin-top: 20px;
    box-shadow:0 3px 5px #11c426;
    
}

.can_we1:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.can_we2{
  background-color: rgb(15, 215, 233);
    margin-left:10px;
    margin-right: 10px;
    text-align: center;
    border-radius: 15px;
    padding-left: 20px;
    margin-top: 20px;
    padding-right: 20px;
     box-shadow:0 3px 5px #11c426;
    
}

.can_we2:hover{
      transform: scale(1.05);
    transition: 1.05s;
}

.can_we3{
 background-color: rgb(15, 215, 233);
    margin-left:-45px;
    margin-right: 45px;
    text-align: center;
    border-radius: 15px;
    margin-top: 20px;
     box-shadow:0 3px 5px #11c426;
       
}
.can_we3:hover{
      transform: scale(1.05);
    transition: 1.05s;
}

.can_we4{
 background-color:rgb(15, 215, 233);
    margin-left:10px;
    margin-right: 10px;
    text-align: center;
    border-radius: 15px;
    padding-left: 20px;
    margin-top: 20px;
    padding-right: 20px;
     box-shadow:0 3px 5px #11c426;
}

.can_we4:hover{
      transform: scale(1.05);
    transition: 1.05s;
}


.can_we button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: green;
    border-width: medium;
    border-style: none;
    border-image: none;
    text-decoration: none;
    padding: 7px;
    transition: 0.3s;
}


.impact {
    text-align: center;
    padding: 60px 20px;
}

.impacts{
    margin-bottom: 50px;
    background-color: rgb(9, 201, 89);
    color: white;
    text-align: center;
    margin-left: 420px;
    margin-right: 420px;
    border-radius: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 30px;
     box-shadow:0 3px 5px #1f0ccb;
}
.contact-section {
    text-align: center;
    padding: 60px 20px;
}

.commitment_h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.commitment_h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.commitment_p {
    text-align: left;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color
: rgb(27, 100, 22);
    box-shadow:0 5px 15px rgb(233, 170, 173);
    color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 400;
    padding: 30px;
    gap: 10px 20px;
    border-radius: 20px;
}

.impact-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;

}

.impacts {
    text-align: center;
    
}


.impact-box {
    width: 200px;
    height: 100px;
    box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding: 25px;
    border-radius: 12px;
}

.impact-box:hover{
    transform: scale(1.05);
    transition: 1.05s;

}
.impact-box h3 {
    font-size: 35px;
    margin-bottom: 10px;
}

.impact-box {
    width: 200px;
    height: 100px;
    box-shadow: 0px 4px 15px;
    color: rgb(145, 98, 98);
    padding: 25px;
    border-radius: 12px;
}
.impact-box:hover{
     transform: scale(1.05);
    transition: 1.05s;
}

impact-box:hover{
     transform: scale(1.05);
     transition: 1.05s;
     
}

.impact-box h3 {
    font-size: 35px;
    margin-bottom: 10px;

}


.contact-section {
    text-align: center;
    padding: 60px 20px;
    background-color:whitesmoke;
    margin-left: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 10px #87f0f7;
}

.contact-section h1{
    background-color: rgb(192, 17, 17);
    color: white;
    margin-top: -30px;
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 20px;
    margin-left: 450px;
    margin-right: 450px;
    font-size: 35px;
   
}


.contact-section h3{
font-size: 20px;
}

.section h1{
      background-color: rgb(112, 236, 36);
      color: white;
      margin-left: 500px;
      margin-right: 500px;
      padding-bottom: 5px;
      border-radius: 15px;
}
  

.contact-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    
}

.contact-box1{
    width: 250px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
    padding: 20px;
    border-radius: 10px;
}

.contact-box1:hover{
     transform: scale(1.05);
    transition: 1.05s;
}



.contact-box2{
    width: 250px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
    padding: 20px;
    border-radius: 10px;
}

.contact-box2:hover{
     transform: scale(1.05);
    transition: 1.05s;
}

.contact-box{
    width: 250px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
    padding: 20px;
    border-radius: 10px;
}

.contact-box3{
    width: 250px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
    padding: 20px;
    border-radius: 10px;
}

.contact-box3:hover{
     transform: scale(1.05);
    transition: 1.05s;
}

.social-media h2{
    font-size: 30px;
    background-color: rgb(210, 12, 154);
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 450px;
    margin-right: 450px;
    border-radius: 15px;

}




.social-media a{
    font-size: 20px;
    color: rgb(4, 24, 13);

}


.social-media {
    margin-top: 40px;
    
}

.social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    
}

.social a{
    text-decoration: none;


}

.social a:hover{
transform: scale(1.05);
transition: 1.05s;
background: palevioletred;
border-radius: 5px;
}





.about:hover{
    transform: scale(1.05);
    transition: 1.05s;
}

.prog:hover{
     transform: scale(1.05);
    transition: 1.05s;
}
.impa:hover{
     transform: scale(1.05);
    transition: 1.05s;
}

.reg:hover{
     transform: scale(1.05);
    transition: 1.05s;
}


.button_info {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
    /* width: 20px;
    height: 30px; */
    font-size: 20px;
    background: green;
    border-width: medium;
    border-style: none;
    border-image: none;
    padding: 7px;
    border-radius: 25px;
    margin-top: 5px;
   
    
}

.button{
    color: white;
text-align: center;
padding-left: 10px;
padding-right: 30px;
margin-left: 10px;
margin-right: -5px;
text-decoration: none;
}


footer {
    color: white;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    box-shadow: rgb(117, 244, 117) 5px 5px 10px;
    background: rgb(28, 132, 68);
    padding: 40px 20px;
    border-radius: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 35px;
}

.foot h3{
    font-size: 30px;
}
.footer h3{
    background-color: red;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px 0px;
    font-size: 22px;
}

.footer-links a {
    color: black;
    text-decoration: none;
    margin: 0px 10px;
}

.footer-links a {
    color: black;
    text-decoration: none;
    margin: 0px 10px;
}

.footer-links a {
    color: black;
    text-decoration: none;
    margin: 0px 10px;
}

.footer-links a {
    color: black;
    text-decoration: none;
    margin: 0px 10px;
}


.p-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(6, 125, 20);
    color: white;
    padding: 5px 30px;
    font-size: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 20px;
    margin-left: 30px;
    margin-right: 30px;
}

.foot{
    margin-left: 50px;
}


 .btn {
    background-color: green;
    color: white;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 5px;
}  

.btn2{
    background-color: green;
    color: white;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 5px;
} 
.btn{
     
   display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color:red;
    border-width: medium;
    border-style: none;
    border-image: none;
    text-decoration: none;
    padding: 15px;
}
   
    
.btn:hover{
    transform: scale(1.05);
    transition: 0.3s;   
}

.equation{
    display: flex;
    align-items: center;

}


.eye{
    display: flex;
    align-items: center;
    border: 1px solid black;
    width: 30%;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.eyeClose{
    display: none;
}
.eye img{
    height: 15px;
    width: 15px;
}

.eye_input{
    border: none;
    background-color: transparent;
    outline: none;
    width: 94%;
    
}