:root{
      --brand:#16a34a;           /* Primary brand color (change once) */
      --brand-dark:#0e7a37;      /* Darker shade */
      --ink:#0b1220;             /* Text */
      --muted:#64748b;           /* Secondary text */
      --bg:#ffffff;              /* Page bg */
      --card:#0b122005;          /* Card bg */
      --ring: rgba(22,163,74,.2);/* Focus ring */
      --radius:18px;             /* Rounded corners */
      --shadow: 0 10px 30px rgba(2,6,23,0.08);
      --shadow-strong: 0 20px 50px rgba(2,6,23,0.14);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink); background:var(--bg);
     
    }

    
  

    /* --- Header --- */
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px);
      background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.65));
      border-bottom:1px solid rgba(2,6,23,.06);
    }
    .logo-img{  width: 240px; /* Adjust as needed */ height: 140px; object-fit: contain;  /* Makes it keep its proportions */ display: block;/* Prevents inline spacing issues */}
    .nav{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 18px;} 
    .logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
    .logo-badge{width:36px; height:36px; border-radius:12px; background:radial-gradient(100% 100% at 30% 20%, #fff 0%, #fff 20%, var(--brand) 21%, var(--brand-dark) 100%); box-shadow: var(--shadow); display:grid; place-items:center; color:#fff; font-weight:900}
    .logo span{font-size:1.05rem}

    nav ul{display:flex; list-style:none; margin:0; padding:0; gap:16px}
    nav a{display:inline-block; padding:10px 12px; text-decoration:none; color:#0f172a; border-radius:12px; font-weight:600; position: relative;}
    nav a:hover{transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2);}
    .btn{padding: 0.5rem 1.5rem; font-size: 1rem; border: none; border-radius: 50px; color: #ffffff; background: linear-gradient(90deg, #0072ff, #a200ff);  background-size: 200% 100%; transition: background-position 0.8s ease; cursor: pointer;}
    .btn:hover{background-position: 100% 0;}

    /* Mobile menu */
    .menu-toggle{display:none}
    .menu-btn{display:none}
    @media (max-width:900px){
      .menu-btn{display:inline-flex; align-items:center; gap:8px}
      nav ul{display:none}
      .menu-toggle:checked ~ nav ul{display:flex; position:absolute; left:18px; right:18px; top:62px; flex-direction:column; background:#fff; border:1px solid rgba(2,6,23,.08); border-radius:16px; padding:10px; box-shadow:var(--shadow-strong)}
    }

    /* --- Hero --- */
    .hero{
        position: relative;
        background: url("Logo-icons/1740394215369.jpeg") center center/cover no-repeat;
        min-height: 400px;  /* adjust as needed */
        display: flex;
        align-items: center;
        border-radius: 250px 50px 250px;}
    .btn{text-decoration: none; border-radius: 210px 50px 210px;}
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.696); /* white overlay, adjust opacity */
    }
    .hero-inner {
      position: relative;
      z-index: 1; /* keeps content above overlay */
    }

    .hero-inner{max-width:1100px; margin:0 auto; padding:80px 18px 60px; display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
    .hero h1{font-size:clamp(28px, 5vw, 46px); line-height:1.05; margin:0 0 14px}
    .hero p{font-size:clamp(16px, 2.5vw, 18px); color:var(--muted); margin:0 0 22px}
    .cta-row{display:flex; gap:12px; flex-wrap:wrap;}
    .cta-secondary{background:#0b1220; color:#ffffff;}
    .cta-secondary:hover{background:#ffffff; color: black;}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#0b12200a; font-size:12px; font-weight:700; letter-spacing:.3px}

    .hero-card{background:#fff; border-radius:22px; box-shadow:var(--shadow-strong); padding:18px; display:grid; gap:12px}
    .kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
    .kpi div{background:var(--card); border:1px solid rgba(2,6,23,.06); padding:14px; border-radius:14px; text-align:center}
    .kpi strong{display:block; font-size:20px}
    .kpi span{color:var(--muted); font-size:12px}

    /* --- Sections --- */
    section{scroll-margin-top:80px}
    .container{max-width:1100px; margin:0 auto; padding:56px 18px}
    .section-title{font-size:28px; margin:0 0 8px}
    .section-sub{color:var(--muted); margin:0 0 22px}

    .grid{display:grid; gap:16px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    @media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr}}
    @media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}}

    .card{background:#fff; border-radius:18px; padding:16px; box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.06)}
    .card h3{margin:10px 0 6px; font-size:16px}
    .muted{color:var(--muted)}


        .brand-marquee {
        background: #fff;   /* or transparent */
        padding: 20px 0;
        overflow: hidden;
      }

      .marquee {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
      }

      .marquee-content {
        display: flex;
        gap: 40px; /* space between logos */
        animation: scrollLeft 45s linear infinite;
      }

      .marquee-content img {
        height: 60px;   /* adjust logo size */
        width: auto;
        object-fit: contain;
      }

      @keyframes scrollLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* scroll half, then repeat */
      }


    /* Product cards */


            .carousel {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 250px; /* adjust based on your images */
      }

      .carousel-track {
        display: flex;
        width: max-content;
        animation: slide 60s linear infinite;
      }

      .carousel-track img {
        width: 200px; /* adjust product width */
        height: auto;
        margin: none;
        border-radius: 0px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }

      @keyframes slide {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }





    .product{display:grid; grid-template-rows:auto auto auto; gap:10px}
    .product img{width:100%; height:160px; object-fit:cover; border-radius:14px; background:linear-gradient(135deg, #f1f5f9, #e2e8f0)}
    .price{font-weight:800}
    .badge{font-size:11px; padding:4px 8px; border-radius:999px; background:#0b12200a;}

    /* Testimonials */
    .testimonial{display:flex; gap:12px; align-items:flex-start}
    .avatar{width:44px; height:44px; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg, #dbeafe, #fce7f3)}
    .stars{font-size:14px; color:#f59e0b}

    /* Contact */
    form{display:grid; gap:12px}
    input, textarea, select{padding:12px 14px; border-radius:12px; border:1px solid rgba(2,6,23,.12); font:inherit; background:#fff}
    input:focus, textarea:focus, select:focus{outline:none; box-shadow:0 0 0 6px var(--ring); border-color:var(--brand)}
    textarea{min-height:120px}

    /* Footer */
    footer{border-top:1px solid rgba(2,6,23,.06); background:linear-gradient(180deg,#ffffff, #f8fff9)}
    .foot{max-width:1100px; margin:0 auto; padding:28px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
    .foot small{color:var(--muted)}
    .logo-footer{  width: 20%; /* Adjust as needed */ height: 10%; object-fit: contain;  /* Makes it keep its proportions */ display: block;/* Prevents inline spacing issues */}

    /* Floating WhatsApp */
    .wa{position: fixed; bottom: 30px;  right: 20px;  background-color: #25D366; /* WhatsApp green */  color: #fff;  border-radius: 50%;  width: 86px;  height: 86px;  display: flex;  align-items: center;  justify-content: center;  font-size: 48px;  box-shadow: 0 4px 10px rgba(0,0,0,0.3);  z-index: 1000;}
    .wa:hover{background:var(--brand-dark)}

    /* Simple fade-up animation */
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
    .reveal.on{opacity:1; transform:none}



    /* =========================
   📱 Responsive Adjustments
   ========================= */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
  /* Hero stacks nicely */
  .hero-inner{
    grid-template-columns: 1fr;   /* was two columns */
    gap: 20px;
    text-align: center;
    padding: 56px 18px 40px;
  }
  .cta-row{ justify-content: center; }

  /* Product grids -> 2 columns */
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }

  /* Contact section grid (your inline style needs override) */
  #contact .grid{
    grid-template-columns: 1fr !important; /* override inline style */
  }
  #contact .grid > *{ min-width: 0; }
}

/* Phone (≤ 600px) */
@media (max-width: 600px) {
  /* Logo smaller so it doesn’t push the menu */
  .logo-img{ width: 160px; height: auto; }

  /* Mobile menu list layout */
  nav ul{ flex-direction: column; gap: 12px; }

  /* Full-width CTA buttons (easier taps) */
  .cta-row{ flex-direction: column; gap: 14px; }
  .btn{ width: 100%; text-align: center; }

  /* Product grid -> 1 per row */
  .grid-3, .grid-4{ grid-template-columns: 1fr; }

  /* Product slider a bit taller / flexible */
  .product-slider{ height: 180px; }
  .slider-track img{ height: 180px; object-fit: contain; }

  /* Scrolling brand logos smaller */
  .marquee-content img{ height: 40px; }

  /* Footer stacks */
  .foot{
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  /* Extra spacing polish */
  .container{ padding: 40px 16px; }
}

html, body {
  overflow-x: hidden; /* disables horizontal scrolling */
  max-width: 100%;    /* ensures no element can extend wider than screen */
}