#container .index-main
{
    
    margin: 50px 0px;
    margin-top: 100px;
    display: grid;
    grid-template-areas:'aboutus aboutus image1 goal'
                        'aboutus aboutus bpblock hrblock'
                        'edublock image3 bpblock hrblock'
                        'edublock contactblock insta image2';

                        grid-template-columns: 25% 25% 25% 25%;
                        grid-template-rows: 29% 20% 25% 25%;
    transition: all 0.5s;
    /* justify-content: center; */
    /* align-items: center; */
}

#container .index-main .imain-design
{
    /* position: relative; */
    margin: 5px;
    padding: 10px;
    background-color: rgb(137, 137, 218);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items:center; */
    color: rgb(14, 13, 13);
    overflow: hidden;
}
#container .index-main .imain-design:hover
{
    box-shadow:0 0 10px rgba(0, 0, 0, 1) ;
    border-radius: 5px;
    transition: 0.5s;
    /* justify-items: left; */
    
}

#container .index-main .imain-design p
{
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    visibility: hidden;
    transition: all 0.5s;
    transform: translateY(300px);
    z-index: 2;
}
#container .index-main .imain-design span
{
    margin-top:-15px;
    min-width: 50%;
    height: 0px;
    border: 1px solid ;
    transform: translateY(300px);
    visibility: hidden;
    z-index: 2;
}
#container .index-main .imain-design:hover p
{
    visibility: visible; 
    transition: all 0.4s;
    transform: translateY(0);
}
#container .index-main .imain-design:hover span
{
    /* display: block; */

    transition: 0.4s;
    visibility: visible;
    transform: translateY(0);

}

#container .index-main .imain-design h4
{
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    z-index: 2;

    /* transition: all 2s; */
    text-align: center;
    /* text-align: center; */
}
#container .index-main .imain-design:hover h4
{
    text-align: left;
}
#container .index-main #contactblock:hover h4,#container .index-main #insta:hover h4

{
    text-align: center;
}

#aboutus
{
    grid-area:aboutus ;
}
#aboutus span
{
    width: 50%;
}
#aboutus:hover
{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(48, 15, 15, 0.8)),url(../img/wt.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}
#goal
{
    grid-area: goal;
}
#goal:hover
{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(48, 15, 15, 0.6)),url(../img/goal.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}

#aboutus:hover h4,#aboutus:hover p,#aboutus:hover span,#goal:hover h4,#goal:hover p,#goal:hover span,
#bpblock:hover h4,#bpblock:hover p,#bpblock:hover span,#hrblock:hover h4,#hrblock:hover p,#hrblock:hover span,#edublock:hover h4,#edublock:hover p,#edublock:hover span,
#contactblock:hover a h4 
{
    color: rgb(238, 217, 217);
    text-shadow: 10px black;
}


#image1
{
    grid-area:image1 ;
    /* max-width: 100%;
    max-height: 100%;
     */
     margin: 5px;
}
#image2
{
    grid-area:image2 ;
    margin: 5px;

}
#image3
{
    grid-area:image3 ;
    margin: 5px;

}
#insta
{
    grid-area:insta ;
}
#insta a
{
    /* text-decoration:none; */
    color: inherit;
}
#hrblock
{
    grid-area:hrblock ;
}
#hrblock span,#edublock span,#bpblock span
{
    width: 80%;
}
#hrblock:hover
{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(48, 15, 15, 0.6)),url(../img/hrb.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}
#edublock
{
    grid-area:edublock ;
}
#edublock:hover
{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(48, 15, 15, 0.6)),url(../img/edub.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}
#bpblock
{
    grid-area:bpblock ;
}
#bpblock:hover
{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(48, 15, 15, 0.8)),url(../img/bpback.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}
#contactblock
{
    grid-area:contactblock ;
}
#contactblock a
{
    /* text-decoration: none; */
    color: inherit;
    transition: all 0.8s ease-in-out;

}
#contactblock:hover
{
    background: linear-gradient(rgba(0,0,0,0.8),rgba(48, 15, 15, 0.6)),url(../img/contactback.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* transition: background 0.4s ease-in-out; */
    
}
#contactblock:hover a{
    text-decoration: none;
}

#container img
{
    width: 100%;
    height: 100%;
}

/* CSS for Partner block START*/
.partners
{
    width: 100%;
    border: 1px solid rgb(219, 199, 199);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.partners h4
{
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
}
.partners div
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.partners div .partnerlogo
{
    max-width: 350px;
    /* width: 30%; */
    /* border: 1px solid rgb(201, 190, 190); */
    margin-bottom: 10px;
}
.partners div .partnerlogo img
{
    border: 1px solid rgb(182, 177, 226);
    border-radius: 28px;
}
.partners div .banner
{
    width: 70%;
}


/* CSS for Partner block END*/


/* CSS for Responsiveness START */


@media screen and (max-width:925px) 
{
    #container .index-main
    {
        width: 100%;
        /* grid-template-areas:'aboutus aboutus image1 goal'
                            'aboutus aboutus bpblock hrblock'
                            'edublock image3 bpblock hrblock'
                            'edublock contactblock insta image2';
    
                            grid-template-columns: 25% 25% 25% 25%;
                            grid-template-rows: 29% 20% 25% 25%; */

        grid-template-areas:'aboutus aboutus image1'
                            'aboutus aboutus goal'
                            'bpblock image3 hrblock'
                            'bpblock insta hrblock'
                            'edublock image2 contactblock';
                            grid-template-columns: 33.33% 33.33% 33.33%;
                            grid-template-rows: 20% 20% 20% 15% 25%;


    }

}
@media screen and (max-width:796px) 
{
    #container .index-main
    {
        grid-template-columns: 33.33% 33.33% 33.33%;
                            grid-template-rows: 18% 22% 20% 15% 25%;
    }

}
@media screen and (max-width:636px) 
{
    #container .index-main
    {
        display: flex;
        flex-direction: column;
    }


}




    /* CSS for Responsiveness END */