/* ============================================
   MERIT MASTERS INVESTMENTS - STYLESHEET
   Complete visual overhaul with rich backgrounds
   ============================================ */


/* ------------------------------------------
   SECTION 1: CSS VARIABLES
   ------------------------------------------ */
:root {
  --navy: #0a2240;
  --navy-light: #0e2d54;
  --navy-rgb: 10, 34, 64;
  --teal: #1a8a9b;
  --teal-rgb: 26, 138, 155;
  --green: #7ab648;
  --green-rgb: 122, 182, 72;
  --light-gray: #f5f7fa;
  --dark-gray: #333333;
  --white: #ffffff;
  --cream: #f0ece3;
}


/* ------------------------------------------
   SECTION 2: RESET & BASE STYLES
   ------------------------------------------
   FONT UPGRADE: "Playfair Display" is a more 
   expressive, editorial serif font. It's bolder 
   and more distinctive than Merriweather — the kind 
   of font you see on magazine covers and luxury brands.
   ------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
  color: var(--dark-gray);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}


/* ------------------------------------------
   SECTION 3: NAVIGATION BAR
   ------------------------------------------ */
header {
  background-color: var(--white);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 90px;
}

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-links a {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--teal);
}

.nav-links a.active {
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 3px;
}

.btn-login {
  background-color: var(--teal);
  color: var(--white) !important;
  padding: 8px 22px;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.2s;
}

.btn-login:hover {
  background-color: var(--green);
  transform: translateY(-1px);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--navy);
  cursor: pointer;
}


/* ------------------------------------------
   SECTION 4: HERO SECTION (Homepage)
   ------------------------------------------ */
.hero {
  background: 
    linear-gradient(135deg, rgba(var(--navy-rgb), 0.82) 0%, rgba(var(--navy-rgb), 0.7) 50%, rgba(var(--teal-rgb), 0.65) 100%),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--white);
  padding: 130px 30px;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.2rem;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.hero p {
  font-size: 1.15rem;
  margin-bottom: 35px;
  opacity: 0.92;
  font-family: 'Open Sans', sans-serif;
}

.btn-primary {
  display: inline-block;
  background-color: var(--teal);
  color: var(--white);
  padding: 14px 35px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.5px;
  transition: background-color 0.3s, transform 0.2s;
}

.btn-primary:hover {
  background-color: var(--green);
  transform: translateY(-2px);
}


/* ------------------------------------------
   SECTION 5: INTRO SECTION
   ------------------------------------------ */
.intro {
  padding: 80px 30px;
  text-align: center;
  background-color: var(--white);
}

.intro h2 {
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.intro p {
  font-size: 1.1rem;
  color: #555;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.8;
}


/* ------------------------------------------
   SECTION 6: HIGHLIGHTS / CARDS
   ------------------------------------------ */
.highlights {
  background: 
    linear-gradient(160deg, rgba(var(--teal-rgb), 0.92) 0%, rgba(var(--navy-rgb), 0.9) 100%),
    url('../images/fleet-cars.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px 30px;
}

.highlights-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.card {
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex: 1;
  text-align: center;
  border-bottom: 4px solid var(--teal);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card:nth-child(1) {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.card:nth-child(2) {
  border-bottom-color: var(--green);
}

.card:nth-child(3) {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.card h3 {
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 12px;
}

.card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ------------------------------------------
   SECTION 7: CALL TO ACTION
   ------------------------------------------ */
.cta {
  background: 
    linear-gradient(135deg, rgba(var(--teal-rgb), 0.88) 0%, rgba(20, 138, 126, 0.85) 100%),
    url('../images/growth.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--white);
  text-align: center;
  padding: 80px 30px;
}

.cta h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  letter-spacing: -0.3px;
}

.cta p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.9;
  font-family: 'Open Sans', sans-serif;
}

.cta .btn-primary {
  background-color: var(--navy);
}

.cta .btn-primary:hover {
  background-color: var(--green);
}


/* ------------------------------------------
   SECTION 8: FOOTER
   ------------------------------------------ */
footer {
  background-color: var(--white);
  color: var(--dark-gray);
  padding: 60px 30px 30px 30px;
  border-top: 3px solid var(--teal);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.footer-section {
  flex: 1;
}

.footer-logo {
  height: 65px;
  margin-bottom: 15px;
}

.footer-section h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 18px;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a {
  color: var(--navy);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: var(--teal);
}

.footer-section p {
  color: #555;
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 6px;
}

.footer-copyright {
  text-align: center;
  color: #999;
  font-size: 0.85rem;
  font-family: 'Open Sans', sans-serif;
}


/* ------------------------------------------
   SECTION 9: PAGE HERO (inner pages)
   ------------------------------------------ */
.page-hero {
  background: 
    linear-gradient(135deg, rgba(var(--navy-rgb), 0.85) 0%, rgba(var(--navy-rgb), 0.75) 60%, rgba(var(--teal-rgb), 0.7) 100%),
    url('../images/nairobi-city.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 70px 30px;
  text-align: center;
}

.page-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.page-hero p {
  font-size: 1.1rem;
  opacity: 0.88;
  font-family: 'Open Sans', sans-serif;
}


/* ------------------------------------------
   SECTION 10: STORY BLOCKS (About page)
   ------------------------------------------ */
.story-block {
  padding: 100px 30px;
  text-align: center;
}

.story-inner {
  max-width: 700px;
  margin: 0 auto;
}

.story-year {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal), var(--green));
  color: var(--white);
  padding: 8px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 3px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.story-year-dark {
  background: linear-gradient(135deg, var(--navy), var(--teal));
}

.story-year-green {
  background: linear-gradient(135deg, var(--green), var(--teal));
}

.story-divider {
  width: 60px;
  height: 3px;
  background: var(--teal);
  margin: 20px auto 25px auto;
  border-radius: 2px;
}

.story-divider-green {
  background: var(--green);
}

.story-block h2 {
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.story-block p {
  font-size: 1.1rem;
  line-height: 1.9;
  font-family: 'Open Sans', sans-serif;
}

/* --- Story Block Color Variations --- */

.story-navy {
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.88) 0%, rgba(13, 47, 92, 0.82) 100%),
    url('../images/about-friends.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.story-navy h2 { color: var(--white); }
.story-navy p { color: rgba(255, 255, 255, 0.85); }

/* 2018 block — now uses growth image with light overlay */
.story-white {
  background: 
    linear-gradient(160deg, rgba(var(--green-rgb), 0.88) 0%, rgba(var(--teal-rgb), 0.85) 100%),
    url('../images/growth.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.story-white h2 { color: var(--white); }
.story-white p { color: rgba(255, 255, 255, 0.88); }
.story-white .story-divider { background: var(--white); }

.story-teal {
  background: 
    linear-gradient(160deg, rgba(var(--teal-rgb), 0.88) 0%, rgba(20, 138, 126, 0.85) 100%),
    url('../images/fleet-cars.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.story-teal h2 { color: var(--white); }
.story-teal p { color: rgba(255, 255, 255, 0.88); }

.story-dark {
  background: 
    linear-gradient(160deg, rgba(6, 22, 43, 0.88) 0%, rgba(var(--navy-rgb), 0.82) 100%),
    url('../images/logistics-truck.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.story-dark h2 { color: var(--white); }
.story-dark p { color: rgba(255, 255, 255, 0.82); }


/* ------------------------------------------
   SECTION 11: MISSION
   ------------------------------------------ */
.mission-section {
  padding: 80px 30px;
  text-align: center;
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.93) 0%, rgba(var(--navy-rgb), 0.88) 100%),
    url('../images/nairobi-city.jpg');
  background-size: cover;
  background-position: center;
}

.mission-inner {
  max-width: 750px;
  margin: 0 auto;
}

.mission-section h2 {
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 25px;
  letter-spacing: -0.3px;
}

.mission-section blockquote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.9;
  font-style: italic;
  border-left: 4px solid var(--teal);
  padding-left: 25px;
  text-align: left;
}


/* ------------------------------------------
   SECTION 12: VALUES
   ------------------------------------------ */
.values-section {
  padding: 80px 30px;
  text-align: center;
  background: 
    linear-gradient(160deg, rgba(var(--teal-rgb), 0.9) 0%, rgba(var(--navy-rgb), 0.92) 100%),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

.values-section h2 {
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 40px;
  letter-spacing: -0.3px;
}

.values-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.value-card {
  flex: 1;
  padding: 40px 25px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 4px solid var(--teal);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.value-card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.value-card:nth-child(1) { border-bottom-color: rgba(255, 255, 255, 0.5); }
.value-card:nth-child(2) { border-bottom-color: var(--green); }
.value-card:nth-child(3) { border-bottom-color: rgba(255, 255, 255, 0.5); }

.value-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.value-card h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.value-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ------------------------------------------
   SECTION 13: SERVICES PAGE
   ------------------------------------------ */

/* Intro */
.services-intro {
  padding: 80px 30px;
  text-align: center;
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.93) 0%, rgba(var(--teal-rgb), 0.88) 100%),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

.services-intro h2 {
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.services-intro p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  max-width: 750px;
  margin: 0 auto;
}

/* Service Cards Grid */
.services-grid-section {
  padding: 0 30px 80px 30px;
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.95) 0%, rgba(var(--navy-rgb), 0.92) 100%),
    url('../images/nairobi-city.jpg');
  background-size: cover;
  background-position: center;
}

.services-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 60px;
}

.service-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 35px 30px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.service-card-active { border-top: 4px solid var(--teal); }
.service-card-upcoming { border-top: 4px solid var(--green); }
.service-card-future { border-top: 4px solid rgba(255, 255, 255, 0.4); }

.service-status {
  display: inline-block;
  background-color: var(--teal);
  color: var(--white);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.service-status-upcoming { background-color: var(--green); }
.service-status-future { background-color: rgba(255, 255, 255, 0.2); }

.service-icon {
  font-size: 2.8rem;
  margin-bottom: 15px;
}

.service-card h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.service-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-features {
  list-style: none;
  padding: 0;
}

.service-features li {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Our Approach Section */
.approach-section {
  padding: 80px 30px;
  background: 
    linear-gradient(160deg, rgba(var(--teal-rgb), 0.9) 0%, rgba(var(--green-rgb), 0.85) 100%),
    url('../images/logistics-truck.jpg');
  background-size: cover;
  background-position: center;
}

.approach-section h2 {
  text-align: center;
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 50px;
  letter-spacing: -0.3px;
}

.approach-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.approach-item {
  padding: 30px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.3s, background-color 0.3s;
}

.approach-item:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.18);
}

.approach-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 10px;
}

.approach-item h3 {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.approach-item p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ------------------------------------------
   SECTION 14: CONTACT PAGE
   ------------------------------------------ */
.contact-section {
  padding: 80px 30px;
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.94) 0%, rgba(var(--teal-rgb), 0.9) 100%),
    url('../images/fleet-cars.jpg');
  background-size: cover;
  background-position: center;
}

.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.contact-form-wrapper h2 {
  font-size: 1.8rem;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.form-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.25);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.form-group textarea {
  resize: vertical;
}

.btn-submit {
  border: none;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 1.05rem;
}

/* Right side: Info cards with glass effect */
.contact-info-card,
.contact-hours-card,
.contact-social-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
}

.contact-info-card h3,
.contact-hours-card h3,
.contact-social-card h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--teal);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
}

.contact-info-icon {
  font-size: 1.4rem;
  color: var(--teal);
  min-width: 30px;
  text-align: center;
  padding-top: 2px;
}

.contact-info-item strong {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
  font-family: 'Open Sans', sans-serif;
}

.contact-info-item p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin: 0;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Open Sans', sans-serif;
}

.hours-row:last-child {
  border-bottom: none;
}

.contact-social-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.social-links {
  display: flex;
  gap: 10px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: 'Open Sans', sans-serif;
  transition: background-color 0.3s, transform 0.2s;
}

.social-link:hover {
  background-color: var(--teal);
  transform: translateY(-2px);
}


/* ------------------------------------------
   SECTION 15: LOGIN PAGE
   ------------------------------------------ */
.login-section {
  background: 
    linear-gradient(135deg, rgba(var(--navy-rgb), 0.88) 0%, rgba(var(--teal-rgb), 0.8) 100%),
    url('../images/nairobi-city.jpg');
  background-size: cover;
  background-position: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 60px 30px;
}

.login-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}

.login-branding h1 {
  font-size: 2.8rem;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.login-branding .story-divider {
  margin: 20px 0 25px 0;
}

.login-branding p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  line-height: 1.8;
  font-family: 'Open Sans', sans-serif;
}

.login-form-card {
  background-color: var(--white);
  border-radius: 12px;
  padding: 40px 35px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.login-logo {
  height: 55px;
  display: block;
  margin: 0 auto 20px auto;
}

.login-form-card h2 {
  text-align: center;
  color: var(--navy);
  font-size: 1.6rem;
  margin-bottom: 25px;
}

.login-form-card .form-group label {
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
}

.login-form-card .form-group input {
  color: var(--dark-gray);
  background-color: var(--light-gray);
  border: 2px solid #dde1e7;
}

.login-form-card .form-group input:focus {
  border-color: var(--teal);
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.15);
}

.login-form-card .form-group input::placeholder {
  color: #aaa;
}

.login-error {
  background-color: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.login-error p {
  color: #c0392b;
  font-size: 0.9rem;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.login-success {
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.login-success p {
  color: #27ae60;
  font-size: 0.9rem;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.login-forgot {
  text-align: center;
  margin-top: 15px;
}

.login-forgot a {
  color: var(--teal);
  font-size: 0.9rem;
  font-family: 'Open Sans', sans-serif;
  transition: color 0.3s;
}

.login-forgot a:hover {
  color: var(--navy);
}


/* ------------------------------------------
   SECTION 16: DASHBOARD
   ------------------------------------------ */
.dashboard-section {
  background: 
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.95) 0%, rgba(var(--navy-rgb), 0.92) 100%),
    url('../images/nairobi-city.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px 30px 80px 30px;
  min-height: 60vh;
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 15px 25px;
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.dashboard-topbar p {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  margin: 0;
}

.dashboard-topbar strong {
  color: var(--white);
}

.btn-logout {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  padding: 8px 20px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-logout:hover {
  background-color: rgba(231, 76, 60, 0.7);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.dashboard-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  border-top: 3px solid var(--teal);
}

.dashboard-card h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.dashboard-card-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 20px;
}

.dashboard-card-wide {
  grid-column: span 2;
}

.dashboard-placeholder {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
}

.dashboard-placeholder p {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  margin: 0;
}


/* ------------------------------------------
   SECTION 18: FLEET GALLERY (Services page)
   ------------------------------------------
   LESSON: This reuses the same "glass card" treatment as
   the service cards above — a translucent white panel with
   a blur behind it. Because the section sits on a photo,
   the blur lets the image glow through instead of hiding it.

   The number plate badge is the one loud element. Everything
   else stays quiet so the plate (and the car) carry the eye.
   ------------------------------------------ */
.fleet-section {
  padding: 80px 30px;
  background:
    linear-gradient(160deg, rgba(var(--navy-rgb), 0.94) 0%, rgba(var(--teal-rgb), 0.88) 100%),
    url('../images/fleet-cars.jpg');
  background-size: cover;
  background-position: center;
}

.fleet-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Heading --- */
.fleet-head {
  text-align: center;
  margin-bottom: 50px;
}

.fleet-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}

.fleet-head h2 {
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 15px;
  letter-spacing: -0.3px;
}

.fleet-head p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto;
}

/* --- Grid: ONE CARD PER VEHICLE --- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.fleet-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.fleet-card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.fleet-card:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.fleet-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.25);
}

.fleet-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.fleet-card:hover .fleet-thumb img {
  transform: scale(1.06);
}

/* Subtle plate label — quietly identifies each car without the loud yellow badge */
.fleet-plate {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background-color: rgba(10, 34, 64, 0.72);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Photo count — tells you there is more behind the card */
.fleet-count {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 20px;
}

.fleet-meta {
  padding: 20px 22px 22px 22px;
}

.fleet-model {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.fleet-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

/* --- Lightbox carousel --- */
.fleet-lb {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(var(--navy-rgb), 0.96);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 25px;
}

.fleet-lb.open {
  display: flex;
}

.fleet-lb-fig {
  max-width: 1000px;
  width: 100%;
  text-align: center;
}

.fleet-lb-fig img {
  max-width: 100%;
  max-height: 64vh;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: block;
  margin: 0 auto;
  touch-action: pan-y;
}

.fleet-lb-cap {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.fleet-lb-cap .fleet-plate {
  position: static;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.fleet-lb-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.fleet-counter {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 11px;
  border-radius: 20px;
}

/* Thumbnail strip — jump straight to a shot */
.fleet-strip {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

.fleet-strip button {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  border: 2px solid transparent;
  background: none;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}

.fleet-strip button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fleet-strip button:hover {
  opacity: 0.85;
}

.fleet-strip button[aria-current="true"] {
  opacity: 1;
  border-color: var(--green);
}

.fleet-strip button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.fleet-lb-btn {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background-color 0.2s, color 0.2s;
  z-index: 5;
}

.fleet-lb-btn:hover {
  background-color: var(--white);
  color: var(--navy);
}

.fleet-lb-btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.fleet-lb-prev { left: 25px; top: 50%; transform: translateY(-50%); }
.fleet-lb-next { right: 25px; top: 50%; transform: translateY(-50%); }
.fleet-lb-close { right: 25px; top: 25px; font-size: 1.1rem; }

/* Respect users who prefer less movement */
@media (prefers-reduced-motion: reduce) {
  .fleet-card,
  .fleet-thumb img,
  .fleet-strip button {
    transition: none;
  }
  .fleet-card:hover { transform: none; }
  .fleet-card:hover .fleet-thumb img { transform: none; }
}


/* ------------------------------------------
   SECTION 18b: FLEET TEASER (Homepage strip)
   ------------------------------------------
   A light band that restores the page's dark/light rhythm and
   lets the real car photos pop. Cards are links straight to the
   full gallery on the Services page.
   ------------------------------------------ */
.fleet-teaser-section {
  background-color: var(--white);
  padding: 80px 30px;
  text-align: center;
}

.fleet-teaser-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fleet-teaser-section .fleet-eyebrow {
  color: var(--teal);
}

.fleet-teaser-section h2 {
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.fleet-teaser-sub {
  color: #555;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 40px auto;
}

.fleet-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.fleet-teaser-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(10, 34, 64, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.fleet-teaser-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(10, 34, 64, 0.15);
}

.fleet-teaser-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #dfe5ee;
}

.fleet-teaser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.fleet-teaser-card:hover .fleet-teaser-thumb img {
  transform: scale(1.06);
}

.fleet-teaser-btn {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .fleet-teaser-card,
  .fleet-teaser-thumb img {
    transition: none;
  }
  .fleet-teaser-card:hover { transform: none; }
  .fleet-teaser-card:hover .fleet-teaser-thumb img { transform: none; }
}


/* ------------------------------------------
   SECTION 17: RESPONSIVE DESIGN (Mobile)
   ------------------------------------------ */
@media (max-width: 768px) {

  .mobile-menu-btn {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    gap: 15px;
  }

  .nav-links.active {
    display: flex;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero {
    padding: 80px 20px;
    background-attachment: scroll;
  }

  .cta {
    background-attachment: scroll;
  }

  .highlights-container {
    flex-direction: column;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .values-container {
    flex-direction: column;
  }

  .page-hero h1 {
    font-size: 1.8rem;
  }

  .story-block {
    padding: 60px 20px;
  }

  .story-block h2 {
    font-size: 1.5rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .approach-container {
    grid-template-columns: 1fr;
  }

  /* Fleet gallery: stack the vehicle cards */
  .fleet-grid {
    grid-template-columns: 1fr;
  }

  /* Fleet teaser: two across on phones keeps it compact */
  .fleet-teaser-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .fleet-teaser-section h2 {
    font-size: 1.8rem;
  }

  .fleet-head h2 {
    font-size: 1.8rem;
  }

  .fleet-section {
    padding: 60px 20px;
  }

  .fleet-lb-prev { left: 8px; }
  .fleet-lb-next { right: 8px; }

  .fleet-lb-btn {
    width: 40px;
    height: 40px;
  }

  .fleet-strip button {
    width: 52px;
    height: 40px;
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  /* Login page: stack branding and form */
  .login-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .login-branding h1 {
    font-size: 2rem;
  }

  .login-section {
    padding: 40px 20px;
  }

  /* Dashboard: stack cards */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card-wide {
    grid-column: span 1;
  }

  .dashboard-topbar {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}