/* =========================================================
   Slushtech Website – Responsive CSS (Bootstrap-friendly)
   ---------------------------------------------------------
   Notes:
   - Uses CSS variables for easy theming.
   - Mobile-first, with breakpoints at 576/768/992/1200.
   - Complements Bootstrap 5 (no conflicts with core classes).
   ========================================================= */

/* ---------- Theme Variables ---------- */
:root {
  --brand: #3b0b97;
  --brand-600: #330a80;
  --brand-700: #2a096a;
  --text: #212529;
  --muted: #6c757d;
  --bg: #f8f9fa;
  --white: #ffffff;
}

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
  margin: 0;
}

/* Improve focus visibility for accessibility */
:focus-visible {
  outline: 3px solid rgba(59, 11, 151, 0.35);
  outline-offset: 2px;
}

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--brand);
}

.navbar .navbar-brand {
  color: var(--white) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

.navbar .nav-link {
  color: var(--white) !important;
  font-weight: 600;
  opacity: .95;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* If the toggler is present (future-proof) */
.navbar-toggler {
  border-color: rgba(255,255,255,.35);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.35);
}

/* ---------- Hero / Header ---------- */
header {
  /* Fallback solid color + subtle gradient */
  background:
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    var(--brand);
  color: var(--white);
  text-align: center;
  padding: clamp(48px, 6vw, 96px) 16px;
  border-bottom: 4px solid var(--brand-700);
}

header h1 {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 8px 0;
}

header p {
  font-size: clamp(14px, 2.6vw, 18px);
  margin: 0;
  opacity: .95;
}

/* ---------- Headings & Sections ---------- */
.container h2,
.container h3,
.container h4 {
  color: var(--brand);
  margin-bottom: 12px;
  line-height: 1.25;
}

.container h2 {
  font-size: clamp(22px, 3.8vw, 32px);
}

.container h3 {
  font-size: clamp(18px, 3.2vw, 26px);
}

.container h4 {
  font-size: clamp(16px, 2.8vw, 22px);
}

/* ---------- Cards & Images ---------- */
.card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.rounded-circle {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* Ensure any image scales responsively even outside Bootstrap .img-fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- Lists (Organization Units) ---------- */
ul {
  padding-left: 1.25rem;
}
ul li {
  margin: 6px 0;
}
ul li strong {
  color: var(--brand-600);
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--brand);
  color: var(--white);
  text-align: center;
  padding: 18px 12px;
  margin-top: 40px;
  font-size: 14px;
}

/* ---------- Utility Tweaks ---------- */
/* Tighten vertical rhythm on sections */
section.container {
  padding-top: clamp(16px, 3vw, 24px);
  padding-bottom: clamp(16px, 3vw, 24px);
}

/* Limit paragraph width for readability on large screens */
.container p {
  max-width: 70ch;
}

/* ---------- Responsive Breakpoints ---------- */
/* XS: <576px (default mobile-first rules applied above) */
@media (max-width: 575.98px) {
  /* Stack nav links nicely if no Bootstrap toggler is used */
  .navbar .navbar-collapse {
    padding-top: 8px;
  }
  .navbar .nav-link {
    display: inline-block;
    padding: 6px 10px;
  }

  /* Make cards breathe on small screens */
  .card {
    margin-bottom: 16px;
  }
  .card img {
    height: 160px;
  }

  /* Center text blocks commonly used on the home page */
  .text-center-sm {
    text-align: center !important;
  }
}

/* SM: ≥576px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .card img {
    height: 180px;
  }
}

/* MD: ≥768px */
@media (min-width: 768px) and (max-width: 991.98px) {
  header {
    padding: clamp(56px, 6vw, 100px) 24px;
  }
  .card img {
    height: 200px;
  }
}

/* LG: ≥992px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container p {
    max-width: 75ch;
  }
}

/* XL: ≥1200px */
@media (min-width: 1200px) {
  .container p {
    max-width: 100%;
  }
}

/* ---------- Reduced Motion Preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Theme-aware brand button (uses your existing CSS variables if present) */
.btn-brand {
  background-color: var(--brand, #3b0b97);
  border-color: var(--brand, #3b0b97);
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-600, #330a80);
  border-color: var(--brand-600, #330a80);
  color: #fff;
}

/* Accessible focus ring */
.btn-brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(59, 11, 151, 0.35);
}

/* Mobile responsiveness is inherent (inline-block). Ensure it never stretches full width */
.btn-brand.w-auto { width: auto !important; }


/* Uses your theme vars; includes safe fallbacks */
:root{
  --brand:#3b0b97; --brand-600:#330a80; --white:#fff; --text:#212529;
}

/* Brand button (reuse if already defined) */
.btn-brand{
  background-color:var(--brand); border:1px solid var(--brand); color:#fff;
  font-weight:600; letter-spacing:.2px; padding:.65rem 1.1rem; border-radius:.5rem;
}
.btn-brand:hover,.btn-brand:focus{ background-color:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn-brand:focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(59,11,151,.35); }

/* CTA section with optional background image + overlay via CSS vars */
.cta-section{
  position:relative;
  color:var(--white);
  padding: clamp(24px,5vw,56px) 0;
  background: var(--brand);                /* solid fallback if no image provided */
  overflow:hidden;
  border-radius: 16px 16px 0 0;            /* gentle top rounding before footer */
}

/* Layer the overlay and image on a pseudo-element */
.cta-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, var(--cta-overlay, rgba(0,0,0,.45)), var(--cta-overlay, rgba(0,0,0,.45))),
    var(--cta-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:1;
}

/* Keep content above the overlay */
.cta-content{ position:relative; z-index:1; }

/* Typographic tweaks */
.cta-text h3{
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight:800; line-height:1.15;
}
.cta-text p{
  font-size: clamp(14px, 2.4vw, 16px);
  opacity:.95; margin:0;
}

/* Button does not stretch; stays right on md+ */
.cta-actions .btn{ white-space:nowrap; }

/* Mobile: center everything; stack nicely */
@media (max-width: 767.98px){
  .cta-actions{ width:100%; display:flex; justify-content:center; }
}

/* ceo image at the home page */

img.rounded-circle.mb-3 {
    width: 200px !important;
    height: 200px !important;
    border: solid 10px #fff;
    margin-top: -100px !important;
    align-self: anchor-center;
}