/* =========================================
   RESPONSIVENESS (Mobile First -> Desktop)
   ========================================= */


/* Mobile styles */
@media (max-width: 1366px) {

  .trustSection .shape-img{margin-top: -18rem;}

}

@media (max-width: 1199px) {
.coreSystems .systemCard h5{max-width: 100%;}


}




@media (max-width: 991px) {

.boardCard .boardImage img {
   
    min-height: 220px;
    max-height: inherit;

}
  .max-wid-50,
  .max-wid-80 {
    max-width: 100%;
  }

  .same-heading {
    margin-bottom: 2rem;
  }

  .same-heading h2 {
    font-size: 2rem;
  }

  .header .menuToggle {
    display: block;
  }

  .header .mainNav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--WhiteColor);
    flex-direction: column;
    align-items: self-start;
    /* padding: 1.5rem; */
    gap: 1rem;
    transition: 0.35s ease;
  }

  .header .mainNav.active {
    left: 0;
  }

  .header .mobileHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: solid 1px #dbdada;
    padding: 1rem;
  }

  .header .closeMenu {
    display: block;
  }

  .header .navList {
    flex-direction: column;
    gap: 1.2rem;
    padding: 0 1rem 1rem;
   width: 100%;
    align-items: self-start;
  }

  .header .btnPrimary {
    margin-top: auto;
    width: 100%;
    text-align: center;
  }

  .same-section {
    padding: 3rem 0;
  }

  .heroSection {
    padding: 10rem 0 3rem;
    /* margin-top: 0; */
  }

  .heroSection .heroTitle {
    font-size: 1.75rem;
  }

  .heroSection .heroText {
    font-size: 0.95rem;
  }

  .heroSection .heroText {
    max-width: 100%;
  }

  .heroSection .section-bottom-btn {
    margin-top: 1rem;
  }

  .stewardSection {
    padding: 4rem 0 6rem;
  }

  .stewardSection .sectionTitle {
    font-size: 1.6rem;
  }

  .stewardSection .featureList {
    grid-template-columns: 1fr;
  }

  .stewardSection .quoteBox {
    margin-top: 2rem;
    margin-left: 0;
  }

  .stewardSection .shape-img {
    margin-top: -8rem;
    opacity: 0.4;
  }

  .stewardSection .sectionText {
    max-width: 100%;
  }

  .trustSection .same-heading {
    margin-bottom: 4rem;
  }

  .trustSection .trustCard p {
    max-width: 100%;
  }

  .trustSection .trustNote {
    margin-top: 1rem;
  }

  .trustSection .shape-img {
    margin-top: -5rem;
    opacity: 0.4;
  }

  .sectionCta {
    padding: 4rem 0;
  }

  .stewardSection .quoteText {
    max-width: 100%;
  }

  .footer .footerTop {
    padding: 2rem 0;
  }

  .footer .footerText {
    max-width: 100%;
  }

  .footer .footerBottomInner {
    justify-content: center;
    gap: 0.5rem;
  }

  .pricingSection .pricingCard {
    padding: 1rem;
  }

  .coreSystems .systemCard {
    padding: 1rem;
  }


}


@media (max-width: 767px) {
.header .logo img{max-height: 3.5rem;}
.footer .footerLogo{max-height: 3.5rem;}
  .pricingSection .planText {
    min-height: inherit;
  }

  .footer .copyright {
    text-align: center;
  }

  .footer .footerBottomLinks {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .partnersSection .logoCard {
    padding: 1rem;
    min-height: 7rem;
  }

  .utahSection .featureBox {
    padding: 1rem;
  }
.utahSection .featureBox{gap: 0.5rem; align-items: flex-start;}
  .utahSection .featureIcon{    width: 2.6rem;
    height: 2.6rem;}
}


@media (max-width: 480px) {

  .utahSection .featureBox{        flex-direction: column;}

  .boardSection .boardCard .boardImage img {
    min-height: 230px;
    max-height: 230px;
}
.boardCard.cardJoin{    min-height: 260px;}


}