
.education
{
    margin-top: 50px;
    background-color: rgb(171, 245, 171);
    border: 4px solid black;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    /* text-decoration: none; */
    
}

.education .mainpage
{
    background-color: black;
    color: white;
    border: 2px solid red;
    border-radius: 10px;
    margin: 1%;
    text-align: justify;

}


  #indexleft
{
    width: 20%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
}

.mainpageleft
{   
    border: 2px solid red;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    margin:10%;


}


#indexleftdown
{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
     

    
}


.leftdown
{
    /* border: 2px solid red; */
    border-radius: 10px;
    margin : 10px;
    margin-left: 15%;
    margin-right: 15%;
    padding: 3%;
    background-color: aqua;
    color: black;
    

} 

.leftdown:hover
{
    background-color: grey;
    color: blue;

} 


#indexleftup
{
    background-color: aqua;
    color:black;
    padding:3%;
}

#indexleftup:hover
{
    background-color: grey;
    color: blue;
}


/* here we are working on the right side of mainpaige */

  #indexright
{
    width: 70%;

}

#indexright p
{
    /* margin:4%;
    margin:25px; */
    margin-left: 25px;
    margin-right: 25px; 
    margin-bottom: 12px;
}

#indexright h3
{
    /* margin:4%;
     */
    /* margin-bottom: 2%; */
    /* margin:25px; */
    margin-left: 25px;
    margin-right: 25px; 
    margin-top: 13px;
    
    color: red;
}

#indexright h2
{
    /* margin:4%; */
    /* margin-bottom: 2%; */
    /* margin:25px; */
    margin-left: 25px;
    margin-right: 25px; 
    margin-top: 25px;
    color: red;
    text-align: center;
}



/* Here we are setting the  screen response for the Given Down Main Block */
@media(max-width: 9in)
{
    #indexleft
    {
        width: 100%;
    }
    #indexleftdown
    {
        display: block;
        border: none;
        padding:2%;
        margin-top: 0px;
       
         
    }

    #indexright
    {
        width:100%;
    }
}








/* Here we are trying to build top down mainu in Education block */


.edu_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.edu_item ul
{
    list-style: none;

    
}

.edu_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.edu_item
{
    display: none;
}

#items1:hover .edu_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}


#items1 .edu_item ul li:hover
{
    background-color: gray;
    color: blue;
     
}


#items1 .edu_item ul li a:hover
{
   text-decoration: none;
   color: blue;
     
}


/* Here we are trying to build top down mainu in Engineeiring */

.eng_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.eng_item ul
{
    list-style: none;

    
}

.eng_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.eng_item
{
    display: none;
}

#items2:hover .eng_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}

#items2 .eng_item ul li:hover
{
    background-color: gray;
    color: blue;
}


/* Here we are setting the properties for the software developer */
.soft_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.soft_item ul
{
    list-style: none;

    
}

.soft_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.soft_item
{
    display: none;
}

#items3:hover .soft_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}

#items3 .soft_item ul li:hover
{
    background-color: gray;
    color: blue;
}

/* Here we are setting the properties of goverments jobs */
.gov_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.gov_item ul
{
    list-style: none;

    
}

.gov_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.gov_item
{
    display: none;
}

#items4:hover .gov_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}

#items4 .gov_item ul li:hover
{
    background-color: gray;
    color: blue;
}

/* here we are setting the properties for the jee advanced  */
.jee_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.jee_item ul
{
    list-style: none;

    
}

.jee_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.jee_item
{
    display: none;
}

#items5:hover .jee_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}

#items5 .jee_item ul li:hover
{
    background-color: gray;
    color: blue;
}

/* here we are setting the properties of the medical */
.med_item
{
    border: 2px solid red;
    background-color: black;
    color: white;
    width: 150px;
    border-radius: 10px;
    
}

.med_item ul
{
    list-style: none;

    
}

.med_item ul li
{
    background-color: aqua;
    color: black;
    margin:10%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    
}

.med_item
{
    display: none;
}

#items6:hover .med_item
{
    display: block;
    position: absolute;
    /* left:10%; */
    
}

#items6 .med_item ul li:hover
{
    background-color: gray;
    color: blue;
}


/* Universal setter properties  */
*
{
    margin: 0px;
    padding:0px;
}

/* New Change here to remove decoration from the link */
a
{
    text-decoration: none;
}




 
 