/* ==== VARIABLES & GLOBAL STYLES ==== */
    :root {
      --bg: #ffffff;
      --text: #0f1724;
      --muted: #55607a;
      --accent: orange;
      --card: #f8fafc;
      --radius: 14px;
      --container: 1100px;
      --gap: 1.25rem;
      --shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    

      * {
        margin: 0;
       padding: 0;
       box-sizing: border-box;
}
    html { scroll-behavior: smooth; } /* native smooth scroll for anchor links */
    body {
       background: var(--bg);
        color: var(--text);
         line-height: 1.6; 
         
        }
        html,body{
          overflow-x: hidden;
          overflow-y: auto;
        }

    a { text-decoration: none; color: var(--text); }
    ul { list-style: none; }

    /* ==== HEADER / NAVBAR ==== */
    .navbar {
      display: flex; 
      justify-content: space-between; 
      align-items: center;
      padding: 20px 5%;
       position: sticky;
        top: 0;
         background: #000;
      backdrop-filter: blur(6px); 
      z-index: 100;
    }

    .logo { font-size: 2rem; font-weight: 800; color: var(--accent); letter-spacing: 1.5px; position: relative; }
    /* .logo::after { content: ''; width: 0%; height: 3px; background: var(--accent); position: absolute; bottom: -5px; left: 0; transition: width 0.3s ease; } */
    .logo:hover::after { width: 100%; }

   .main-menu ul {
     display: flex;
    gap: 80px; /* adjust spacing between links */
     }

  .main-menu li {
   margin-left: 0;    /* remove unnecessary extra spacing */
   padding-bottom: 55px; /* remove big bottom padding */
  
}
      .main-menu a { 
      font-size: 1.1rem;
       position: relative;
        padding-bottom: 5px;
         transition: all 0.3s ease;
          color: orange;
          padding-top: 10px;
         }
   .main-menu a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      left: 0;
      bottom: 0;
      background-color: orange;
      transition: width 0.3s ease;
    }

    .main-menu a:hover::after {
      width: 100%;
    }


    .menu-toggle { display: none; font-size: 2rem; color: var(--accent); cursor: pointer; background: none; border: none; }

    /* ==== HERO ==== */
    .hero { padding: 96px 5% 48px; background: linear-gradient(180deg, #fbfdff 0%, #fff 100%); }
    .hero-inner {
      display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 2rem;
      max-width: var(--container); margin: auto;
    }
    .hero h1 { font-size: 2.2rem; margin-bottom: 0.6rem; color: var(--accent); }
    .hero p { color: var(--muted); margin-bottom: 1rem; }

    .btn { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 10px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; }
    .btn.primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
    .btn.ghost { border: 1px solid #e6eefc; color: var(--text); background: transparent; }
    .btn:hover { transform: translateY(-2px); }

    /* ==== SECTIONS / TITLES ==== */
    .container { width: 90%; max-width: var(--container); margin: auto; padding: 60px 0; }
    .section-title {
      position: relative; display: inline-block; font-size: 32px; font-weight: 600; color: orange;
      margin-bottom: 30px; text-align: center;
    }
    #services, #contact { text-align: center; }
    .section-title::before, .section-title::after {
      content: ""; position: absolute; border: 2px solid orange; width: 20px; height: 20px;
    }
    .section-title::before { top: -8px; left: -18px; border-right: none; border-bottom: none; border-radius: 2px; }
    .section-title::after { bottom: -8px; right: -18px; border-left: none; border-top: none; border-radius: 2px; }
    .section-sub { text-align: center; color: var(--muted); margin-bottom: 2rem; }

    /* ==== SERVICES (Alternating Rows) ==== */
    .services-wrap { display: grid; gap: 2rem; }
    .service-row {
      display: grid;
      grid-template-columns: 1.1fr 1fr;  /* image left, text right (default) */
      gap: 2rem; align-items: center;
      background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
      padding: 32px; text-align: left;
    }
    .service-row.reverse {
      grid-template-columns: 1fr 1.1fr; /* text left, image right */
    }
    .service-media { display: flex; align-items: center; justify-content: center; }
    .service-media img, .service-media svg {
      width: 100%; max-width: 520px; height: auto; border-radius: 12px; box-shadow: var(--shadow);
    }
    .service-content h3 { margin: 0 0 10px 0; font-size: 1.5rem; }
    .service-content p { color: var(--muted); margin-bottom: 12px; }
    .card-list { margin: 8px 0 16px 18px; color: var(--muted); }
    .card-list li { list-style: disc; margin: 6px 0; }

    /* ==== CONTACT ==== */
    .contact-form { display: grid; gap: 0.75rem; max-width: 640px; margin: auto; text-align: left; }
    .contact-form label { display: flex; flex-direction: column; font-size: 0.95rem; color: var(--muted); }
    .contact-form input, .contact-form textarea {
      margin-top: 0.5rem; padding: 0.6rem; border-radius: 8px; border: 1px solid #e6eefc; font-size: 0.95rem;
    }

    /* ==== FOOTER ==== */
    footer { border-top: 1px solid #eef2f7; padding: 20px 5%; text-align: center; color: var(--muted); }

    /* ==== RESPONSIVE ==== */
    @media (max-width: 992px) {
      .hero-inner { grid-template-columns: 1fr; text-align: center; }
    }
   
    /* MOBILE: stack with IMAGE on TOP for ALL service rows */
    @media (max-width: 768px) {
    .main-heading { font-size: 2.5rem; }
      .sub-text { font-size: 1.1rem; color: #f4e61b; }

      .menu-toggle { display: block; padding-bottom: 10px;}

      .main-menu {
        position: fixed;
        top: 90px;
        right: -100%;
        width: 50%;
        height: 100vh;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease;
      }

      .main-menu.active { right: 0;  }
      
      .main-menu ul {
        flex-direction: column;
        gap: 40px;
        font-size: small;
      }
      
      .main-menu a { color:var(--accent); font-size: 1.1rem; }
    


      /* Switch service rows to flex column and force media first */
      .service-row, .service-row.reverse {
        display: flex;
        flex-direction: column;          /* stack */
        text-align: left;
      }
      .service-media { order: -1; }      /* IMAGE FIRST */
      .service-content { order: 0; }     /* TEXT AFTER */
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 1.8rem; }
      .section-title { font-size: 1.25rem; }
    }