:root{
  --brand: #d7bc0b;        /* primary blue */
  --accent: #f6c84c;       /* accent / yellow */
  --muted: #6b7280;
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #0f1724;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(12, 22, 44, 0.08);
  --gutter: 1.25rem;
  --container-max: 1200px;
}

/* Dark mode overrides */
/* Dark Mode Button */
.dark-btn {
  background: none;
  border: 2px solid #007BFF;  /* Blue border */
  color: #007BFF;             /* Blue text */
  padding: 6px 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-btn:hover {
  background: #007BFF;
  color: white;
}

/* Dark Mode Styles */
/* Button styling */
.dark-btn {
  background: none;
  border: 2px solid #007BFF;  /* Blue border */
  color: #007BFF;             /* Blue text */
  padding: 6px 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-btn:hover {
  background: #007BFF;
  color: white;
}

/* Smooth transition for theme switching */
body, header, footer, main, section {
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

body.dark-mode header,
body.dark-mode footer {
  background-color: #1e1e1e;
}

body.dark-mode a {
  color: #4da3ff;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  -webkit-text-size-adjust:100%;
}

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

/* NAVBAR */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 0;
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  backdrop-filter: blur(6px);
}
.color-mode-dark .navbar{ background: rgba(2,6,23,0.65); }
.brand{ font-weight:700; letter-spacing:0.4px; text-decoration:none; color:var(--text) }

/* nav links */
.nav-links{ display:flex; gap:1rem; align-items:center }
.nav-links a{ text-decoration:none; color:var(--muted); padding:0.35rem 0.5rem; border-radius:8px }
.nav-links a:hover{ color:var(--text); background: rgba(11,94,215,0.06) }

/* hamburger for small screens */
.hamburger{ display:none; background:none; border:0; font-size:1.25rem }

/* HERO */
.hero{ display:grid; grid-template-columns: 1fr 420px; gap:2rem; align-items:center; padding:2rem 0 }
.hero h1{ margin:0 0 0.5rem; font-size:clamp(1.4rem, 3vw, 2.2rem) }
.lead{ color:var(--muted) }
.cta-group{ display:flex; gap:0.75rem; margin-top:1rem }
.meta{ list-style:none; padding:0; margin:1rem 0 0; color:var(--muted) }
.meta li{ font-size:0.95rem }

/* Cards */
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}

/* figure */
.hero-image{ margin:0; overflow:hidden; border-radius:10px; height:260px }
.hero-image img{ width:100%; height:100%; display:block }

/* GRID utilities */
.grid{ display:grid }
.columns-2{ grid-template-columns: repeat(2, 1fr) }
.columns-3{ grid-template-columns: repeat(3, 1fr) }
.columns-4{ grid-template-columns: repeat(4, 1fr) }
.gap{ gap:1rem }
.row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:stretch }

/* responsive masonry fallback */
.masonry{ grid-auto-rows: 8px; }
.gallery-item img{ width:100%; height:220px; object-fit:cover; display:block }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:0; padding:.5rem .9rem; border-radius:8px; cursor:pointer; text-decoration:none; font-weight:600; background:transparent }
.btn.primary{ background:var(--brand); color:white }
.btn.ghost{ border:1px solid rgba(0,0,0,0.06); background:transparent }
.float-text {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}


/* small components */
.input-group{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.6rem }
.input-group input, .input-group textarea, form input, form textarea{
  padding:.6rem .7rem; border-radius:8px; border:1px solid #e6eef8; background:transparent; color:var(--text);
  font-size:0.95rem;
}
.color-mode-dark input, .color-mode-dark textarea{ border:1px solid rgba(255,255,255,0.06) }

/* Switch (toggle) */
.switch{ display:flex; align-items:center; gap:.6rem; cursor:pointer }
.switch input{ display:none }
.switch .slider{ width:44px; height:22px; background:#e6eef8; border-radius:22px; display:inline-block; position:relative }
.switch .slider:after{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:white; transition:0.18s }
.switch input:checked + .slider{ background:var(--brand) }
.switch input:checked + .slider:after{ transform:translateX(22px) }

/* carousel */
.carousel{ position:relative; overflow:hidden; display:flex; align-items:center; gap:0.5rem; padding:0.5rem }
.carousel-track{ display:flex; gap:0.5rem; width:100%; scroll-behavior:smooth; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory }
.carousel-slide{ min-width:220px; flex:0 0 220px; scroll-snap-align:center; border-radius:10px; overflow:hidden; height:140px }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,0.06); padding:0.45rem 0.6rem; border-radius:8px }
.carousel-btn.prev{ left:0.5rem } .carousel-btn.next{ right:0.5rem }

/* modal */
.modal{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,0.55); z-index:200 }
.modal[aria-hidden="false"]{ display:flex }
.modal-content{ max-width:900px; width:95%; padding:1rem; position:relative }
.modal-close{ position:absolute; right:0.8rem; top:0.8rem; border:0; background:transparent; font-size:1.1rem }

/* footer */
.footer{ display:flex; justify-content:space-between; align-items:center; padding:1.25rem 0; color:var(--muted) }

/* tiny util classes */
.text-muted{ color:var(--muted) }
.center{ text-align:center }

/* responsive breakpoints */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .columns-4{ grid-template-columns: repeat(2,1fr) }
  .columns-3{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width:640px){
  .nav-links{ display:none }
  .hamburger{ display:inline-block }
  .columns-2{ grid-template-columns:1fr }
  .hero-image{ height:200px }
}