* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

 }

 .home-page {
     display: flex;
     flex-direction: column;
     gap: 10px;
     /* position:relative; */
 }

 .nav-bar {
     width: 100vw;
     height: 50px;
     box-shadow: 0px 0px 20px 15px rgb(36, 36, 36);
     /* border:1px solid red; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: linear-gradient(45deg, rgb(247, 251, 247), rgb(42, 39, 39));
     position: fixed;
 }

 .ngo-logo {
     width: 200px;
     height: 100%;
     /* border:1px solid black; */
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: space-between;
     /* transition:all 6s  linear ; */
     animation: logoo 1s ease forwards;


 }

 @keyframes logoo {
     from {
         /* opacity:0; */
         transform: translateX(-100%);
     }

     to {
         /* opacity:1; */
         transform: translateX(0);

     }
 }

 .ngo-logo:hover {
     transform: translate(200px);
 }

 .ngo-logo img {
     width: 50px;
     height: 50px;
     border-radius: 50%;


 }


 #ngo-name {
     font-family: cursive;
     font-size: 35px;
 }

 .contact-us a {
     text-decoration: none;
     color: black;
     font-size: 20px;
     font-family: sans-serif;
     font-weight: 600;
 }

 .contact-us>a:hover {

     font-size: 30px;
     color: antiquewhite
 }

 .ngo-homepage-image {
     width: 100vw;
     height: 700px;
     border: 1px solid black;
     overflow: hidden;
 }

 .ngo-homepage-image>img {
     width: 100%;
     height: 100%;
     background-color: black;



 }

 #contact-us-footer {
     /* border:1px solid red; */
     width: 100%;
     height: 180px;
     display: flex;
     justify-content: space-evenly;
     margin: auto;
     align-items: center;
     overflow: hidden;
     background: linear-gradient(black, white);
     /* opacity:0.75; */


 }

 #contact-us-footer a {
     text-decoration: none;
     color: rgb(247, 246, 245);

 }

 #contact-us-footer li {
     list-style: none;

 }

 #contact-us-footer div img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
 }

 .contact-us-footer-left {
     /* border:1px solid red; */
     display: flex;
     width: 250px;
     justify-content: space-between;
     align-items: center;
 }

 .contact-us-footer-right {
     /* border:1px solid red; */
     display: flex;
     width: 320px;
     justify-content: space-between;
     align-items: center;
 }

 .right {
     line-height: 25px;
     font-size: 20px;

 }

 .sign-up {
     /* border:1px solid black; */
     width: 260px;
     height: 230px;
     background-color: rgb(35, 34, 33);
     position: absolute;
     bottom: 150px;
     left: 40px;
     /* margin-top:300px; */
     opacity: .75;
     padding: 30px;
     color: rgb(140, 146, 237);
     display: flex;
     animation: leftpart 1s ease forwards;

 }

 /* @keyframes leftpart{
            from{ 
                opacity:0;
                transform:translateX(-200%);
            } */
 /*         
        to{
           
             transform:translateX(0);

           }
          } */
 .sign-up input {
     padding: 2px;
     width: 130px;
 }

 /* .button{
            margin-left:70px;
            margin-top:30px;
            border-radius: 5px;
            color:azure;
         
            background-color: rgb(32, 107, 112);
            border:none;
           

          }
           .button:hover{
              background-color: rgb(211, 99, 47);
           } */
 #sign {
     /* margin-left:60px; */
     border: 1px solid rgb(147, 66, 66);
     background-color: rgb(197, 80, 13);
     text-decoration: none;
     color: aliceblue;

 }

 .sign-up a {
     text-decoration: none;
 }

 @media (min-width:1028px) {
     .sign-up {
         width: 330px;
         height: 250px;
         position: absolute;
         bottom: 170px;
         left: 400px;
         animation: none;
         margin-top: 300px;

         animation: leftpart 1s ease forwards;


     }

     @keyframes leftpart {
         from {
             opacity: 0;
             transform: translateX(-200%);
         }

         to {

             transform: translateX(0);

         }
     }

     .sign-up input {
         padding: 4px;
         width: 180px;
     }
 }