@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Merriweather:wght@700&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --mc-navy:#00112a;
  --mc-navy-2:#001a39;
  --mc-gold:#efa92f;
  --mc-white:#ffffff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:'Montserrat',Arial,sans-serif;
  background:#1c1c1c;
}

/* =========================================
   HEADER
========================================= */
.mc-header{
  width:100%;
  background:#00112b;
  border-bottom:1px solid rgba(239,169,47,.22);
}

.mc-header__inner{
  width:100%;
  min-height:156px;
  margin:0;
  padding:18px clamp(24px,3vw,58px) 0;
  display:grid;
  grid-template-columns:430px minmax(0,1fr);
  column-gap:34px;
  align-items:center;
}

.mc-logo{
  display:block;
  width:400px;
  max-width:100%;
  align-self:center;
  transform:translateY(-3px);
}

.mc-logo img{
  display:block;
  width:100%;
  height:auto;
}

.mc-header__right{
  width:min(100%,860px);
  height:100%;
  justify-self:end;
  display:grid;
  grid-template-rows:50px 1fr;
  align-items:start;
}

.mc-donate{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  padding:11px 33px 10px;
  background:var(--mc-gold);
  color:#07142a;
  border-radius:1px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1;
  letter-spacing:.8px;
  text-decoration:none;
}

.mc-donate svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Navigation */
.mc-nav{
  width:100%;
  height:88px;
  align-self:end;
  display:grid;
  grid-template-columns:repeat(6,minmax(74px,1fr));
  align-items:end;
  gap:12px;
  margin:0;
  padding:4px 8px 8px;
  border-bottom:none!important;
  overflow:visible;
}

.mc-nav__item{
  position:relative;
  width:100%;
  height:88px;
  min-width:0;
  margin:0;
  padding:7px 2px 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  color:var(--mc-white);
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  border-bottom:none!important;
  transition:.2s ease;
}

.mc-nav__item img{
  display:block;
  width:34px;
  height:34px;
  max-width:34px;
  margin:0 0 2px;
  object-fit:contain;
  object-position:center;
  flex:0 0 34px;
}

.mc-nav__item span{
  display:block;
  margin:0;
  padding:0;
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size: 16px;
  line-height:1.15;
  font-weight:400;
  letter-spacing: 0.3px;
  text-transform:uppercase;
  white-space:nowrap;
}

.mc-nav__item::after{
  display:none!important;
  content:none!important;
}

.mc-nav__item:hover span{color:#e0a138}
.mc-nav__item:hover img{transform:translateY(-2px)}

.mc-menu-btn{display:none}

@media(max-width:1200px){
  .mc-header__inner{
    min-height:138px;
    padding-left:24px;
    padding-right:24px;
    grid-template-columns:340px minmax(0,1fr);
    column-gap:18px;
  }
  .mc-logo{width:330px}
  .mc-header__right{width:100%}
  .mc-nav{
    grid-template-columns:repeat(6,minmax(62px,1fr));
    gap:5px;
  }
  .mc-nav__item img{
    width:30px;
    height:30px;
    max-width:30px;
    flex-basis:30px;
  }
  .mc-nav__item span{font-size:11px}
}

@media(max-width:820px){
  .mc-header__inner{
    min-height:auto;
    padding:10px 16px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .mc-logo{width:280px;transform:none}
  .mc-menu-btn{
    display:flex;
    width:44px;
    height:40px;
    padding:9px;
    border:1px solid var(--mc-gold);
    border-radius:4px;
    background:transparent;
    flex-direction:column;
    justify-content:space-between;
  }
  .mc-menu-btn span{
    width:100%;
    height:2px;
    background:var(--mc-gold);
  }
  .mc-header__right{
    display:none;
    width:100%;
    height:auto;
    margin-top:10px;
    grid-template-rows:auto auto;
  }
  .mc-header__right.is-open{display:grid}
  .mc-donate{
    justify-self:start;
    margin:6px 0 12px;
  }
  .mc-nav{
    width:100%;
    height:auto;
    padding:12px 0;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    border-bottom:0;
  }
  .mc-nav__item{
    min-height:76px;
    height:auto;
    padding:9px 5px 14px;
    background:rgba(255,255,255,.03);
    border-radius:4px;
  }
  .mc-nav__item span{font-size:11px}
}

@media(max-width:480px){
  .mc-logo{width:235px}
  .mc-nav{grid-template-columns:repeat(2,1fr)}
}

/* =========================================
   HERO
========================================= */
.mc-main{
  background:#00112b;
  padding:0 0 40px;
}

.mc-hero-section{width:100%}

.mc-hero{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:405px;
  border-top:1px solid rgba(239,169,47,.25);
}

.mc-hero__content{
  position:relative;
  z-index:2;
  padding:28px 34px 26px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#00112b;
  color:#fff;
}

.mc-hero__content h1{
  margin:0 0 16px;
  font-size: 59px;
  line-height:.95;
  font-weight:700;
  letter-spacing:-2px;
}

.mc-hero__content h1 span{color:var(--mc-gold)}

.mc-hero__content p{
  max-width:440px;
  margin:0 0 24px;
  color:#f5f7fb;
  font-size:18px;
  line-height:1.45;
}

.mc-hero__actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.mc-btn{
  min-height:48px;
  padding:13px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:2px;
  font-family:'Bebas Neue',sans-serif;
  font-size:17px;
  line-height:1;
  font-weight:500;
  letter-spacing:.5px;
  text-decoration:none;
}

.mc-btn--gold{
  background:var(--mc-gold);
  color:#07142a;
  border:2px solid var(--mc-gold);
}

.mc-btn--outline{
  color:var(--mc-gold);
  border:2px solid var(--mc-gold);
  background:transparent;
}

.mc-btn--outline svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mc-hero__image{
  position:relative;
  z-index:1;
  min-height:405px;
  overflow:hidden;
  background:#10233f;
}

.mc-hero__image img{
  display:block;
  width:100%;
  height:100%;
  min-height:405px;
  object-fit:cover;
  object-position:center;
}

.mc-hero__image::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:20%;
  background:linear-gradient(
    90deg,
    #00112b 0%,
    rgba(0,17,43,.85) 25%,
    rgba(0,17,43,.35) 65%,
    transparent 100%
  );
  pointer-events:none;
}

/* =========================================
   HERO CONTACT BAR
========================================= */
.mc-contact-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:12px 22px 10px;
  background:#00112a;
  border-top:1px solid rgba(239,169,47,.7);
  border-bottom:1px solid rgba(239,169,47,.2);
}

.mc-contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 25px;
  border-right:1px solid rgb(151 112 52);
}

.mc-contact-item:last-child{border-right:0}

.mc-contact-icon{
  width:31px;
  height:32px;
  flex:0 0 34px;
}

.mc-contact-icon svg{
  position:relative;
  top:-3px;
  width:27px;
  height:28px;
  fill:none;
  stroke:var(--mc-gold);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mc-contact-text small{
  display:block;
  margin-bottom:4px;
  color:var(--mc-gold);
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:.2px;
}

.mc-contact-text strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.25;
  font-weight:500;
}

.mc-visit-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mc-visit-icon svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:#e5a532;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.mc-visit-icon .location-pin{
  fill:#e5a532;
  stroke:#e5a532;
}

.mc-visit-icon .pin-dot{
  fill:#00152f;
  stroke:#00152f;
}

@media(max-width:1200px){
  .mc-hero__content h1{font-size:52px}
  .mc-hero__content p{font-size:17px}
  .mc-contact-text strong{font-size:14px}
}

@media(max-width:980px){
  .mc-hero{grid-template-columns:1fr}
  .mc-hero__image{min-height:360px}
  .mc-contact-bar{grid-template-columns:1fr 1fr}
  .mc-contact-item:nth-child(2){border-right:0}
  .mc-contact-item:nth-child(1),
  .mc-contact-item:nth-child(2){
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
}

@media(max-width:640px){
  .mc-main{padding-bottom:20px}
  .mc-hero__content{padding:24px 20px}
  .mc-hero__content h1{
    font-size:42px;
    letter-spacing:-1.2px;
  }
  .mc-hero__content p{
    max-width:none;
    font-size:16px;
  }
  .mc-btn{width:100%}
  .mc-hero__image{min-height:260px}
  .mc-contact-bar{
    grid-template-columns:1fr;
    padding:10px 14px;
  }
  .mc-contact-item{
    margin:0!important;
    padding:12px 4px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .mc-contact-item:last-child{border-bottom:0}
}

/* =========================================
   WHY M CARE365
========================================= */
.why-mcare365{
  width:100%;
  margin:0;
  padding: 27px 0 36px;
  background:#f8f8f7;
  color:#07182f;
  font-family:'Montserrat',Arial,sans-serif;
}

.why-container{
  width:100%;
  margin:0;
  padding: 12px 3% 5px;
}

.why-title{
  width:100%;
  margin:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.why-title h2{
  margin:0;
  color:#021452;
  font-family:'Montserrat',Arial,sans-serif;
  font-size: 39px;
  line-height:1.1;
  font-weight:600;
  white-space:nowrap;
}

.title-line{
  width:300px;
  height:1px;
  background:#dca037;
}

.why-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.why-item{
  position:relative;
  width:100%;
  min-width:0;
  min-height: 204px;
  padding: 99px 18px 21px;
  background:#fff;
  border: 1px solid #e2e2e2cc;
  border-radius:18px;
  text-align:center;
}

.why-item::after{
  display:none!important;
  content:none!important;
}

.why-icon{
  position:absolute;
  top: -48px;
  left:50%;
  width:132px;
  height:132px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  z-index:2;
}

.why-icon img{
  display:block;
  width: 117px;
  height: 117px;
  max-width:none;
  object-fit:contain;
  object-position:center;
}

.why-item h3{
  margin: 0 0 8px;
  color:#07182f;
  font-family:'Montserrat',Arial,sans-serif;
  font-size: 17px;
  line-height:1.22;
  font-weight:700;
}

.why-item p{
  margin:0;
  color:#17253c;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:15px;
  line-height:1.35;
  font-weight:400;
}

.why-button-wrap{
  width:100%;
  margin-top:30px;
  text-align:center;
}

.why-btn{
  width: 278px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#001a3a!important;
  color:#fff!important;
  text-decoration:none;
}

.why-btn span{
  padding:5px 8px;
  /* border:1px solid #078dd4; */
  font-family:'Bebas Neue',sans-serif;
  font-size: 18px;
  line-height:1;
  font-weight:400;
  letter-spacing:.3px;
}

.why-btn b{
  font-size:22px;
  line-height:1;
  font-weight:400;
}

@media(max-width:1000px){
  .why-container{
    padding-left:30px;
    padding-right:30px;
  }
  .why-grid{
    grid-template-columns:repeat(2,1fr);
    gap:75px 20px;
  }
}

@media(max-width:600px){
  .why-container{padding:20px 15px}
  .why-title{
    margin-bottom:70px;
    gap:10px;
  }
  .why-title h2{font-size:24px}
  .title-line{width:45px}
  .why-grid{
    grid-template-columns:1fr;
    gap:75px;
  }
  .why-item{
    min-height:215px;
    padding-left:10px;
    padding-right:10px;
  }
  .why-button-wrap{margin-top:25px}
  .why-btn{
    width:100%;
    max-width:300px;
  }
}

/* =========================================
   PROGRAMS & SERVICES
========================================= */

.programs-section{
    width:100%;
    margin:0;
    background: #001941;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    box-sizing:border-box;
    padding: 34px 10px 37px;
}

/* =========================================
   CONTAINER
========================================= */

.programs-container{
    width:100%;

    margin:0;

    padding:0 38px;

    box-sizing:border-box;
}

/* =========================================
   SECTION TITLE
========================================= */

.programs-title{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin: 0 0 27px;
}

.programs-title h2{
    margin:0;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 30px;
    line-height:1;
    font-weight:700;
    letter-spacing: 2px;
    white-space:nowrap;
}

.programs-title span{
    flex:1;

    height:1px;

    background:#dca037;
}

/* =========================================
   GRID
========================================= */

.programs-grid{
    width:100%;

    display:grid;

    grid-template-columns:repeat(6, minmax(0, 1fr));

    gap:9px;

    box-sizing:border-box;
}

/* =========================================
   CARD
========================================= */

.program-card{
    width:100%;
    min-width:0;
    min-height:260px;
    padding:10px 10px 14px;
    box-sizing:border-box;
    /* border:1px solid rgba(104,139,174,.58); */
    /* border-radius:5px; */
    /* background:
        linear-gradient(
            180deg,
            rgba(4,34,67,.48) 0%,
            rgba(0,18,42,.20) 100%
        ); */
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:border-color .2s ease, transform .2s ease;
}

/* =========================================
   ICON IMAGE
========================================= */

.program-icon{
    width:74px;
    height:70px;

    margin:0 auto 4px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.program-icon img{
    display:block;

    width:64px;
    height:64px;

    object-fit:contain;

    object-position:center;

    max-width:100%;
}

/* =========================================
   HEADING
========================================= */

.program-card h3{
    width:100%;
    min-height:42px;
    margin:0;
    padding:0 4px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 15px;
    line-height:1.12;
    font-weight: 600;
    text-align:center;
}

/* =========================================
   GOLD DIVIDER
========================================= */

.program-line{
    width:90%;
    height:1px;
    margin: 6px auto 13px;
    background: #FFFFFF;
    flex-shrink:0;
}

/* =========================================
   DESCRIPTION
========================================= */

.program-card p{
    width:100%;
    margin:0;
    padding:0 12px;
    box-sizing:border-box;
    color:#f3f5f8;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 12px;
    line-height:1.5;
    font-weight:400;
    text-align:center;
    width: 73%;
}

/* =========================================
   OPTIONAL HOVER
========================================= */

.program-card:hover{
    border-color:rgba(239,169,47,.65);

    transform:translateY(-2px);
}

/* =========================================
   1300PX
========================================= */

@media(max-width:1300px){

    .programs-container{
        padding-left: 18px;
        padding-right: 18px;
    }

    .program-card p{
        padding-left:7px;
        padding-right:7px;
    }

}

/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

    .programs-container{
        padding-left:24px;
        padding-right:24px;
    }

    .programs-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));

        gap:12px;
    }

    .program-card{
        min-height:250px;
    }

}

/* =========================================
   SMALL TABLET
========================================= */

@media(max-width:800px){

    .programs-title{
        gap:15px;
    }

    .programs-title h2{
        font-size:20px;

        letter-spacing:2px;
    }

    .programs-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:550px){

    .programs-section{
        padding:18px 0;
    }

    .programs-container{
        padding-left:15px;
        padding-right:15px;
    }

    .programs-title{
        gap:10px;

        margin-bottom:15px;
    }

    .programs-title h2{
        font-size:17px;

        letter-spacing:1px;
    }

    .programs-title span{
        min-width:20px;
    }

    .programs-grid{
        grid-template-columns:1fr;

        gap:12px;
    }

    .program-card{
        min-height:auto;

        padding:16px 15px 20px;
    }

    .program-icon{
        width:76px;
        height:76px;
    }

    .program-icon img{
        width:68px;
        height:68px;
    }

    .program-card p{
        padding:0 10px;
    }

}
/* =========================================
   HEALTH / GETTING STARTED SECTION
========================================= */

.health-start-section{
    width:100%;
    margin:0;
    padding:0;

    background:#f8f8f7;

    font-family:'Montserrat', Arial, sans-serif;
    color:#07182f;

    box-sizing:border-box;

    border-top:1px solid #e2e2e2;
}

/* =========================================
   MAIN 3 COLUMN LAYOUT
========================================= */

.health-start-container{
    width:100%;
    min-height: 235px;
    display:grid;

    /* Left / Steps / Image */
    grid-template-columns: 44% 34% 22%;
    align-items:stretch;
    box-sizing:border-box;
    height: 310px;
}

/* =========================================
   COMMON HEADINGS
========================================= */

.health-matters h2,
.getting-started h2{
    margin:0 0 12px;

    font-family:'Montserrat', Arial, sans-serif;

    font-size:22px;
    line-height:1.1;

    font-weight:800;

    color:#07182f;
}

/* =========================================
   LEFT SIDE
========================================= */

.health-matters{
    padding: 16px 38px 14px 38px;
    box-sizing:border-box;
    border-right:1px solid #d9dcdf;
}

/* IMPORTANT:
   fixed controlled columns instead of 1fr
*/

.health-left-grid{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(210px, 1fr)
        190px;

    gap:16px;

    align-items:start;

    box-sizing:border-box;
}

/* =========================================
   LEFT POINTS
========================================= */

.health-points{
    display:flex;
    flex-direction:column;

    gap:7px;
}

.health-point{
    display:flex;

    align-items:center;

    gap:10px;

    min-height:40px;
}

.health-point p{
    margin:0;
    font-size: 13px;
    line-height: 1.33;
    font-weight:500;
    color:#142238;
}

/* =========================================
   LEFT ROUND ICONS
========================================= */

.health-icon{
    width: 43px;
    height: 43px;
    flex: 0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#071d3e;
}

.health-icon svg{
    width: 27px;
    height: 25px;
    fill:none;
    stroke:#fff;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================
   WHY MEN AVOID CARE BOX
========================================= */

.avoid-care{
    width: 200px;
    padding: 10px 10px 12px;
    background:#fbfbfb;
    border:1px solid #aab2bd;
    border-radius:6px;
    box-sizing:border-box;
}

.avoid-care h3{
    margin: 3px 0 9px;
    color:#07182f;
    font-size: 14px;
    line-height:1.1;
    font-weight:800;
    text-align:center;
}

.avoid-care ul{
    margin:0;
    padding:0;

    list-style:none;
}

.avoid-care li{
    position:relative;
    margin: 0 0 6px;
    padding-left: 23px;
    color:#172238;
    font-size: 11.5px;
    line-height: 1.25;
    font-weight:500;
    white-space:nowrap;
}
.avoid-care li::before{
    content:"\00D7";
    position:absolute;
    left:7px;
    top:0;

    width:12px;
    height:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#c51622;
    color:#fff;

    font-family:Arial, sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:700;
}

/* =========================================
   CENTER - GETTING STARTED
========================================= */

.getting-started{
    padding:16px 6px 12px 22px;

    box-sizing:border-box;
}

.getting-started h2{
    margin-bottom: 22px;
    text-align: center;
}

/* =========================================
   THREE STEPS
========================================= */

.getting-steps{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:0;

    align-items:start;

    box-sizing:border-box;
}

.getting-step{
    position:relative;

    min-width:0;

    padding:0 3px;

    text-align:center;

    box-sizing:border-box;
}

/* =========================================
   NUMBER ROW
========================================= */

.step-row{
    position:relative;

    height:47px;

    display:flex;

    align-items:center;
    justify-content:center;
}

.step-number{
    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:22px;

    font-weight:700;

    line-height:1;
}

.number-one{
    background:#071d3e;
}

.number-two{
    background:#af1119;
}

.number-three{
    background:#dfa128;
}

/* =========================================
   ARROWS
========================================= */

.step-arrow{
    position:absolute;

    right:-11px;
    top:7px;

    color:#07182f;

    font-size:25px;
    line-height:1;

    font-weight:400;

    z-index:5;
}

/* =========================================
   STEP TITLES
========================================= */

.getting-step h3{
    min-height:28px;
    margin: 6px 0 4px;
    color:#07182f;
    font-size: 11.5px;
    line-height:1.08;
    font-weight:700;
}

/* =========================================
   STEP 1 ICONS
========================================= */

.step-one-icons{
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;
}

.step-one-icons svg{
    width:20px;
    height:20px;

    fill:none;

    stroke:#07182f;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================
   STEP 2 + STEP 3 ICON
========================================= */

.step-main-icon{
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;
}

.step-main-icon svg{
    width:38px;
    height:38px;

    fill:none;

    stroke:#07182f;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.step-main-icon.clipboard svg{
    width:34px;
    height:38px;
}

/* =========================================
   STEP DESCRIPTION
========================================= */

.getting-step p{
    margin:2px auto 0;
    max-width:105px;
    color:#172238;
    font-size: 11px;
    line-height:1.18;
    font-weight:500;
    text-align:center;
}

/* =========================================
   RIGHT IMAGE
========================================= */

.health-photo{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#f8f8f7;
}

.health-photo img{
    display:block;
    width:100%;
    object-fit:cover;
    object-position:center center;
    height: 390px;
    object-fit: cover;
}

/* =========================================
   WHITE FADE OVER IMAGE
========================================= */

.health-photo::before{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    top:0;
    bottom:0;
    width: 32%;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            #f8f8f7 0%,
            rgba(248,248,247,.88) 24%,
            rgba(248,248,247,.55) 52%,
            rgba(248,248,247,.20) 76%,
            rgba(248,248,247,0) 100%
        );
}

/* =========================================
   DESKTOP 1400
========================================= */

@media(max-width:1400px){

    .health-start-container{
        grid-template-columns:45% 33% 22%;
    }

    .health-matters{
        padding-left:28px;
    }

    .health-left-grid{
        grid-template-columns:
            minmax(190px,1fr)
            180px;

        gap:12px;
    }

    .avoid-care{
        width:180px;
    }

}

/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

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

    .health-matters{
        border-right:1px solid #ddd;
    }

    .health-photo{
        grid-column:1 / -1;

        height:330px;
    }

    .health-photo::before{
        width:22%;
    }

}

/* =========================================
   SMALL TABLET
========================================= */

@media(max-width:750px){

    .health-start-container{
        display:block;
    }

    .health-matters,
    .getting-started{
        padding:22px 18px;
    }

    .health-matters{
        border-right:0;
        border-bottom:1px solid #ddd;
    }

    .health-left-grid{
        grid-template-columns:1fr 190px;
    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:550px){

    .health-left-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .avoid-care{
        width:100%;
    }

    .avoid-care li{
        white-space:normal;
    }

    .getting-steps{
        grid-template-columns:1fr;

        gap:25px;
    }

    .step-arrow{
        display:none;
    }

    .getting-step h3{
        min-height:0;
    }

    .getting-step p{
        max-width:180px;
    }

    .health-photo{
        height:300px;
    }

}
/* =========================================
   HELP / DONATION STRIP
========================================= */

.support-section{
    width:100%;
    margin:0;
    padding:0;

    background:#00152f;

    color:#fff;

    font-family:'Montserrat', Arial, sans-serif;

    box-sizing:border-box;
}

.support-top{
    width:100%;
    height:123px;

    display:grid;

    grid-template-columns:
        33% 41% 26%;

    box-sizing:border-box;
}

/* =========================================
   LEFT COPY
========================================= */

.support-copy{
    padding:16px 18px 12px 38px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    box-sizing:border-box;
}

.support-copy h2{
    margin:0 0 8px;

    color:#fff;

    font-size:20px;
    line-height:1.05;

    font-weight:700;
}

.support-copy p{
    width:100%;
    max-width:355px;
    margin:0;
    color:#f3f4f7;
    font-size: 11.5px;
    line-height:1.48;
    font-weight:400;
}

/* =========================================
   SUPPORT FLOW
========================================= */

.support-flow{
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    padding:7px 4px 5px;

    box-sizing:border-box;
}

.support-flow-item{
    width:76px;

    flex:0 0 76px;

    text-align:center;
}

.support-circle{
    width: 62px;
    height: 62px;
    margin:0 auto 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    /* border:1.5px solid #dfa12d; */
}

.support-circle img{
    display:block;
    width: 86px;
    height: 55px;
    object-fit:contain;
}

.support-flow-item span{
    display:block;
    color:#fff;
    font-size: 10.6px;
    line-height:1.12;
    font-weight:500;
}

.support-arrow{
    color:#fff;

    font-size:19px;
    line-height:1;

    transform:translateY(-10px);
}

/* =========================================
   DONATE BOX
========================================= */

.support-donate{
    height:100%;

    padding:15px 24px 13px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:#e4a52e;

    box-sizing:border-box;
}

.support-donate h3{
    margin:0 0 10px;
    color: #fff;
    font-size: 17px;
    line-height:1.05;
    font-weight:800;
    text-align:center;
    font-family: 'Montserrat';
    font-weight: 600;
}

.support-donate-btn{
    width: 100%;
    max-width: 177px;
    height: 46px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #001936;
    border-radius: 1px;
    color: #fff;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Bebas Neue';
    font-weight: 500;
    letter-spacing: 0px !important;
}

.support-donate-btn span{
    flex:1;
    text-align:center;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Bebas Neue';
    letter-spacing: 0.6px;
}

.support-donate-btn b{
    font-size: 20px;
    font-weight:400;
}

/* =========================================
   FOOTER
========================================= */

.site-footer{
    width:100%;
    margin:0;

    background:#00112b;

    color:#fff;

    font-family:'Montserrat', Arial, sans-serif;

    box-sizing:border-box;

    border-top:1px solid rgba(255,255,255,.12);
}

/* Figma footer is compact */
.footer-container{
    width:100%;
    height: 142px;
    display:grid;
    grid-template-columns:
        29% 18% 27% 26%;
    padding: 21px 38px 20px !important;
    box-sizing:border-box;
}

/* =========================================
   COLUMN SEPARATORS
========================================= */

.footer-container > div{
    position:relative;

    min-width:0;

    padding:0 20px;

    box-sizing:border-box;
}

.footer-container > div:first-child{
    padding-left:0;
}

.footer-container > div:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:0;

    width:1px;
    height:100%;

    background:rgba(255,255,255,.25);
}

/* =========================================
   LOGO COLUMN
========================================= */

.footer-brand{
    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.footer-logo{
    display:block;

    width:260px;
    max-width:90%;

    height:62px;

    object-fit:contain;

    object-position:left center;

    margin:0 0 1px;
}

/* =========================================
   SOCIALS
========================================= */

.footer-social{
    align-items: start;
    gap: 10px;
    margin: 19px -1px 3px 7px;
    display: flex;
}

.footer-social a{
    width: 15px;
    height: 15px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.footer-social svg{
    width: 15px;
    height: 15px;
    fill:none;
    stroke:#fff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.footer-social a:first-child svg{
    fill:#fff;

    stroke:none;
}

.footer-copyright{
    margin: 0;
    color:#f1f1f1;
    font-size: 11px;
    line-height:1.2;
    font-weight:400;
    padding: 22px 0px 0px;
}

/* =========================================
   COMMON FOOTER HEADINGS
========================================= */

.footer-column h3{
    margin: 0 0 10px;
    color:#fff;
    font-size: 13px;
    line-height:1.05;
    font-weight: 600;
}

/* =========================================
   QUICK LINKS
========================================= */

.footer-links{
    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.footer-links a{
    margin: 0 0 3px;
    color:#fff;
    text-decoration:none;
    font-size: 12px;
    line-height: 1.24;
    font-weight:400;
}

.footer-links a:hover{
    color:#e4a52e;
}

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

.footer-contact-row{
    display:flex;
    align-items:flex-start;
    gap:7px;
    margin: 0 0 6px;
}

.footer-contact-row span{
    width:14px;

    flex:0 0 14px;

    color:#e4a52e;

    font-size:12px;

    line-height:1.1;

    text-align:center;
}

.footer-contact-row p{
    margin:0;
    color:#fff;
    font-size: 11px;
    line-height: 1.3;
    font-weight:400;
}

/* =========================================
   PROMISE
========================================= */

.footer-promise{
    position:relative;
}

.footer-promise p{
    margin:0;
    color:#f4f4f4;
    font-size: 11px;
    line-height:1.35;
    font-weight:400;
}

.footer-promise strong{
    display:block;
    margin-top: 17px;
    color:#e4a52e;
    font-size: 20px;
    line-height:1;
    font-style: normal;
    font-weight: 500;
    text-align:center;
    font-family: 'Yellowtail';
}

/* =========================================
   BELOW 1200
========================================= */

@media(max-width:1200px){

    .support-copy{
        padding-left:28px;
    }

    .support-flow{
        gap:7px;
    }

    .support-flow-item{
        width:68px;
        flex-basis:68px;
    }

    .footer-container{
        padding-left:28px;
        padding-right:28px;
    }

    .footer-container > div{
        padding-left:14px;
        padding-right:14px;
    }

}

/* =========================================
   TABLET
========================================= */

@media(max-width:900px){

    .support-top{
        height:auto;

        grid-template-columns:1fr 1fr;
    }

    .support-copy{
        min-height:125px;
    }

    .support-flow{
        min-height:125px;
    }

    .support-donate{
        grid-column:1 / -1;

        min-height:110px;
    }

    .footer-container{
        height:auto;

        grid-template-columns:1fr 1fr;

        gap:18px 0;

        padding-top:20px;
        padding-bottom:20px;
    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

    .support-top{
        display:block;
    }

    .support-copy{
        min-height:0;

        padding:22px 18px;

        text-align:center;
    }

    .support-copy p{
        margin:0 auto;
    }

    .support-flow{
        min-height:150px;

        padding:18px 10px;

        flex-wrap:wrap;
    }

    .support-arrow{
        display:none;
    }

    .support-donate{
        min-height:120px;
    }

    .footer-container{
        display:block;

        padding:20px 18px;
    }

    .footer-container > div{
        padding:15px 0;

        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .footer-container > div::after{
        display:none !important;
    }

    .footer-container > div:last-child{
        border-bottom:0;
    }

    .footer-social{
        margin-left:60px;
    }

}
.promise-heart{
    position:absolute;
    right: 98px;
    bottom: 14px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.promise-heart img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}
.footer-contact-icon{
    width:15px;
    height:15px;

    flex:0 0 15px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.footer-contact-icon svg{
    width:15px;
    height:15px;

    fill:none;

    stroke:#e4a52e;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
   PROGRAMS BOTTOM NOTE
========================================= */

.programs-bottom-note{
    width:100%;
    margin: 16px auto 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}


.programs-bottom-note p{
    margin:0 0 10px;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size:17px;
    line-height:1.25;
    font-weight: 600;
}


/* WE GOT YOU */

.programs-bottom-note strong{
    display:block;
    margin:0;
    color:#efa92f;
    font-size: 28px;
    line-height:1;
    font-weight: 500;
    font-family: 'Yellowtail';
}


/* TABLET */

@media(max-width:900px){

    .programs-bottom-note{
        margin-top:22px;
    }

    .programs-bottom-note p{
        font-size:15px;
    }

    .programs-bottom-note strong{
        font-size:24px;
    }
}


/* MOBILE */

@media(max-width:550px){

    .programs-bottom-note{
        margin-top:20px;
        padding:0 10px;
    }

    .programs-bottom-note p{
        font-size:13px;
        line-height:1.4;
    }

    .programs-bottom-note strong{
        font-size:22px;
    }
}
/* =========================================
   FOUR PILLARS SECTION
========================================= */

.pillars-section{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;

    background:#00152f;

    color:#fff;

    font-family:'Montserrat', Arial, sans-serif;

    box-sizing:border-box;
}


/* =========================================
   CONTAINER
   SAME WIDTH AS PROGRAMS SECTION
========================================= */

.pillars-container{
    width:100%;
    max-width:none;
    margin:0;
    padding: 32px 58px 39px;
    box-sizing:border-box;
}


/* =========================================
   HEADING
========================================= */

.pillars-heading{
    width:100%;

    margin:0 0 25px;

    text-align:center;
}


.pillars-heading h2{
    margin:0;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 27px;
    line-height:1.15;
    font-weight: 600;
    letter-spacing: 0.4px;
}


.pillars-heading h2 span{
    color:#e3a42e;
}


/* =========================================
   GRID
========================================= */

.pillars-grid{
    width:100%;
    max-width:none;

    margin:0;

    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    gap:16px;

    align-items:stretch;

    box-sizing:border-box;
}


/* =========================================
   CARD
========================================= */

.pillar-card{
    position:relative;
    width:100%;
    min-width:0;
    min-height:255px;
    padding: 26px 20px 25px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}


/* BLUE */

.pillar-card--blue{
    background:#062e59;
}


/* RED */

.pillar-card--red{
    background:#8e080d;
}


/* GOLD */

.pillar-card--gold{
    background:#ca8900;
}


/* =========================================
   CARD TOP
========================================= */

.pillar-card-title{
    width:100%;

    min-height:56px;

    margin-bottom:13px;

    display:flex;

    align-items:center;

    gap:12px;
}


/* =========================================
   ICON IMAGE
========================================= */

.pillar-icon{
    width: 52px;
    height: 52px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
}


.pillar-icon img{
    display:block;
    width: 53px;
    height: 53px;
    object-fit:contain;
    object-position:center;
}


/* =========================================
   CARD TITLE
========================================= */

.pillar-card h3{
    margin:0;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height:1.08;
    font-weight:600;
    letter-spacing:.2px;
}


/* =========================================
   LIST
========================================= */

.pillar-card ul{
    width:100%;

    margin:0;

    padding:0 0 0 16px;

    color:#fff;

    flex:1;

    box-sizing:border-box;
}


.pillar-card li{
    margin:0 0 5px;
    padding-left:1px;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 12px;
    line-height:1.3;
    font-weight:400;
}


/* GOLD BULLETS */

.pillar-card li::marker{
    color:#e6a52c;

    font-size:8px;
}


/* WHITE BULLETS ON GOLD CARD */

.pillar-card--gold li::marker{
    color:#fff;
}


/* =========================================
   WE GOT YOU
========================================= */

.pillar-tagline{
    margin-top:8px;
    color:#e5a52e;
    font-size: 20px;
    line-height:1;
    font-weight:400;
    text-align:center;
    font-family: 'Yellowtail';
}


.pillar-tagline--dark{
    color:#07182f;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.pillars-bottom{
    width:100%;

    margin-top:22px;

    text-align:center;
}


.pillars-bottom p{
    margin:0;
    color:#fff;
    font-family:'Montserrat', Arial, sans-serif;
    font-size: 15px;
    line-height:1.35;
    font-weight:500;
}


.pillars-bottom p span{
    color:#e3a42e;

    font-weight:600;
}


/* =========================================
   SMALL DESKTOP
========================================= */

@media(max-width:1400px){

    .pillars-container{
        padding-left:28px;
        padding-right:28px;
    }

    .pillar-card{
        padding-left:15px;
        padding-right:15px;
    }.program-card p {
    width: 90%;
}

}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

    .pillars-container{
        padding-left:24px;
        padding-right:24px;
    }

    .pillars-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

    .pillars-container{
        padding:25px 15px;
    }

    .pillars-heading{
        margin-bottom:20px;
    }

    .pillars-heading h2{
        font-size:20px;
    }

    .pillars-grid{
        grid-template-columns:1fr;

        gap:14px;
    }

    .pillar-card{
        min-height:auto;

        padding:20px 18px;
    }

    .pillars-bottom p{
        font-size:12px;
    }

}/* =========================================
   PROMISE BOTTOM
========================================= */

.footer-promise{
    position:relative;
    display:flex;
    flex-direction:column;
}


.footer-promise-bottom{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:15px;

    margin-top:12px;
}


.footer-promise strong{
    display:block;

    margin:0;

    color:#e4a52e;

    font-family:'Yellowtail', cursive;

    font-size:28px;
    line-height:1;

    font-weight:400;
    font-style:normal;

    text-align:center;
}


/* HEART */

.promise-heart{
    position:static;
    width: 64px;
    height: 64px;
    flex: 0 0 54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: -20px 0px 0px 0px;
}


.promise-heart img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================
   PRIVACY / TERMS
========================================= */

.footer-legal{
    width:100%;

    margin-top:7px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    color:#fff;

    font-family:'Montserrat', Arial, sans-serif;

    font-size:10px;
    line-height:1.2;
}


.footer-legal a{
    color:#fff;

    text-decoration:none;

    font-weight:400;
}


.footer-legal a:hover{
    color:#e4a52e;
}


.footer-legal span{
    color:rgba(255,255,255,.75);
}position:absolute;
right:18px;
bottom:4px;}

/* =========================================
   FOOTER SOCIAL ICONS
========================================= */

.footer-social{
    display:flex;
    align-items:center;

    gap:5px;

    margin:5px 0 7px 67px;
}


/* WHITE BOX */

.footer-social a{
    width: 28px;
    height: 27px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:3px;
    color:#07182f;
    text-decoration:none;
    transition:.2s ease;
}


/* SVG */

.footer-social a svg{
    display:block;

    width:15px;
    height:15px;

    fill:none;

    stroke:#07182f;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* FACEBOOK = FILLED */

.footer-social a:first-child svg{
    fill:#07182f;
    stroke:none;
}


/* LINKEDIN */

.footer-social a:nth-child(2) svg{
    stroke:#07182f;
    stroke-width:2.2;
}


/* INSTAGRAM */

.footer-social a:nth-child(3) svg{
    stroke:#07182f;
}


/* HOVER */

.footer-social a:hover{
    background:#e5a532;
    transform:translateY(-1px);
}


/* MOBILE */

@media(max-width:600px){

    .footer-social{
        margin-left:0;
    }

}