.parentPanel{
    width: 100%;
    height: 1000px;
    border: 1px solid black;
    direction: rtl;
    display: flex;
}
.parentPanel .child1{
    width: 15%;
    height: 1000px;
    border: 1px solid black;  
}

.parentPanel .child1 div:nth-child(1),.parentPanel .child1 div:nth-child(2),.parentPanel .child1 div:nth-child(3),.parentPanel .child1 div:nth-child(4),.parentPanel .child1 div:nth-child(5),.parentPanel .child1 div:nth-child(6),.parentPanel .child1 div:nth-child(7){
    
    margin-top: 10%;
    width: 100%;
    height: 10%;
    border: 1px solid red; 
    background-color: rgb(6, 6, 67);  
    text-align: center; 
    font-size: 30px;
    color: white;
}
.parentPanel .child1 div:nth-child(1):hover,.parentPanel .child1 div:nth-child(2):hover,.parentPanel .child1 div:nth-child(3):hover,.parentPanel .child1 div:nth-child(4):hover,.parentPanel .child1 div:nth-child(5):hover,.parentPanel .child1 div:nth-child(6):hover,.parentPanel .child1 div:nth-child(7):hover{
    
 
    background-color: rgb(75, 75, 235);  
    cursor: pointer;
  
}
.parentPanel .child1 div:nth-child(1) 
{
display: flex;
justify-content: space-around;
align-items: center;
}
.parentPanel .child1 div:nth-child(1) img
{
height: 100%;
width: 30%;
border-radius: 50%;
}
.parentPanel .child1 div:nth-child(1) a,
.parentPanel .child1 div:nth-child(2) a,.parentPanel .child1 div:nth-child(3) a,.parentPanel .child1 div:nth-child(6) a,.parentPanel .child1 div:nth-child(7) a,.parentPanel .child1 div:nth-child(5) a,.parentPanel .child1 div:nth-child(4) a{
    font-size:25px;
    font-weight: bolder;
    text-align: center;
    text-decoration: none;
    color: black;
    
    
}
.parentPanel .child2{
    width: 85%;
    height: 1000px;
    border: 1px solid red; 
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
}
.parentPanel .child2 div:nth-child(1),
.parentPanel .child2 div:nth-child(2),
.parentPanel .child2 div:nth-child(3),
.parentPanel .child2 div:nth-child(4),
.parentPanel .child2 div:nth-child(5),
.parentPanel .child2 div:nth-child(6),
.parentPanel .child2 div:nth-child(7),
.parentPanel .child2 div:nth-child(8),
.parentPanel .child2 div:nth-child(9){
    width: 30%;
    height: 300px;
    border: 1px solid white; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:25px;
    font-weight: bolder;
    text-align: center;

  
}

.parentPanel .child2 div:nth-child(1) img,.parentPanel .child2 div:nth-child(2) img,.parentPanel .child2 div:nth-child(3) img,.parentPanel .child2 div:nth-child(4) img,.parentPanel .child2 div:nth-child(5) img,.parentPanel .child2 div:nth-child(6) img,.parentPanel .child2 div:nth-child(7) img,.parentPanel .child2 div:nth-child(8) img,.parentPanel .child2 div:nth-child(9) img
{
height: 100%;
width: 30%;
border-radius: 50%;
}

@media(width<600px){
    .parentPanel .child1 div:nth-child(1) p,
    .parentPanel .child1 div:nth-child(2) p,.parentPanel .child1 div:nth-child(3) p,.parentPanel .child1 div:nth-child(6) p,.parentPanel .child1 div:nth-child(7) p,.parentPanel .child1 div:nth-child(5) p,.parentPanel .child1 div:nth-child(4) p{
        font-size:10px;
       
        
    } 
    .parentPanel .child2{
     
        height: 1000px;
      
        display: block;
       
    }
    .parentPanel .child2 div:nth-child(1),
.parentPanel .child2 div:nth-child(2),
.parentPanel .child2 div:nth-child(3),
.parentPanel .child2 div:nth-child(4),
.parentPanel .child2 div:nth-child(5),
.parentPanel .child2 div:nth-child(6),
.parentPanel .child2 div:nth-child(7),
.parentPanel .child2 div:nth-child(8),
.parentPanel .child2 div:nth-child(9){
    width: 100%;
}
.parentPanel{
    height: 2800px;
}
.parentPanel .child2{
    height: 100%;
}

}