/* ===== Base + Theme ===== */
:root{
  /* Enhanced palette (warm hero, clean surfaces, accessible contrast) */
  --brand: #f97316;           /* primary (enhanced orange) */
  --brand-700:#ea580c;
  --brand-900:#c2410c;
  --ink: #0f172a;             /* near-black */
  --ink-2:#1f2937;            /* headlines */
  --textWhite:#ffffff;        /* white text */
  --muted:#6b7280;            /* body */
  --line:#e5e7eb;             /* subtle borders */
  --surface:#ffffff;          /* cards */
  --surface-2:#f8fafc;        /* sections */
  --bg:#0b0b10;               /* deep backdrop for hero gradient overlay */
  --ring: rgba(249,115,22,.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(2,8,23,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--muted);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:"Poppins", sans-serif; color:var(--ink-2); margin:0 0 .4em; line-height:1.2; }
h5{ font-family:"Poppins", sans-serif; color:var(--textWhite); margin:0 0 .4em; line-height:1.2; }
h1{ font-size:clamp(2rem, 2.6rem + 1vw, 3.25rem); font-weight:700; }
h2, h5{ font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight:700; }

h3{ font-size:1.05rem; font-weight:600; }
p{ margin:.6rem 0 1rem; }

.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:600;
  text-decoration:none; border:1px solid transparent; transition:.2s ease;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 16px rgba(249,115,22,.22); }
.btn-primary:hover{ background:var(--brand-700); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-900); }

.link{ color:var(--brand-900); font-weight:600; text-decoration:none; }
.link:hover{ text-decoration:underline; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
/* Hero heading white */
.hero h1 {
  color: #ffffff;
}
/* ===== Topbar ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.brand{
  font-family:"Poppins",sans-serif; font-weight:800; letter-spacing:.2px;
  color:#fff; text-decoration:none; font-size:1.25rem;
}
.navlinks{ list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
.navlinks a{ color:#fff; text-decoration:none; font-weight:500; opacity:.9; }
.navlinks a:hover{ opacity:1; }

/* ===== Hero ===== */
.hero{
  position:relative; color:#fff;
  background:
    radial-gradient(1200px 400px at 80% 0%, rgba(249,115,22,.35), transparent 60%),
    linear-gradient(180deg, rgba(18,18,23,.2), rgba(18,18,23,.6)),
    url('/images/banner.jpg?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35) 30%, rgba(0,0,0,.1) 60%, transparent);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem;
  padding:4.5rem 0 3.5rem;
}
.hero-copy p{ color:#e5e7eb; max-width:54ch; }
.cta{ display:flex; gap:.8rem; margin-top:1rem; flex-wrap:wrap; }
.hero-media{ min-height:260px; }

/* ===== About ===== */
.about{ padding:3.5rem 0 2.5rem; }
.about-card{
  display:grid; gap:2rem; grid-template-columns: 1.2fr .8fr;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem;
}
.about-photo img{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
}
.tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.tags span{
  font-size:.85rem; color:#334155; background:var(--surface-2); border:1px solid var(--line);
  padding:.35rem .6rem; border-radius:999px; font-weight:600;
}

/* ===== Featured ===== */
.featured{ background:var(--surface-2); padding:3.25rem 0; }

/* .section-head{ text-align:center; max-width:70ch; margin-inline:auto 2rem; margin-bottom:1.6rem; } */
.section-head {
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.6rem;
  padding: 0 1rem; /* keeps breathing space on mobile */
}

.section-head p{ color:#64748b; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 1.5rem; /* space between cards */
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column; /* vertical stacking */
}

.card-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* .card-media::before{

  content:""; position:absolute; inset:0; background:
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.1)),
    var(--thumb, url('https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?q=80&w=1600&auto=format&fit=crop')) center/cover no-repeat;
}
.thumb1{ --thumb: url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=1600&auto=format&fit=crop'); }
.thumb2{ --thumb: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=1600&auto=format&fit=crop'); }
.thumb3{ --thumb: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=1600&auto=format&fit=crop'); }
.thumb4{ --thumb: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop'); }
.thumb5{ --thumb: url('https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=1600&auto=format&fit=crop'); }
.thumb6{ --thumb: url('https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=1600&auto=format&fit=crop'); } */






.play{
  position:absolute; inset:auto auto 12px 12px;
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  border:none; cursor:pointer; background:#fff; color:var(--brand-900);
  box-shadow:0 6px 14px rgba(2,8,23,.18); transition:transform .2s ease;
}
.play:hover{ transform:scale(1.05); }

.card-body h3 {
  color: var(--brand-900); /* or pick a custom hex color */
}
.card-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1; /* card-body fills available height */
}
.card-body p{ color:#4b5563; }
.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .9rem;
  margin-top: auto; /* pushes it to the bottom */
}
.meta span{ color:#6b7280; }

/* ===== Contact + Footer ===== */
.contact{
  padding:3.25rem 0 0;
  background: radial-gradient(700px 200px at 85% -20%, rgba(249,115,22,.10), transparent 60%), #fff;
}
.contact-grid{
  display:grid; gap:2rem; grid-template-columns: 1.05fr 1fr; align-items:start;
  padding-bottom:2rem;
}
.contact-info h2{ margin-bottom:.35rem; }
.contact-list{ list-style:none; padding:0; margin:1rem 0 1rem; }
.contact-list li{ display:flex; gap:.6rem; align-items:center; margin:.4rem 0; color:#334155; }
.contact-list i{ color:var(--brand-900); width:22px; text-align:center; }

.socials, .foot-socials{
  display:flex; gap:.6rem; margin-top:.6rem;
}
.socials a, .foot-socials a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); color:#0f172a; text-decoration:none; background:#fff;
}
.socials a:hover, .foot-socials a:hover{
  border-color:var(--brand); color:#fff; background:var(--brand);
}

.contact-form{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:1.25rem; display:grid; gap:.8rem;
}
.contact-form input,
.contact-form textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:.85rem .95rem;
  font:inherit; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);
}

/* Footer */
.footer{
  background:var(--surface-2); border-top:1px solid var(--line);
  margin-top:2.25rem; padding:2.25rem 0 0;
}
.footer-grid{
  display:grid; gap:2rem; grid-template-columns: 1.2fr .8fr .8fr;
}
.foot-brand .brand{ color:var(--ink-2); }
.foot-links h4{ margin:0 0 .5rem; }
.foot-links ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.foot-links a{ color:#475569; text-decoration:none; }
.foot-links a:hover{ color:var(--brand-900); text-decoration:underline; }

.copyright{
  text-align:center; padding:1rem 0; color:#64748b; border-top:1px solid var(--line); margin-top:1.25rem;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; padding:3.8rem 0 3rem; }
  .brand{ color:#fff; }
}
@media (max-width: 900px){
  .about-card, .contact-grid, .footer-grid{ grid-template-columns: 1fr; }
  .about-photo{ order:-1; }
}
@media (prefers-color-scheme: dark){
  /* optional subtle dark-mode polish */
  body{ background:#0b0c10; color:#d1d5db; }
  .about-card, .contact-form{ background:#0f1220; border-color:#22263a; }
  .card{ background:#0f1220; border-color:#22263a; }
  .card-body p, .foot-links a, .meta span{ color:#a5b4fc; opacity:.8; }
  .footer{ background:#0d1020; border-color:#1e2238; }
  .foot-brand .brand{ color:#fff; }
}

/* ===== Video Modal ===== */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.video-content {
  position: relative;
  width: 95%;
  max-width: 1120px;  /* 800px × 1.4 (≈ 40% larger) */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,0.6);
}
.video-content iframe {
  width: 100%;
  height: 630px; /* 450px × 1.4 (≈ 40% taller) */
  display: block;
}

.video-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.video-close:hover {
  color: var(--brand);
}

.carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

/* Card grid scrolls, arrows stay outside */
.card-grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  flex: 1;
}
.card-grid::-webkit-scrollbar {
  display: none;
}
.card {
  flex: 0 0 300px; /* fixed card width */
}

/* Arrow buttons */
.arrow {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.arrow:hover {
  background: var(--brand-700);
}


/* Grid: force 2 columns on desktop, 1 on mobile */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.5rem;
}
@media (max-width: 768px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Pagination */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin-top:1.25rem;
}
.pager-info{
  font-weight:600;
  color:var(--brand-900);
}
.pager-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}