/* =========================================================
   Custom Overrides — Access Sun Control
   Scope: Up to "Residential Window Tint" section completion
   Load AFTER templatemo-grad-school.css
   ========================================================= */

html, body {
  background: #172238 !important;  /* Your dark navy from other sections – or #0f0f1a for near-black */
  margin: 0;
  padding: 0;
  height: 100%;
}   
   
/* Anchor scroll landing below fixed header */
:root {
  --header-offset: 95px;
  --sec-pad: 70px;
  --sec-pad-mobile: 45px;
}

@media (max-width: 991px) {
  :root {
    --header-offset: 115px;
  }
}

section[id],
#top {
  scroll-margin-top: var(--header-offset);
}

/* Global section spacing reduction (except hero) */
.section:not(.main-banner) {
  min-height: auto !important;
  padding: var(--sec-pad) 0 !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .section:not(.main-banner) {
    padding: var(--sec-pad-mobile) 0 !important;
  }
}

/* ================================
   FEATURES STRIP (clean + stable)
   ================================ */

/* Base fixes - always apply */
section.features {
  background: transparent !important; /* or #172238 if you want solid dark */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.features-post {
  background: rgba(12, 18, 40, 0.85) !important;  /* Dark semi-transparent card bg - key fix for white disappearance */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-post:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Visible title bar - keep readable */
.features-content .content-show {
  background: rgba(12, 18, 40, 0.9) !important; /* Darker if needed */
  color: #fff !important;
  padding: 25px 30px !important;
  transition: all 0.35s ease;
}

.content-show h4 {
  color: #fff !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
}

/* Hidden content - ensure dark bg + readable text on reveal */
.content-hide {
  background: rgba(12, 18, 40, 0.92) !important; /* Solid dark on reveal - prevents white/transparent */
  color: #fff !important;
  padding: 30px !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100%;
  transition: bottom 0.4s ease;
}

.features-post:hover .content-hide {
  bottom: 0 !important;
}

.features-post:hover .content-show {
  bottom: 140px !important;  /* Adjust higher if your hide content is tall */
  opacity: 0.7 !important;   /* Slight fade on title when details show */
}

/* Text inside hide panel */
.content-hide p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.content-hide a {
  color: #f5a425 !important;
  font-weight: 700;
}

/* Desktop-only hover (your existing media query - enhance it) */
@media (min-width: 992px) {
  section.features {
    transform: translateY(-70px) !important; /* Keep your pull-up */
    z-index: 30;
  }

  .features-post {
    height: 260px; /* Taller to fit more text comfortably */
  }
}

/* Hide completely on mobile as before */
@media (max-width: 991px) {
  section.features {
    display: none !important;
  }
}

/* =========================================================
   RESIDENTIAL (Section 3)
   ========================================================= */

section.residential {
  background-image: url(../images/coming-soon-bg1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #172238;
  padding: 120px 0;
}

section.residential .section-heading {
  text-align: left;
  margin-bottom: 30px;
}

section.residential .section-heading h2:before {
  display: none;
}

section.residential .section-heading h2 {
  margin-top: 0;
  padding: 0;
  border: none;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

section.residential .section-heading p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 620px;
}

.resi-cards {
  margin-top: 25px;
}

.resi-card {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 18px;
  height: 100%;
  transition: all 0.3s;
}

.resi-card:hover {
  background: rgba(245,164,37,0.15);
  box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}

.resi-card h5 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.resi-card h5 i {
  margin-right: 10px;
  color: #f5a425;
  font-size: 18px;
}

.resi-card p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  line-height: 22px;
}

.resi-trust {
  margin-top: 18px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}

.resi-trust i {
  color: #f5a425;
  margin-right: 8px;
}

.resi-trust span {
  display: inline-block;
  margin-right: 18px;
  margin-bottom: 8px;
}

/* Residential Right Form Card */
section.residential .right-content {
  margin-left: 30px;
}

section.residential .resi-form-card {
  background: rgba(12,18,40,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-left: 30px;
}

section.residential .resi-form-card .top-content h6 {
  background: transparent;
  padding: 0 0 14px 0;
  margin: 0 0 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #f5a425;
  text-align: left;
  font-weight: 800;
}

section.residential .resi-form-card .form-control {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  height: 46px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

section.residential .resi-form-card .form-control::placeholder {
  color: rgba(255,255,255,0.75);
}

section.residential .resi-form-card .form-control:focus {
  background: rgba(255,255,255,0.14);
  border-color: rgba(245,164,37,0.7);
  box-shadow: 0 0 0 0.2rem rgba(245,164,37,0.18);
  outline: none;
}

section.residential .resi-form-card textarea.form-control {
  height: auto;
  min-height: 120px;
  padding-top: 12px;
}

section.residential .resi-form-card select option {
  color: #111;
}

@media (max-width: 767px) {
  section.residential .right-content {
    margin-top: 60px;
    margin-left: 0;
  }
  section.residential .resi-form-card {
    margin-left: 0;
    margin-top: 40px;
  }
}

/* =========================================================
   WHY CHOOSE US? (Modern grid version - no tabs)
   ========================================================= */

section.whyus-modern {
  background-image: url(../images/choosing-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #172238;
  padding: 120px 0;
}

.whyus-grid {
  margin-top: 10px;
}

.whyus-cards {
  display: grid;
  gap: 14px;
}

.whyus-card {
  background: rgba(12,18,40,0.70);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.whyus-card h4 {
  margin: 0 0 8px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
}

.whyus-card h4 i {
  color: #f5a425;
  margin-right: 10px;
}

.whyus-card p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 24px;
}

.whyus-cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.whyus-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  background: #f5a425;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 13px;
}

.whyus-btn i {
  margin-right: 8px;
}

.whyus-btn:hover {
  opacity: .92;
}

.whyus-btn-outline {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

.whyus-image {
  margin-top: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px;
}

.whyus-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

@media (min-width: 992px) {
  .whyus-image {
    margin-top: 0;
  }
}

/* Old tabs version (kept in case still used somewhere) */
section.why-us #tabs > ul {
  column-count: initial !important;
  -webkit-column-count: initial !important;
  -moz-column-count: initial !important;
  display: flex !important;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}

section.why-us #tabs > ul > li {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

section.why-us #tabs > ul > li > a {
  display: block;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none !important;
  padding: 0 0 30px 0;
  position: relative;
}

section.why-us #tabs > ul > li > a:after,
section.why-us #tabs > ul > li > a:before {
  transition: all 0.3s;
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

section.why-us #tabs > ul > li > a:after {
  width: 10px;
  height: 10px;
  background-color: #fff;
  bottom: 0;
}

section.why-us #tabs > ul > li > a:before {
  width: 25px;
  height: 25px;
  border: 2px solid transparent;
  background-color: transparent;
  bottom: -5px;
}

section.why-us #tabs > ul > li.ui-tabs-active > a {
  color: #f5a425 !important;
}

section.why-us #tabs > ul > li.ui-tabs-active > a:after {
  background-color: #f5a425;
  width: 15px;
  height: 15px;
}

section.why-us #tabs > ul > li.ui-tabs-active > a:before {
  border-color: #f5a425;
}

@media (max-width: 767px) {
  section.why-us #tabs > ul {
    gap: 18px;
  }
}

section.why-us,
section.why-us * {
  color: #fff !important;
}

/* Pull why-us closer to banner */
section.whyus-modern,
section.why-us {
  padding-top: 60px !important;
  margin-top: -40px !important;
}

@media (max-width: 991px) {
  section.whyus-modern,
  section.why-us {
    padding-top: 40px !important;
    margin-top: -80px !important;
  }
}

/* =========================================================
   AUTO TINT (Section 4)
   ========================================================= */

.auto-tint {
  background: #0f0f0f;
  color: #fff;
  padding: 80px 0;
}

section.auto-tint .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

section.auto-tint .section-heading h2 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

section.auto-tint .section-heading h2:before {
  display: none !important;
}

section.auto-tint .section-heading p,
section.auto-tint .section-heading .lead {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  line-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px;
}

/* Carousel / Gallery */
.auto-gallery .item {
  position: relative;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
}

.auto-gallery .item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,170,255,0.7) !important;
  color: white !important;
  font-size: 2rem !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  margin: 0 !important;
}

.owl-nav .owl-prev { left: 10px; }
.owl-nav .owl-next { right: 10px; }

.owl-dots {
  text-align: center;
  margin-top: 15px;
}

.owl-dots .owl-dot span {
  background: #666 !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
}

.owl-dots .owl-dot.active span {
  background: #00aaff !important;
}

@media (max-width: 991px) {
  .auto-gallery .item {
    padding-bottom: 66.67%;
  }
}

/* CTA buttons */
.auto-cta .button-primary,
.auto-cta .button-primary:hover,
.auto-cta .button-primary:focus,
.auto-cta .button-primary:active {
  color: #ffffff !important;
  background: #00aaff !important;
  border: none !important;
}

.auto-cta .button-primary:hover {
  background: #0099dd !important;
}

.auto-cta .button-primary:focus {
  box-shadow: 0 0 0 4px rgba(0,170,255,0.4);
}

.auto-cta a {
  color: #ffffff !important;
}

/* =========================================================
   COMMERCIAL
   ========================================================= */

section.commercial {
  background-image: url(../images/commercial-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #172238;
  padding: 120px 0;
  color: #fff;
}

section.commercial .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

section.commercial .section-heading h2 {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

section.commercial .section-heading h2:before {
  display: none !important;
}

section.commercial .section-heading p {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 28px;
  max-width: 620px;
}

.com-cards .com-card {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 18px;
  height: 100%;
  transition: all 0.3s;
}

.com-cards .com-card:hover {
  background: rgba(245,164,37,0.15);
  box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}

/* ... (rest of .com-card styles mirror resi-card — already consolidated above) */

section.commercial .com-form-card {
  background: rgba(12,18,40,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

section.commercial .com-form-card .form-control {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  height: 46px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* ... (form focus/placeholder same as residential) */

@media (max-width: 767px) {
  section.commercial .right-content {
    margin-top: 60px;
  }
  section.commercial .com-form-card {
    margin-top: 40px;
  }
}

/* Commercial image card variant */
.commercial-image-card {
  background: rgba(12,18,40,0.60);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  overflow: hidden;
}

.commercial-image-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

@media (min-width: 992px) {
  .commercial-image-card img {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */

section.contact {
  background: linear-gradient(rgba(10,16,36,0.92), rgba(10,16,36,0.92)),
              url(../images/choosing-bg.jpg);
  background-size: cover;
  background-position: center;
}

.contact-subtitle {
  color: rgba(255,255,255,0.80);
  margin-top: 10px;
  font-size: 15px;
}

.contact-card,
.map-card {
  background: rgba(12,18,40,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  height: 100%;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 13px;
  text-decoration: none !important;
}

.contact-btn-primary {
  background: #f5a425;
  color: #fff !important;
}

.contact-btn-outline {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff !important;
}

.contact-submit {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: #f5a425;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 14px 18px;
}

.contact-submit:hover {
  opacity: 0.93;
}

/* Form inputs consistent */
section.contact .form-control {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
}

/* ... focus/placeholder same as other forms */

/* Map */
.map-frame {
  border-radius: 14px;
  overflow: hidden;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.10);
}

@media (max-width: 991px) {
  .map-frame {
    height: 360px;
  }
}

/* =========================================================
   FORM VALIDATION
   ========================================================= */

.is-invalid {
  border-color: #dc3545 !important;
}

.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25);
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 85%;
  margin-top: 0.25rem;
}

/* =========================================================
   MOBILE HERO OVERLAY
   ========================================================= */

.mobile-hero-text {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  padding: 20px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
}

.mobile-hero-text h2 {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
  line-height: 1.1;
}

.mobile-hero-text p {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
  color: rgba(255,255,255,0.95);
}

/* ================================
   FEATURES STRIP (clean + stable)
   ================================ */

/* Base fixes - always apply */
section.features {
  background: transparent !important; /* or #172238 if you want solid dark */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.features-post {
  background: rgba(12, 18, 40, 0.85) !important;  /* Dark semi-transparent card bg - key fix for white disappearance */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-post:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Visible title bar - keep readable */
.features-content .content-show {
  background: rgba(12, 18, 40, 0.9) !important; /* Darker if needed */
  color: #fff !important;
  padding: 25px 30px !important;
  transition: all 0.35s ease;
}

.content-show h4 {
  color: #fff !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
}

/* Hidden content - ensure dark bg + readable text on reveal */
.content-hide {
  background: rgba(12, 18, 40, 0.92) !important; /* Solid dark on reveal - prevents white/transparent */
  color: #fff !important;
  padding: 30px !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100%;
  transition: bottom 0.4s ease;
}

.features-post:hover .content-hide {
  bottom: 0 !important;
}

.features-post:hover .content-show {
  bottom: 140px !important;  /* Adjust higher if your hide content is tall */
  opacity: 0.7 !important;   /* Slight fade on title when details show */
}

/* Text inside hide panel */
.content-hide p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.content-hide a {
  color: #f5a425 !important;
  font-weight: 700;
}

/* Desktop-only hover (your existing media query - enhance it) */
@media (min-width: 992px) {
  section.features {
    transform: translateY(-70px) !important; /* Keep your pull-up */
    z-index: 30;
  }

  .features-post {
    height: 260px; /* Taller to fit more text comfortably */
  }
}

/* Hide completely on mobile as before */
@media (max-width: 991px) {
  section.features {
    display: none !important;
  }
}

section.main-banner {
  position: relative;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: none !important;
}

#bg-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 1;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transform: translateZ(0); /* Forces hardware acceleration, helps sub-pixel issues */
}

.video-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(22, 34, 57, 0.85) !important; /* your dark overlay color – adjust opacity if needed */
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop hero overlay text – larger, bolder, centered */
.desktop-hero-text {
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.7); /* Stronger shadow for readability on video */
  padding: 0 15px;
  max-width: 800px;
  margin: 0 auto;
}

.desktop-hero-text h2 {
  font-size: 3.8rem;          /* Big and impactful on desktop */
  font-weight: 900;
  margin: 0 0 12px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
}

.desktop-hero-text p {
  font-size: 2.1rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255,255,255,0.95);
  letter-spacing: 1px;
}

/* Optional: Subtle animation on load (feels premium) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.desktop-hero-text {
  animation: fadeInUp 1.2s ease-out forwards;
}

/* Mobile already has its own styling – no changes needed there */

/* =========================================
   WHY US (section2) — premium layered background
   ========================================= */
section#section2.whyus-modern{
  position: relative;
  overflow: hidden;

  /* base color fallback */
  background-color: #0e1630;

  /* layered background:
     1) dark gradient
     2) soft diagonal highlight
     3) subtle pattern grid */
  background-image:
    radial-gradient(1200px 600px at 15% 20%, rgba(245,164,37,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(0,170,255,0.14), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 55%),
    linear-gradient(180deg, rgba(8,12,28,0.92), rgba(12,18,40,0.92));

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* optional subtle texture pattern overlay */
section#section2.whyus-modern::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;

  /* a very subtle dot-grid pattern */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* soft “glow blobs” for depth */
section#section2.whyus-modern::after{
  content: "";
  position: absolute;
  inset: -120px;
  pointer-events: none;

  background:
    radial-gradient(500px 340px at 20% 55%, rgba(245,164,37,0.22), transparent 70%),
    radial-gradient(520px 360px at 80% 65%, rgba(0,170,255,0.18), transparent 72%);

  filter: blur(10px);
  opacity: 0.75;
}

/* ensure your content stays above overlays */
section#section2.whyus-modern .container{
  position: relative;
  z-index: 2;
}

/* tighten the image card to match the premium bg */
section#section2 .whyus-image{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

/* slightly boost card contrast on the new background */
section#section2 .whyus-card{
  background: rgba(12,18,40,0.72);
  border: 1px solid rgba(255,255,255,0.12);
}

/* =========================================
   FORCE HEADER / NAV TO TOP LAYER
   ========================================= */

/* Main header container - make it fixed (if not already) and highest z-index */
.main-header {
  position: fixed !important;          /* Ensure it's fixed/stays on top during scroll */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;            /* Very high value - beats almost everything */
  background: #172238;                 /* Or your header bg color – prevents transparency issues */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Optional: subtle shadow for separation */
}

/* Nav menu inside header - ensure it's also high */
.main-nav,
#menu {
  z-index: 10000 !important;           /* Slightly higher than header if needed */
  position: relative;
}

/* Lower the services strip z-index so header is above it */
.services-strip {
  z-index: 10 !important;              /* Low enough to sit below fixed header */
  margin-top: -60px;                   /* Reduce pull-up slightly if overlap feels too aggressive */
}

/* If any remnants of old .features section exist */
section.features,
.services-grid,
.service-card {
  z-index: 10 !important;              /* Safety net */
}

/* Optional: If menu dropdowns/submenus exist and get hidden */
.main-menu ul,
.main-menu li ul {
  z-index: 10001 !important;           /* Ensure dropdowns pop over everything */
}

/* Contact section text readability boosts */
section.contact,
section.contact * {
  color: #ffffff !important;           /* Pure white instead of rgba(255,255,255,0.85) */
}

.contact-subtitle,
.contact-card-top p,
.map-card-top p,
.contact-meta strong,
.contact-meta div,
.contact-footnote,
.contact-card p {
  color: #f0f4ff !important;           /* Very light off-white for better contrast on dark bg */
  opacity: 1 !important;
}

.contact-meta,
.meta-row {
  color: #e8f0ff !important;           /* Slightly brighter for small text/icons */
}

.meta-row strong {
  color: #ffffff !important;
  font-weight: 700;
}

.meta-row i {
  color: #f5a425 !important;           /* Accent color pops more */
}

/* Form fields - higher contrast */
section.contact .form-control {
  background: rgba(255,255,255,0.12) !important;  /* Slightly brighter bg for inputs */
  border: 1px solid rgba(255,255,255,0.30) !important; /* Stronger border */
  color: #ffffff !important;
  font-weight: 500;
}

section.contact .form-control::placeholder {
  color: rgba(255,255,255,0.70) !important; /* Brighter placeholders – was likely ~0.5 or lower */
  opacity: 1 !important;
  font-weight: 400;
}

section.contact .form-control:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: #f5a425 !important;
  box-shadow: 0 0 0 0.25rem rgba(245,164,37,0.25) !important;
}

/* Select dropdown text (options) */
section.contact select.form-control option {
  background: #0c1228 !important;     /* Dark bg for dropdown list */
  color: #ffffff !important;
}

section.contact .section-heading h2 {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6); /* Subtle shadow for depth/readability */
}

.contact-card-top h4,
.map-card-top h4 {
  color: #f5a425 !important;           /* Use accent color for card titles */
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.contact-btn,
.contact-submit,
.button {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.contact-btn-primary,
.contact-submit {
  background: #f5a425 !important;
  border: none !important;
}

/* Fix select/dropdown to match other form inputs perfectly */
section.contact select.form-control {
  height: 46px !important;                  /* Exact match to your inputs */
  padding: 10px 14px !important;            /* Same padding */
  font-size: 1rem !important;               /* Or match your input font-size (usually 16px/1rem) */
  line-height: 1.5 !important;              /* Consistent with Bootstrap defaults */
  border-radius: 8px !important;            /* Your existing input radius */
  appearance: none !important;              /* Remove native browser arrow/styling */
  background: rgba(255,255,255,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23f5a425' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px 12px !important;
  /* Custom arrow using your accent color #f5a425 – adjust fill if needed */
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Ensure dropdown options match theme (dark bg, white text) */
section.contact select.form-control option {
  background: #0c1228 !important;           /* Dark like your cards */
  color: #ffffff !important;
  font-size: 1rem !important;               /* Match input font */
  padding: 8px 12px !important;             /* Better spacing in list */
}

/* Optional: If select still looks slightly off on focus/hover */
section.contact select.form-control:focus {
  background: rgba(255,255,255,0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23f5a425' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px 12px !important;
  border-color: rgba(245,164,37,0.7) !important;
}

/* Safety: Override any template/Bootstrap large padding on select */
section.contact .form-control {
  height: 46px !important;
  min-height: unset !important;             /* Prevent auto-expansion */
  box-sizing: border-box !important;        /* Ensure padding doesn't add extra height */
}

#form-message {
  padding: 15px;
  border-radius: 8px;
  font-weight: 500;
}

.alert-success {
  background: rgba(40, 167, 69, 0.2);
  color: #d4edda;
  border: 1px solid rgba(40, 167, 69, 0.5);
}

.alert-danger {
  background: rgba(220, 53, 69, 0.2);
  color: #f8d7da;
  border: 1px solid rgba(220, 53, 69, 0.5);
}

/* Make textarea taller and match theme better */
section.contact textarea.form-control {
  height: auto !important;              /* Let it expand naturally */
  min-height: 140px !important;         /* Or 160px / 180px if you want even more space */
  padding: 12px 14px !important;        /* Slightly more top/bottom padding for comfort */
  resize: vertical !important;          /* Allow user to drag-resize vertically if needed */
  line-height: 1.6 !important;          /* Better readability when typing multi-line */
  font-size: 1rem !important;           /* Match other inputs */
}

/* Optional: Make it grow a bit when focused (nice UX touch) */
section.contact textarea.form-control:focus {
  min-height: 180px !important;         /* Expands on focus – feels more inviting */
  transition: min-height 0.3s ease;
}

/* Auto Gallery – Uniform, cool grid */
.auto-gallery-grid {
  margin-top: 20px; /* Optional spacing above grid */
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  aspect-ratio: 4 / 3;          /* Most car photos look great here – try 3 / 2 or 16 / 9 if yours are wider */
  background: #0f0f1a;          /* Dark fallback if image loads slowly */
}

.gallery-item:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 2;
}

.gallery-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Crops to fill without distortion */
  object-position: center;
  display: block;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.08);       /* Gentle zoom on hover – feels premium */
}

/* Mobile adjustments – taller cards if needed */
@media (max-width: 767px) {
  .gallery-item {
    aspect-ratio: 4 / 3;        /* Keep same ratio or change to 3 / 4 for more vertical feel */
  }
}

/* Make "Why Choose Us?" heading match Residential/Auto/Commercial/Contact */
section.whyus-modern .section-heading,
section.why-us .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

section.whyus-modern .section-heading h2,
section.why-us .section-heading h2 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px !important;              /* Exact match to other sections */
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-transform: none !important;
}

section.whyus-modern .section-heading h2:before,
section.why-us .section-heading h2:before {
  display: none !important;                /* Removes template's vertical line */
}

/* Optional: Subtitle/lead paragraph style (matches Residential/Auto/etc.) */
section.whyus-modern .section-heading p,
section.why-us .section-heading p,
section.whyus-modern .section-heading .lead,
section.why-us .section-heading .lead {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  line-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px !important;
}

section.whyus-modern .section-heading h2,
section.why-us .section-heading h2 {
  position: relative;
  padding-bottom: 12px;
}

section.whyus-modern .section-heading h2:after,
section.why-us .section-heading h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 4px;
  background: #f5a425;
  border-radius: 2px;
}

/* Make Contact Us heading match all other main sections */
section.contact .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

section.contact .section-heading h2 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-transform: none !important;
}

section.contact .section-heading h2:before {
  display: none !important;           /* Removes any template vertical line */
}

/* Subtitle / lead paragraph – matches Residential/Auto/etc. */
section.contact .section-heading p,
section.contact .section-heading .contact-subtitle,
section.contact .section-heading .lead {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  line-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px !important;
}


section.contact .section-heading h2 {
  position: relative;
  padding-bottom: 12px;
}

section.contact .section-heading h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 4px;
  background: #f5a425;
  border-radius: 2px;
}

/* Testimonials Section – Cool, consistent review cards */
section.testimonials {
  background: linear-gradient(rgba(10,16,36,0.92), rgba(10,16,36,0.92)), url(../images/choosing-bg.jpg); /* Match contact bg or use your own */
  background-size: cover;
  background-position: center;
  padding: 120px 0;
  color: #fff;
}

/* Heading – match other sections */
section.testimonials .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

section.testimonials .section-heading h2 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}

section.testimonials .section-heading h2:before {
  display: none !important;
}

section.testimonials .section-heading p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  line-height: 28px !important;
  margin: 0 !important;
  max-width: 620px !important;
}

/* Review Cards Grid */
.testimonials-grid {
  margin-top: 20px;
}

.testimonial-card {
  background: rgba(12,18,40,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border-color: rgba(245,164,37,0.3);
}

.stars {
  color: #f5a425;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.review-text {
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 20px;
  font-style: italic;
}

.review-author {
  color: #ffffff;
  font-size: 0.95rem;
}

.review-author strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.review-author span {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  section.testimonials {
    padding: 80px 0;
  }
}

.commercial-section {
  padding: 60px 0;
  background: #f8f9fa; /* Light background; adjust to match site */
}

.commercial-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.commercial-section h3 {
  margin-top: 40px;
  color: #0056b3; /* Example accent color */
}

ul {
  list-style-type: disc;
  padding-left: 25px;
  margin: 20px 0;
}

details.roller-shades-accordion {
  margin: 30px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

summary {
  padding: 15px 20px;
  background: #e9ecef;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2em;
}

.accordion-content {
  padding: 20px;
  background: white;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.project-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.cta-wrapper {
  text-align: center;
  margin-top: 40px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.btn.primary { background: #007bff; color: white; }
.btn.secondary { background: #6c757d; color: white; }

/* Marine section - dark theme like auto */
.section.marine-tint {
  background: #000000;          /* or #0f0f0f, #111, etc. – match your auto background */
  color: #ffffff;
  padding: 80px 0;              /* adjust vertical padding to match auto */
}

.section.marine-tint .section-heading h2,
.section.marine-tint .section-heading p.lead {
  color: #ffffff;
}

.section.marine-tint .benefit-list li i {
  color: #00aaff;               /* accent color – adjust to your theme (or match auto) */
}

.section.marine-tint .button-primary {
  background: #00aaff;          /* example – use your primary button color */
  border-color: #00aaff;
}

.section.marine-tint .button-primary:hover {
  background: #0088cc;
}

/* If gallery needs contrast adjustments */
.marine-gallery-grid .gallery-item img {
  border: 1px solid #333;
  border-radius: 4px;
}

/* Marine header – exact match to Auto */
section.marine-tint .section-heading {
  text-align: left !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

section.marine-tint .section-heading h2 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}

section.marine-tint .section-heading h2:before {
  display: none !important;  /* Kills any leftover template vertical line */
}

section.marine-tint .section-heading p,
section.marine-tint .section-heading .lead {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  line-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px;
}

/* Optional: Add accent underline like other sections (if you want) */
section.marine-tint .section-heading h2 {
  position: relative;
  padding-bottom: 12px;
}

section.marine-tint .section-heading h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 4px;
  background: #f5a425;
  border-radius: 2px;
}

.desktop-hero-text .hero-sub {
  font-size: 1.7rem;
  line-height: 1.5;
  margin-top: 1.1rem;
  max-width: 90%;
/*  white-space: nowrap;      */       /* Force single line */ 
  overflow: hidden;
  text-overflow: ellipsis;         /* Optional: ellipsis if insanely wide, but unlikely */
  letter-spacing: 0.8px;
}

/* Logo sizing – keeps it proportional and contained */
.main-header .logo img {
  max-width: 240px;          /* Adjust this value to fit nicely – try 200–280px */
  height: auto;
  width: 100%;               /* Makes it responsive within its container */
  display: block;
}

/* Optional: tighter control on mobile */
@media (max-width: 991px) {
  .main-header .logo img {
    max-width: 180px;        /* Smaller on tablets/phones */
  }
}

/* Push logo down slightly from top of header */
.main-header .logo {
  margin-top: 12px;          /* Start with 10–15px – adjust to taste */
  padding-top: 0;            /* Reset any unwanted padding */
}

/* Optional: Also center vertically if it feels off */
.main-header .logo img {
  display: block;
  margin: 0 auto;            /* Centers horizontally if needed */
}

/* Mobile hero subheader – better wrapping & spacing */
.mobile-hero-text .hero-sub {
  font-size: 1.25rem;           /* Slightly smaller for mobile readability */
  line-height: 1.5;             /* Good vertical breathing room */
  margin-top: 1rem;
  text-align: center;
  white-space: pre-line;        /* Respects manual line breaks */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Force services on one line if possible, or wrap cleanly */
.mobile-hero-text .services-list {
  display: block;               /* Forces it to its own line */
  margin: 0.5rem 0;             /* Space above/below */
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Prevent awkward breaks around bullets */
.mobile-hero-text .hero-sub br + span {
  display: inline-block;
}

/* Extra safety for very small screens */
@media (max-width: 576px) {
  .mobile-hero-text .hero-sub {
    font-size: 1.15rem;
    line-height: 1.6;
  }
  
  .mobile-hero-text .services-list {
    font-size: 1.05rem;
  }
}

/* Prevent phone number from breaking awkwardly */
.mobile-hero-text .phone-line {
  white-space: nowrap;          /* Forces the whole phrase to stay on one line */
  display: inline-block;        /* Allows it to wrap as a unit if needed */
  margin-top: 0.5rem;           /* Slight breathing room from the line above */
}

/* Ensure overall subheader wraps nicely */
.mobile-hero-text .hero-sub {
  line-height: 1.55;            /* A bit more vertical space between wrapped lines */
  word-break: normal;           /* Avoid mid-word breaks */
}

/* Extra safety on very narrow screens */
@media (max-width: 400px) {
  .mobile-hero-text .hero-sub {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}