.sections-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
  }
  
  .sections-container:hover {
    background-color: #f0f0f0; /* Slightly darker on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
  }
  
  h2 {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-top: 25px;
    margin-bottom: 15px;
    transition: color 0.3s ease, border-bottom-color 0.3s ease; /* Smooth transitions */
  }
  
  h2:hover {
    color: #0056b3; /* Darker blue on hover */
    border-bottom-color: #0056b3;
  }
  
  h2:first-child {
    margin-top: 0;
  }
  
  .spacer {
    text-align: center;
    color: #777;
    margin: 20px 0;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    opacity: 0.9; /* Slightly transparent */
    transition: opacity 0.3s ease; /* Smooth transition */
  }
  
  .spacer:hover {
    opacity: 1; /* Fully opaque on hover */
  }
  
  .full-width {
    font-size: 1.2em;
  }
  
  .section {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle initial shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transitions */
  }
  
  .section:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* More pronounced shadow on hover */
  }
  
  .section h2 {
    color: #28a745;
    border-bottom-color: #28a745;
    transition: color 0.3s ease, border-bottom-color 0.3s ease; /* Smooth transitions */
  }
  
  .section h2:hover {
    color: #1e7e34; /* Darker green on hover */
    border-bottom-color: #1e7e34;
  }
  
  .section p {
    margin-bottom: 10px;
  }
  
  .section ul {
    list-style: none;
    padding-left: 0;
  }
  
  .section ul li {
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
    transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out; /* Smooth transitions */
  }
  
  .section ul li:hover {
    background-color: #f0f8ff;
    padding-left: 5px; /* Slight indent on hover */
  }
  
  .section ul li:last-child {
    border-bottom: none;
  }
  
  .section strong {
    font-weight: bold;
    color: #0056b3;
    transition: color 0.3s ease; /* Smooth transition */
  }
  
  .section strong:hover {
    color: #003d82; /* Darker blue on hover */
  }
  
  /* Keyframe animation for a subtle entry */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Apply the animation to the container and its direct children */
  .sections-container,
  .sections-container > * {
    animation: fadeIn 0.5s ease-out forwards;
    animation-delay: calc(0.1s * var(--animation-order, 1)); /* Staggered appearance */
    --animation-order: 0; /* Initialize counter */
  }
  
  /* Increment the animation order for each direct child */
  .sections-container > * {
    counter-increment: animation-order;
  }
  
  /* Responsive design adjustments */
  @media (max-width: 768px) {
    .sections-container {
      margin: 10px;
      padding: 15px;
    }
  
    h2 {
      font-size: 1.5em;
      margin-top: 20px;
      margin-bottom: 10px;
    }
  
    .spacer {
      font-size: 1em;
      margin: 15px 0;
      padding: 8px;
    }
  
    .section {
      margin-bottom: 20px;
      padding: 10px;
    }
  
    .section ul li {
      padding: 6px 0;
    }
  }

  /*Image Styles*/
  .image-container {
    /* Add a multi-colored border */
    border: 5px solid;
    border-image: linear-gradient(to right, darkred, black, red) 1;
    /* Add substantial padding */
    padding: 20px;
    /* Add a subtle dark and red shadow */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 0, 0, 0.2);
    /* Basic styling for centering the image */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Optional: Add a slight rounded corner */
    border-radius: 10px;
    /* Add a transition for smooth hover effects */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .image-container:hover {
    /* Slight scale-up on hover */
    transform: scale(1.05);
    /* Intensify the shadow on hover */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.4), -8px -8px 15px rgba(255, 0, 0, 0.3);
  }
  
  .profile-image {
    /* Ensure the image scales within the container */
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below the image */
    /* Add a subtle grayscale to color on hover effect */
    filter: grayscale(80%);
    transition: filter 0.3s ease-in-out;
  }
  
  .profile-image:hover {
    /* Remove grayscale on hover to show full color */
    filter: grayscale(0%);
  }
  
  /* Keyframe animation for a subtle pulsating effect */
  @keyframes pulsate {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.02);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Apply the pulsating animation to the container */
  .image-container {
    animation: pulsate 2s infinite alternate;
  }