:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #0f172a;
            --accent: #8b5cf6;
            --light: #f8fafc;
            --gray: #94a3b8;
            --dark-gray: #64748b;
            --transition: all 0.3s ease;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      color: var(--secondary);
      background-color: var(--light);
    }

    section {
      padding: 5rem 0;
    }

    .section-header {
      margin-bottom: 2rem;
    }

 .section-title {
  position: relative;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: #111;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center; /* center text */
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;                /* start at center */
  transform: translateX(-50%); /* shift back by 50% of its width */
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0066ff, #8a2be2);
  border-radius: 2px;
}

    .content-text {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #444;
      margin-bottom: 1.5rem;
      text-align: justify;
      padding: 0 1rem;
    }

    /* Hero Section */
    .hero {
      position: relative;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      overflow: hidden;
      padding: 0 1rem;
      background-color: #0f172a;
    }

    .hero-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      opacity: 0.7;
    }

    .hero .container {
      position: relative;
      z-index: 2;
      padding: 100px 1rem;
    }

    .hero-heading {
      font-size: 5rem;
      font-weight: 800;
      margin-bottom: 1rem;
       transform: translateX(-50%);
    }

    .hero-subtext {
      font-size: 1.5rem;
      font-weight: 400;
       transform: translateX(-30%);
    }
    /* Mobile adjustments */
@media (max-width: 768px) {
  .hero {
    height: auto; /* Let content decide height */
    padding: 4rem 1rem;
    text-align: center;
  }

  .hero-img {
    object-fit: cover;
    object-position: center top; /* focus on top part of image */
    height: 100%;
  }

  .hero-heading {
    font-size: 2.5rem; /* smaller heading */
    transform: none;   /* reset X shift */
  }

  .hero-subtext {
    font-size: 1rem;   /* smaller subtext */
    transform: none;   /* reset X shift */
  }
}


    /* Alternating content sections */
    .content-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 3rem;
      padding: 3rem 2rem;
      background: #0066ff;
    }
    .content-section.bg-white {
      background: #f8fafc;
    }
    .content-section.bg-blue {
      background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    }
    .content-section img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
 
    }

    /* Flip layout for sections with .flip */
    .content-section.flip .section-header {
      order: 2;
      text-align: right;
    }
    .content-section.flip img {
      order: 1;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .content-section {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .content-section .section-header,
      .content-section img {
        order: unset;
      }
      .section-title::after {
        left: 50%;
        transform: translateX(-50%);
      }
      .hero-heading {
        font-size: 2.5rem;
      }
    }