/* =========================================================================
   NEW ELEGANT CARD DESIGN
   (Dark Backgrounds + Elevated White Cards)
   ========================================================================= */

/* 1. Global Dark Backgrounds */
body, 
main,
.hero,
.offer-section, 
.services-section, 
.contact-section,
.founder-section,
.meet-section,
.testimonials-modern {
  background-color: #1a1a1a !important;
  color: #f5f5f7 !important;
}

/* Ensure body has no lingering light backgrounds */
:root {
  --color-bg: #1a1a1a !important;
  --color-text: #f5f5f7 !important;
  --color-dark: #111111 !important;
}

/* 2. Typography Adjustments for Dark Mode */
.section-heading, 
.offer-header .section-heading,
.contact-info h2,
.services-content h2,
.hero-title,
.meet-headline {
  color: #ffffff !important;
}

.section-body, 
.hero-subtitle,
.contact-info p,
.services-content p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.section-label, 
.hero-badge {
  color: #d4af37 !important; /* Elegant Gold */
  border-color: rgba(212, 175, 55, 0.3) !important;
}

/* 3. The "White Cards" */
.hero-card,
.meet-card,
.offer-card,
.contact-form-wrap,
.tm-card {
  background-color: #ffffff !important;
  color: #222222 !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Card Hover Effects */
.offer-card:hover,
.tm-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7) !important;
}

/* Text inside White Cards MUST be dark */
.hero-card-title, .hero-card-sub, .hero-card-label,
.meet-card-title, .meet-card-sub,
.offer-card-title, .offer-card-desc,
.tm-quote, .tm-info span,
.form-label,
.contact-form-wrap h2, .contact-form-wrap p {
  color: #111111 !important;
}

.tm-info small {
  color: #666666 !important;
}

/* 4. Form Inputs Inside Cards */
.hero-card-input, .hero-card-select,
.meet-input, .meet-select,
.form-input, .form-select, .form-textarea {
  background-color: #f4f4f5 !important;
  border: 1px solid #e5e5e5 !important;
  color: #111111 !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.hero-card-input:focus, .hero-card-select:focus,
.meet-input:focus, .meet-select:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  background-color: #ffffff !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
  outline: none !important;
}

/* Form Buttons */
.hero-card-btn, .meet-submit-btn, .contact-form-wrap .btn-dark {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  border: none !important;
  margin-top: 1rem !important;
  transition: background-color 0.3s !important;
}

.hero-card-btn:hover, .meet-submit-btn:hover, .contact-form-wrap .btn-dark:hover {
  background-color: #d4af37 !important;
  color: #111111 !important;
}

/* 5. Services Layout Fix */
/* Since Services wasn't a card originally, let's make the list items look like elegant floating tabs */
.service-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  transition: background 0.3s, transform 0.3s !important;
}
.service-item:hover {
  background: rgba(255,255,255,0.08) !important;
  transform: translateX(10px) !important;
}
.service-name {
  color: #ffffff !important;
}
.service-desc {
  color: rgba(255,255,255,0.7) !important;
}
.service-num {
  color: #d4af37 !important;
  font-size: 2.5rem !important;
  opacity: 0.8 !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

/* 6. Contact Section Details (Left side) */
.contact-detail-label {
  color: #888888 !important;
}
.contact-detail-value {
  color: #ffffff !important;
}
.contact-detail-icon {
  background: rgba(212, 175, 55, 0.1) !important;
  color: #d4af37 !important;
  border-radius: 50% !important;
}

/* Buttons in dark areas */
.btn-outline-light, .btn-white {
  border-color: rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}
.btn-outline-light:hover, .btn-white:hover {
  background: #ffffff !important;
  color: #111111 !important;
}
.services-content .btn-dark {
  background: #d4af37 !important;
  color: #111111 !important;
  border-radius: 12px !important;
}
.services-content .btn-dark:hover {
  background: #ffffff !important;
}

/* 7. Bento Cards (Projects) Fix */
/* We don't want them to be white, they need to keep their image overlay */
.bento-card {
  background: #111111 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
  border: none !important;
}
.bento-card-title, .bento-card-cat {
  color: #ffffff !important;
}

/* 8. Make sure logos section blends in */
.logos-section--light {
  background-color: #1a1a1a !important;
}
.logos-section-header .section-heading,
.logos-section-header .logos-subtext {
  color: #ffffff !important;
}


/* =========================================================================
   FRAMED HERO OVERRIDES (Overriding previous split hero)
   ========================================================================= */
.hero {
  display: block !important;
  flex-direction: column !important;
  padding: 1rem !important; /* The white border around the image */
  height: 100vh !important;
  min-height: 800px !important;
  background-color: #ffffff !important; /* Outer frame is white */
  position: relative;
}

.hero-overlay {
  display: block !important;
  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%) !important;
  border-radius: 30px !important;
  margin: 1rem !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  position: absolute !important;
  z-index: 2 !important;
}

.hero-bg {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  right: 1rem !important;
  bottom: 1rem !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
}

.hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 30px !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: 0 !important; 
}

.hero-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.hero-left {
  width: 100% !important;
  max-width: 700px !important;
  padding-right: 0 !important;
}

.hero-title {
  font-size: clamp(3rem, 5vw, 4.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  margin-bottom: 1.5rem !important;
}

.hero-subtitle {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 2rem !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  padding: 0.5rem 1rem !important;
  border-radius: 30px !important;
  font-size: 0.85rem !important;
  margin-bottom: 2rem !important;
}

/* Pill Buttons */
.btn-pill-gold {
  background: #d99a5b !important; /* Coppery Gold */
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: opacity 0.3s !important;
}
.btn-pill-gold:hover {
  opacity: 0.9 !important;
}

.btn-pill-white {
  background: #ffffff !important;
  color: #111111 !important;
  padding: 1rem 2rem !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.3s !important;
}
.btn-pill-white:hover {
  background: #f0f0f0 !important;
}

/* Fix navbar so it sits beautifully on top of the framed image */
.navbar {
  margin-top: 1rem !important;
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 30px !important;
  width: calc(100% - 4rem) !important;
  left: 2rem !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}


.hero { background-color: #1a1a1a !important; }


/* Sizes Adjustment for Hero to fit on screen */
.hero {
  min-height: 600px !important;
}

.hero-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  margin-bottom: 1rem !important;
}

.hero-subtitle {
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.hero-badge {
  font-size: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0.4rem 0.8rem !important;
}

.btn-pill-gold, .btn-pill-white {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.95rem !important;
}

.hero-buttons {
  margin-top: 1rem !important;
}


/* Navbar Scroll Overrides to keep things white */
.navbar.scrolled .nav-link { color: #ffffff !important; }
.navbar.scrolled .nav-btn-outline { color: #ffffff !important; border-color: rgba(255,255,255,0.3) !important; }
.navbar.scrolled .nav-btn-outline:hover { background: #ffffff !important; color: #111111 !important; }

/* Keep hamburger icon white */
.nav-toggle span, .navbar.scrolled .nav-toggle span {
  background-color: #ffffff !important;
}

/* Push text and buttons down */
.hero-content {
  padding-top: 8rem !important; /* Move text lower */
}


/* Keep hamburger menu icon strictly white on scroll */
.hamburger span, .navbar.scrolled .hamburger span {
  background-color: #ffffff !important;
}


/* Make nav buttons strictly white with solid white borders */
.btn-outline-light {
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.nav-phone-icon {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important; /* ensures it looks like a button */
}

/* Ensure they stay white even on scroll */
.navbar.scrolled .btn-outline-light {
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}
.navbar.scrolled .nav-phone-icon {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}


/* Force SVGs in contact section to be gold so they are visible */
.contact-detail-icon svg {
  color: #d4af37 !important;
}


/* Missing dark backgrounds for sections */
.projects-section,
.logos-section--dark,
.logos-section--light {
  background-color: #1a1a1a !important;
  color: #f5f5f7 !important;
}

/* Ensure headings inside these sections are also white */
.projects-header-text .section-heading {
  color: #ffffff !important;
}


/* Make sure .btn-white has dark text so it is visible against its white background */
.btn-white {
  background: #ffffff !important;
  color: #111111 !important;
  border: none !important;
}
.btn-white:hover {
  background: #f0f0f0 !important;
  color: #111111 !important;
}


/* Mobile Review Section Fixes */
@media (max-width: 900px) {
  .tm-columns-wrapper {
    height: 800px !important; /* increased from 500px so more reviews are visible */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* Override founder section to have a white background and dark text */
.founder-section {
  background-color: #ffffff !important;
  color: #111111 !important;
}
.founder-section .section-heading,
.founder-section .section-label {
  color: #111111 !important;
}


/* Force paragraph in founder section to be dark, overriding global .section-body white rule */
.founder-section .section-body {
  color: #111111 !important;
}


/* Override Our Projects section to have a white background and dark text */
#our-projects {
  background-color: #ffffff !important;
  color: #111111 !important;
}
#our-projects .section-heading,
#our-projects .logos-heading,
#our-projects .logos-subtext {
  color: #111111 !important;
}


/* Override Trusted Brands section to have a white background and dark text */
#partners {
  background-color: #ffffff !important;
  color: #111111 !important;
}
#partners .section-heading,
#partners .logos-heading,
#partners .logos-subtext {
  color: #111111 !important;
}