.navBar,#footer{
    
    height:150px;
    padding: 10px; 
    padding-top: 15px;
    
    background-color:darkcyan;
    color: white;
    /* border: 2px solid red; */
    text-align: right;
   
    
}
.navBar>ul>li{
    
   display: inline;
   padding: 10px;
    
  
    
}


.menuItem{
    color:white;
    text-decoration: none;
    font-size: larger;
    
}
.menuItem:hover{
    color: black;
}
.sectionBody{
        /* color: white; */

        padding: 20px;
   /* border: 2px solid rgb(98, 0, 255);*/
    
}


    


#bodySec-description, #aboutSection{
    
    text-align: justify;
    margin-left: 40px;
    margin-top: 40px;
    
}
.span,span>a{
    color: red;
    font-size: larger;
    text-decoration: none;
}
#bodySec-img{
   
    height: 300px;
    text-align:center;
   
}
#image{
    
   /* box-shadow: 5px 5px rgba(49, 9, 9, 0.241);*/
    filter: drop-shadow(5px 5px 5px rgb(184, 77, 77) );
    height: 100%;
    object-fit:contain;
    width: 100%;
    margin-bottom: 20px;  
   
}

.socioBox{
    /* margin-top: 20px;    */
   text-align: center;    
   padding-left: 90px;   
}

.socialMedia{
       border-radius: 100%;
    height: 60px;
    width:60px;
    word-wrap: break-word;
    text-align:center;
    margin: 10px;
    border: 4px double darkcyan;
    background-color: white;
    color: white;
    font-weight: 500;
}
    .socialMedia:hover{
        
        border: 5px double white;
        background-color:darkcyan;
        color: black;

    }
    .socialMedia>a>i{
        font-size: 30px;
        color: black;
    }
    .resumeLink:hover{
        color:red

    }
    .resumeLink{
        color: blue;
        font-weight: bold;
    }
    body{
        background-color: white;
    }

    

    .card{
        background-color: darkcyan;
        border-radius: 16px;
        padding: 20px 25px;
        margin-bottom: 30px;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
    }
    .card h2 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      @media (max-width: 600px) {
        .card h2 {
          font-size: 20px;
        }
  
        .section-title {
          font-size: 24px;
        }
      }

      /* education */
      .educationCards p{
        color: white;
      }
      .card:hover{
        transform: translateY(-6px);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
      }

      /* skills */
      

      .skillContent ul{
        text-align: left;
        color: white;
        
        
      }
       .skillCard:hover {
        transform: translateY(-6px);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
      }

      .container{
        /* margin-top: 150px; */
         display:grid; 
        gap: 10px;
        grid-template-columns: auto auto auto;
        /* text-align: center;  */
        /* border: 4px double black; */
         padding: 3%;
        word-wrap:break-word;
        margin-bottom: 5px; 
        
        
       
    }
    h1{
        text-align: center;
    }




    /* footer */
    .simple-footer {
        background-color: darkcyan;
        color:white;
        padding: 30px 20px;
       
        font-family: 'Segoe UI', sans-serif;
        
      }
      
      .footer-container {
        max-width: 800px;
        margin: auto;
      }
      
      .footer-name {
        font-size: 20px;
        color: white;
        font-weight: bold;
        margin-bottom: 8px;
      }
      
      .footer-email {
        font-size: 14px;
        margin-bottom: 12px;
        color:white;
      }
      
      .footer-copy {
        font-size: 12px;
        color:white;
      }
      

      /* about section */

      
.Box{
    text-align: center;
    justify-content: center;
}
.card>img{
    width: 100%;
    height:200px;
    text-align: center;
}
.card{
    align-items: center;
    width: 300px;
    height:300px;
   
    border: 2px solid white;
}
button{
    width: 150px;
    height: 51px;
    margin: 10px;
    font-weight: bold;
    font-size: larger;
    border-radius: 10px;
    background-color: darkcyan;
    color: white;


}
.Box>a{
    text-decoration: none;
    color: black;
}
button:hover{
    color: white;
       background-color: black;
}
.card-container{
    display: flex;
    /* border: 2px solid white; */
    width: 100%;
    justify-content: center;
   


}
.achieveHeading{
    /* border: 4px double black; */
    padding: 5px;text-align: center;
    
    

}

.sectionBody{
    justify-content: center;
    background-color: white;
   
    
}
.container{
    justify-content: center;
   background-color: white;
   
    
}

p{
    text-align: justify;
}