*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    
   
    }

    
    a{
        text-decoration: none;
        color: hsl(249, 90%, 15%);
    }
    .container{
    background-color: #f6fbff79;
    
    }
    .div1{
        background-image: url();
        background-repeat: no-repeat;
        min-height: 89vh;
        min-width: 100%;
        padding: 1% 4%;
        border-radius: 0px 0px 20% 0px;
    }
    .headings ul{
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    color: #f6fbff79;
    font-size: 25px;
    
    }
    .headings li{
    margin: 45px 65px ;
    cursor: pointer;
    }
    
    .content{
    color: #293754;
    margin-left: 100px;
    margin-top: 80px;
    max-width: 35%;
    }
    .content h1{
    font-size: 60px;
    font-weight: 600;
    }
    .content h3{
    font-size: 20px;
    font-weight: 400;
    margin-top: 10px;
    }
    .content h2{
    margin-top: 45px;
    margin-bottom: 15px;
    }
    .buttons{
    display: flex;
    
    }
    .loginN{
    margin-left: 50px;
    border: 1px solid #293754;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 130px;
    height: 40px;
    border-radius: 30px;
    transition: 1s;
    cursor: pointer;
    font-weight: 600;
    color: white;
    background-color:#293754 ;
    }
    .loginV{
    border: 1px solid #293754;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 130px;
    height: 40px;
    border-radius: 30px;
    transition: 1s;
    cursor: pointer;
    font-weight: 600;
    }
    .loginN:hover,.loginV:hover{
    transform: scale(1.1);
    }
    .div1,.div2,.div3,.div4{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 500px ;
    width: 100%;
    }
    .image1{
        background-image: url(Volunteering.gif);
        background-size: auto;
        background-repeat: no-repeat;
        height: 100%;
        width: 40%;
        background-position: center;
        }
    .image2{
    background-image: url(https://thumbs.dreamstime.com/b/shopping-help-elderly-couple-face-masks-receiving-bag-groceries-vector-illustration-flat-cartoon-style-201668632.jpg);
    background-size: auto;
    background-repeat: no-repeat;
    height: 100%;
    width: 40%;
    background-position: center;
    }
    .content2,.content3,.content4{
    max-width: 35%;
    }
    .content2 h1, .content3 h1 , .content4 h1{
    color: #293754;
    font-size: 40px;
    font-weight: 600;
    }
    .content2 p , .content3 p , .content4 p{
    color: #293754;
    font-size: 20px;
    font-weight: 500;
    margin-top: 20px;
    }
    .image3{
    background-image: url(https://img.freepik.com/free-vector/employees-giving-hands-helping-colleagues-walk-upstairs_74855-5236.jpg?size=626&ext=jpg&ga=GA1.2.1477682305.1637107200);
    background-size: auto;
    background-repeat: no-repeat;
    height: 100%;
    width: 40%;
    background-position: center;
    }
    .image4{
    background-image: url(https://img.freepik.com/free-vector/saving-money-with-piggy-bank-concept-illustration_135170-33.jpg?size=626&ext=jpg);
    background-size: auto;
    background-repeat: no-repeat;
    height: 100%;
    width: 40%;
    background-position: center;
    }
    #main {
        overflow: hidden;
        background-color: black;
      }
      
      #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        opacity: 0.48;
      }