:root{
  --brand: #2ecc71;
  --brand-2: #e67e22;
  --text: #2c3e50;
  --muted:#6b7b8c;
  --bg:#f6f8f9;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins, Cairo, system-ui, -apple-system, Arial, sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%);margin:auto}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #e9edf1;z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand img{height:44px}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{background:#eef3f5}
.lang-switch button{border:1px solid #e0e6eb;background:#fff;padding:6px 10px;border-radius:12px;cursor:pointer}
.lang-switch button[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}

.hero{position:relative;min-height:68vh;display:grid;align-items:center}
.hero-bg{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1471193945509-9ad0617afabf?q=80&w=1600&auto=format&fit=crop');background-size:cover;background-position:center;filter:contrast(1.05) saturate(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25))}
.hero-content{position:relative;color:#fff;padding:64px 0}
.hero h1{font-size:clamp(28px,4vw,48px);margin:0 0 8px}
.lead{font-size:clamp(16px,2.1vw,20px);color:#ecf0f1}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid #d7dee3;cursor:pointer;background:#fff}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;border:none}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.badges{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.badges li{list-style:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:999px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px auto}
.feature{background:#fff;border:1px solid #e8edf2;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(0,0,0,.03)}
.feature h3{margin:0 0 6px}

.home-products{margin:40px auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:18px}
.card{background:#fff;border:1px solid #e8edf2;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.03)}
.card img{width:100%;height:180px;object-fit:cover}
.card h4{margin:14px 14px 6px}
.card p{margin:0 14px 16px;color:var(--muted)}

.page-hero{padding:44px 0 10px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin:18px auto 44px}
.image-stack{position:relative}
.image-stack img{width:100%;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.06)}
.image-stack .overlap{position:absolute;right:-10%;bottom:-10%;width:70%;border:6px solid #fff}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px,1fr));gap:18px;margin-bottom:42px}
.product-card{background:#fff;border:1px solid #e8edf2;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.03)}
.product-card img{width:100%;height:180px;object-fit:cover}
.product-card h4{margin:14px 14px 6px}
.product-card p{margin:0 14px 16px;color:var(--muted)}
.btn-small{padding:8px 12px;margin:0 14px 16px;width:max-content}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:42px}
.step{background:#fff;border:1px solid #e8edf2;border-radius:18px; padding:18px; position:relative}
.step-num{position:absolute;top:-12px;left:-12px;background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700}

.certs ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-left:18px}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px,1fr));gap:12px;margin-bottom:42px}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:16px;border:1px solid #e8edf2}

.contact-wrap{display:grid;grid-template-columns:1fr .9fr;gap:22px;margin-bottom:48px}
.contact-form{background:#fff;border:1px solid #e8edf2;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(0,0,0,.03)}
.contact-form label{display:block;margin:8px 0 6px}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #e1e6ea;background:#fafbfd}
.form-status{margin-top:10px;color:var(--brand)}
.map{width:100%;height:360px;border:0;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.03)}

.site-footer{background:#fff;border-top:1px solid #e9edf1;margin-top:28px}
.footer-grid{display:grid;grid-template-columns:1.1fr .7fr .8fr;gap:18px;padding:24px 0}
.footer-logo{height:40px;margin-bottom:8px}
.copy{padding:10px 0;border-top:1px solid #eef2f6;color:#7f8c8d;font-size:14px}

@media (max-width: 960px){
  .features{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .certs ul{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
}



/* --- Responsive additions (appended) --- */

/* Make images fluid */
img, .hero img, .product-card img { max-width: 100%; height: auto; display: block; }

/* Layout containers */
.container, .hero, .product-grid, .steps, .certs { width: 100%; box-sizing: border-box; }

/* Header / nav adjustments */
.header, header, .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.nav { display:flex; gap:12px; flex-wrap:wrap; }

/* Utility tweaks for small width */
@media (max-width: 1024px) {
  .steps{grid-template-columns:repeat(2,1fr)}
  .certs ul{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .hero { padding: 28px 18px; }
  .section { padding: 32px 18px; }
}

/* Tablet and mobile */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .site-title, .logo { font-size: 1.25rem; }
  .product-grid{grid-template-columns:repeat(1,1fr); gap:16px}
  .steps{grid-template-columns:repeat(1,1fr)}
  .certs ul{grid-template-columns:repeat(1,1fr)}
  .hero { text-align: center; padding: 24px 14px; }
  .hero .hero-text, .hero .hero-actions { width: 100%; }
  .btn, .btn-small { width: 100%; box-sizing: border-box; }
  .product-card h4, .product-card p { margin-left: 12px; margin-right: 12px; }
  .search-bar, .search-input { width: 100%; }
  .footer-columns { display:block; }
  .footer-columns .col { margin-bottom: 18px; }
}

/* Small phones */
@media (max-width: 480px) {
  header { padding: 12px 12px; }
  .hero { padding: 18px 12px; }
  .site-title { font-size: 1.1rem; }
  .logo img { max-height: 36px; }
  h1 { font-size: 1.4rem; line-height:1.15; }
  h2 { font-size: 1.15rem; }
  .product-card { padding: 12px 10px; border-radius:12px; }
  .product-card h4{margin:10px 10px 6px}
  .product-card p{margin:0 10px 12px}
  .btn, .btn-small { padding:10px; font-size:0.95rem; }
  nav .nav-item { padding: 8px 10px; }
  .hero .hero-image { margin-top: 16px; }
}

/* Ensure media elements don't overflow */
iframe, video, embed { max-width: 100%; height: auto; }

/* Minor helpers */
.row, .flex-row { display:flex; flex-wrap:wrap; gap:12px; }
.col { flex: 1 1 auto; min-width: 0; }