/*
      Core styling for the improved CardioMed Solutions site. The design
      emphasizes clarity, responsiveness and strong visual hierarchy. Colour
      variables live at the top so you can adjust the theme in one place.
    */

    :root {
      --primary-color: #003366; /* dark blue for headers and footer */
      --secondary-color: #2a75bb; /* medium blue for buttons and accents */
      --accent-color: #e63946; /* soft coral used on hover states */
      --text-color: #333333; /* default text colour */
      --background-color: #fdfdfd; /* light background for contrast */
      --white: #ffffff;
    }

    /* Reset default margins and paddings */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background: var(--background-color);
    }

    header {
      position: relative;
    }

    nav {
      background: var(--primary-color);
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 0.5rem 1rem;
    }

    nav ul li {
      margin: 0.25rem 0.75rem;
    }

    nav ul li a {
      color: var(--white);
      text-decoration: none;
      padding: 0.5rem 1rem;
      font-weight: 600;
      border-radius: 4px;
      transition: background 0.2s ease;
    }

    nav ul li a:hover {
      background: var(--secondary-color);
    }

    /* Hero section uses a background image with a semi‑transparent overlay. */
    .hero {
      background: url('hero.png') center/cover no-repeat;
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .hero::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* Increase overlay opacity to improve text contrast over the hero image 
*/
      /* Darker overlay for improved text visibility over busy imagery */
      background: rgba(0, 19, 51, 0.9);
      z-index: 0;
    }

    .hero-content {
      position: relative;
      color: var(--white);
      text-align: center;
      max-width: 800px;
      padding: 1rem;
      z-index: 1;
    }

    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      /* Add shadow to improve contrast when text sits over detailed imagery */
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    .hero-content p {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }

    .btn {
      display: inline-block;
      background: var(--secondary-color);
      color: var(--white);
      padding: 0.7rem 1.5rem;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 600;
      transition: background 0.2s ease;
    }

    .btn:hover {
      background: var(--accent-color);
    }

    main {
      padding: 2rem 1rem;
    }

    section {
      margin-bottom: 3rem;
    }

    section h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: var(--primary-color);
      font-size: 1.75rem;
    }

    /* Services grid auto‑adjusts column count based on available space */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
    }

    .service-card {
      background: var(--white);
      border: 1px solid #e0e0e0;
      padding: 1.5rem;
      border-radius: 8px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .service-card h3 {
      color: var(--primary-color);
      margin-bottom: 0.75rem;
      font-size: 1.2rem;
    }

    .service-card p {
      font-size: 0.95rem;
    }

    /* Why list styling for readability */
    .why-list {
      max-width: 700px;
      margin: 0 auto;
      list-style: disc;
      padding-left: 1.5rem;
      line-height: 1.5;
    }

    .why-list li {
      margin-bottom: 0.5rem;
    }

    /* Blog post card */
    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: var(--white);
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 1.5rem;
    }

    .blog-post h3 {
      color: var(--primary-color);
      margin-bottom: 0.5rem;
    }

    .blog-post p {
      margin-bottom: 1rem;
    }

    .btn-secondary {
      background: var(--primary-color);
      color: var(--white);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.2s ease;
    }

    .btn-secondary:hover {
      background: var(--secondary-color);
    }

    /* Contact form styling */
    form {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    form label {
      margin-bottom: 0.25rem;
    }

    form input,
    form textarea {
      padding: 0.5rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      width: 100%;
    }

    form button {
      background: var(--secondary-color);
      color: var(--white);
      padding: 0.75rem;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    form button:hover {
      background: var(--primary-color);
    }

    .contact-email {
      text-align: center;
      margin-top: 1rem;
      font-size: 0.95rem;
    }

    .contact-email a {
      color: var(--primary-color);
      text-decoration: underline;
    }

    footer {
      background: var(--primary-color);
      color: var(--white);
      text-align: center;
      padding: 1rem;
    }

    /* Responsive typography adjustments for smaller screens */
    @media (max-width: 768px) {
      .hero-content h1 {
        font-size: 2rem;
      }
      .hero-content p {
        font-size: 1rem;
      }
    }