/* Optional: Media queries for smaller screens if default grid isn't enough */
@media (max-width: 768px) {
    .section-title {
        font-size: 2em;
    }
    .expertise-grid {
        grid-template-columns: 1fr; /* Stack items on small screens */
    }
}


/* Minimalist Footer Section */
.minimal-footer {
    background-color: #ffffff; /* A very light, subtle background */
    color: #555; /* Soft, readable text color */
    padding: 30px 0; /* Vertical spacing */
    text-align: center; /* Center all content */
    border-top: 1px solid #eee; /* A very light, thin top border, if desired */
    /* If you want a black border to mimic a menu outline, change above to: */
    /* border-top: 1px solid #000; */
}

.minimal-footer .container {
    max-width: 1000px; /* Adjust container width for a narrower, cleaner footer */
    margin: 0 auto;
    padding: 0 20px;
}

.header-nav ul {
    list-style: none;
    padding: 50;
    margin: 60 0 40px 0; /* Space between nav and copyright */
    display: flex; /* Use flexbox to lay out links horizontally */
    flex-wrap: wrap; /* Allow links to wrap on smaller screens */
    justify-content: center; /* Center the links */
    gap: 25px; /* Space between the links */
}

.header-nav ul li a {
    color: #555; /* Default link color */
    text-decoration: none;
    font-size: 1em; /* Readable font size */
    transition: color 0.3s ease;
    
}

.header-nav ul li a:hover {
    color: #007bff; /* Accent color on hover (match your brand) */
}

.footer-copyright p {
    font-size: 1em; /* Smaller font for copyright */
    color: #888; /* Softer color for copyright */
    margin: 0;

}

/* Media query for very small screens if links are too wide */
@media (max-width: 480px) {
    .header-nav ul {
        flex-direction: column; /* Stack links vertically on very small screens */
        gap: 20px; /* Reduce gap when stacked */
    }
}


    :root {
      --white: #ffffff;
      --blue: #1a73e8;
      --gray-light: #dadce0;
      --gray-text: #5f6368;
      --shadow: 0 1px 3px rgba(121, 117, 117, 0.664);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      background: var(--white);
      color: #202124;
      line-height: 1.6;
    }

    /* Fixed Top Bar */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 64px;
      background: var(--white);
      border-bottom: 1px solid var(--gray-light);
      display: flex;
      align-items: center;
      padding: 0 24px;
      z-index: 1000;
      backdrop-filter: blur(10px);
    }
    .logo {
      font-weight: 700;
      font-size: 22px;
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .logo svg {
      width: 300px;
      height: auto;
    }

    /* Hero Section */
    .hero {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 24px;
      padding-top: 64px; /* offset fixed header */
    }
    .hero h1 {
      font-size: 5rem;
      font-weight: 700;
      margin-bottom: 24px;
      line-height: 1.1;
    }
    .hero p {
      font-size: 1.5rem;
      font-weight: 300;
      color: var(--gray-text);
      max-width: 720px;
      margin-bottom: 40px;
    }
    .gradient-text {
      background: linear-gradient(90deg, #ec4b96, #a834a2, #6c9ae4, #35ea6b, #bfe81a, #e84a1a);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientShift 8s ease infinite;
    }
    @keyframes gradientShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }


    /* Rest of the page (features, etc.) – same as before */
    .features {
      padding: 120px 24px;
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }

    .features h1 {
      padding: 120px 24px;
      max-width: 1200px;
      margin: 0 auto;
      font-size: 4rem;
      text-align: center;
    }


    .features h2 {
      text-align: left;
      font-size: 2.8rem;
      font-weight: 500;
      margin-bottom: 64px;
    }
    .features p {
      font-size: 1rem;
      font-weight: 300;
      color: var(--gray-text);
      max-width: 720px;
      margin-bottom: 10px;
    }

    .features ul li {
      margin-left: 50px;
      margin-bottom: 10px;
    }

    .features-grid  {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 40px;
    }
    .feature-card {
      background: white;
      padding: 32px;
      border-radius: 12px;
      box-shadow: var(--shadow);
      text-align: left;
    }
    .feature-icon {
      font-size: 3.5rem;
      margin-bottom: 16px;
    }
    .feature-card:hover {
      transform: translateY(-5px); /* Lift effect on hover */
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      /* Optional: Change border color on hover, e.g., to an accent color */
      border-color: #007bff; /* Example: blue accent on hover */
    }


/* --- Logo SVG Styling --- */
.logo {
    /* CLEANUP: Removed old text-based font-size/weight/color */
    padding: 0; /* Keeping these for clean layout */
    margin: 0;  /* Keeping these for clean layout */
    line-height: 1; /* Keeping these for clean layout */
    display: inline-block; /* Keeping these for clean layout */
  }
  
  .logo svg {
      height: 60px; /* Adjust this to your desired height */
      width: auto; /* Keep this for aspect ratio */
  }

/* Links directly under the logo */



/* Links directly under the logo */
.logo-links ul {
    list-style: none;      /* remove bullets */
    padding: 0;            /* remove default indentation */
    margin: 0;             /* remove extra spacing */
    
    display: flex;         /* put items side by side */
    flex-direction: row;   /* ensure horizontal layout */
    gap: 20px;             /* spacing between links */

    margin-left: 10px;     /* shift links right to align with logo */
}

/* Optional styling */
.logo-links ul li a {
    color: var(--gray-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.logo-links ul li a:hover {
    color: var(--blue);
    text-decoration: none;
}

header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 12px 24px;
}

/*End section CSS*/