/* 1) Theme variables */
:root {
  --bs-body-bg:     #f8f9fa;
  --bs-body-color:  #212529;
  --bs-primary:      #0d6efd;
  --bs-secondary:    #6c757d;
  --bs-success:      #28a745;
  --bs-info:         #17a2b8;
  --bs-warning:      #ffc107;
  --bs-font-sans:   'Segoe UI', sans-serif;
}

/* 2) Global resets */
body {
  font-family: var(--bs-font-sans);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding-top: 56px; /* nav height */
}

/* 3) Navbar override */
.navbar-brand { font-weight: 600; }

/* 4) Button overrides */
.btn-primary { background: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover { background: darken(var(--bs-primary),5%); }

/* 5) Card utility */
.card { border: none; border-radius: .75rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05); }
.card-header { background: var(--bs-primary); color: #fff; border-radius: .75rem .75rem 0 0; }

/* 6) Form styles */
.form-control:focus { box-shadow: 0 0 0 .2rem rgba(13,110,253,0.25); }

/* 7) Hero section (for index) */
.hero {
  background: var(--bs-primary);
  color: #fff;
  padding: 6rem 1rem;
  text-align: center;
}
.hero h1 { font-size: 3rem; font-weight: 600; margin-bottom: 1rem; }
.hero p  { font-size: 1.25rem; }

/* 8) How-it-works */
.steps { display: flex; flex-wrap: wrap; gap:2rem; justify-content:center; }
.step { flex:1 1 220px; text-align:center; }
.step img { width:80px; margin-bottom:1rem; }

/* 9) Footer */
footer { background:#343a40; color:#adb5bd; padding:2rem 1rem; text-align:center; margin-top:4rem; }

.navbar-brand img {
  max-height: 50px;
  margin-right: 8px;
}

/* Logo sizing override */
.navbar-brand .logo {
  height: 40px !important;   /* exact height on desktop */
  width: auto !important;
}

@media (max-width: 576px) {
  .navbar-brand .logo {
    height: 32px !important; /* smaller on small screens */
  }
}

/* Hero */
.modern-hero {
  background: url('assets/images/hero-bg.jpg') center/cover no-repeat;
  min-height: 75vh;
}
.modern-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.modern-hero .lead {
  font-size: 1.25rem;
}

/* Features icons */
.features i {
  font-size: 3rem;
  color: var(--bs-primary);
  margin-bottom: .5rem;
}

/* Testimonials */
.testimonials blockquote {
  font-style: italic;
  margin: 0 auto;
  max-width: 600px;
}
.testimonials footer {
  margin-top: .75rem;
  color: #6c757d;
}

/* Final CTA */
.cta {
  background: var(--bs-primary);
}

.modern-hero {
  background: url('https://picsum.photos/1600/900?random=1')
              center/cover no-repeat;
  min-height: 75vh;
}
/* Header */
.header-modern {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: saturate(150%) blur(10px);
}
.header-modern .navbar {
  padding: 0.5rem 0;
}
.header-modern .logo {
  max-height: 50px;
}
.header-modern .brand-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}
.header-modern .nav-link {
  color: #e0e0e0;
  margin-left: 1rem;
  font-weight: 500;
  transition: color .3s, transform .3s;
}
.header-modern .nav-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* Footer */
.footer-modern {
  background: #212529;
  color: #adb5bd;
  padding: 3rem 0 1.5rem;
  font-size: 0.9rem;
}
.footer-modern .footer-title {
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-modern a {
  color: #adb5bd;
  text-decoration: none;
  transition: color .3s;
}
.footer-modern a:hover {
  color: #fff;
}
.footer-modern i {
  color: #adb5bd;
  font-size: 1.1rem;
  transition: color .3s;
}
.footer-modern i:hover {
  color: #0d6efd;
}

/* Main spacer to avoid content jump under fixed header */
main.pt-5 {
  padding-top: 4rem;
}

/* make header full-width and hide any side overflow */
.header-modern {
  width: 100%;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

/* global: kill accidental horizontal scroll */
html, body {
  overflow-x: hidden;
}