:root{
  --bg: #f6f6f6;
  --card: #ffffff;
  --muted: #666;
  --accent: #f15a24; /* orange accent */
  --accent-dark: #d04b1d;
  --brand: #b71c1c; /* optional */
  --max-width: 1180px;
  --container-pad: 20px;
  --radius: 14px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
}

/* Container utility */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* HEADER */
.site-header{
  background: #fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow: 0 6px 18px rgba(18,18,18,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  height:88px;
  justify-content:space-between;
}

/* logo */
.logo{display:flex;align-items:center}
.logo img{height:52px; width:auto; display:block}

/* search box in middle */
.search-box{
  flex:1 1 560px;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--card);
  border-radius:999px;
  padding:10px 14px;
  border:1px solid #e6e6e6;
  max-width:720px;
  margin:0 24px;
  box-shadow:0 2px 8px rgba(10,10,10,0.03);
}
.search-box input[type="search"]{
  flex:1;
  border:0;
  outline:0;
  font-size:16px;
  padding:8px;
  background:transparent;
}
.cat-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  cursor:pointer;
}
.cat-text{display:inline-block}
.search-btn{
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  width:46px;
  height:46px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(241,90,36,0.14);
}

/* NAV */
.main-nav{display:flex;align-items:center;gap:18px}
.nav-list{display:flex;gap:18px;list-style:none}
.nav-list a{
  text-decoration:none;
  color:#222;
  font-weight:600;
  padding:8px 12px;
  border-radius:8px;
}
.nav-list a:hover{background:#f3f3f3}
.nav-toggle{display:none;border:0;background:transparent;font-size:20px}

/* HERO */
.hero{
  background:linear-gradient(90deg,#ffb3b3,#ff8585);
  color:#fff;
  padding:48px 0;
}
.hero-inner{
  display:flex;
  gap:36px;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
}
.hero-content{flex:1 1 520px}
.hero h1{
  font-size:36px;
  margin-bottom:12px;
}
.hero-sub{font-size:16px;color:#2b2b2b; margin-bottom:18px}
.hero-cta{display:flex;gap:12px}
.hero-image img{width:360px;max-width:40vw;border-radius:12px;object-fit:cover}

/* SECTIONS */
.section{padding:48px 0;background:transparent}
.section .section-title{font-size:26px;margin-bottom:18px}

/* features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{
  background:var(--card);
  padding:22px;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(13,13,13,0.04);
}

/* ABOUT split */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.about-media img{width:100%;max-width:420px}
.about-content ul{margin-top:12px;list-style:disc;padding-left:18px}

/* cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(12,12,12,0.05)}
.card img{width:100%;height:180px;object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin-bottom:8px}

/* testimonials */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.test{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 6px 14px rgba(12,12,12,0.03)}
.test cite{display:block;margin-top:12px;color:var(--muted)}

/* newsletter */
.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 16px rgba(12,12,12,0.04)}
.newsletter-form{display:flex;gap:12px}
.newsletter-form input{padding:10px 12px;border:1px solid #e6e6e6;border-radius:8px;font-size:15px}

/* footer */
.site-footer{background:#0d0d0d;color:#fff;padding:36px 0;margin-top:36px}
.footer-inner{display:flex;gap:24px;align-items:flex-start;justify-content:space-between}
.footer-col{max-width:320px}
.footer-links{list-style:none;margin-top:12px}
.footer-links li{margin-bottom:8px}
.footer-links a{color:#ddd;text-decoration:none}

/* buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:#222}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-inner{flex-direction:column-reverse; text-align:center}
  .hero-image img{max-width:320px}
  .features-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .header-inner{gap:10px;padding:10px}
  .search-box{max-width:100%;margin:0}
  .nav-list{display:none}
  .nav-toggle{display:inline-block}
}

/* small devices */
@media (max-width:560px){
  .logo img{height:42px}
  .search-box{padding:8px; gap:8px}
  .search-box input{font-size:14px}
  .hero h1{font-size:26px}
}

/* FIX: Mobile Responsive Header */
@media (max-width: 980px) {
  .header-inner {
    flex-wrap: wrap;        /* allow items to go to next line */
    height: auto;
    padding: 12px;
  }

  .logo-wrap {
    flex: 1 1 100%;
    display: flex;
    justify-content: center; /* center logo */
    margin-bottom: 8px;
  }

  /* Search box becomes full width */
  .search-box {
    flex: 1 1 100% !important;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
  }

  /* Navigation toggle visible, menu hidden */
  .main-nav {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-toggle {
    display: inline-block;
    font-size: 26px;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .nav-list.show {
    display: flex;
  }
}

/* Extra small phones (e.g. 320px) */
@media (max-width: 480px) {
  .search-box {
    gap: 6px;
    padding: 8px 12px;
  }

  .search-box input {
    font-size: 13px;
  }

  .cat-text {
    display: none; /* hide "Categories" text, keep icon */
  }
}

/* make bottom sections stack on small screens */
@media (max-width: 780px){
  .newsletter-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .newsletter-form{
    width:100%;
    display:flex;
    justify-content:flex-end;
  }
  .footer-inner{
    flex-direction:column;
    gap:18px;
    align-items:flex-start;
  }
}