/*
Theme Name: MRTQ Understrap Child
Theme URI: https://mrtq.org
Author: GoatTech, LLC
Author URI: https://goattech.co
Description: Child theme for Understrap with MRTQ PDN styling.
Template: understrap
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: understrap, bootstrap, accessibility-ready
Text Domain: mrtq-understrap-child
*/
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap");
#main-nav {
  background-color: #07318f !important;
}

.main,
.site-wrapper {
  font-family: "Raleway", Arial, sans-serif;
  color: #000;
  background-color: #ffffff;
}
.main a,
.site-wrapper a {
  color: #07318f;
  text-decoration: underline;
}
.main a:hover,
.site-wrapper a:hover {
  color: #7a078f;
}
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6,
.site-wrapper h1,
.site-wrapper h2,
.site-wrapper h3,
.site-wrapper h4,
.site-wrapper h5,
.site-wrapper h6 {
  color: #07318f;
  font-weight: 700;
  font-family: "Raleway", Arial, sans-serif;
}
.main .btn, .main .btn-primary,
.site-wrapper .btn,
.site-wrapper .btn-primary {
  background-color: #7a078f;
  color: #FFF;
  font-weight: bold;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-transform: uppercase;
}
.main .btn:hover, .main .btn-primary:hover,
.site-wrapper .btn:hover,
.site-wrapper .btn-primary:hover {
  background-color: #cd0cf0;
  color: #fff;
}
.main footer,
.site-wrapper footer {
  background-color: #7a078f;
  color: #fff;
  padding: 2rem 1rem;
}

.navbar-brand {
  padding-top: 0 !important;
}

.navbar {
  padding: 0rem 1rem !important;
}

.nav-items-spacing {
  border: #666;
}

.nav-items-spacing > li {
  margin: 0;
}
@media (max-width: 992px) {
  .nav-items-spacing > li {
    border-bottom: #999 thin solid;
    border-left: #999 thin solid;
    border-right: #999 thin solid;
    padding: 0.55rem;
    border-radius: 5px;
  }
}
@media (min-width: 992px) {
  .nav-items-spacing > li:not(:first-child) {
    margin-left: 2rem;
  }
}

.nav-items-spacing a {
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.4s ease;
  color: #07318f;
}
.nav-items-spacing a:hover, .nav-items-spacing a:focus {
  color: #7a078f;
  text-decoration: underline;
}

.utility-items-spacing {
  margin-right: 2rem;
  background-color: #7a078f;
}

.utility-items-spacing > li {
  padding: 0.5rem 1rem;
}

.utility-items-spacing a {
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.utility-items-spacing a:hover, .utility-items-spacing a:focus {
  color: white !important;
  text-decoration: underline;
}

.mobile-nav-button {
  background-color: #7a078f !important;
  color: white !important;
}
.mobile-nav-button:hover, .mobile-nav-button:focus {
  background-color: #a309c0 !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

.mrtq-logo {
  margin: auto;
  max-width: 600px;
}
@media (min-width: 992px) {
  .mrtq-logo {
    margin-top: -3.5rem;
  }
}

h2 {
  color: #07318f;
}

h2::before {
  content: "";
  display: block;
  width: 4rem; /* Adjust the length of the line here */
  height: 6px; /* Thickness of the line */
  background-color: #7a078f; /* Your MRTQ purple, or whatever color you want */
  margin-bottom: 0.5rem; /* Space between the line and the actual heading */
}

p {
  max-width: 80ch;
}

.service-card-list, .service-card-list-big {
  list-style-type: none;
  padding: 0;
  height: auto;
}

.service-card-list li, .service-card-list-big li {
  text-align: center;
  background-color: var(--card-background-color);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.06), 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
  color: var(--card-text-color);
  transition-property: box-shadow, transform;
  transition-duration: 0.25s;
  will-change: box-shadow, transform;
  padding: 1rem;
}

.service-card-list-big li p {
  text-align: left;
}

@media screen and (min-width: 1100px) {
  .service-card-list li {
    display: flex;
    width: 47.75%;
    float: left;
    height: 365px;
    margin-right: 1rem;
    align-items: center;
  }
}
@media screen and (min-width: 1300px) {
  .service-card-list li {
    height: 325px;
  }
}
.service-card-list li img {
  margin-bottom: 1rem;
}

@media screen and (min-width: 1100px) {
  .service-card-list li img {
    width: 150px;
    height: 150px;
    margin-right: 1rem;
  }
}
.service-card-list li div {
  text-align: left;
}

.service-card-list li div h3 a {
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

.service-card-list li div hr {
  height: 5px;
  background-color: #2980b9;
}

.service-card-list li div p {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  line-height: 1.5rem;
}

.vision, .mission {
  background-color: #07318f;
  color: white;
  padding: 1rem;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.vision h2, .mission h2 {
  color: white;
}
.vision h2::before, .mission h2::before {
  display: none;
  content: none;
}

.mission {
  border: solid 15px;
  border-color: #febf02;
}

@media screen and (min-width: 900px) {
  .vision, .mission {
    width: 330px;
    margin-bottom: 0;
  }
  .mission {
    margin-top: 5rem;
  }
  .vision {
    height: 275px;
  }
}
.home-header {
  padding: 5rem 6rem;
  background-position: 50% 10%;
  background-size: cover;
  background-repeat: no-repeat;
  border-top: solid 3px;
  border-bottom: solid 3px;
  border-color: #7a078f;
  margin-top: 1rem;
}
@media screen and (min-width: 900px) {
  .home-header {
    display: flex;
    gap: 1rem;
  }
}

.guiding-principles {
  background-color: #8B993C;
  color: #000000;
  padding: 1rem 0;
  text-align: center;
  max-width: 1080px;
}
.guiding-principles::before {
  display: none;
  content: none;
}

.goals-header {
  clear: both;
  padding-top: 1.2rem;
  color: #000;
}
.goals-header::before {
  display: none;
  content: none;
}

.goal {
  width: 97%;
  color: white !important;
  margin-bottom: 1.2rem;
}

#goal-one, #goal-two, #goal-three, #goal-four {
  text-align: center;
  width: 97%;
}
#goal-one ul, #goal-two ul, #goal-three ul, #goal-four ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#goal-one ul li, #goal-two ul li, #goal-three ul li, #goal-four ul li {
  padding: 1rem 0rem;
  font-weight: bold;
  font-size: 1.2rem;
  border: thin solid white;
}

.goal-one {
  background-color: #07318f !important;
  background-image: url(https://mrtq.goattech.co/wp-content/uploads/2025/07/goal-one.png);
  background-position: 0% 50%;
  padding-left: 6rem !important;
  background-repeat: no-repeat;
}
.goal-one:hover, .goal-one:focus {
  background-color: #0942c0 !important;
}

#goal-one ul li {
  background-color: #ccdbfc !important;
}
#goal-one ul li:nth-child(odd) {
  background-color: #9bb8fa !important;
}

.goal-two {
  background-color: #7a078f !important;
  background-image: url(https://mrtq.goattech.co/wp-content/uploads/2025/07/goal-two.png);
  background-position: 0% 50%;
  padding-left: 6rem !important;
  background-repeat: no-repeat;
}
.goal-two:hover, .goal-two:focus {
  background-color: #a309c0 !important;
}

#goal-two ul li {
  background-color: #f5ccfc !important;
}
#goal-two ul li:nth-child(odd) {
  background-color: #eb9bfa !important;
}

.goal-three {
  background-color: #8B993C !important;
  background-image: url(https://mrtq.goattech.co/wp-content/uploads/2025/07/goal-3.png);
  background-position: 0% 50%;
  padding-left: 6rem !important;
  background-repeat: no-repeat;
}
.goal-three:hover, .goal-three:focus {
  background-color: #aaba4e !important;
}

#goal-three ul li {
  background-color: white !important;
}
#goal-three ul li:nth-child(odd) {
  background-color: #f0f3e1 !important;
}

.goal-four {
  background-color: #F26B1C !important;
  background-image: url(https://mrtq.goattech.co/wp-content/uploads/2025/07/goal-4.png);
  background-position: 0% 50%;
  padding-left: 6rem !important;
  background-repeat: no-repeat;
}
.goal-four:hover, .goal-four:focus {
  background-color: #f58a4c !important;
}

#goal-four ul li {
  background-color: #fac9ad !important;
}
#goal-four ul li:nth-child(odd) {
  background-color: #f8aa7c !important;
}

.purple-box {
  font-size: 1.2rem;
  background-color: #7a078f;
  color: white;
  padding: 1rem;
  margin-bottom: 1.25rem;
  width: 97.25%;
}
.purple-box h2 {
  color: white;
}
.purple-box h2::before {
  display: none;
  content: none;
}
.purple-box a {
  color: #febf02;
}
.purple-box a:hover, .purple-box a:focus {
  color: white;
}

.mrtq-quicklinks {
  width: 100%;
  background-color: #07318f;
  background-image: url("https://mrtq.goattech.co/wp-content/uploads/2025/07/ChatGPT-Image-Jul-28-2025-05_14_24-PM.png");
  background-repeat: repeat;
  background-position: center;
  padding: 1rem 1.5rem;
  color: #fff;
  font-size: 1.2rem;
}
.mrtq-quicklinks h2 {
  color: #febf02;
}
.mrtq-quicklinks h2::before {
  display: none;
  content: none;
}
.mrtq-quicklinks ul {
  column-count: auto;
  column-width: 300px;
  column-gap: 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mrtq-quicklinks ul li {
  margin-bottom: 1rem;
  break-inside: avoid;
}
.mrtq-quicklinks ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.25rem;
}
.mrtq-quicklinks ul li a:hover {
  color: #febf02;
  text-decoration: underline;
}

#wrapper-footer {
  background-color: #7a078f;
  color: #fff;
}
#wrapper-footer p {
  margin-bottom: 0;
}
#wrapper-footer a {
  color: #febf02;
  text-decoration: underline;
}
#wrapper-footer a:hover, #wrapper-footer a:focus {
  color: #fff;
}

.faq {
  background-color: #07318f !important;
  color: white !important;
  width: 97%;
  margin: 1rem 0rem;
}
.faq h3 {
  font-size: 1.125rem;
}
.faq:hover, .faq:focus {
  background-color: #0942c0 !important;
}

.standard-hero {
  padding: 20rem 0rem 0rem 0rem;
  background-position: 50% 40%;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  gap: 1rem;
  border-top: solid 3px;
  border-bottom: solid 3px;
  border-color: #7a078f;
  margin-top: 1rem;
  align-items: baseline;
  background-color: #7a078f;
}
.standard-hero .hero-content-container {
  background-color: #07318f;
  background-image: url("https://mrtq.goattech.co/wp-content/uploads/2025/07/ChatGPT-Image-Jul-28-2025-05_14_24-PM.png");
  background-repeat: repeat;
  background-position: center;
  padding: 0.5rem 1.5rem;
  color: #fff;
}
.standard-hero .hero-content-container h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.callout-box {
  background-color: #febf02;
  background-image: url("https://mrtq.goattech.co/wp-content/uploads/2025/08/callout.jpg");
  padding: 2rem;
  background-size: 100%;
  background-position: 50%;
}
.callout-box h2 {
  font-size: 1.5rem;
  color: #07318f;
}
.callout-box h2::before {
  display: none;
  content: none;
}
@media (min-width: 992px) {
  .callout-box {
    float: right;
    max-width: 50%;
    margin-left: 2rem;
  }
}

.total-registry-members, .monthly-registry-members {
  padding: 1rem;
  margin-bottom: 1rem;
}
.total-registry-members .big-number, .monthly-registry-members .big-number {
  font-size: 1.5rem;
  font-weight: bold;
}
@media (min-width: 992px) {
  .total-registry-members, .monthly-registry-members {
    width: 45%;
  }
}

.total-registry-members {
  background-color: #F26B1C;
  color: white;
}

.monthly-registry-members {
  background-color: #839319;
  color: white;
}

.fbc-wrap {
  margin-bottom: 15px;
}

.mrtq-profile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;
  list-style: none;
  margin: 2rem auto;
  max-width: 1200px;
}
.mrtq-profile-list li {
  flex: 1 1 calc(33.333% - 2rem);
  box-sizing: border-box;
  max-width: 320px;
}
.mrtq-profile-list li img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
.mrtq-profile-list li p {
  margin: 0.25rem 0;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .mrtq-profile-list li {
    flex: 1 1 calc(50% - 2rem);
  }
}
@media (max-width: 600px) {
  .mrtq-profile-list li {
    flex: 1 1 100%;
  }
}