/*
 * Postma Cares Maintenance Plan — Custom CSS (Bootstrap 5 build)
 * Brand: Navy #0d1b4b | Red #e20936 | White #ffffff
 * Typography: Oswald (headings) + Inter (body)
 */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: #1a1a2e;
  background: #fff;
}
.row.sched-row.align-items-center {
    margin: auto!important;
}  
.bg-white {
    background-color: rgb(255 255 255 / 0%) !important;
}

/* ── BRAND TOKENS ── */ 
:root {
  --red:   #e20936;
  --navy:  #0d1b4b;
  --blue-light: #bfd0f0;
  --texture-url: url('/wp-content/uploads/maintenance-plans/sec4-bg.jpg');
}

/* ── TYPOGRAPHY ── */
.oswald { font-family: 'Oswald', sans-serif !important; }
h1, h2, h3 { font-family: 'Oswald', sans-serif !important; }

.text-navy  { color: var(--navy) !important; }
.text-red   { color: var(--red)  !important; }
.text-blue-light { color: var(--blue-light) !important; }
.bg-navy    { background-color: var(--navy) !important; }
.border-red { border-color: var(--red) !important; }

/* ── SECTION SPACING ── */
.py-section { padding-top: 5rem; padding-bottom: 5rem; }

/* ── SECTION H2 ── */
.section-h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

/* ── EYEBROW LABELS ── */
.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.eyebrow-red {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}

/* ── RED DIVIDER ── */
.red-divider {
  width: 100px;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
} 

/* ── HEADER ── */ 
#site-header {
  border-bottom: 3px solid var(--red);
}
.header-logo { height: 48px; width: auto; }

.nav-link-custom {
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em; 
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link-custom:hover { color: var(--red); }

/* ── BUTTONS ── */
.btn-postma-red {
  background: var(--red)!important;
  color: #fff!important;
  border: none!important; 
  font-weight: 700!important;
  transition: opacity 0.2s!important;
}
.btn-postma-red:hover { 
    opacity: 0.88!important; 
    color: #fff!important;
background: var(--navy)!important;
}
 
.btn-outline-navy {
  border: 2px solid var(--navy)!important;
  color: var(--navy)!important;
  background: transparent!important;
  font-weight: 700!important; 
  transition: background 0.2s, color 0.2s!important;
}
.btn-outline-navy:hover { background: var(--navy)!important; color: #fff!important; }
 
/* ── HERO SECTION ── */
.hero-section {
    margin-top: 12%;    
  background: url('/wp-content/uploads/maintenance-plans/home-banner.jpg') right center / cover no-repeat;
  border-left: 8px solid var(--red);
  border-bottom: 6px solid var(--red);
  min-height: 560px;
}
.hero-fade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0) 75%);
  pointer-events: none;
}
.hero-content { max-width: 520px; }
.hero-logo { height: 112px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.hero-h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── TEXTURE BACKGROUND SECTIONS ── */
.texture-bg {
  background: var(--texture-url) center / cover no-repeat;
}
.texture-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── PCMP QUOTE ── */
.pcmp-quote {
  border-left: 4px solid var(--red)!important;
  background: rgba(226,9,54,0.12);
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  font-style: italic; 
  margin: 0;
}

/* ── COVERAGE CARDS ── */

section#coverage .row.g-4 {
    margin-top: 3%;
}

.coverage-card { transition: transform 0.3s ease; }
.coverage-card:hover { transform: translateY(-4px); }

.coverage-img-wrap { height: 200px; overflow: hidden; }
.coverage-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.coverage-card:hover .coverage-img { transform: scale(1.06); }

.coverage-overlay {
  position: absolute;
  inset: 0;
  background: rgba(226,9,54,0.72);
  transition: opacity 0.5s ease;
}
.coverage-card:hover .coverage-overlay { opacity: 0; }

.coverage-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 1rem;
  transition: opacity 0.5s ease;
}
.coverage-card:hover .coverage-label { opacity: 0; }

.coverage-item {
  color: #bfd0f0;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* ── BENEFIT CARDS (Section 5) ── */
.benefit-title {
    text-align: left!important;
}
.benefit-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.benefit-card:hover {
  transform: scale(1.04);
  background: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: 0 12px 32px rgba(226,9,54,0.2);
}
.benefit-icon { color: var(--red); transition: color 0.3s ease; }
.benefit-card:hover .benefit-icon { color: #fff !important; }
.benefit-title { transition: color 0.3s ease; }
.benefit-card:hover .benefit-title { color: #fff !important; }
.benefit-desc { transition: color 0.3s ease; }
.benefit-card:hover .benefit-desc { color: rgba(255,255,255,0.88) !important; }

/* ── WHY CARDS (Section 6) ── */
.why-card { 
  background: rgba(255,255,255,0.07);
  border-top: 4px solid var(--red);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover {
  transform: scale(1.06);
  background: var(--red);
  box-shadow: 0 12px 32px rgba(226,9,54,0.3);
}

/* ── TEAM CARDS (Section 7) ── */
section#why-postma .text-muted {
    padding-top: 3%;
} 
.team-card { cursor: pointer; }
.team-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.team-card:hover .team-card-bg { transform: scale(1.06); }

.team-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  transition: background 0.5s ease;
}
.team-card:hover .team-card-overlay { background: rgba(255,255,255,0); }

.team-card-content {
  transition: opacity 0.5s ease;
}
.team-card:hover .team-card-content { opacity: 0; }

/* ── CLOSING STATEMENT (Section 7) ── */
.closing-statement {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.6em;
  line-height: 1.4em;
  max-width: 680px;
}

/* ── FORM STYLES ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 0.2rem rgba(13,27,75,0.18);
}
.form-check-input:checked {
  background-color: var(--red);
  border-color: var(--red);
}
.bg-white .fs-4 { 
        text-align: center;
    }


/*  2000px -   */ 
 @media screen and (min-width: 125.001em) and (max-width: 999.9em) {
.container {
    max-width: 1460px;
}
}
/*  2000px -1521px   */
@media screen and (max-width: 125em) and (min-width: 95.001em) {
.hero-section {
    margin-top: 13%;
}         
.container {
    max-width: 1460px;
}
}

/*   1520px  1361px ---------*/
 @media screen and (max-width: 95.001em) and (min-width: 85.001em) {
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
}     
.hero-section {
    margin-top: 14%;
}     
.container { 
    max-width: 1300px;
}
}
/*   1360px  1201px ---------*/
 @media screen and (min-width: 75.001em) and (max-width: 85.000em) {
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
}     
.hero-section { 
    margin-top: 15%;
}      
.container {  
        max-width: 1150px;
}
}
/*   1200px  1024px ---------*/
 @media screen and (min-width: 63.939em) and (max-width: 75.000em) {
.icon-calendar-check-o:before {
    font-size: .75em;
}         
    html {
        font-size: 14px!important
    }     
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
        height: 14em;    
}     
.hero-section { 
        margin-top: 19%;
}        
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
}     
       
.container {
        max-width: 985px;
}    
}


/*   1024px  961px ---------*/
 @media screen and (min-width: 60.000em) and (max-width: 63.938em) {
    html {
        font-size: 14px!important
    }     
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
        height: 14em;    
}     
.hero-section {  
        margin-top: 19%;
}        
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
}          
.icon-calendar-check-o:before {
    font-size: .7em;
}     
.container {
max-width: 920px; 
}   
}
/*   960px  881px ---------*/
 @media screen and (min-width: 55.001em) and (max-width: 59.938em) {
.icon-calendar-check-o:before {
    font-size: .65em;
}         
    html {
        font-size: 13px!important
    }     
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
        height: 14em;    
}     
.hero-section { 
        margin-top: 19%;
}        
.coverage-body.bg-navy.p-4 {
    padding: 1rem !important;
}     
.container {
max-width: 880px; 
}   
}
/*    880px 768px ---------*/
 @media screen and (max-width: 55.00em) and (min-width: 48.00em) {
     
section#about .col-md-6 { 
    width: 100%!important;
}        
    .container {
        max-width: 760px;
    }   
}
/*   768px  640px ---------*/
 @media screen and (min-width: 39.939em) and (max-width: 55.000em) {
div#sec4_usps_padding .h-100 {
    height: 28.5em !important;
}     
.coverage-img-wrap {
    height: 180px!important;   
}     
.rounded-3 {
    margin-bottom: 7%!important;   
        height: 22em !important;
}     
#sec4_usps_padding .col {
    width: 50%!important; 
}      
.hero-fade-overlay {
    background: none;
}      
.hero-section {
        background-size: cover !important;    
        min-height: 500px!important;
        margin-top: 21%; 
      background: url('/wp-content/uploads/2026/03/home-banner-mob.jpg');    
}     
section#about .col-md-6 { 
    width: 100%;
}     
.icon-calendar-check-o:before {
    font-size: .6em;
}          
    html {
        font-size: 12px!important
    }      
    .container {
        max-width: 640px;
    }
} 
/*   640px  561px ---------*/
 @media screen and (min-width: 35.001em) and (max-width: 39.938em) {
.team-card-content.position-relative.p-4.z-1 h3.oswald.text-navy.fw-bold.fs-4.mb-2 {
    font-size: 1.8em !important;
}     
.why-card.text-center.text-white.p-4.rounded-3.h-100 p.oswald.fw-semibold.mb-0.lh-sm {
    font-size: 1.4em !important;
}     
h3.oswald.text-navy.fw-bold.fs-4.mb-2.benefit-title {
    font-size: 1.6em !important;
} 
div#sec4_usps_padding .h-100 {
    height: 28.5em !important;
}     
.coverage-img-wrap {
    height: 180px!important;   
}     
.rounded-3 {
    margin-bottom: 7%!important;   
        height: 22em !important;
}     
#sec4_usps_padding .col {
    width: 50%!important; 
}      
.hero-fade-overlay {
    background: none;
}      
.hero-section {
        background-size: cover !important;    
        min-height: 500px!important;
        margin-top: 28%;
      background: url('/wp-content/uploads/2026/03/home-banner-mob.jpg');    
}      
section#about .col-md-6 { 
    width: 100%;
}     
.icon-calendar-check-o:before {
    font-size: .6em;
}          
    html {
        font-size: 12px!important
    }         
    .container {
max-width: 550px;
    }
}
/*   560px  401px ---------*/
 @media screen and (min-width: 25.001em) and (max-width: 35.000em) {
.team-card-content.position-relative.p-4.z-1 h3.oswald.text-navy.fw-bold.fs-4.mb-2 {
    font-size: 1.8em !important;
}     
.why-card.text-center.text-white.p-4.rounded-3.h-100 p.oswald.fw-semibold.mb-0.lh-sm {
    font-size: 1.4em !important;
}     
h3.oswald.text-navy.fw-bold.fs-4.mb-2.benefit-title {
    font-size: 1.6em !important;
} 
div#sec4_usps_padding .h-100 {
    height: 28.5em !important;
}     
.coverage-img-wrap {
    height: 180px!important;   
}     
.rounded-3 {
    margin-bottom: 7%!important;   
        height: 22em !important;
}     
    #sec4_usps_padding .col {
        width: 100% !important;
    } 
.hero-fade-overlay {
    background: none;
}      
.hero-section {
        background-position: 80% 100% !important;    
        background-size: cover !important;    
        min-height: 500px!important;
        margin-top: 34%;
      background: url('/wp-content/uploads/2026/03/home-banner-mob.jpg');    
}      
section#about .col-md-6 { 
    width: 100%;
}     
.icon-calendar-check-o:before {
    font-size: .6em;
}          
    html {
        font-size: 12px!important
    }       
    .container {
        max-width: 400px;
    }  
}
/*   400px  32px ---------*/
 @media screen and (min-width: 2.001em) and (max-width: 25.000em) {
.team-card-content.position-relative.p-4.z-1 h3.oswald.text-navy.fw-bold.fs-4.mb-2 {
    font-size: 1.8em !important;
}     
.why-card.text-center.text-white.p-4.rounded-3.h-100 p.oswald.fw-semibold.mb-0.lh-sm {
    font-size: 1.4em !important;
}     
h3.oswald.text-navy.fw-bold.fs-4.mb-2.benefit-title {
    font-size: 1.6em !important;
} 
div#sec4_usps_padding .h-100 {
    height: 28.5em !important;
}     
.coverage-img-wrap {
    height: 180px!important;   
}     
.rounded-3 {
    margin-bottom: 7%!important;   
        height: 22em !important;
}     
    #sec4_usps_padding .col {
        width: 100% !important;
    } 
.hero-fade-overlay {
    background: none;
}      
.hero-section {
        background-position: 80% 100% !important;    
        background-size: cover !important;    
        min-height: 500px!important;
        margin-top: 34%;
      background: url('/wp-content/uploads/2026/03/home-banner-mob.jpg');    
}      
section#about .col-md-6 { 
    width: 100%;
}     
.icon-calendar-check-o:before {
    font-size: .6em;
}          
    html {
        font-size: 12px!important
    }         
    .container {
        max-width: 305px;  
    } 
}