/* resume img  */

   /* .hero-container {
       max-width: 800px; */
       /* Set a maximum width for the hero container */
       /* width: 100%;
       padding: 20px; */
       /* Add some padding for spacing */
       /* text-align: center;
   } */

   /* img {
       max-width: 100%;
       max-height: 100%;
       width: auto;
       height: auto;
       object-fit: contain;
       display: inline-block;
       padding-left: 25%; */
       /* Ensure proper alignment within text-align: center; */

   /* } */

   /* testing  */

   .hero-container {
       max-width: 800px;
       /* Set a maximum width for the hero container */
       width: 100%;
       padding: 20px;
       /* Add some padding for spacing */
       text-align: center;
   }

   img.resume {
       max-width: 100%;
       max-height: 100%;
       width: 80vw;
       /* Use viewport width for centering */
       height: auto;
       object-fit: contain;
       display: block;
       /* Ensure block-level display for proper alignment */
       margin: 0 auto;
       /* Center the image horizontally */
       cursor: pointer;
       /* Change cursor to pointer on hover */
       transition: transform 0.3s ease-in-out;
       /* Add a smooth transition effect */
   }

   .image-modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.9);
       /* Semi-transparent black background */
       display: none;
       justify-content: center;
       align-items: center;
   }

   .modal-image {
       max-width: 100%;
       max-height: 100%;
   }