/* styles.css */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     text-align: center;
 }
 
 header {
     background: #5E2A8C; /* Manchester Business School purple */
     color: white;
    padding: 10px; /* Adjusted padding for better alignment */
    position: relative; /* Allow positioning the logo */
 }
.logo {
    position: absolute;
    top: 10px; /* Adjust to match the header padding */
    left: 40px; /* Adjust to provide some space from the left edge */
    height: 80px; /* Increased height for better visibility */
    width: auto; /* Maintain the aspect ratio */
}
h1 {
    margin-left: 120px; /* Adjust to move the heading to the right to avoid overlap */
}
 #hero {
     width: 60%; /* Limits the width to 60% of the page */
     margin: 0 auto; /* Centers the section */
     text-align: center; /* Centers text inside */
     padding: 20px; /* Adds spacing */
 }
 
 #hero h2 {
     font-size: 2em; /* Adjusts heading size */
 }
 
 #hero p {
     font-size: 1.2em; /* Makes text slightly larger for readability */
     line-height: 1.6; /* Improves text spacing */
 }
 
 .cta {
     display: inline-block;
     padding: 10px 20px;
     background-color: #6a0dad; /* Adjusted to match your purple theme */
     color: white;
     text-decoration: none;
     font-weight: bold;
     border-radius: 8px;
     margin-top: 15px;
 }
 
 .cta:hover {
     background-color: #5a0ba5; /* Slightly darker purple on hover */
 }
 
 
 nav ul {
     list-style: none;
     padding: 0;
     text-align: center; /* Centers the menu items */
     background-color: #5E2A8C; /* Same as the header for consistency */
 }
 
 nav ul li {
     display: inline;
     margin: 0 15px;
 }
 
 nav ul li a {
     color: white;
     text-decoration: none;
     font-weight: bold;
 }
 nav ul li a:hover {
     color: #FFD700; /* Gold color on hover */
 }
 
 .service-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
     gap: 20px; /* Adds spacing between grid items */
     max-width: 900px; /* Adjust this as needed */
     margin: 0 auto; /* Centers the grid */
     padding: 20px;
 }
 
 .service {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 20px;
     background-color: #f9f9f9;
     border-radius: 10px;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
     min-height: 300px; /* Ensures equal height */
 }
 
 .service h2 {
     color: #4B0082;
 }
 
 .service a {
     text-decoration: none;
     color: #4B0082;
     font-weight: bold;
 }
 
 .service p {
     text-align: center; /* Centers text */
     margin: 10px 0; /* Adds some spacing */
 }
 
 .service img {
     max-width: 80%; /* Ensures it doesn’t overflow */
     height: auto;
     border-radius: 8px;
 }
 /* Specific styles for Regulatory Affairs image */
 .regulatory-affairs-image {
     max-width: 400px; /* Sets a larger max width for the Regulatory Affairs image */
     max-height: 400px; /* Sets a larger max height */
 }
 
 .service-item img {
     width: 100%; /* Makes the image fill the container */
     height: auto; /* Maintains the aspect ratio */
     max-width: 200px; /* Limits the width to a maximum value */
     max-height: 200px; /* Limits the height to a maximum value */
     object-fit: cover; /* Ensures the image covers the area without distorting */
     border-radius: 8px;
 }
 /* Add class for equal height */
 .service-item {
     display: flex;
     flex-direction: column;
     justify-content: space-between; /* Ensures text aligns properly */
     height: 100%;
 }
 .service-content {
     display: flex;
     align-items: flex-start; /* Aligns items to the top */
     gap: 20px; /* Adds space between the image and the text */
     flex-wrap: wrap; /* Allows the content to wrap on smaller screens */
 }
 
 .ppa-image {
     width: 80%; /* Adjust the width as needed */
     height: auto;
     max-width: 400px; /* Optional: set a maximum size for the image */
     border-radius: 8px;
 }
 
 .ppa-text {
     width: 60%; /* Takes up the remaining space next to the image */
     text-align: left; /* Aligns text to the left */
 }
 /* Responsive Design */
 @media (max-width: 768px) {
     .service-content {
         flex-direction: column; /* Stacks the image and text on smaller screens */
         align-items: center;
     }
     .ppa-image, .ppa-text {
         width: 100%; /* Makes both image and text take full width on smaller screens */
     }
     .service-grid {
         grid-template-columns: 1fr; /* Switch to single column on small screens */
     }
 }