/* CEO & COO Image Container */
.executive-img-container {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 20px; /* Adds margin around the container to create space */
    border-radius: 12px;
    overflow: hidden; /* Neat, rounded corners */
    background: #fff;
    width: 600px; /* Set container width to 600px */
    height: 400px; /* Set container height to 400px */
    padding: 0; /* Remove extra padding since we set fixed dimensions */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
  }
  
  /* CEO & COO Image Styling */
  .executive-img {
    width: 100%; /* Image will fill the container width */
    height: 100%; /* Image will fill the container height */
    object-fit: cover; /* Ensure the image is well-fitted and doesn't stretch */
    border-radius: 10px; /* Rounded corners for the image */
    transition: transform 0.3s ease; /* Smooth image transition effect */
  }
  
  /* Image Hover Effect */
  .executive-img-container:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 15px 30px rgba(161, 16, 16, 0.15); /* Enhanced shadow on hover */
  }
  
  /* Image Hover Effect */
  .executive-img:hover {
    transform: scale(1.03); /* Subtle zoom effect on image */
  }
  
  /* Headings Styling */
  .executive-title {
    font-weight: bold;
    font-size: 1.2rem; /* Adjusted title font size */
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px; /* Space between name and image */
    text-align: center;
  }
  
  /* Subheading Styling */
  .executive-subtitle {
    font-size: 1rem;
    color: #777; /* Lighter gray color for a professional touch */
    font-weight: normal;
    margin-top: 10px;
  }
  
  /* Hover Effect for Subtitle */
  .executive-title:hover {
    color: #0056b3; /* Change color on hover for interactivity */
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .executive-img-container {
      margin: 15px; /* Adds margin for smaller screens */
      width: 100%; /* Make the image container full width on smaller screens */
      height: auto; /* Allow height to adjust based on width */
    }
  
    .executive-title {
      font-size: 1.4rem;
    }
  
    .executive-subtitle {
      font-size: 1rem;
    }
  }
  
  /* Extra Space Between CEO and COO */
  .row .col-lg-6 {
    padding: 20px; /* Adds padding between the image containers */
  }