/* Reset & base */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #0d141b; background-color: #f6f7f8; }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; height: auto; }
    .logo img {height: 100px; width: auto;}

    /* Utility classes */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: 0.5rem; }
    .gap-4 { gap: 1rem; }
    .gap-6 { gap: 1.5rem; }
    .gap-8 { gap: 2rem; }
    .text-primary { color: #137fec; }
    .bg-primary { background-color: #137fec; }
    .rounded { border-radius: 0.25rem; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-xl { border-radius: 0.75rem; }
    .shadow { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
    .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
    .btn-primary { background-color: #137fec; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: bold; }
    .btn-primary:hover { background-color: #0f6fd1; transform: scale(1.05); }

    h1, h2, h3, h4 { margin-bottom: 0.5rem; }
    h1 { font-size: 2.5rem; font-weight: 900; line-height: 1.2; }
    h2 { font-size: 2rem; font-weight: 900; }
    h3 { font-size: 1.25rem; font-weight: bold; }

    p { color: #555; }
    ul { list-style: none; }

    /* Header */
    header { position: sticky; top: 0; background: rgba(255,255,255,0.95); border-bottom: 1px solid #ddd; z-index: 1000; }
    header nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; position: relative; }
    .nav-links { display: none; gap: 1.5rem; }
    .nav-links a { font-weight: 600; }
    .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 900; font-size: 1.25rem; color: #137fec; }

    /* Menu toggle button (hamburger) */
.menu-toggle { 
  display: inline-flex; 
  cursor: pointer; 
  font-size: 1.5rem; 
  z-index: 1100; /* make sure it’s above nav-links */
}

/* Base nav links (mobile) */
.nav-links {
  display: none;               /* hidden by default on mobile */
  flex-direction: column;      /* vertical stacking */
  gap: 1rem;
  background-color: #137fec;   /* mobile menu background */
  position: absolute;
  top: 100%;                   /* below header */
  left: 0;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  z-index: 1000;
}

/* Show nav links when active (JS toggle) */
.nav-links.active {
  display: flex;
}

/* Desktop view */
@media (min-width: 768px) {
  .nav-links {
    display: flex;         /* horizontal menu */
    position: static;      /* remove absolute positioning */
    flex-direction: row;   /* horizontal alignment */
    gap: 2rem;
    background: none;      /* remove mobile background */
    width: auto;
    padding: 0;
    text-align: left;
  }

  .menu-toggle {
    display: none;         /* hide hamburger on desktop */
  }
}

    /* Hero */
    .hero { display: flex; flex-direction: column; gap: 2rem; padding: 4rem 1.5rem;}
    .hero h1 { font-size: 2rem; }
    .hero .buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
    .hero img { width: 100%;height: auto; border-radius: 1rem; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

    @media(min-width: 1024px) {
      .hero { flex-direction: row; align-items: center; }
      .hero h1 { font-size: 3rem; }
    }

    /* Stats */
    .stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; text-align: center; padding: 2rem 0; background: white; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
    @media(min-width: 1024px) { .stats { grid-template-columns: repeat(4,1fr); } }
    .stats span { font-weight: 900; font-size: 2rem; color: #137fec; display: block; }

    /* About Section */
.about-section {padding: 6rem 0;background: #f8fafc;}
.about-container {max-width: 1280px; max-width: 1280px; margin: 0 auto;padding: 0 1.5rem;}
.about-wrapper {display: flex; flex-direction: column; gap: 4rem; align-items: center;}


@media (min-width: 1024px) {.about-wrapper { flex-direction: row; }}

/* Image */
.about-image,
.about-content {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}

@media (min-width: 1024px) {
  .about-image,
  .about-content {
    width: 50%;
  }
}

.image-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 127, 236, 0.15);
  z-index: 1;
}

.image-bg {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}

/* Content */
.about-content h2 {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.about-content h2 span {
  color: #137fec;
}

.about-description {
  font-size: 1.125rem;
  color: #64748b;
  margin-bottom: 2rem;
}

/* Feature Cards */
.feature-list {
  display: grid;
  gap: 1rem;
}

.feature-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.feature-icon {
  color: #137fec;
  background: rgba(19, 127, 236, 0.1);
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 1.75rem;
}

.feature-card h4 {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.feature-card p {
  font-size: 0.9rem;
  color: #6b7280;
}

    /* Services */
    .services { padding: 4rem 1.5rem; }
    .service-card { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
    .service-card h3 { margin-top: 1rem; margin-bottom: 0.5rem; }
    .service-card p { font-size: 0.9rem; }

    /* Contact */
    .contact { display: flex; flex-direction: column; gap: 2rem; padding: 4rem 0; }
    .contact .form-container { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .contact input, .contact select, .contact textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid #ccc; margin-bottom: 1rem; }
    .contact button { width: 100%; }

    @media(min-width: 1024px) { .contact { flex-direction: row; } .contact .form-container { flex: 1; } }

    /* Footer */
    footer { background-color: #137fec; color: #ffffff; padding: 1rem 0; }
    footer p { text-align: center; color: #ffffff; font-size: 1rem; margin: 0; }
    footer a { color: #ccc; font-size: 0.875rem; }
   footer a:hover { color: #eaf2ff; }
    footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
    @media(min-width: 768px) { footer .footer-grid { grid-template-columns: repeat(2,1fr); } }
    @media(min-width: 1024px) { footer .footer-grid { grid-template-columns: repeat(4,1fr); } }

    /* Floating call button */
    .call-button { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 4rem; height: 4rem; border-radius: 50%; background: #137fec; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); animation: bounce 2s infinite; z-index: 1000; }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }