/*--------------------------------------------------------------
# Brand Variables
--------------------------------------------------------------*/
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Montserrat", sans-serif;
}

:root {
  --background-color: #ffffff;
  --default-color: #1b1b1b;
  --heading-color: #005a76;
  --accent-color: #9f2065;
  --accent-color-orange: #e26b2a;
  --banner-end-color: #6b2750;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

:root {
  --nav-color: #005a76;
  --nav-hover-color: #9f2065;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #005a76;
  --nav-dropdown-hover-color: #9f2065;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: 1.05rem;
  font-weight: 500;
}

p {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}



/* ALCHEMER AND MAILCHIMP EMBEDDED FORM PAGES */
------------------------------*/
.sg-title { 
  display: none; 
}
.sg-question-options {
  padding: 0 !important;
}
.sg-input-text {
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100%;
  border: 1px solid #ddd !important;
}

.sg-input-text {
height: 36px;
line-height: 1.467;
}

.sg-question-options textarea {
  border: 1px solid #ddd !important;
  background-color: #ffffff !important;
}
.sg-content {
/*   padding: 0 !important; */
padding-bottom: 40px;
  margin: auto;
}
.sg-question {
  margin: 0.5em 0 !important;
}
.sg-question-title {
font-size: 1.0em !important;
}

.sg-question textarea {
  height: auto;
  width: 100%;
}

.sg-survey .sg-button:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.sg-survey .sg-button {
  color: #21495e;
  background-color: #7cdda3;
  border-color: #7cdda3;
  padding: .1rem 1.8rem;
  font-size: 1.1rem;
  line-height: 1.5;
  border-radius: 2rem;
  margin-top: 2rem;
}

.sg-required-icon {
display: none;
}

.sg-instructions {
text-align: center;
font-size: 1.8rem;
color: #67000c;
}

.mc-field-group label {
  display: block;
  line-height: 1.4;
  font-size: 1.0em;
  margin-top: 10px;  
}

.mc-field-group select {
  font-size: 0.8em;
  padding: 5px 5px 5px 5px;
  margin-top: 0;
  background-color: #ffffff;
  border: 1px solid #dae0e5;
  border-radius: 2px;
  line-height: 1.4;
  height: 36px;
}


#mc_embed_signup .mc-field-group select {
  display: inline-block;
  width: 99%;
  padding: 8px 0;
  margin-bottom: 2px;
  background-color: #fff;
  border: 1px solid #ABB0B2;
}







/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid #d3d3d3;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 50px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 992px) {
  .header .logo {
    order: 1;
  }

  .header .logo img {
    max-width: 220px;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  border-color: var(--contrast-color);
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 769px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px 8px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: #ffffff;
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
}

.footer .credits a {
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}

/* Contact Form - Alchemer theme overrides.
   Alchemer's embed injects its own theme stylesheet after ours, so these need
   !important. Its theme paints a grey page background behind the form and caps
   the form at 80% width, which reads as a grey band inset on our white
   section. Drop the background and let the form fill the container. */
.sg-survey .sg-body {
  background-color: transparent !important;
}

.sg-survey .sg-wrapper {
  background-color: transparent !important;
}

.sg-survey .sg-survey-form {
  width: 100% !important;
}

/* Contact Form - Alchemer submit button */
.sg-survey .sg-button {
  color: var(--contrast-color) !important;
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  padding: 8px 25px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 4px !important;
  margin-top: 2rem !important;
  transition: 0.3s !important;
  cursor: pointer !important;
}

.sg-survey .sg-button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%) !important;
  border-color: color-mix(in srgb, var(--accent-color), transparent 15%) !important;
  color: var(--contrast-color) !important;
}

/* Contact Form */
.contact-input {
  padding: 18px 16px;
  font-size: 1rem;
  color: #aaa;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.contact-input:focus {
  border-color: var(--accent-color);
  box-shadow: none;
  color: var(--default-color);
}

.contact-submit-btn {
  background-color: #4a7fb5;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 60px;
  border-radius: 6px;
  border: none;
  transition: background-color 0.3s;
}

.contact-submit-btn:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* Footer redesign */
.footer-ednw-logo {
  max-height: 60px;
  width: auto;
}

.footer-nav-links a {
  color: var(--default-color);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.footer-nav-links a:hover {
  color: var(--accent-color);
}

.footer-social-icon {
  font-size: 1.6rem;
  color: var(--default-color);
  transition: color 0.3s;
  text-decoration: none;
}

.footer-social-icon:hover {
  color: var(--accent-color);
}

.footer-divider {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 1.5rem 0 1rem;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 50px 0 20px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
/*   text-align: center; */
  padding-bottom: 0px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
/*   text-transform: uppercase; */
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
/*   min-height: calc(100vh - 100px); */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0 120px 0;
  overflow: hidden;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 100%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container,
.hero .container-fluid {
  position: relative;
  z-index: 3;
}

.hero h1 {
  margin: 0;
/*   font-size: 48px; */
  font-size: 40px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  line-height: 60px;
  color: #fff;
  text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5);
}

.hero h3 {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  color: #fff;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
  .hero .container-fluid > .row > [class*="col-"] {
    padding-left: 5rem !important;
  }
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 22px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* @media (max-width: 992px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  } */

  .hero p {
    font-size: 18px;
    line-height: 24px;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 30px;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .icon-box {
  background-color: var(--surface-color);
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.hero .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.hero .icon-box .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.hero .icon-box .description {
  font-size: 15px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.hero .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 100px;
  line-height: 1;
  color: var(--accent-color);
}

@media (min-width: 640px) {
  .hero .icon-box:hover {
    transform: scale(1.08);
  }

  .hero .icon-box:hover .title a {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Page-specific Hero Overrides
--------------------------------------------------------------*/
.our-region-page .hero {
  padding: 70px 0 70px 0;
}

.our-region-page .hero.hero-ak {
  padding: 40px 0 100px 0;
}

.our-region-page .about {
  padding-bottom: 0;
}

.our-region-page .about .section-title {
  padding-bottom: 0;
}

/*--------------------------------------------------------------
# States Section
--------------------------------------------------------------*/
.states-heading {
  font-family: "Oswald", sans-serif;
  color: #2b8b43;
  font-weight: 700;
}

.states .state-img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.states a:hover .state-img {
  opacity: 1;
  transform: scale(1.1);
}

.states .state-name {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  margin-top: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #124265;
}

/*--------------------------------------------------------------
# State Listings Section
--------------------------------------------------------------*/
.state-listing-heading {
  color: #2487ce;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  padding: 30px 0;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# About Alt Section
--------------------------------------------------------------*/
.about-alt .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about-alt .content ul {
  list-style: none;
  padding: 0;
}

.about-alt .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about-alt .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about-alt .content p:last-child {
  margin-bottom: 0;
}

.about-alt .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid var(--background-color);
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 0 0 45px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .service-item .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

.services .service-item.item-cyan i {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover .icon i {
  color: #fff;
}

.services .service-item.item-cyan:hover .icon path {
  fill: #0dcaf0;
}

.services .service-item.item-orange i {
  color: #fd7e14;
}

.services .service-item.item-orange:hover .icon i {
  color: #fff;
}

.services .service-item.item-orange:hover .icon path {
  fill: #fd7e14;
}

.services .service-item.item-teal i {
  color: #20c997;
}

.services .service-item.item-teal:hover .icon i {
  color: #fff;
}

.services .service-item.item-teal:hover .icon path {
  fill: #20c997;
}

.services .service-item.item-red i {
  color: #df1529;
}

.services .service-item.item-red:hover .icon i {
  color: #fff;
}

.services .service-item.item-red:hover .icon path {
  fill: #df1529;
}

.services .service-item.item-indigo i {
  color: #6610f2;
}

.services .service-item.item-indigo:hover .icon i {
  color: #fff;
}

.services .service-item.item-indigo:hover .icon path {
  fill: #6610f2;
}

.services .service-item.item-pink i {
  color: #f3268c;
}

.services .service-item.item-pink:hover .icon i {
  color: #fff;
}

.services .service-item.item-pink:hover .icon path {
  fill: #f3268c;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 40px 0;
  position: relative;
  clip-path: inset(0);
  background-color: #356da2 !important;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--contrast-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--contrast-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Resources Cards
--------------------------------------------------------------*/
#resources .card-img-top {
  border-bottom: 1px solid #dee2e6;
}

#resources .card-body p.text-uppercase {
  font-family: "Oswald", sans-serif;
}

/*--------------------------------------------------------------
# ODE Dashboards Site Header
--------------------------------------------------------------*/
/* Two full-width bars: the site title on the deep teal, the nav on the pale
   blue beneath it. Each bar carries its own background and holds a .container
   so the title and nav stay aligned with the page content. */
.header {
  padding: 0;
}

.header-bar-title {
  /* Solid color for browsers without gradient support, then an sRGB
     fallback for those without oklab interpolation (pre-2023 browsers). */
  background-color: var(--heading-color);
  background-image: linear-gradient(90deg, var(--heading-color) 0%, var(--banner-end-color) 100%);
  background-image: linear-gradient(90deg in oklab, var(--heading-color) 0%, var(--banner-end-color) 100%);
  padding: 22px 0;
}

.header-bar-nav {
  background-color: #ecf2f5;
  padding: 8px 0;
  border-bottom: 2px solid var(--accent-color-orange);
}

.header .site-title {
  display: inline-block;
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
}

.header .site-title:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .header .site-title {
    font-size: 1.5rem;
  }
}

@media (min-width: 769px) {
  .header .navmenu > ul {
    width: 100%;
    justify-content: center;
  }

  /* The template's 18px vertical padding made the nav bar ~78px tall; the comp
     is closer to 53px. Horizontal padding is untouched so the gaps between
     items stay as they are. */
  .header .navmenu a {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Restore symmetric padding so the centered menu is optically centered */
  .header .navmenu li:last-child a {
    padding-right: 15px;
  }

  .header .mobile-nav-toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  .header .navmenu {
    text-align: right;
  }
}

/*--------------------------------------------------------------
# ODE Dashboards Page Width
--------------------------------------------------------------*/
/* Bootstrap widens .container to 1320px at >=1400px. Cap it at 1140px so the
   layout holds the approved 1200px proportions at every larger width. The
   container stays horizontally centered, so growth goes to equal margins. */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/*--------------------------------------------------------------
# ODE Dashboards Intro Band (light background hero)
--------------------------------------------------------------*/
/* Sits directly under the header's pale-blue nav bar, so the intro reads on
   white rather than stacking a second tinted band. */
.intro-band {
  background-color: #ffffff;
  padding: 60px 0;
}

.intro-band h1 {
  color: var(--heading-color);
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 25px;
}

.intro-band,
.intro-band p {
  color: #1b1b1b;
}

.intro-band p a {
  color: #1b1b1b;
  text-decoration: underline;
}

.intro-band p a:hover {
  color: var(--accent-color);
}

/* Contact page: pull the form up close to the copy introducing it. */
.intro-band-tight {
  padding-bottom: 24px;
}

.intro-band-tight + .section {
  padding-top: 0;
}

/*--------------------------------------------------------------
# ODE Dashboards Page Title Band
--------------------------------------------------------------*/
.page-title {
  background-color: #ecf2f5;
}

.page-title h1 {
  color: var(--heading-color);
  font-weight: 500;
}

/*--------------------------------------------------------------
# ODE Dashboards Brand Band (intro / disclaimer sections)
--------------------------------------------------------------*/
.brand-band {
  background-color: #ecf2f5;
  padding: 50px 0;
}

.brand-band h2 {
  color: var(--heading-color);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.brand-band,
.brand-band p {
  color: #1b1b1b;
}

.brand-band a {
  color: #1b1b1b;
  text-decoration: underline;
}

.brand-band a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# ODE Dashboards Divider
--------------------------------------------------------------*/
.brand-divider {
  border: 0;
  border-top: 2px solid var(--accent-color-orange);
  margin: 10px 0 0 0;
}

/*--------------------------------------------------------------
# ODE Dashboards Buttons
--------------------------------------------------------------*/
.btn-brand {
  display: inline-block;
  background-color: var(--accent-color);
  color: #ffffff;
  font-weight: 700;
  font-family: var(--heading-font);
  padding: 14px 32px;
  border-radius: 50px;
  transition: 0.3s;
}

.btn-brand:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  color: #ffffff;
}

.btn-brand-sm {
  padding: 10px 26px;
  font-size: 0.95rem;
}

/*--------------------------------------------------------------
# ODE Dashboards Module Cards
--------------------------------------------------------------*/
/* Breathing room between a section's intro paragraph and the card grid below
   it. The template zeroes this margin; the design comp shows ~33px. Scoped to
   .section-title p so section headings (which sit tight above their body copy
   in the comp) are unaffected. */
.section-title p {
  margin-bottom: 2rem;
}

.module-card {
  background-color: #ecf2f5;
  padding: 40px 30px;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.module-card h3 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
}

.module-card,
.module-card p {
  color: #1b1b1b;
}

.module-card p {
  margin-bottom: 30px;
}

/* margin-top: auto pins the button to the card bottom so buttons align across
   cards regardless of heading/description length. */
.module-card .btn-brand {
  align-self: flex-start;
  margin-top: auto;
}

/*--------------------------------------------------------------
# ODE Dashboards Resource Links
--------------------------------------------------------------*/
.resources-eyebrow {
  color: var(--heading-color);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.resource-links h3 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 700;
}

.resource-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-links ul li {
  margin-bottom: 12px;
}

.resource-links ul li a {
  text-decoration: underline;
  color: #1b1b1b;
}

.resource-links ul li a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# ODE Dashboards Inline Content Links
--------------------------------------------------------------*/
.section p a {
  color: #1b1b1b;
  text-decoration: underline;
}

.section p a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# ODE Dashboards Footer
--------------------------------------------------------------*/
/* Keep the three logos on a single row at every width. min-width: 0 lets the
   images shrink below their intrinsic size inside the flex row; because they
   shrink in proportion, their heights stay matched as the row narrows. */
.footer-logos {
  flex-wrap: nowrap;
  gap: 1.75rem;
}

/* Each logo is wrapped in a link to the partner site, so the anchors are the
   flex items that shrink; the image scales inside its anchor. */
.footer-logos a {
  display: block;
  min-width: 0;
  transition: opacity 0.3s;
}

.footer-logos a:hover {
  opacity: 0.75;
}

.footer-logos img {
  max-height: 70px;
  max-width: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  object-fit: contain;
}

/* Orange brand rule across the top of the footer, spanning the full page
   width. Present in the homepage and CTE comps. */
.footer {
  border-top: 2px solid var(--accent-color-orange);
}

/* Thin vertical rules between the logos, as in the design comp. */
.footer-logos a + a {
  border-left: 1px solid color-mix(in srgb, var(--heading-color), transparent 75%);
  padding-left: 1.75rem;
}


.footer-disclaimer {
  font-style: italic;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-top: 2.5rem;
}

/*--------------------------------------------------------------
# ODE Dashboards Section Spacing
--------------------------------------------------------------*/
/* The base .section rule only leaves 20px of bottom padding, which crowds the
   footer. Add this to the last section on a page for breathing room above it. */
.section-end {
  padding-bottom: 80px;
}

/*--------------------------------------------------------------
# ODE Dashboards Dashboard Pages
--------------------------------------------------------------*/
/* Sub-heading inside the light-blue intro band ("Exploring the Dashboard"). */
.dash-subhead {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.75rem;
}

/* White cards describing each dashboard tab, sitting on the light-blue band. */
/* Tinted now that .intro-band is white — white-on-white would erase these.
   Matches the .module-card treatment used on the homepage. */
.tab-card {
  background-color: #ecf2f5;
  border-radius: 8px;
  padding: 30px 25px;
  height: 100%;
}

.tab-card h3 {
  color: var(--heading-color);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.tab-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* eLearning module embed. The iframe ships with fixed 1010x688 attributes, so
   the frame holds that aspect ratio and the iframe is stretched to fill it.
   That keeps the outline flush to the player at any width and lets the module
   scale down on narrow screens instead of overflowing. Pages can override
   --embed-aspect if a module is authored at different proportions. */
.module-embed {
  position: relative;
  aspect-ratio: var(--embed-aspect, 1010 / 688);
  border: 1px solid var(--heading-color);
  margin-top: 0.5rem;
}

.module-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Live Tableau embed. The Tableau script injects a fixed-width iframe and
   sizes .tableauPlaceholder inline to match, so this restores the outlined
   frame from the comp and centres the viz in the container.
   max-width keeps a viz wider than the container from being cut off by the
   section's `overflow: clip`; the !important overrides Tableau's inline
   `overflow: hidden` so the excess scrolls inside the frame instead. */
/* box-sizing: content-box so the 1px frame sits outside the width Tableau
   sets inline. Under Bootstrap's global border-box the border would eat 2px
   off the content box and the iframe would overflow by exactly that much,
   showing a stray scrollbar. max-width leaves room for the frame so a viz
   wider than the container still fits (Tableau sets width:100% on narrow
   screens). */
.tableauPlaceholder {
  box-sizing: content-box;
  border: 1px solid var(--heading-color);
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 2px);
  overflow-x: auto !important;
}

/* "Dashboard Notes" callout box. */
.notes-box {
  background-color: #ecf2f5;
  border-radius: 8px;
  padding: 40px;
}

.notes-box h2 {
  color: var(--heading-color);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.notes-box p:last-child {
  margin-bottom: 0;
}

.notes-box a {
  color: #1b1b1b;
  text-decoration: underline;
}

.notes-box a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# ODE Dashboards Accordions
--------------------------------------------------------------*/
/* Built on <details>/<summary> so they work without JavaScript and stay
   keyboard accessible. The thick teal rule sits directly under the label, and
   an open panel is closed off by a thin orange rule. */
.dash-accordion details {
  margin-bottom: 2.25rem;
}

.dash-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  border-bottom: 5px solid var(--heading-color);
  padding-bottom: 0.6rem;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Hide the native disclosure triangle in both engines. */
.dash-accordion summary::-webkit-details-marker {
  display: none;
}

.dash-accordion summary::marker {
  content: "";
}

.dash-accordion summary:hover {
  color: var(--accent-color);
}

.dash-accordion summary:focus-visible {
  outline: 2px solid var(--accent-color-orange);
  outline-offset: 4px;
}

/* The +/− indicator. */
.dash-accordion summary::after {
  content: "+";
  color: var(--accent-color-orange);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}

.dash-accordion details[open] summary::after {
  content: "\2212";
}

/* Thin orange rule closes off the open panel, as in the comps. */
.dash-accordion .accordion-body {
  padding: 1.25rem 0 2rem 0;
  border-bottom: 2px solid var(--accent-color-orange);
}

.dash-accordion .accordion-body > :last-child {
  margin-bottom: 0;
}

/* Term name within a definitions panel. */
.dash-accordion .accordion-body h4 {
  color: var(--heading-color);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
}

.dash-accordion .accordion-body > h4:first-child {
  margin-top: 0;
}

.dash-accordion .accordion-body ul {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.dash-accordion .accordion-body li {
  margin-bottom: 0.6rem;
}

/* Teal run-in label for "Note:" / "TIP." style lead-ins. */
.dash-accordion .accordion-body .run-in {
  color: var(--heading-color);
  font-weight: 700;
}

/* Asterisked footnote under a definition list. */
.dash-accordion .accordion-body .footnote {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* Light-blue callout nested inside accordion content. */
.accordion-callout {
  background-color: #ecf2f5;
  border-radius: 8px;
  padding: 30px;
  margin: 1.25rem 0;
}

.accordion-callout p:last-child {
  margin-bottom: 0;
}

/* Visually flags copy that is standing in for real content. */
.placeholder-text {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/*--------------------------------------------------------------
# ODE Dashboards Placeholder Notice
--------------------------------------------------------------*/
.placeholder-notice {
  background-color: var(--background-color, #ecf2f5);
  border: 2px dashed color-mix(in srgb, var(--heading-color), transparent 60%);
  border-radius: 8px;
  padding: 50px;
  text-align: center;
}

.placeholder-notice i {
  font-size: 2.5rem;
  color: var(--accent-color-orange);
  margin-bottom: 15px;
  display: inline-block;
}